Creating Custom Effects

Effects are reusable and customizable ways to create visual effects with objects on the stage, such as movie clips or static text fields. There are several built-in effects, but it's important to understand how to make your own.

Much like tools, effects have certain functions that are specific for them, and as before, we will go over them as we build our effect.

The effect we are going to create will fade a movie clip to a certain point in a certain number of frames that we will set using XML to UI.

1.	Open your favorite text editor and save a file in the effects directory of the Flash 8 first run directory as fade.xml.
2.	Place this code within it: <group name="Flash Unleashed"> <effect name="Fade"> <source file="fade.jsfl"> <allow types="all"> </group> <properties> <property name="Fade To" variable="alpha" defaultValue="0" type="Number"/> <property name="Frame Amount" variable="frameAmount" defaultValue="10" type="Number"/> </properties> The preceding code creates the group name and the effect's name. It also declares the source JSFL file for the effect and declares what type of objects can use this. Then we declare the two properties we will use: the fade to point and the frame amount with some default values.
3.	Now create a new JSFL file and save it as fade.jsfl in the same directory as the XML file.
4.	Place this code within it: function executeEffect(){ var myEffect = fl.activeEffect; var myDoc = fl.getDocumentDOM(); var myTimeline = myDoc.getTimeline(); var theFrame = myTimeline.currentFrame; myTimeline.insertFrames(myEffect.frameAmount-1); myDoc.enterEditMode(); myTimeline = myDoc.getTimeline(); myTimeline.insertFrames(myEffect.frameAmount-1); myTimeline.createMotionTween(0, myEffect.frameAmount-1); myTimeline.convertToKeyframes(myEffect.frameAmount-1); myTimeline.currentFrame = myEffect.frameAmount-1; myDoc.selectAll(); myDoc.setInstanceAlpha(myEffect.alpha); myDoc.exitEditMode(); myTimeline = myDoc.getTimeline(); myTimeline.currentFrame = theFrame; } function removeEffect(){ var myDoc = fl.getDocumentDOM(); myDoc.enterEditMode(); var myTimeline = myDoc.getTimeline(); var totalFrames = myTimeline.layers[0].frameCount; myTimeline.removeFrames(1, totalFrames); myTimeline.setFrameProperty('tweenType', 'none', 0); myTimeline.currentFrame = 0; myDoc.selectAll(); myDoc.exitEditMode(); myTimeline = myDoc.getTimeline(); var selFrames = myTimeline.getSelectedFrames(); myTimeline.removeFrames(selFrames[1]+1, selFrames[2]); myTimeline.setSelectedFrames(selFrames[1], selFrames[1]); }

The preceding code creates two functions, both specific for effects. The first is the executeEffect() function, which will be called when the user creates the effect. The second function is the removeEffect() function for when a user wants to remove an effect.

The first function, executeEffect(), sets the active effect and places it in the myEffect variable. It then gets the Flash DOM and sets that to the myDoc variable. Then it grabs the current timeline and that timeline's currentFrame. After it has that, it can begin adding the correct number of frames to the timeline, and because it already has a frame, we subtract one from the total frames given by the user and add the new amount to the current timeline. We then enter Edit mode, which will allow us to create the tween. We enter the Edit mode, create the total frames there, and then we create the motion tween, grab the content in the final frame, and reset its alpha. After that, we exit the Edit mode and select the current frame in the current timeline.

 function executeEffect(){     var myEffect = fl.activeEffect;     var myDoc = fl.getDocumentDOM();     var myTimeline = myDoc.getTimeline();     var theFrame = myTimeline.currentFrame;     myTimeline.insertFrames(myEffect.frameAmount-1);     myDoc.enterEditMode();     myTimeline = myDoc.getTimeline();     myTimeline.insertFrames(myEffect.frameAmount-1);     myTimeline.createMotionTween(0, myEffect.frameAmount-1);     myTimeline.convertToKeyframes(myEffect.frameAmount-1);     myTimeline.currentFrame = myEffect.frameAmount-1;     myDoc.selectAll();     myDoc.setInstanceAlpha(myEffect.alpha);     myDoc.exitEditMode();     myTimeline = myDoc.getTimeline();     myTimeline.currentFrame = theFrame; } 

The second function created will remove the effect if the user wants. It first grabs the DOM and then enters Edit mode. In edit mode, it removes the frames and the tween setting. Then it goes back to the previous timeline and removes the excess frames there as well.

 function removeEffect(){     var myDoc = fl.getDocumentDOM();     myDoc.enterEditMode();     var myTimeline = myDoc.getTimeline();     var totalFrames = myTimeline.layers[0].frameCount;     myTimeline.removeFrames(1, totalFrames);     myTimeline.setFrameProperty('tweenType', 'none', 0);     myTimeline.currentFrame = 0;     myDoc.selectAll();       myDoc.exitEditMode();     myTimeline = myDoc.getTimeline();     var selFrames = myTimeline.getSelectedFrames();     myTimeline.removeFrames(selFrames[1]+1, selFrames[2]);     myTimeline.setSelectedFrames(selFrames[1], selFrames[1]); } 

Make sure both the XML document and the JSFL file are in the effects directory in the Flash 8 directory and restart Flash. Then create a square, convert it to a movie clip, select it, and choose Insert, Timeline Effects, Flash Unleashed, Fade. The dialog box shown in Figure 27.14 will pop up. You can use the default settings and then test the movie and watch the square fade out over and over.

Figure 27.14. Custom effects make visual eye candy quickly and easily.

Now you have seen the Extensibility layer and some of the things that can be created within it, but you do not necessarily have to create them yourself. There is one more command we want to make, and it involves something that was only introduced well after Flash MX 2004 was introduced.