16 June 2009

Create Flash Banner Using FuseKit Simple Tutorial

Animating multiple objects in AS2.0 projects can be real pain. To make things ease, many open source libraries exists out there. One of them (and probably most popular one) is The Fuse Kit.

In order to finish this Flash banner tutorial, you need to download FuseKit code and add new classpath if you use Flash Authoring Tool. From main menu choose Edit _ Preferences _ ActionScript _ ActionScript2.0 setting. Than click + sign and enter path to FuseKit code. When done, you are ready to make your banner.

step 1

Create new document with dimensions 468 px width and 60 px height, which is full banner dimensions. I have background color set to #333333 and 18 fps.

step 2

You will create 3 new movie clips: problem_mc, solution_mc and company_mc. Graphic isn't that important, you can draw what ever you want, but just as reference here are dimensions for my graphics (shown below): problem_mc (75px width and 25px height), solution_mc (200px width and 18px height) and company_mc (383px width and 26px height). Place instances of movie clips like on image below and name them: 'problem1' lower left, 'problem2' lower middle, 'problem3' lower right, 'problem4' upper left and upper right instance should be named 'problem5'. Another two instances are 'solution' and 'company'.

fuse flash banner tutorial preview

step 3

Open Actions panel for Frame 1 and enter single line of code:
#include "banner_code.as"
Save your document.

step 4

When done, create new ActionScript file 'banner_code.as' and enter next code:

import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup( Shortcuts, PennerEasing, Fuse );

var f:Fuse = Fuse.open();
f.label = "animation";

problem1.tween("_y, _rotation", [45, "-360"], 0.5, "easeInExpo");
problem2.tween("_y, _rotation", [45, "-360"], 0.75, "easeInExpo");
problem3.tween("_y, _rotation", [45, "-360"], 1, "easeInExpo");
problem4.tween("_y, _rotation", [17, "360"], 1.5, "easeInExpo");
problem5.tween("_y, _rotation", [17, "360"], 2, "easeInExpo");

Fuse.addCommand("delay", 2);

solution.tween("_x", 345, 1.5, "easeOutBack");
solution.tween("_y", 25, 1.5, "easeOutBack");

Fuse.addCommand("delay", 2);

company.tween("_x", 234, 0.75, "easeOutQuint");
company.tween("_y", 25, 0.75, "easeOutQuint");
problem1.tween("_y", 100, 0.5, "easeInExpo");
problem2.tween("_y", 100, 0.5, "easeInExpo");
problem3.tween("_y", 100, 0.5, "easeInExpo");
problem4.tween("_y", 100, 0.5, "easeInExpo");
problem5.tween("_y", 100, 0.5, "easeInExpo");
solution.tween("_x", 700, 0.5, "easeInExpo");



Test your movie.

Here is what code does. First two lines we set FuseKit to be available. Fuse open and close lines are start and end code for fuse sequence. Labeling the fuse isn't necessary here. We have 3 groups of tweens and small delays between them. First group is for problem_mc instances. We change their y position and rotation in different time intervals and in that way instances are 'falling' one after another. Second group changes solution_mc position and finally third group moves all instances so in the end we have only company_mc on Stage.

This is very simple tutorial on how to create flash banner using FuseKit in only 4 easy steps. To further improve this technique, take a look at FuseKit documentation to see what is available.




template by blogger templates