How to create simple clickable banner in Flash and AS3? Tutorial

Starter-intermediate level

 

In the coming flash banner tutorial, you are going to learn how to make a simple clickable flash banner. Briefly, you will learn:

Masking technique in flash

Making invisible button

Making hyperlinks in AS3

Optimizing your banner for different versions of the Flash Player
Besides, shape Tween and importing photos in flash

First of all you need to customize your photos to fit your banner, in our example here I used  photoshop to make make each photo of 486 x 185 the same as the intended flash banner.

Step one

Open Flash CS3, CS4 OR CS5 and make the stage of 486 x 185  pixel, these dimensions are varied according to your clients need.

file>import>import to stage

Create two layers and name th

Shape Tween in flash

we are going to creat animated mask on our photos by using shape tween and masking technique.

Above picture1 layer make a new layer and name it line1 and start draw raw shape of small rectangle next to the right side of the stage at the bottom. AT the properties panel make the co ordinate(x,y) of the rectangle (486,0).

select frame 10 and press f6 to insert a key frame of the rectangle. Pick the free trasform tool and drag the left side only of the rectangule to the right till it covers the width of the stage. Then at frame 20 press f6 and with the aid of free transform tool drag the bottom of the rectangule to cover the whole stage.

press any where between frame 1 and 10 then right click and choose shap tween. and also make shpe tween between fram10 and 20.

Masking technnique in Flash

Select line1 layer and right click to select mask. this will make the rectangle masks the photo underneath it and allows us to see this photo only through the rectangle.

Repeat the the same steps of making animated mask on any number of photos you need. Only you can change the place of the rectangle to achieve more attractive banner ( at top, at bottom , at middle....).

After finishing the creation of the animated masks for all photos, your timeline should look similar to the coming image.

Creating Invisible Button in Flash

Here we are going to create invisible button which reveals every thing underneath it. We want to

At the top of all layers make a new layer and name it invisible button.

Select the first frame and draw any rectangle without strok. Open the Alignment panel and check " to stage" and press the match width and height icon. This will make the rectangle dimensions the same as the stage dimension.

Select the button and press  to convert it to button . Then double click it to enter its timeline . Now you can see up,down and hit state. Press the up keyframe and drag it to hit state. If you cannot drag it , you should press out side the timline first then select the keyframe and start dragging.  

The timeline of the button movie should look as in the coming image.

  in the properties panel give your button instance name e.g " google_btn" ( we will use this instance name in writing the code)

Make new layer above all layers and name it action. Press F9 to open the action panel and write in the coming code.

now press ctrl and enter to test your movie.

Optimizing your swf to previous versions of flash player

This step is important to guarantee that your swf file be viewd  correctly on most of computers without any problem of upgrading to the latest flash player.