Flash and ActionScript tutorials – flashadvanced

Warning: file_get_contents(): URL file-access is disabled in the server configuration in /srv/www/vhosts/flashadvanced.com/httpdocs/wp-content/plugins/sociable-italia/sociable.php on line 672 Warning: file_get_contents(http://tinyurl.com/api-create.php?url=http%3A%2F%2Fflashadvanced.com%2Factionscript-3-basics%2Fflash-slideshow-presentation%2F): failed to open stream: no suitable wrapper could be found in /srv/www/vhosts/flashadvanced.com/httpdocs/wp-content/plugins/sociable-italia/sociable.php on line 672

In this tutorial I will show you how to create a nice image presentation using Flash CS3 and few lines of ActionScript 3 code.

First of all download the images for the tutorial by clicking here.

1. Now open a new Flash CS3 document with size 420 x 340. Set the frame rate to 16 fps.

2. Import all of the downloaded images by clicking File -> Import -> Import to Library. Drag “laptop.jpg” to the stage and align it to center. Convert it to Movie Clip, give it instance name “slideshowMC” and after that go to the new created movie clip. Click on frame 135 and insert frame. Lock the layer.

3. Create a new layer called “images”. Now, drag “pic1.jpg” to the stage and position it so that it covers the laptop’s screen. Break the image apart by selecting the image and then clicking Modify -> Break apart. Now, deselect the image and go to one of its corners.
Drag the image corners so that they match the laptop’s screen. See the image below:

If you are ready, select the image and convert it to Movie Clip. Now, go to frame 30 and convert it to keyframe. Go back to frame 1, select the image, go to Properties Panel and set the image alpha to 0%. Select a frame between 1 and 30 and create Motion Tween. Now, go to frame 35, convert it to keyframe, remove the image movie clip and drag the second image. Now repeat all previous steps. Do the same for the other images. Your timeline should look like this:

4. Go to the main stage. Create a new layer called “buttons”. Take the rectangle tool and draw a “stop” button. Give it an instance name “stopBtn”. I made this one:

You can take the Transform tool and rotate the button a little bit so it matches the laptop. Select the button and go to Modify -> Symbol -> Duplicate symbol to create a Play button. Change the text to “play” and give the button instance name “playBtn”.

5. Now we are ready to move to ActionScript. Create a new layer called “actions” and open the Actions panel.

//initially, we don't want to see Play button
playBtn.visible = false;
//positioning the buttons on the same X and Y values
stopBtn.x = playBtn.x;
stopBtn.y = playBtn.y;

//adding event listeners to the buttons
stopBtn.addEventListener(MouseEvent.CLICK, slideshowStop);
playBtn.addEventListener(MouseEvent.CLICK, slideshowPlay);

function slideshowStop(e:MouseEvent):void{
	//when clicking on stop button we stop the slideshow
	slideshowMC.gotoAndStop(1);
	//we hide stop button and show play button
	stopBtn.visible = false;
	playBtn.visible = true;
}

function slideshowPlay(e:MouseEvent):void{
	//when clicking on play button we stopplay the slideshow again
	slideshowMC.gotoAndPlay(2);
	//we hide the play button and show stop button again
	playBtn.visible = false;
	stopBtn.visible = true;
}

We are ready. I hope you liked it!

Now let’s see the final result