Flash image replacement!

It’s here! Greensock’s already very useful and comprehensive tweening platform has evolved into an entire suite of even more light weight and powerful animation engines. I try my best to avoid Flash’s default timeline animations due to their reliance on frame rate, choppiness, lack of easing options and inconvenient editing. There’s other tweening engines out there such as caurina’s, but you won’t find one as versatile, fast, lightweight, well documented and well supported as the ones produced by Greensock.

Version 11 appears to be the most changed release since the tweening platforms inception and there’s a small learning curve to get over. So, here’s the breakdown…

TweenNano

It’s 1.6k! TweenNano can handle your tweening needs for BLANK but it stops there with no support for timeline functions and limited overwrite controls.

TweenLite

This is currently the most commonly used class of the group. It’s gained a little weight (1.9k) which may seem surprising, but the with the utility it’s gained with timeline methods and with the introduction of TweenNano, you shouldn’t have any file size issues. The most comprehensive update to TweenLite is the pause(), resume(), reverse(), play(), and restart() methods, which you can see the power of in the animation on the Greensock blog.

TweenMax

A personal favorite. On top of TweenLite’s functionality, TweenMax adds performance enhancements, overwrite management, tweens for filters, hex colours, volume, tint, and even do bezier tweening.

TimelineLite

A new class that brings timeline controls for building and managing sequences at just 2.5k (8.1k with OverwriteManager and TweenLite).

TimelineMax

On top of TimelineLite’s utility, this brings infinite timeline nesting, time scale manipulation, listeners for START, UPDATE, REPEAT, REVERSE_COMPLETE, COMPLETE events and much more.

The full breakdown is of course on greensock’s version 11 page. All of the above are frequently updated for both AS3 and AS2. I’ll be using TweenMax and TimelineMax in my current project – a suite of 4 Flash touch games for the Royal Canadian Mint’s Vancouver 2010 Olympics campain playable on an HP Touchsmart dx9000.

Andreas Lutz has created what seems to be the first site with mostly mouseless and keyboardless navigation. Visit the site and enable web cam and mic access and you can navigate with voice commands and gestures. A very cool concept indeed.

You can see how it’s supposed to work in the demo video but judging by the comments on abduzeedo and my own attempt to navigate, it doesn’t work terribly well.

I wonder if and when we’ll ever trump the mighty mouse…

My break in Flash developing came, as it did for many others, when I was introduced to some powerful industry standard classes and tools. It can be hard to keep up with the times, particularly for intermittent developers, since something new and amazing comes out pretty much every week. For at least today however, here are 5 very useful tips for Flash developers looking to broaden their horizons.

0. Get with the times.

This is point zero because I imagine most reading this (who actually do Flash) are using ActionScript 3 and CS3. If you are, move on to point 1.

I’ve done an unfortunate number of ActionScript 2.0 to 3.0 conversions recently. We’re now on Flash player version 10 and CS4, so making projects in Flash 8 and AS2 is downright anti-social. Some advertisers specs require Flash 8 for things like click tags, which is just unfortunate (I feel your pain). If you’re stuck in the past and afraid to make the jump, a free 30-day CS4 trial and a visit to 8BitRocket’s AS2 to AS3 series should get you rolling. A great resource for automatic up converting is Jobe Makar’s Upconverter. For motivation, check out some of the cool things you can do with Flash 10 and AS3. Eventually that is…

1. Use Classes

This seems like a totally trivial point, but they are plenty of Flash developers not taking advantage of the power of classes. With Flash’s inherently object based environment, it’s an excellent place to implement reusable structures. One of a design firms greatest assets is their reusable class library. A powerful collection of classes can cut project time down by well over half. If you’re new, ActionScript.org has a great place to start. The rest of this article is a collection of classes that can make your platform vastly more powerful.

2. GreenSock’s Tweening engine: TweenLite and TweenMax

I use this in about every project I make. This is the most full featured, stable and well documented tweening engine out there. If your flash project needs a refined series of tweens and/or is more interactive than a basic 1-click banner (which should be just about all of them), the benefits are vast. Even if it is just a quick banner, the ability to enter fractions of a second for roll over tweens will separate you from the unenlightened masses. Where this class set shines is in it’s ease of use, speed, and documentation. Jack (a.k.a. GreenSock) is an admirably dedicated developer and the GreenSock support forum is basically a one on one classroom. Very handy.

2. Uza’s Global Class

So you’ve started using classes. You love them. You start dabbling in a more complex project, but wrapping your head around the communication between class and main variables and references to positions on the stage and within class objects has you beating your head against your keyboard. AS2 has native global variables but AS3 discontinued them. Uza.lt to the rescue! This class uses something called a singleton. All you need to know is you can create variables and functions which will be accessible anywhere. I recently used it in this project for the Royal Canadian Mint. Those dates at the top are members of a small class. Getting each instance of that class to react to the scroll bar would be cumbersome without the use of a global class. Speaking of scroll bars…

3. Archonic’s scrollbar

My own creation! Ever tried using Adobe’s component scrollbar? It’s not very fun. This (as you may have guessed) is a dynamically added scrollbar which will mask the movieclip you are scrolling and work out all your scroll ratios and distances automatically. The best part is you can customize each and every bit to look and feel any way you like. And don’t worry, the collection of event listeners on each part and mouse wheel handling makes it behave just like a scrollbar should. Kudos to Kyle Brekke who provided the starting point.

4. MIT’s Bulk Loader

MIT is a wonderful provider of all things brainy and useful. This class set is a large and powerful extension of Flash’s ability to make requests for external information. I’d recommend this particularly for larger projects which are subject to having external assets maintained by a client or anyone other than you. All it takes is a capital letter or under score in the wrong place and Flash can have a crippling hissy fit of a crash. With the bulk loader however, that crash is much more graceful, and may allow the project to continue functioning (just without whatever failed to load). The ease of syntax is also a strong point.

There you have it! Those are just a small collection of general tools to whet your appetite. Here’s some more resources which, if you’re your keen, can keep you busy indefinitely. And I do mean indefinitely.

• GoToAndLearn

  Possibly the greatest resource for both bleeding edge and beginner Flash, Flex, Photoshop and any combination of Adobe publishing tools.

• Adobe.tv

  This isn’t as widely known as it should be. Adobe’s own library of video tutorials on everything Adobe.

• Senocular’s ActionScript Library

  If you’ve ever posted your Flash woes on various forums out there then you know senocular (who has his own Flash blog here).

• Kirupa Forums

  A very enthusiastic community with lots of extra curricular chat.

• ActionScript.org Forums

  Quite busy – your question might go unanswered. Make sure to do some extensive searching though, your answer is probably there.

• GoToAndLearn Forums

The most professional of the bunch. No matter the complexity of your problem, the experts here have tackled it.

If you’re to take just one point from this post, make it this: Be active! Be a member of the community and you’ll find yourself swimming in no time.