Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
In this easy lesson made for Flash MX, Flash MX 2004 and Flash 8 I will show you how to create a Flash banner ad that fits specific needs of the website it will be displayed on. The unique behaviour of this banner is that it will perform a random display of colored stripes for 9 seconds, after which it will come to a standstill.
Some websites have rules for advertisers who want to show their banner ads, specifying the duration of the animation in a banner. This is made so that the users don't get bugged and visually distracted while they are reading the page which contains the banner. A user will see the animation, judge by herself if she will click the banner or not anyway. After that, stopping the animation makes the website containing it more user friendly.
Have a look at the example banner below: eoll your mouse over it to see what happens. If you missed the random color stripes effect, just hit the Refresh button on your browser and you'll see it.
There are quite a few websites (especially portals) which will place the aforementioned requirements upon the advertiser, who will in turn pass these specifics to you, the Flash designer. I will show you:
1. In Flash, select File > New. The New Document dialog window will open. Click on the Templates tab. Click on Advertising in the left column and then click on 468x60 (Banner) in the right column. Click OK.
Select Modify > Document and change the Frame rate to 24 fps. Click OK.
2. Call the first layer image.
3. Right-click on the image below and select Save image as... and save it on your computer in a place where you'll quickly find it.
4. Select File > Import > Import to Stage, find the image you just saved (bannerpic.jpg), select it and click Open. It will appear on the stage of your Flash document.
5. Click on the image with the Selection tool (V) to select it. Go to the Property inspector below the scene and find the X and Y fields on its left side. Enter 0.0 in both fields.
This will center the image on the stage, both horizontally and vertically. I have made the dimensions of the image equal those of the stage on purpose, so that the ad banner looks as best as it can.
6. While the imported bitmap is still selected, select Modify > Convert to Symbol. In the dialog that appears, choose Movie clip as type, call it image and click OK.
7. Right-click on frame 2 on the timeline and select Insert Keyframe from the menu that appears. Your timeline will now look like this:
8. Right-click on frame 6 and select Insert Frame. This will prolong the duration of the second keyframe and the timeline of the image layer will now look like this:
9. Go back to the first keyframe by clicking on it.
10. Click on the image movie clip on the stage once to select it. In the Property inspector, find the Color menu on its right side, select the Alpha option and turn it down to 0 (zero).
Now, why was all of this done? First, because the image will be loaded before the random colored stripes begin their animation, so it must not be visible — you want the stripes to appear first, so that is way you lowered its Alpha property (transparency) to zero. And second, you have added keyframes and frames to the timeline of the image layer because you will make the banner check the elapsed time to see when the nine seconds have passed. Once this turns out to be true, the banner will stop the playhead from going forward and the animation will stop.
11. Lock the image layer. Create a new layer and call it colors. This new layer will automatically have the same duration (in the timeline) as the previous layer, which is fine, because you need it to be so.
12. Select Insert > New Symbol. The Create New Symbol dialog will appear. Just be sure to select Movie clip as type, call it empty movie clip and click OK. Take a look above the layers: Flash informs you that you are now working inside the new empty movie clip movie clip symbol you have just created.
13. Click on the Scene 1 link to return to the main timeline.
By doing this, you are effectively creating an empty movie clip, because you haven't drawn anything inside it. This is precisely what you need - an empty movie clip, which will serve as the container for the colored stripes that will be loaded into it from the Library at runtime (at runtime means while your movie — the ad banner is running).
14. Select Window > Library to open the Library panel. You will find here all the symbols that you have created so far, image and empty movie clip, along with the imported JPG image, bannerpic.jpg.
15. Click and drag an instance of empty movie clip onto the stage. Since this is a movie clip with no contents (it is empty), it is represented by its registration point.
16. While the movie clip is still selected, go to the Property inspector and give it an Instance name: call it container (see 1 in the image below). Then make its coordinates on the stage (X and Y) equal zero.
This will place the movie clip in your document's upper left corner, which is a convenient position because this will make the placing of loaded color stripes much easier than if you were to place it in an arbitrary position.
The Instance name is a must if you want to order the empty movie clip to load other symbols from the Library, which you will do later.
17. Lock the colors layer. Create a new layer above the existing ones and call it message.
18. Select the Text tool (T). In the Property inspector, make the following selections (see screenshot below):
19. Click on the stage and type the message for your ad banner. When doing an ad banner for a client, this message will most likely be handed down to you from their marketing department, but sometimes they will hire you to make the full banner, including the message and the idea. For the purpose of this tutorial, you can just type "Catch the colors of summer" or anything you like.
Press Esc to exit the text field typing mode. A blue border will show up around your text. Place the text field in the center of your ad banner by moving it around with the arrow keys on your keyboard until it is well positioned.
The blue border comes in handy when the color of the text must be changed to match the background color: your text field is still visible. So do precisely that now:
20. Go to the Property inspector and change the text's color to white. This is done because you will place various color stripes below this field later, via ActionScript, so the message will look good on that kind of background. Black just wouldn't do it, especially for a colorful banner like this one.
21. Your text field should still be selected. Now select Modify > Convert to Symbol (shortcut key: F8). Select Movie clip as type, call it ad message and click OK.
22. Assign an Instance name to the new movie clip: go to the Peoperty inspector and type adMessage in the Instance name input field.
To see how to make an invisible button for your ad banner, please continue to the next page.
