Make it pretty...then make it move!

I've been building web animations since last century. As a huge fan of Flash for banner ads, it was interesting watching the ad agencies switch from Flash to JavaScript.

My students quickly noticed the trend and demanded that we cut back on Flash and focus on using JavaScript libraries like jQuery and greensock. I was happy to comply. Letting the browser be the animation engine, instead of a third party plug-in (Flash) seemed like a no brainer.

Each of the animations you see running here (on a big monitor) have their own script engines, but they are quite similar. I developed these after watching a number of tutorials on the greensock website. He explains the general principals, and you can find his actual banner on github, but he does not explain it in a step by step tutorial.

My students and I did a lot of reverse engineering to put them back together to what you see here. This is a copy of his horizontal banner, or as close as I could come, but modified to be both horizontal, and in a sidebar. I've also modified most of his timing to suit my needs.

Flash Animations

The links below will not work on Android or IOS devices.

Simon animated

Simon Dancing

I asked our marketing director if I could have the original Illustrator file for the college mascot. When I took it apart I realized they did not build it for animation, none of the parts could be moved. I built a lesson plan around re-illustrating the entire figure, with completely rendered parts. You can see my layers panel in the screen grab from Illustrator. Note that each body part gets it's own layer. Then we brought the vector parts into Flash and made him dance to music. We made extensive use of the bone tool. I'm looking forward to seeing if someone can replicate the bone tool with JavaScript.
Turn down your speakers when you click the picture below to see him dance.

Simon animated

Flying Saucer

In the Flash movie above we send Simon and his favorite music to Outer Space in his private flying saucer. This was another multi-day lesson plan. We used Illustrator for all the vector artwork. Getting him to come through the doors took some creative thinking. I predict it will be a few years before JavaScript can replicate this.
NOTE: turn down your speakers.

flash animation

One of the reasons I will miss Flash is that a total beginner to the software can intuitively figure stuff like this out. I built this animation in 1999 in about 6 hours. It is an animation of an old Chandler and Price printing press from the 1860's. I used to operate it at the Sherwood Press Click the image to see it, but be aware this won't be visible on your smartphone.

flash animation

This interactive rocket game has acceleration, friction and a scoring function that gives you points for flying carefully. This one runs in ActionScript 2, but later we built another one in ActionScript 3.