Flash AS3 Tutorial: Masking Preloader

Have you ever wondered how preloader effect with filling color is made? Or how we fill an empty glass with beer in Flash? In today’s tutorial I will show you just how to do that with the help of Flash masking. In first part of the tutorial we will implement the animation that we will later use as a preloader for a movie. Since autumn is just around the corned we will use a green leaf that gets filled with orange/grey color. You can see the demo of what we will be creating below.

LIVE DEMO

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://premiumcoding.com/wp-content/uploads/2011/09/LeafPreloader.swf ” width=”570″ height=”260″ targetclass=”flashmovie”]

[/kml_flashembed]
 
[download id=”96″]

STEP 1: PREPARING ASSETS IN FLASH

Open Flash and create a new document in AS3. Go to File/Import/Import to stage and import a nice image of a leaf. Convert it to symbol (Right click / Convert to Symbol) and name it greenLeaf. Don’t forget to also name the instance to greenLeaf in Properties tab. Now copy and paste your leaf to make another instance of it. Place it on exactly same position as previous leaf. Name the instance of this leaf to orangeLeaf (orangeLeaf should be placed above greenLeaf on exact same coordinates so it coveres it perfectly).

STEP 2: CODING IT UP

It is time to make our leaf preloader. First you have to import Tweenlite classes that will take care of our animation.

[amazon_carousel widget_type=”SearchAndAdd” width=600″ height=”200″ title=”” market_place=”US” shuffle_products=”True” show_border=”False” keywords=”flash” browse_node=”” search_index=”Books” /]
We will first change the color of our orangeLeaf to orange/brown. We will use Tweenlite class colorMatrixFilter that allow us to change color variation without loosing details of the image (like raindrops). Use following code:

It is now time to aplly masks. We have to set masks for both leafs. Green leaf is visible at start and will slowly disappear while animation progresses. Orange leaf is hidden at start but will slowly reveal itself at exactly the same pace as green one will disappear. Use following code to apply masks:

All we have to do now is set animation for both leaves. Mask for the green leaf will slowly hide the leaf while the mask for brown one will do just the opposite. Apply following animations:

Preloading animation is now complete. If you compile it you will see the same effect as can be seen in the example above.

Feeling thirsty after all the hard work and all the newly found knowledge? Then it is time for a relaxing cup of beer. Start pouring!

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://premiumcoding.com/wp-content/uploads/2011/09/BeerPreloader.swf ” width=”570″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

You can download this nice vector illustration of a beer glass from Vectorilla.

CONCLUSION

Masks in Flash can be useful for many things and allow us to make lots of fun effects like our simple »filling« animations. We can use these animations to implement a preloader for a set of images or a movie. This will be the topic of our next tutorial so stay tuned!

[download id=”96″]