Using FlashEff2 with FlashDevelop

Is it possible?

There is another forum post which shows how to do this with FlashEff1, but those instructions don't seem to apply to FlashEff2. After unpacking the mxp file, I don't see any .swc files.

Well, it turns out that unpacking the .mxp file is not necessary to access the .swc files. It is helpful to do this, though, because the xml files in the .mxp provide information that’s missing from the documentation.

If you’re using Flash CS3, the .swc files can be found here:
C:\Documents and Settings\(username)\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Components\FlashEff2\

C:\Documents and Settings\(username)\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Components\FlashEff2 Patterns\

For Flash CS4, the paths are the same except the “Flash CS3” folder is “Flash CS4.”

If you write much ActionScript and haven’t tried FlashDevelop yet, you should give it a shot – it will save you a lot of time. Here’s a basic example using FlashDevelop 3, Flash CS3 and FlashEff2 to show a movie clip with the Equalizer effect:

1. Create a project folder and copy FlashEff2Code.swc and FESEqualizer.swc to this folder.

2. Create a new Flash file named Test.fla inside the project folder. Set the frame rate to at least 20 fps.

3. In Publish Settings, click the Flash tab. Make sure the ActionScript version is set to “ActionScript 3”, then click the Settings... button and uncheck “Automatically declare stage instances” (this is a requirement of FlashDevelop, not FlashEff2).

4. From the Components panel, drag a copy of FlashEff2Code and FESEqualizer to the Library.

5. Create a movie clip symbol, drag it to the stage, and give the instance name “pic_mc”.

6. In the Properties panel, set the Document class to Main and save the .fla.

7. In FlashDevelop, click “Create a new project.” In the New Project dialog, select the ActionScript 3 “Flash IDE Project” template. For the Location field, browse to the project folder you created in step 1. Click OK. A warning dialog will appear (“The directory is not empty...”). Click OK.

8. This step isn’t necessary, but doing it gives you code hinting when working with FlashEff2, which is something you don’t get with Flash’s built-in ActionScript editor. You will also get code coloring for FlashEff2 classes. In the Project pane, right-click on FESEqualizer.swc and chose "Add to library." Do the same for FlashEff2Code.swf. You should now see FlashEff2Code.swc and FESEqualizer.swc turn blue in the Project pane.

9. In the Project pane, right-click on the name of the project and select Add -> New Class...

10. In the Add New Class dialog, set the Filename to Main.as. Here is the code for Main.as:

package  
{
	import flash.display.MovieClip;

	import FlashEff2Code;
	import com.jumpeye.flashEff2.symbol.equalizer.FESEqualizer;
	
	public class Main extends MovieClip
	{
		
		public var pic_mc:MovieClip;
		
		public function Main() 
		{
			var effect:FlashEff2Code = new FlashEff2Code();
			addChild(effect);
			
			var showEffect:FESEqualizer = new FESEqualizer();
			showEffect.squareWidth = 15;
			showEffect.squareHeight = 10;
			showEffect.groupDuration = 0.3;
			showEffect.tweenDuration = 1.0;
			showEffect.smooth = true;
			
			effect.showTransition = showEffect;
			effect._targetInstanceName = pic_mc.name;
		}
	}
}

11. Select Project -> Test Movie (or just press F5). When you do this, the Flash CS 3 window should move to the front and you should see Test.swf appear with the Equalizer effect animating pic_mc.



Edited 1 time(s). Last edit at 07/15/2009 01:30PM by TerryG.