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.
REMEMBER 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. The source FLA
file for this banner can be downloaded below.
