Here the final result:
![](http://s3.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-swf-image.jpg)
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 in Flash CS4. This tutorial is an ActionScript 3 Project (This component is exclusively available for AS3, so there will be no AS2 version in the future).
![Drag component into library](http://s3.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-01-small.jpg)
![Import images to stage](http://s2.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-02-small.jpg)
Select the first 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](http://s3.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-03-small.jpg)
![Set name of first image Movieclip](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-04-small.jpg)
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](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-05-small.jpg)
![Set name of second image Movieclip](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-06-small.jpg)
![Set instance name of first Movieclip](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-07-small.jpg)
![Set instance name of second Movieclip](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-08-small.jpg)
![Drag component onto Movieclip](http://s2.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-09-small.jpg)
![Check if my_image_01 is set as Start Movieclip](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-10-small.jpg)
All Movieclips with instance names in this frame are listed in the “Start Movieclip” and “End Movieclip” select list. Since you dragged the effect on the Movieclip “my_image_01″, this is the first Movieclip. As “End Movieclip” select “my_image_02″. Leave the other setting for now.
![Set my_image_02 as End Movieclip](http://s2.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-11-small.jpg)
![Result](http://s2.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-12-small.jpg)
Here you can find a video tutorial of how to implement a different effect.
![](http://s3.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-swf-image.jpg)
Requirements
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 in Flash CS4. This tutorial is an ActionScript 3 Project (This component is exclusively available for AS3, so there will be no AS2 version in the future).
Step 1 – Install the effect component
Purchase the Shuffle Transition 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](http://s3.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-01-small.jpg)
Step 2 – Import Slideshow images
Import two images [press Ctrl-R] or “File” -> “Import” -> “Import to Stage…”.![Import images to stage](http://s2.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-02-small.jpg)
Select the first 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](http://s3.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-03-small.jpg)
![Set name of first image Movieclip](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-04-small.jpg)
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](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-05-small.jpg)
![Set name of second image Movieclip](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-06-small.jpg)
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 Movieclip](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-07-small.jpg)
![Set instance name of second Movieclip](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-08-small.jpg)
Step 4 – Apply effect
Drag the component from the library onto the upper Movieclip. The effect component will snap automatically.![Drag component onto Movieclip](http://s2.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-09-small.jpg)
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.![Check if my_image_01 is set as Start Movieclip](http://s1.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-10-small.jpg)
All Movieclips with instance names in this frame are listed in the “Start Movieclip” and “End Movieclip” select list. Since you dragged the effect on the Movieclip “my_image_01″, this is the first Movieclip. As “End Movieclip” select “my_image_02″. Leave the other setting for now.
![Set my_image_02 as End Movieclip](http://s2.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-11-small.jpg)
Step 6 – Export
Export the flash movie [press Ctrl-ENTER] or “Command” -> “Test Movie” and you’ll see the image transition.![Result](http://s2.flash-effects.com/wp-content/uploads/2009/02/shuffle-3d-transition-tutorial-12-small.jpg)
Step 6 – Play!
Now you can play around with the parameters to customize you effect. You can also use this effect with ActionScript. Find the full documentation here.Download
Click here to download the .fla of this tutorial. Note: The .fla does not includes the effect component. In order to make the fla work, you need to purchase the Shuffle Tile Effect here.Here you can find a video tutorial of how to implement a different effect.
No comments:
Post a Comment