I was “walking by” a tv that was showing American Idol the other night and was mesmerized by this mega screen of pulsing tiles that was behind the performers. I was instantly compelled to try to build the effect with Flash. With a little timer, loop, conditional logic and TweenLite it was a breeze. Check out I had built it with Flash and see the same effect running with JavaScript and CSS animations.
Watch the Video
What’s that?!?! JavaScript mentioned on a Flash blog!?!?!
Simmer down folks. Its all good. Yes, my friend Matt took up the challenge to see if this could be built with JavaScript/CSS. I was very impressed with his results:
View Matt’s Tile Pulse with JavaScript and CSS animation
(FF4, Sarari, Chrome)
There’s a lot of debate going on about HTML5 vs Flash. I’m all for using the right tool for the job. For me the Flash platform offers a quick and fun way to create visual assets and power them with ONE language. I also enjoy not spending my time testing how my creations work in a plethora of browsers. I’m convinced that right now Flash offers a quicker and more enjoyable path to building engaging multi-media experiences that will perform consistently across operating systems / browsers / devices.
It is absolutely true that a lot of what Flash can do can be handled by HTML5 and its family of friends: CSS3 and numerous JavaScript frameworks like jQuery. I’ll even admit I often see jQuery animations running smoother than Flash. In order to get going on that side though, one needs to have a solid understanding of html, css, and javascript and also be constantly aware of which version of which browser supports the features of each. As browsers normalize (which they haven’t shown any sign of doing over the past 15 years) and tools are created to work with these technologies, I’m sure we’ll continue to see bigger and better things.
Ultimately each technology has its place, purpose, strengths and weaknesses. I’m certain both will find a way to live long happy lives.
/end rant:)
How does it work?
My file uses a Timer that calls a function that randomly chooses which tiles to pulse. Once a tile is chosen to pulse, we figure out whether or not it needs to scale up or down. After that we just fire off the necessary tween.
Here is the AS3 Meat
//import the greensock classes for tweening and plugins
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.ScalePlugin;
TweenPlugin.activate([ScalePlugin]);
//figure out how many tiles there are
var numTiles:Number=tileContainer_mc.numChildren;
//set up a timer to call the fadeSome function
var tileAnimator:Timer=new Timer(650,600);
tileAnimator.addEventListener(TimerEvent.TIMER, fadeSome);
tileAnimator.start();
function fadeSome(e:Event = null) {
//loop through all the tiles
for ( var i:Number = 0; i < numTiles; i++ ) {
//create reference to current tile in the loop
var currentTile:MovieClip = tileContainer_mc.getChildAt( i ) as MovieClip;
//give each tile a 50% chance of animating
if( Math.random() > .5 ){
//figure out which way to tween: up to 1 or down to 0
var scaleTo:Number = ( currentTile.front_mc.scaleX == 1 ) ? 0 : 1
//do the tween
TweenLite.to( currentTile.front_mc, .5, { scale:scaleTo } );
}
}
}
//randomly adjust alpha of each tile in tileContainer_mc
for ( var i:Number = 0; i < numTiles; i++ ) {
tileContainer_mc.getChildAt( i ).alpha = Math.random() + .4;
}
Download Flash CS4 Source
Next
I will be showing you how to create a grid of objects via code very soon along with some other handy tips
Additional Resources
Official GreenSock TweenLite info
More GreenSock Tutorials from Snorkl.tv
