Parkland College > Fine & Applied Arts > Graphic Design | Web Design >
Student Links > GDS 214 > Exercise 1

The ripple effect is an impressive way to emphasize a single word or phrase. Often it is used in a sequence or part of an intro or splash presentation.

Although I am sure that many professionals have used this type of technique, I first learned how to do it in Flash 4 from the book “Flash Web Design – the art of motion graphics” by Hillman Curtis. I remember seeing it again from Luke Turner –theVOID in “Masters of Flash” by Friends of Ed. Sham Bhangal from Friends of Ed has now published a version using Flash MX’s actionscript instead of tweening. I currently use this technique and a couple others that are similar on the clubeuropatravel.com site. I will undoubtedly us it again in the future.

Like all techniques, it’s up to you to modify and use it and make it yours. I’ll show you the basic technique and look forward to what you do with it. I believe that you’ll find this exercise useful and gratifying.

1. The Idea – A word or phrase basically split into two parts: and entrance where the letters enter larger and fade in to the correct size and leave again, getting larger and fading out resembling a ripple effect in a pond hence the name “Ripple Effect.” This tutorial is broken down to two parts. The first tutorial shows you haw to achieve this effect using tweening. This is the first way I learned it and I feel that it is a valuable way for you learn more about making effects using tweening. The second tutorial shows you how do the same effect using actionscript. By using actionscript the file size is much smaller and once you have the code it can be implemented in minutes. Both methods are valuable to learn. Good luck. Enjoy.

3. Getting Started - Make a new movie and for this exercise use the default dimensions of 550 px width and 400 px height, Background Color = white, Frame Rate 12 fps.

4. Creating your text - Use the Test Tool to create your text. Make sure that everything including the typeface, color, style and spacing are exactly the way you would like it to appear in the finished project. For this example, I used the domain name “faxswitch.com” for my text, Arial as the font, 60 as the font size, clicked bold. Since I used the align tool to align my image, x = 66.3 and y equals 164.5 and my width is 417.6 and my height is 71.0. If you use a different word or phrase your will differ from this.

5. Preparing your text  - First break apart your text by clicking on Modify > Break Apart or by alternatively using Ctrl+B

Your text should now have little boxes around it like this.

6. Distribute to Layers - Next you want to distribute your text to layers so you can tween the individual letters separately. Do this by Modify > Distribute to layers or alternatively by using the shortcut Ctrl+Shift+D

7. Break Apart Again - Next we what to break apart the text again to turn it into vector objects. Just do the same thing as you did in step 5. Break apart your text into vectors by clicking on Modify > Break Apart or by alternatively using Ctrl+B

8. Convert each letter to a symbol - Click on the first letter then Insert > Convert to Symbol or alternatively click F8.

When the Convert to Symbol box opens, name it the first letter. In this example, I called it “f”. Click on Graphic as the behavior, click on the dot at the center of the registration section to center the registration point and leave everything else as the default and click “ok"

Repeat this procedure until all of your letters are turned into graphic symbols. Note, on my example I have two letters “c” in my phrase “faxswitch.com.” I named the first letter “c” symbol “c” and the second “c2”. Also I named my period as “dot”. Normally, in a real life project, I would likely make an “instance” or copy of my original letter “c” symbol, place it directly over the second “c”, and then remove the original in order to optimize the animation for lower file size.

Since there is only one duplicate letter, and this is not a lesson in optimization, I will not do this for this exercise but I did want you to be aware of how this should be done if this were a commercial project. Also not that when you choose the letter “i”, you will need to hold down the control key and also select the dot before turning it into a graphic symbol.

If you look at your symbols in your library (open by window > library or alternatively pressing F11). You should see each of your letter symbols in the library if you have done everything correctly up to this point.

9. Inserting Keyframes - Click on frame 15 of the first layer (f in this case) while holding down the shift key and drag down through all of the letters. Then insert your keyframes by Insert > Keyframe.

Now your Time line should look like this:

These will be the keyframes where fade in animation ends.

Now your letter “f” should be scaled 500% and you window should look like this:

Repeat this process until all of your letters are scaled 500%.

14. Adding the Effect - Click on the first frame of your first letter (letter “f”) again to select it. In the property inspector, change the color from “none” to “alpha” and reduce the alpha level from 100% to 0 %.

Note: If you are having trouble selecting your graphic be sure to select it in the window because if you select the letter in the frame, the frame properties will be shown instead fo the graphic's properties.

Repeat the process for each of your letters.

15. Adding the motion tween - Click between frame one and fourteen for each letter and hold down the control key so there is a blue line through all the layers.

Click on Insert > Create Motion Tween or use the property inspector and select motion from the pull down menu.

0r

Your page should now look like this:

Move the easing to 100% (full out) to smooth the transition:

16. Creating the blurring effect - Add a new layer above each of the layers and then edit> copy frames and then edit > paste frames until there are two of each layer one above the other. Example: ffaaxxsswwiittcchh..ccoomm.

When you have created new frames, copied and pasted frames, your time line should look similar to this:

Select each of the first layer for the first letter (the letter “f” in this case) and transform it to 140%. Repeat this for the letters in the first frame of each letter group working your way down from top to bottom skipping a layer each time.

17. Inserting Keyframes - Shift Drag through all frames at frame 70 and add keyframes by edit > insert keyframes

Copy and paste frame 1 fr0m all layers and paste it into frames 70.

18. Add More Keyframes - Add keyframes at frame 90 the same way as in # 17 edit > insert keyframe

19. Copy Frames - Drag through all of the frames at frame one and edit > copy frames

20. Paste Frames - Drag through all frames at frame 90 then Edit > Paste frames at frame 90 for all frames

21. Add Motion Tween - Shift click all frames between frames 70 and 90 and then add motion tween.

22. Move All Frames 1 Pixel to Right - Select all frames by shift clicking all of the names of the frames and drag all frames over one frame to the right.

23. Stagger Your Frames - Stagger the frames for each pair of letters two frames to the right. Select all frames except the first two and stagger each pair two frames to the right. Use f5 or edit > insert frame to insert your empty frames. Continue until all frames are staggered.

24. Finished - Save your work and view it by control > test movie

25. Add Blank Keyframe - Change the name of the first layer that we are no longer using to “scripts” and add a edit >blank keyframe to the last frame in the movie (115).

26. Add Stop Action - Go to window > actions and add a stop() in the last frame of the renamed scripts layer so the animation will only play through once.

Enjoy !

Click to Download Finished FLA (not compressed)

Click to Download Zipped Finished FLA

See it on the web

______________________________

Last updated: 8/26/03• Webmaster: Paul Young

Tips, Tricks
& Handouts

Student
Links