In this tutorial you will see how to create full flash banner. To create this tutorial, you don't have to use Action Script. You will also learn how to aligned picture with the background, how to use Free Transform Tool (Q), how to convert any layer into a mask and more.





Example:



Step 1

Create a new flash document, choose Modify > Document, and set Width to 430, and Height to 180px. Frame rate set to 22fps (Frames per Second).



Step 2

Find three picture and set their dimensions as background (430x180px), using the Photoshop or some other graphic program.

Step 3

Double click on layer1 to rename its name in picture1.

Step 4

Choose File > Import > Import to Stage (Ctrl+R), and Import the first picture. Then, using the Align Panel (Ctrl+F3), center it with background.



Step 5

Click on frame 80 of layer picture and press F5.

Step 6

Insert a new layer and name it line1. Select it, take the Rectangle Tool (R), Stroke color must be switched off, under Fill color choose any color and draw a "rectangle" 10x20px. Then, using the Align Panel, set it on the middle right position, like it is shown on the picture below.





Step 7

Click on frame 10 and press F6. Then, take the Free Transform Tool (Q), and do like it is shown on the picture below.



Step 8

Click on frame 20 and press F6. Then, take again the Free Transform Tool (Q), and do like the picture below shows.



Step 9

Go back on frame1, and after that on frame 10, open the Properties Panel (Ctrl+F3), and under Tween choose Shape.



Step 10

Select line1 layer and convert it to a mask by right-clicking on the line1 layer and selecting Mask.



Step 11

Select the line1 layer, insert a new layer and name it picture2

Step 12

Click on frame 60 and press F6. Then, press Ctrl+R (Import to Stage) and Import another picture.

Step 13

Click on frame 160 of layer picture2 and press F5.

Step 14

Insert a new layer and name it line2. Then Repeat steps 6-10, but for this time, the animation ("rectangle") will start from top left side. See the picture below.



We're done for the first two pictures. Repeat this steps for every other picture, that you want to set on the banner.

Step 15

If you like to link the picture, first you must to convert it into a Movie Clip, select it, open the
Action Script Panel (F9), and paste this script:

on (release) {
getURL ("http://www.somewebsite.com","_blank");
}

Only one thing that you need is preloader. Set the preloader on the first frame, and tha banner animation on the second frame. If you don't know how to create a loader, click here.

We're done!

Have a nice day!

Download source file (.fla)