How to create a loop effect (behaviors)

In this tutorial I'm going to show you how to create a loop effect using Creative MovieFX; this can be done in more than one way. Here we're going to use the behavior-approach; don't forget to check as well the timeline-approach (the one which we recommend) and also the tutorial „How to create a chain effect”. Using those two effects you'll be able to create very useful and good-looking animations (advertisement banners, for example).


Click here to download the source file and the required files for solving this tutorial.


1. At first make sure that you have the Creative Movie FX extension installed; if you have any problems installing it, I recommend you to read the "How to install an extension" tutorial.

2. Let's create a new file in which we're going to work.

Create file

Create file

3. Create two more layers; let's name the layers upwards – CMFX1, CMFX2 and actions.

Layer structure

Layer structure

4. Select the second frame for all the layers and insert blank key-frames.

Insert blank keyframes

Insert blank keyframes

5. Insert on the CMFX1 layer a symbol and over it an instance of Creative MovieFX; convert the ensemble into another symbol and align it vertically on the center of the stage; do the same for the CMFX2 layer. You should align the movie clips on the layers such that they don't intersect each other. For a better understanding of the tutorial I will tell you exact details of the movie clips and I will show you a screen-shot as well. So, the complex movie clip (the one containing the initial symbol and the effect) from layer CMFX1 is named CMFX_1 and has the dimensions and coordinates as it follows: W=150, H=150, X=200, Y=220; respectively, the one from the layer CMFX2 is named CMFX_2 and has the dimensions and coordinates as it follows: W=150, H=150, X=200, Y=30. They should look like this:

Movieclips on the stage

Movieclips on the stage

6. In the next step I will show you what settings I applied on the effects. Basically I chose only a type and left all the settings default. You will see that the effect on the CMFX2 layer has a certain Wait factor; because the goal of our tutorial is to create a loop effect, we're going to name the instance of this effect which is on the stage so that we'll be able to apply a behavior on it - let's call it “myEffect”. The screen-shots are, as you probably realized, the one on the left for CMFX_1 and the one on the right for CMFX_2.

Configuration of first effect

Configuration of first effect

Configuration of the second effect

Configuration of the second effect

7. The final step is to write some code in order to implement the behavior we were talking about. Select the second frame from the “actions” layer and insert the following code in the Actions Panel (open it from the Window menu, if it's not already opened).

CMFX2.myEffect.onEffectFinished = function() {
            gotoAndPlay(1);
}
stop();

The interesting things which I can spot here for you are two – the path to the effect (we have to follow all the components we use and follow the path given by their instance names) and something connected to the behavior; if, because of the visual aspect we decide to use Reverse behavior instead of Start in the effect's general configuration we have to modify the action code as well, as it follows: “CMFX2.myEffect.onReverseFinished = function() {...”.

8. Finally, you should obtain a nice loop.

Preview your file

Preview your file

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.