The Highlander Blog » animation

JavaScript animation – using EaselJS pt 2

Alex — Fri, 06 Jan 2012 16:07:36 +0000

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

…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…

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

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

Here my canvas element has an id of canvas. The stage variable will hold all of my items to view and animate, and it is linked to the canvas element by Stage(page). Now I can start adding images. The images I use , of course, can just be replaced by any image you wish. To use easeljs to show an image…

var sun= new Bitmap(“sun.png”);

Just create a new variable and make it a new Bitmap object, with the url of your image inside. Once you have your image you can adjust its x and y properties, and its scale properties…

tree1.scaleX = tree1.scaleY = 0.4;
tree1.x = 100;
tree1.y = 100;

again, this will be familiar to those of you who know ActionScript 3. To finally see the image we need to use addChild()…

stage.addChild(sun);

…this last is vital, as without it we have setup our image, position, size, etc, but we will not see it until we use addChild().

We can then repeat this as many times as we like for each image we wish. However, before we run this we need to do a couple more things. First we need to set the frame rate, and also we need to tell easeljs to update the canvas as we are moving objects.

This is done like so…

Ticker.setFPS(60);
Ticker.addListener(window);

The last line tells easeljs to look for a function called tick, and it is within this function that we update our canvas…

function tick()
{
stage.update();
carMan.x-=1;
}

I am not doing anything fancy with the animation, just changing x by 1 pixel, but it looks pretty good. In further posts I will discuss more advanced movement, easing, etc, but for now I think it works pretty well. You do not have to write too much code, and it all fits together very nicely. Here is the full code for the example…

easel_test

Have a play with the code and see what you can come up with!

What is WebGL?

Alex — Fri, 09 Sep 2011 09:16:18 +0000

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

It uses the canvas element (html5) and the webgl context of that element (if you know anything about drawing with the canvas element, the context is how you access the particular api for drawing in either 2D or WebGL).

You can use WebGL now in Safari, Firefox, and Chrome. But not Opera or Internet Explorer, and not on smart phones or tablets yet.

Although the actual language looks daunting, not only can you create superb results, but there are various JavaScript libraries that will use WebGL to render their output…

scenejs (WebGL scene library) http://scenejs.org/
processingjs (An open programming language for creating animations etc without using Java or Flash) http://processingjs.org/
threejs (A lightweight 3D JavaScript engine that can render using the

Here are some examples of WebGL in action…

BioDigital Human

(http://www.biodigitalhuman.com/default.html)

HelloRacer (using three.js)

(http://helloracer.com/webgl/)

Interactive water example

(http://madebyevan.com/webgl-water/)

WebGL filters

(http://evanw.github.com/webgl-filter/)

There are many more (if you know of any please let me know).

You can even use Blender to create a scene and output it to something that can be used by scene.js and so basically create a 3D environment in Blender for use on a web page.

In future posts I am going to look into these topics and see what can be created and I will be posting the results here.

Animating with CSS and JavaScript using Adobe Edge

Alex — Wed, 31 Aug 2011 16:07:05 +0000

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.

However, in the last year or so, new applications have been appearing, that are starting to give you a drag and drop environment that allows you to do just that. Adobe has recently released a new application called Edge (in beta from only) on their labs web site (labs.adobe.com). So now you can start animating with CSS and JavaScript using Adobe Edge, and using an interface that is drag and drop, guy etc.

It is a very simple application, and is still in beta stage, but it is definitely worth downloading to have a look and see what Adobe are up to.

To get started, just download the application, double-click to install it and open it up. It has a simple interface, you can import items easily, and each item that you import or create has its own layer in the timeline which is nice. Here is the interface…

Edge interface

Although the importing is basic (gif/png/jpg/svg), it covers the standard web formats, and the inclusion of svg is a very nice touch.

You can create items, but only rectangles and rectangles with round edges, and text. That is it.

edge tools

However animating is very easy – you can have keyframes for opacity, scaling, width, height, rotation, skewing, position, etc. And once you have added the keyframes, you can just click on the animation in the timeline and set it to one of 28 types of easing. All very easy to select and choose. You have a properties panel…

edge properties

edge properties2

…and from here you can choose to insert your keyframes for your various properties. Once you have done that, selecting an animation in the timeline then allows you to assign an easing to to it very simply…

edge easing

All in all I would recommend anyone with an interest in using CSS/JavaScript/HTML to animate things to download this application and take it for a spin.

Creating interactive documents with InDesign pt6

scott — Fri, 08 Jul 2011 08:31:10 +0000

With this part of the series we move to InDesign’s new interactive features, specifically creating animations.

Before starting an interactive document, it’s worth changing your workspace to Interactive. There are a number of new panels on display including Animation, Timing, Preview, Media and Object States. We’ll use each of these in the next couple of articles.

InDesign interactive workspace panels

When you open a document with animated objects you will notice a new icon. InDesign cannot display animation directly so it indicates where an animation has been applied by displaying the 3 bubbles icon. This spread already has three.

InDesign animation icon

To animate an element, select it with the black arrow tool. I’m using the LIVE heading in this case. Open the Animation panel and choose a preset from the drop-down menu. The presets are exactly the same as those supplied in Flash Professional CS5 so you can easily start your animation in InDesign and transfer to Flash Pro later. You will notice the butterfly icon appear in the preview section of this panel following the preset you have chosen.

InDesign animation panel

Once you have settled on a preset, you can modify its timing, looping and other attributes via the checkboxes. You may also want to expand the properties icon to modify other attributes. The selected object will now display the animation icon as well as a green arrow indicating the direction of motion.

InDesign motion path

The next step is to tell InDesign when and how you want to run your animations. The Timing panel shows a list of all the currently animated objects. The animations occur, sequentially in the order of this panel. Notice LIVE heading is at the bottom of the stack, meaning it will animate last. To change this simply drag the object to the a new place in the list – just like ordering layers.

InDesign Timing panel

There are three ‘Fly’ objects on the list. These currently run one after another which can take quite a while. To run several animations at the same time, select the objects in the list and click the chain icon in the lower right. This links the objects together and tells them to run simultaneously.

InDesign play together mode

Although InDesign cannot directly show the animation it is possible to preview what the final effect will look like. This can be done by opening the Preview panel. InDesign will automatically render the current page in Flash and display all the animated elements. You may want to scale the panle for the best view of the effect. You can replay the animation at any time use the player controls at the left side of the panel.

InDesign Preview panel

The preview panel can be used to preview just the current spread, the whole document or individual objects as desired.

In the next part we will examine Multi-state objects.

Creating an asteroid in Blender 2.5

Alex — Thu, 21 Apr 2011 09:39:16 +0000

Another website I keep an eye on is Andrew Price’s website at blenderguru.com. Recently he did a lovely tutorial on creating an asteroid in Blender 2.5 and animating it…

http://www.blenderguru.com/how-to-make-a-realistic-asteroid/

I recommend you have a look at his site if you are at all interested in Blender and 3D work. And here is my asteroid, created by following his example…

…and here is the timelapse movie showing the steps that i took…

Making an Asteroid

Runtime: 0:58
Views: 123

… and here is the final animation (not perfect by any means) that I created…

asteroid animation

Runtime: 0:13
Views: 64

I haven’t sorted out any collisions between the small asteroids and the large one, but overall I am quite pleased with it.

Interactive publications designed with InDesign CS5

scott — Mon, 28 Mar 2011 08:31:43 +0000

As a companion to my series on creating Interactive documents with InDesign, I’m going to highlight some of the more interesting work being done commercially with InDesign.
The first example is Born Presents created by designers Belle & Wissell.
Born Presents is an electronic publication celebrating 14 years of Born Magazine. The sample is located in Adobe’s showcase gallery.

Born Presents Magazine by Belle & Wissell

Belle & Wissell used InDesign CS5 to create an immersive, animated publication which is both beautiful to look at and intriguing and satisfying to read. The publication makes extensive use of InDesign’s animation features to make fade-ins, pop-ups, hovers, embedded video, buttons, hyperlinks and electronic navigation.

Illustration detail from Born Presents

Perhaps the most interesting aspect of all this is that you can also download the source InDesign documents from the project. I use this in InDesign Interactivity training sessions and it’s always interesting to see how delegates take apart the source files to find out what techniques they can use in their own work.

Interactive guide to InDesign CS5 shortcuts

scott — Sun, 27 Feb 2011 10:32:19 +0000

As a brief interlude from my InDesign interactivity series, here’s a very timely example of just what you can do with InDesign CS5′s new interactivity features. Marijan Tompa has created this flash based utility which demonstrates all of InDesign’s keyboard shortcuts.

Indesign interactive keyboard

Hover over a key to see a summary of the shortcuts attached. Click on it to get a pop up screen showing more detailed information.

Indesign keyboard shortcut details screen

The interesting point about this, quite apart from the impressive end result, is that all of this functionality (fade-ins, hovers, pop ups etc) can be generated from within InDesign CS5 without the need for Flash or Action script skills. I’ll be looking into these features in a future part of this series.

The McGurk effect

Alex — Tue, 07 Dec 2010 15:11:52 +0000

The McGurk effect is basically when what you are seeing overrides what you are hearing.
For example, you are hearing one sound, but the brain receives (at the same time) some visual information and decides to override the auditory information and your brain ‘hears’ another sound. The sound itself never changes, it is just your brain making the change.
Here is a great video showing you the effect. Watch this and see what you think, and also listen but close your eyes at the same time and you will see that the effect goes away – really amazing!
This has implications for animation, but it is really fun to watch!

No matching videos

The World Construction Kit

Alex — Thu, 23 Sep 2010 09:27:40 +0000

In the past, when looking for physics simulations in Actionscript 3, I used Box2DFlash. Although it worked very well, the problem was the documentation. It was terrible, and it would take me days to work something out and go through various examples, most of which didn’t apply to the latest version of Box2DFlash, but they were the only examples around.

Eventually I managed get a simple structure together, various boxes moving, bouncing and being able to be controlled by a mouse. I will eventually blog about the example I created as I think it will be a useful exercise for people usingBox2DFlash and for people who wish to see just what is possible in Actionscript 3.

However, when I started to get into more involved structures, joints, pulleys, etc – things rapidly wnet from bad to worse. I just did not have the time to go through the morass of outdated tutorials and incorrect information.

Recently I found the World Construction Kit (WCK) – this a Flash port. It is a component framework for the Box2D Flash Alchemy Port, which allows 2D physics simulations for games / websites to be authored entirely within the Flash IDE. Whereas, previously I would do everything in Flash Builder, now I can use Flash CS5.

I would also be able to use this in Flash Builder I assume, but I will try that another time. For now I thought I would put together a little example in Flash CS5 and see how easy it is compared to what I did before.

First off a few links…

This is the overview of the World Construction Kit…

http://wiki.github.com/jesses/wck/world-construction-kit

Download all the files from here…

http://github.com/jesses/wck

Step by step guide for setting up a simple example here…

http://wiki.github.com/jesses/wck/step-by-step-wck-quick-start-guide

I basically followed the step-by-step guide, so I will not re-create the whole set of instructions, but what I will do is give you screenshots of what you need to create and what you end up with.

Firstly, this what you end up with when you download your source files…

These are the files you see when you download and uncompress the source files

Next create a project folder, and create a test fla – I am using Flash CS5. Inside that create a wck-lib folder and copy over the following…

This is the test project folder with all the source files copied over

Once that is done, go back to Flash and look at your fla. You need to create the following…

World Construction Kit setup

Basically you have one MovieClip set up as your world…

World MovieClip setup

Then you create another MovieClip that you will use as your objects within your world. These will be draggable (or not) and can act as walls, etc.

Rectangle1 MovieClip setup

This MovieClip also needs to have its Component Definition set (just RMB click on the item within the Library)…

Rectangle1 component definition

Once this is all done you will have a world created within your fla file, and inside it are your rectangles, one of which will act as your floor. If you were to save and test your file straight away, however, you will notice that both objects fall away – this is because both are set as dynamic objects. The object acting as your floor (or wall, etc) needs to be set as a static object. This is done through the Properties panel…

Instance properties

At the bottom are where you set the types…

Instance types

Once set to static, if you then save and test your file you will see one rectangle fall to the floor, the floor stays where it is, and the object can then be moved and thrown with the mouse.

Overall, I found the experience of setting up and working with wck very easy and enjoyable. I am very impressed with the setup, and the ease with which I could create things. It took maybe half-an-hour of reading and testing to get this simple example working.

The only thing I have noticed is that when I am throwing things around, they sometimes go through other objects, rather than properly colliding – but this I suspect is down to the values of my settings, things like gravity, friction, restitution, etc. These I will play around with in another post.

My next example will be to see how easy it will be to make various joints and pulleys etc.

A few points…

the document class is wck.WCK

you also need to set the following Source and Library paths…

: Library path

: Source path

When creating new symbols, make sure that the registration point is in the centre – Box2D uses the centre point of an object for its calculations

The world symbol has a Linkage set to wck.World – all your other objects should exist within an instance of this symbol on the stage

The box symbols (Rectangle1 in this example) have a Linkage set to shapes.Box

The Rectangle1 symbol in the Library also has its Component Definition class set to wck.BodyShape

The great thing about this setup is that I can drag out the requisite symbol as many times as I like and position them how I like and change their properties very easily. Each symbol can also have its own class for me to add whatever behaviours I wish. Very easy.

Here are the source files for you to play around with- let me know what you think.

wck test files

Try adding some more walls etc and see what you can do just by throwing around your objects!

Here is the first example that I created…

wck test1

…and here is the second version, I have just added some walls and a ceiling and another object …

wck test2

Processing – come along for the ride

Alex — Wed, 06 Jan 2010 10:06:39 +0000

Like a lot of people, I suspect, I tend to buy books, download source files, and squirrel them away somewhere, saying to myself – I will read them, I will go through the files – and, inevitably, you don’t.

However, this being a new year and all, I thought in order to push myself to learn something new, why not blog about it and take everybody along for the ride.

And for this purpose I have chosen to learn Processing – and I have also chosen to start with this book…

The Essential Guide to processing for Flash developers

By Ira Greenberg

…I bought this book in pdf format from the friendsofed website recently and I will use it to to start the whole thing off – I plan to blog my experiments, problems, thoughts, etc for you all to see. I will be using an iMac 3.06 Intel Core 2 Duo, 4 Gb ram, running Snow Leopard (10.6.2).

Why did I choose to learn Processing? Because the artwork coming out from some people looks fantastic and it looks to be fun. Processing itself is free, and although I have yet to get to grips with the code for Processing, it is based on java, and actionscript/javascript are similar, so I am hoping it will not be too much of a headache to learn.

Here is the main processing website…

http://processing.org/

Have a look around there and you will see what I mean.

Bye for now and expect to see my first experiment soon.