How to create a gallery sample

In this tutorial we will create a gallery sample similar to the effect gallery on the website. We will not build it from scratch, but we’ll start from a predefined layer structure with a few movie clips inserted on the stage.

Firstly I just want to remind you that, in order to be able to solve the tutorial, you will need the Creative MovieFX extension installed on your computer; if you encounter any problems while doing that, please visit the “How to install an extension” tutorial.

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

1. Extract the attached archive in the folder of your choice. Open the AS3 Flash file “tutorial.fla” on which we’re going to work. This file has the following layer structure: a layer named “front” containing two movie clips (“button” and “text”), an empty layer named “movieFX” and the bottom layer named “background” containing a shape. The “button” movie clip is instantiated on the stage with the instance name “play_button”, while the “text” movie clip is instantiated with the instance name “movie_title”.

2. From the Flash top menu, select “File>Import>Import to stage” or click CTRL+R; import the image to the stage on the “movieFX” layer and place it at X=0, Y=0 coordinates.

3. With the picture still selected, click F8 or select “Modify>Convert to Symbol”, and convert it to a movie clip; let’s name it “target”.

4. From the Components panel (CTRL+F7), drag an instance of Creative MovieFX on the stage on the “movieFX” layer; following, open the component’s configuration interface from the top menu: Window>Other Panels>MovieFX Panel.

5. From the Time Manager, enable the Wait and Out components, and disable the Delay and In options; also, enable the Start Hidden option.

6. In the Other Options section of the interface, change the Creative MovieFX instance name to “mfx” and enable the “Do Nothing” option.

7. From the Wait Effect tab, select the Firefly Effect Name with the Extend_Default preset. Set the effect’s duration to 60 frames; make sure the Load Preset Duration is disabled.

8. From the Out Effect tab, select as the effect to use Fade and its preset Extend_Default.

9. Create a new layer on the top of the layer structure and name it “actions”.

10. In this layer, on its first frame, click F9 to open the Actions panel; insert the code below. What we do is to import the classes that we need and create the following behavior: when the button is clicked, it and the text disappear and Creative MovieFX starts running. As the effect ends, both the button and the text reappear.

import xtd.FLAnima.XTDTweener.TweenEvent
play_button.addEventListener(MouseEvent.CLICK, btnEvent);
function btnEvent(e : MouseEvent):void {
	mfx.movieFX.start();
	mfx.movieFX.addEventListener(TweenEvent.MOTION_FINISH, movieFXEvent);
	play_button.visible = false;
	movie_title.visible = false;
}
function movieFXEvent(e : TweenEvent):void {
	play_button.visible = true;
	movie_title.visible = true;
	mfx.movieFX.stop();
	mfx.movieFX.gotoStart();
}
  

11. Press CTRL+Enter to 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 or suggestions, please contact me at jon.stanciu@extendstudio.com.