01. Introduction to Timeline Effects 02. Timeline Helpers 03. Assistants 04. Effects 05. Transform/Transition

06. Applying multiple effects  07. Behaviors: controversial interactivity 1  08. Behaviors: controversial interactivity 2  09. Behaviors: controversial interactivity 3  10. Wrap up

go to previous page

- discuss this tutorial -

go to next page

03. Timeline Effects: Assistants

In this section, I'll go through each of the included Timeline Effects and show you how to use them. We'll start with the Assistants:

1. To start, open Flash MX 2004 and create a new Flash Document.
2. Select the Circle Tool and draw a small circle on the Stage.
3. Select the circle you just made and right-click on it (or Control-click on the Mac) to bring up the context menu. You can also get to the Timeline Effects for the Insert menu on the Menu Bar. Roll your mouse cursor down to Timeline Effects -> Assistants -> Copy To Grid. This will open the Copy To Grid dialog box.

The Copy To Grid effect is used to copy the selected item in a matrix formation based on the settings you choose. Most of the included Timeline Effects will function like this one in providing a preview panel on the right and settings to adjust the effect on the left.

Incidentally, one thing you might notice is that this dialog box is actually a window containing a Flash movie. That's right! Many Timeline Effects are actually Flash movies that communicate with the JSAPI to allow you to create the effects. The possibilities are endless!

1. Now let's change the parameters in the dialog and see what results we get. In my test, I made 4 rows of 6 circles and removed the spacing between them by setting the Grid Spacing options to 0.
2. Press the "Update Preview" button in the upper right of the dialog box.

The dialog box will update the preview version on the right. As you can se, this tool may be useful for quickly generating repeating patterns for backgrounds in a movie.

1. Finally, click the "OK" button to apply the affect. You should now have your circle duplicated in a grid pattern on the stage.

Now, let's see what Flash actually did to our shape. If you select your shape on the Stage, you will notice that Flash has turned it into a symbol. You will also notice that you cannot double-click on the symbol to edit it. That's because this is now a symbol with an effect applied to it. If you look at your Properties panel when you have the symbol selected, you will notice that Flash now displays the name of the Timeline Effect you applied and an "Edit..." button. Clicking on the "Edit..." button will open the Copy To Grid dialog box with your settings intact and allow you to adjust them if need be.

So, as you can see, Flash has turned your original shape into a symbol and given it special properties so that the original effect can continue to be adjusted if you see fit. That's pretty handy! Looking in your Library, you will notice a few new things. The first thing you will notice is that inside the Effects Folder, there is a new symbol which is the original shape you had selected and applied the effect to on the stage. There is another symbol, Copy to Grid 1, which contains the circle symbol copied multiple times based on your settings in the effects dialog box.

Double-clicking on the "Copy to Grid 1" symbol will present you with a warning. Basically, if you decide to proceed with editing the clip, it will no longer offer you the ability to adjust the effect you applied earlier.

This is an important note to remember as you're developing. For the purposes of our first test, lets proceed with editing the symbol so you can see what Flash does to create the effect. Click the "OK" button in the warning dialog box to edit the symbol.

The Copy to Grid effect created two layers; the first layer contains your original shape which has been turned into a symbol, and the second layer contains the symbol duplicated several times in the grid formation you specified in the Copy to Grid dialog box.

That's all there is to it: Flash basically does the work in the Timeline that you would have had to do on your own, and packages that up into a symbol for you in the Library.

Now that you understand the inner-workings of the way Timeline Effects work, let's go through and see how the others work.

1. Open a new Flash Document.
2. Create a shape on the stage and turn it into a Movie Clip symbol. I've made a square and called it SquareBox.

1. Right-click (Control-click on the Mac) on the Movie Clip on the Stage and select the Distributed Duplicate effect under Timeline Effects -> Assistants .

1. Right-click (Control-click on the Mac) on the Movie Clip on the Stage and select the Distributed Duplicate effect under Timeline Effects -> Assistants .

The Distributed Duplicate dialog box should now be open. it should look much like the Copy to Grid dialog box, but with different parameters. This effect essentially let's you quickly duplicate a symbol on the stage. It will also let you change the scale, color, rotation, and alpha transparency of the symbol and animate it over a specified number of frames.

I've adjusted my settings to result in the Movie Clip instance animating over 15 frames into a semi-transparent red rectangle. You can play with the settings to see how the different parameters affect the final outcome. One thing I quickly discovered was that the parameters in this dialog are actually applied to each copy of the symbol for the number of symbols you specify. So, in my example, each copy of the square is offset 10 pixels Horizontally (X) and Vertically (Y) from the previous square. Each square is rotated 12 degrees more than the previous square. Offset Start Frame specifies the number of frames to play before the next square appears. With this effect, you can quickly create animated clips and never touch the Timeline!

go to previous page

- discuss this tutorial -

go to next page