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 animation banners 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. I wrote a tutorial on how to do the horizontal banner here.
Hangman Game
I learned how to build a number guessing game here:
https://developer.mozilla.org/
I've got it embedded in an iframe, but if that doesn't work, here is a direct link. Hint: if you turn on developer tools, I console.log out the random number...so you can cheat.
The tutorial was fun, but as I was working it occurred to me that it could form the backbone of much prettier animated game. A lot of what I wanted in the game was functionality that I didn't know how to program. I found the answers with simple google searches. It is 600 lines of code, including the html, css and JavaScript. I wrote every.single.line. Here is the game on codepen. While I was programming the game, I fell in love with a new free code editor called Atom. I like it better than both brackets and sublime. I created the SVG art in Illustrator.
Test Your Typing Speed
NOTE: I learned how to do this while studying at www.lynda.com. I wrote all of the Javascript code while following his tutorial. Morten deserves the credit for creating this. I'm just the student, learning from the master.
This is a typing test. Your goal is to duplicate the provided text, EXACTLY, in the field below. The timer starts when you start typing, and only stops when you match this text exactly. There are *no* line breaks in the if else statement. Good Luck!
This is a typing test for programmers. I find that if else statements can be challenging.if (snowingInMountains==true) {rideChairLift(30)} else {StudyProgramming();}
Flash Animations
The links below will not work on Android or IOS devices.
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.
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.
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.
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.