Wednesday, 9 July 2014

Wobble Image Effect in Flash

Here the final result:


Requirements

Flash 8, Flash CS3 or Flash CS4.
Two images (in this case 550×400, image available in the tutorial zip file)
Note: The screenshots in this tutorial are made in Flash CS3. It works exactly the same with Flash 8 and Flash CS4. This tutorial is an ActionScript 2 Project (the component is also available as AS3 version).

Step 1 – Install the effect component

Download the Wobble Effect. Please follow the installation instructions and drag the component from the component panel into the library of your .fla file.
Drag component into library

Step 2 – Import Slideshow images

Import two images [press Ctrl-R] or “File” -> “Import” -> “Import to Stage…”.
Import images to stage
Select the frist image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image1”.
Convert first image to Movieclip
Set name of first image Movieclip
Select the second image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image2”.
Convert second image to Movieclip
Set name of second image Movieclip

Step 3 – Set instance name of image Movieclip

Give the Movieclip of the first image the instance name “my_image_01” (You can choose a different name if you want. Make sure that the instance name is unique). Without an instance name the component is unable to detect the Movieclip. Set the instance name for the second image Movieclip to “my_image_02″.
Set instance name of first image Movieclip
Set instance name of second image Movieclip

Step 4 – Apply effect

Drag the component from the library onto the upper Movieclip. The effect component will snap automatically.
Drag component onto Movieclip

Step 5 – Adjust settings of the effect

Click on the component and open the component inspector panel [press SHIFT-F7] or “Window” -> “Component Inspector”. In the “Start Movieclip” select list, “my_image_01” should be selected.
Target Movieclips in component inspector
All Movieclips with instance names in this frame are listed in the “Target Movieclip” select list. Since you draged the effect on the Movieclip “my_image_01″, this is the frist Movieclip. As “End Movieclip” select “my_image_01″. Leave the other setting blank for now. Export the flash movie [press Ctrl-ENTER] or “Command” -> “Test Movie” and you’ll see that the image transition.
Result

Step 6 – Play!

Play around with the other parameters inside the component inspector. The documentation of the settings can be found here. You can also use this effect with ActionScript.

Download

Click here to download the .fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.
Here you can find a video tutorial of how to implement a different effect.

No comments:

Post a Comment