Alex

Alex

Alex's background in the technology industry goes back over 20 years, during which time he has worked for organisations such as the Metropolitan Police, Plessey Naval Systems, and Abbott Mead Vickers. Alex has been a fulltime instructor with Highlander for a number of years, having been involved in training for the last 15 years, and is a regular contributor to beta programmes for Adobe's core products. Alex is an Adobe Certified Expert (ACE) and Adobe Certified Instructor (ACI) for InDesign, Illustrator, Photoshop, Flash, ActionScript and DreamWeaver. In addition he also teaches courses on CSS, Fireworks, Quark, PHP and MySQL.

 

In this post I am continuing my foray into Easel.js. Here I am now actually displaying and animating pictures. So this post is about JavaScript animation – using EaselJS pt 2. We will be making this…

EaselJS animation v1

EaselJS animation v1

 

…and it will be the car that is moving across the screen.

Again you need to make up a simple html5 page and link to the easljs library…

<script src=”easel.js”></script>

First you need to create a stage and link it to your canvas element…

var page = document.getElementById(“canvas”);
var stage = new Stage(page);

 

Animating with JavaScript is relatively easy, however if you are used to ActionScript 3 it can be particularly painful to go back to learn how JavaScript does things, compared to how AS3 does things. Enter EaselJS. This is a new JavaScript library that aims to make animating and controlling objects within a web page easy – particularly if you are used to AS3.

It is built by Grant Skinner and can be found here…

http://easeljs.com/

 

Just a quick post to show you some of the landscapes that I have been creating in Blender recently. I have been going through the Nature Academy series of courses (which you have to pay for, it is closed now but I believe it will re-open soon), created by Andrew Price (at blenderguru.com).

Andrew Price has created some fantastic tutorials, and I would heartily recommend that you check out his web site. His latest offering, the Nature Academy series, is all about creating natural landscapes – rocks, trees, grass, lakes, mountains, and so on. Each tutorial (and I am only half way through so far) is chock full of interesting techniques. I have found it invaluable going through the process several times in order to create landscapes in Blender – even though each landscape is different.

 

In a flash class recently I was asked which technologies some one needs to be aware of and competent with when dealing with web design. In answer I quickly knocked a simple ideas chart to showcase which web technologies you need to know, and also some notes about where things are/were and where they are going…

Which web technologies

Which web technologies

The big thing of course is html5 and Flash. As you can see from the diagram, everything Flash can do (broadly speaking) can be done in HTML5, with the caveat that HTML5 covers CSS3/JavaScript/HTML5 and things like WebGL.

 

In my foray into the world of WebGL, I came across three.js, a JavaScript library for doing 3D in a web browser, with no plug-ins needed. It can render in three types – WebGL, SVG, or directly into the canvas. So I thought I would go through Three.js and see how easy it is to create a 3D scene. So, in this my first post into learning Three.js I will just create a simple shape – a sphere.

 

Just a quick update to my JavaScript libraries collection. Here are some more JavaScript libraries – things just seem to be getting better and better as far as JavaScript and HTML5 and the web are concerned!

three.js – A brilliant lightweight 3D engine (works with WebGL, amongst other things)

https://github.com/mrdoob/three.js/ 

newton.js – box2d plus raphael (does not seem to be released yet, but looks fantastic)

Dmitry Baranovskiy: newton.js: box2d + Raphael
Runtime
5:48
Views
2,808

paper.js -  The Swiss Army Knife of Vector Graphics Scripting (looks like great fun)

http://paperjs.org/about/

 

I have recently been taking an interest in WebGL, so I thought I would post some information about WebGL here, and also add some links to some of the examples that I have found.

What is WebGL? WebGL is a graphics library that extends JavaScript to allow it to generate some truly spectacular 3D graphics, within the browser, with no plug-ins needed. It uses the computer’s GPU (Graphics Processing Unit), and as such is a fairly low-level language (read: complicated).

WebGL interactive water example / (http://madebyevan.com/webgl-water/)

WebGL Water Simulation
Runtime
1:14
Views
83,693
 

With the advent of HTML5 and CSS3, it is possible to create lovely animations using these technologies, along with JavaScript. The problem is though, you basically have to hand code everything. There is, as yet, no application that gives you a graphical interface (á la Flash) that allows you to drag and drop items, animate them just choosing options from a menu, and so on.

 

I am a big fan of the web site blendercookie.com, and they recently came out with a lovely tutorial series by Jonathan Williamson (using artwork from David Revoy), the Vehicle Modelling Series.

There are over 15 hours of movies, taking you through the process of modelling a Gyrocopter, from a series of pictures. It took we a while to go through all the videos, but it was well worth it. Here is a still of my final result…

Final gyrocoptor render

Final gyrocoptor render

 

Here is a round-up of some of the latest Blender 2.5 tutorials and DVDs that I have come across. I am slowly going through them, and when I finish them I will upload the final renders and .blend files to share with you, but it will take me a while to get through them all.

In the meantime, here is the list, and below some of them is the current render that I have created after going through the tutorial.

Blenderella (http://www.blender3d.org/e-shop/product_info_n.php?products_id=133)

Creating realistic outdoor lighting (http://www.blenderguru.com/how-to-create-realistic-outdoor-lighting/)

Environment still 63

Environment still 63

Blender Cookie Vehicle Modelling Series (http://cgcookie.com/vehicle-series/)

Google Adwords

© 2011 The Highlander Blog Suffusion theme by Sayontan Sinha