Learn how to create mesmerizing effects that can be used in any kind of banner you like: Stripes that are moving continually without interruption, and rays that are circling infinitely. If you missed the complete banner animation, just click on it (below) to see it again.
Creating the stripes that move without interruption in an endless flow
1 Open a new classical banner template. Do this by selecting File > New, then choosing the Templates tab, and then 468x60 banner. Call the first layer stripes.
2 Select Modify > Document and in the Document Properties panel that appears put 21 as Frame rate. Click OK.
3 Using the Rectangle tool (R) draw an elongated, borderless rectangle on stage. It is important that the rectangle is wider than the stage, and about 9 px high.
4 Using the Selection tool (V), select the rectangle.
5 While holding the ALT key (and still using the Selection tool), click on the rectangle's lower edge and drag the rectangle upwards, until it clicks in place perfectly aligned with the upper edge of the first rectangle. If it won't click in place, check that the Snap to Objects option is turned on in the Tools panel (the little magnet icon at the bottom of the panel).
6 With the rectangle you just duplicated still selected, go to the Colors portion of the Tools panel. Change the Fill color to white. Now, you have two rectangles of the same size, with their respective upper and lower edges perfectly aligned with one another.
7 Select both rectangles, and repeat step 4 of this tutorial to duplicate both of them. You will then have four rectangles. Select all four and duplicate them again, so that you have eight. Do this until you have 32 of them. The image below is zoomed out four times, don't think that your rectangles should be this small 🙂
8 Select all of the rectangles (I'll call them stripes from now on) and convert them to a movie clip (F8). Call the movie clip stripes and click OK.
Animating the mesmerizing stripes
9 Using the Free Transform Tool (Q), rotate the stripes by about 18 degrees counter-clockwise.
10 Now, temporarily put the movie clip's alpha property to 20%. Do this by going to the Properties panel Color menu (while the movie clip is still selected), selecting Alpha and putting it to the desired value.
11 Zoom in on the right bottom part of your stage. Pay close attention to the right bottom corner. See where the stripes are in relation to the corner. This will be important when making the seamless animation.
12 Right-click (CTRL+CLICK on a Mac if you don't have a Mighty Mouse 🙂 on the frame 15 and choose Insert Keyframe.
13 Now, select the movie clip on stage and move it down using the down arrow key on your keyboard. Pay attention that the upper left corner of the stage is covered by the movie clip, or else you will have a "hole" in your animation.
Position the clip so that the relevant stripe is slightly up from the position the other stripe was in the previous movie clip position.
14 Right-click anywhere between the two keyframes and select Create Motion Tween.
15 Now, go to the first keyframe, select the stripes movie clip and in the Properties panel, in the Color menu, select None. Go to the last keyframe and do the same thing.
16 Test your movie (Control > Test Movie). Look carefully and see if your animation is "jumping" forward or backward at some place. If this is the case, go back to your document.
On the second keyframe, select your movie clip and move it a pixel down or up, then test the movie again. See the improvements. If the disruption has worsened, you have to move your movie clip the opposite way. Do this until you have a seamless animation.
If there is till some small error in the movement, zoom in on stage and you will have finer control over the movie clip's position.
Now, let's see how to make the animation more easy to use.
17 On the scene, select all the keyframes of the animation. You can do this by clicking on the first keyframe (if you are already positioned there, click again), then holding SHIFT and clicking on the second keyframe.
18 Right-click anywhere on the blackened frames and choose the Cut Frames option. Until the next step, don't copy anything so that you won't lose the keyframes you just placed on your computer's clipboard by cutting them.
19 Create a new movie clip by selecting Insert > New Symbol. Select Movie clip as type, name it animated stripes and click OK. You are now working inside the newly created movie clip (the icon above the timeline clearly indicates this).
20 Right-click (CTRL+CLICK on a Mac) on the first keyframe and select Paste Frames. The animation is now placed inside the animated stripes movie clip.
21 Click on the Scene 1 link above the timeline to return to the main scene or double-click anywhere on the scene (but outside any drawings).
22 Once on the main scene, erase all empty frames except the first one, that stayed after cutting away the animation. Do this by selecting them, right-clicking on them and choosing Remove Frames. You should have just one empty keyframe in the main scene now, like in the image below.
Why was this procedure used? Because having the animation inside a movie clip symbol has many benefits over having it on the main timeline. Now you can place it anywhere you wish, as many times as you want. And if you want to make changes to the animation, you can easily do this inside the movie clip without having to change the whole main timeline and any other layers and animations on it.
If you want a more mesmerizing effect, you can make the stripes thinner (let's say, 4 px high) and the animation smoother by adding a few more frames to it. Experiment to see which results suit your movie best.
Creating the rotating message and putting the mesmerizing effect on the main timeline
23 Lock the stripes layer on the main scene, create a new layer and call it get hypnotized.
24 Select the Text tool (T), Static Text option in the Properties panel, and a font you like. On the new get hypnotized layer, type the message you want (I typed "GET HYPNOTIZED!").
Increase the font size so that you have your message the size it is going to be at the end of text animation - its height a little bit smaller than the height of the banner.
25 With the text still selected go to the left part of the Properties panel and check the coordinates (X, Y) of the text field on stage. If they are not round numbers like the ones on the image at left below, round them manually by typing in the fields zeros at the end. They should look like the numbers on the right image below this paragraph.
26 Select Modify > Break Apart twice, so that your text is broken first into individual letters, and then into vector shapes.
27 Convert the selected shapes of text into a movie clip symbol (F8), and call it get hypnotized. Double-click your newly created movie clip on stage to enter its timeline.
28 You are now working inside the movie clip's timeline. Call the first layer shadow.
29 Select and copy the text vector shapes.
30 Lock the shadow layer, create a new layer and call it text.
31 Paste the text in place into this new layer by selecting Edit > Paste in Place.
Change the fill color of the pasted shapes into white.
32 With the shapes still selected, select the Ink Bottle Tool (S) and change the stroke color in the Tools panel to black.
Now, click on every letter shape to give it the outline. Click also on the inside edge of the letters like O and P so that they are fully outlined.
33 Select the whole shape (outlines and fills) and move it a little bit to the left and up with the arrow keys on your keyboard. Click anywhere outside the shape to see if you've got the desired result.
34 Go back to the main scene and check the coordinates (X, Y) of the get hypnotized movie clip in the properties panel. It is likely that they are not going to be round numbers, because of the shapes you just added. Fix them manually again and it should be fine.
Hey, if you haven't saved your work yet, I suggest you do it now. Do it often! 🙂
35 Right-click on the frame 40 and choose Insert Keyframe. Right click anywhere between the first and last keyframe and choose Create Motion Tween.
36 Go back to the first keyframe (click on it) and select your movie clip. Using the Free Transform tool, scale it to the smallest possible size, so that its height is about 1 - 2 pixels (look the height in the Properties panel). Zoom in if necessary so that you don't accidentally flip the symbol while transforming it (yes, this is possible).
37 Now, click again on the first keyframe, so that it's selected. Look in the properties panel if it says Frame.
In the Ease field, enter -90. In the Rotate drop-down menu, choose clockwise (CW) and enter 4 as number of rotations.
Test your movie. Cool! It looks like the effect seen in old black-and-white movies where there are newspapers and press titles rotating like that.
38 To make the message stay on scene a little bit more, like in the flash banner above, right-click on frame 65 of the get hypnotized layer on the main scene and select Insert Frame.
It is OK to experiment with the number of frames you just inserted to make the message stay on the screen a little bit longer. But do not exaggerate it! Remember, this banner will have a second message. You must not wait too much, otherwise the visitors to the site where the banner ad will be displayed will get bored and move on.
39 Lock this layer and unlock the stripes layer, and select its first keyframe.
40 Open the library (Window > Library) if it isn't open already. Drag the animated stripes movie clip onto the scene. It will "land" into the stripes layer's first (and for the time being only) keyframe.
41 Position the movie clip so that it covers the whole scene. You can temporarily lower the clip's alpha property in the Properties panel to easier position it in relation to the stage. Also, check it's coordinates like you did for the text, so that they (X, Y) are round numbers.
42 Right-click on the frame 65 of this same layer and choos Insert Frame. Now this animation is long as the one above it.
But, why didn't I instruct you to make a motion tween? Because it is already present inside the animated stripes movie clip.
Imagine this hasn't been the case and you had to adjust the stripes' animation on the main timeline directly every time something didn't click right or you had to prolong the duration of this scene. You would become insane pretty soon.
With the animation contained inside the movie clip, it is always the same speed, no adjusting necessary! You can still make any changes if you want, inside the movie clip, with no harm being done to the main scene timeline.
Test your movie. You should have a result similar to the one displayed below.
Designing the second scene with rays that are circling infinitely
You will now proceed to make the second scene containing the final message of the banner. Why the second scene? Because if you ever need to change any animation, this is the way to do it.
Imagine this: you put everything in one scene, finished your nice flash banner. The client calls you and tells you "can you change that ....... (put anything in here) to .......... (insert anything)." You say "sure" because there is usually not much sense in arguing with a client. You go back to your work which is... oh... a 300 frames long scene. Now, where is the nearest cliff so that I can jump off it, you begin to think.
Get the picture? This is reality. I've had a lot of clients call me several times because of a single banner. Someone in the marketing or whatever department didn't like some bit or thought that it wouldn't go along with the company's bla bla (although we agreed on everything beforehand). Or they called again in a month and needed a slightly different version of the banner because their prices and offers changed in the meantime. Or they needed a new link.
Use as many scenes as you need. I once made a banner with 6 scenes. That is perfectly OK.
Make life easy for yourself. Always create your projects to be as modular and flexible as possible. This is true whether they are projects as small as an ad banner or as big as a full-fledged dynamic flash site. Also, save different versions of your work as you progress. You never know when you will need to make a rollback. In addition to saving your work, burn it on a cd, too. Every day! My laptop crashed once and ALL the data I had on my hard disk was lost. But, I used to backup the work regularly. If you don't have a cd burner at the moment, mail the important stuff to yourself so that it stays on your mail account online until you transfer it to a more durable medium.
That being said, please proceed onto the next step, dudes 'n' dudettes 🙂
43 Open the Scene panel (Window > Other Panels > Scene). Click the small plus icon at the bottom of it to create a new scene.
44 In the new scene you just created, call the layer rays.
45 Draw a diagonal line on the stage, its height and width unimportant for the time being.
46 Make the line's width and height equal to those of the stage. Do this by using the Align panel. Center it on stage using the Align panel, again.
47 Select the line, copy it, then paste it in place. Don't unselect the copy, just make a mirror duplicate of it by choosing Modify > Transform > Flip Horizontal.
48 Select the "X" you just created, copy it and paste it in place. With the lines still selected, make their width a little bit smaller by using the Free Transform tool.
49 Repeat this until your stage is divided by lines in a manner similar to the one below.
50 Add a vertical and a horizontal line centered on stage.
51 Draw a rectangle outside the stage.
52 Make it equal to the dimensions of the stage and center it, using the Align panel again.
53 Fill every second stripe with the red (or any other) color. Fill the rest with white.
54 Select the Eraser tool (E). In the Options section of the Tools panel, choose the Erase Lines option and the biggest brush possible. Erase all the lines on the stage.
55 Now, select just the red fills by clicking on them while holding SHIFT. Group them by selecting Modify > Group.
56 Right-click on the frame 4 and choose Insert Keyframe. Click outside the stage to unselect everything.
Double-click on any one of the red fills to enter the group. All the red fills will be selected. Change their fill color to white.
57 Go back to the main scene and select the white fills behind the group from the previous step by clicking outside the stage and dragging the mouse over the stage.
While holding the SHIFT key, click and drag from the other side to select the other portion of the fills. Change their color to red.
58 Right-click on the frame 6 and choose the option Insert Frame. Your timeline should look like one on the image below.
Test this scene only by selecting Control > Test Scene.
Lock this layer.
59 Create a new layer and call it message. This layer will automatically have the same number of frames as the one below it.
Create a background shape and write your text above it. There are many ways to do it: you can draw the shape and write the text above it, create a movie clip with two layers in it, or by using grouping. Do as you like!
60 Lock the message layer. Create a new one and call it actions. Right-click on its frame 6 and choose Insert Keyframe. Click on this keyframe, choose Window > Actions and enter in the following code:
gotoAndPlay(1);
Test your movie. Scene 1 should play, followed by Scene 2 which stays on the screen because of the ActionScript you entered in its last frame, which commands it to go to the first frame and begin playing from there again (a simple loop).
There! The banner is finished. It is only 5 KB in filesize - and the portals that put on the banners you'll make usually state that your flash 468x60 px banners can't be more than 12 or 15 KB in filesize. Now that's great - see how much more content can you put in this banner. There is more than enough place for a nice image to make your ad banner richer.
The only thing you need to do now is to add a button which links the banner to a specific page. The tutorial on creating a flash ad banner from start to finish explains how to do it.
Download the zipped source FLA file for this tutorial.
??? ???? ???? 🙂
Thanks 4 all………..
You put a lot of effort in these tutorials… thnx man!
quote: “Now, where is the nearest cliff so that I can jump off it, you begin to think.”
it’s very easy,thank u …
~ AWESOME Flash Animated Banner Tutorial!
Thank you so much for sharing this!
Tonya
It seriously interesting and cool