» animation

JavaScript animation – using EaselJS pt 2

Jan 062012

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); Read more...

What is WebGL?

HTML5 No Responses »

Sep 092011

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/)

[tubepress video="R0O_9bp3EKQ"] Read more...

Animating with CSS and JavaScript using Adobe Edge

HTML5 No Responses »

Aug 312011

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. Read more...

Creating interactive documents with InDesign pt6

InDesign No Responses »

Jul 082011

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. Read more...

Creating an asteroid in Blender 2.5

Blender No Responses »

Apr 212011

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…

[tubepress video="xxpLBgyXcv0"]

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

[tubepress video="YR5ZFSnWEVg"] Read more...

Interactive publications designed with InDesign CS5

InDesign No Responses »

Mar 282011

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. Read more...

Interactive guide to InDesign CS5 shortcuts

InDesign No Responses »

Feb 272011

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.

Screenshopt of Indesign keyboard shortcut details screen

Indesign keyboard shortcut details screen Read more...

The McGurk effect

Flash, HTML5 No Responses »

Dec 072010

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! Read more...

The World Construction Kit

actionscript 3, Flash 1 Response »

Sep 232010

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. Read more...

Processing – come along for the ride

DreamWeaver, HTML5 1 Response »

Jan 062010

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 Read more...