Saturday, 14 March 2009

Building an Interactive Flash Slideshow

Right - Matt here with something [allegedly] fun to start you off in Flash....

Step 1: Create the images for your gallery slideshow in Photoshop
Create four images in Photoshop – make sure the image size is 640 x 480 pixels. Remember – extra marks for images of dogs in hats.

Use the Save for web function in the File menu and make sure the names of the images are in a sequence. For example, for three files, the names could be pic1.jpg, pic2.jpg, and pic3.jpg. If you don’t do this, you’ll have to import the images one by one, which is a pain if you have twenty.

Step 2: Import the images into the Flash Photo Slideshow template
* Open Flash and click on File/New. Select the Templates tab and then select Photo Slideshows. Click OK. You will see a ready-made Flash photo slideshow. To view, go to the Control menu and select Test Movie. Remember the shortcut!

* We don’t want these images so select the bottom layer in the timeline [this should be familiar from After Effects]. The layer we don’t want is called picture layer - click on the trash can icon below the timeline to delete it.

* Create a new layer by clicking the Insert Layer button [a few buttons to the left of the trashcan], and name this new layer My Pics. Important! Make sure that this new layer is the bottom layer.

* Select the first blank frame [it’s actually a keyframe but we’ll worry about that later] in the My Photos layer, select File > Import > Import to Stage, and locate your photo sequence. Select the first image in the series, click Add, and click Import. Flash recognizes your image is part of a sequence and asks if you want to import all files in the series. Click Yes to complete the import process. Flash places each image on separate keyframes. You could move the images at this point but Flash will place them accurately for you.

Once the images are in, test the movie again. Note that your captions will need changing.

At this point, it will probably be necessary to wake Parmajit up.

Now, change the captions for the images by replacing the text in each frame of the Captions layer. You do not have to worry about the photo number field as the template automatically determines how many images are in your document and indicates which photo you are currently using.

Change the title in the Title, Date layer.

If you have more than four images, make sure that all the other layers have a matching number of frames. You can do this by dragging the last frame of each layer to the same place as the last image or you can select the frame and click on F5 to add a new blank frame. Important – when you have more than four images, you will need to add keyframes to the captions layer rather than blank frames, otherwise you will lose the text field where you can insert your own caption.

Test the movie. If you’re happy with it, go to the File menu and select Save As. Save it somewhere safe. Then, go back to File > Export > Export Movie. Give it a name and save it as a Flash Movie [an .swf] Note the other formats available in the drop down menu – only the Flash Movie is interactive.

No comments: