CS3 Flash Modern Slideshow

This post is all about making your own basic Photo Slideshow using Adobe Flash CS3. Below is a Photo Slideshow we made here at Passy World.

(It is 1 MB is size and may take a little while to load in).

Click the controller in the top right hand corner to progress through the photos. (Right hand double arrow = Autoplay continuously).



Making the above slideshow involved using an existing template that comes with Flash Cs3. When it runs full size it is 640x480 pixels in size, and the caption text at the bottom of each photo is a little larger and easier to read.

In CS3 Flash, to access the free template and get started we simply do:

File > New > Templates tab > then More.. > 'Photo Slideshows' > 'Modern Photo Slideshow' .

We can then do Control > Test Movie, (or Ctrl-key + Enter), to run the sample slideshow and try it out.

The default Flash project had a big ugly controller, and so we did some editing** to remove most of it, and end up with a small streamlined controller in the top right hand corner of screen.

** This editing involved a lot of picking and clicking to find each of the items that we wanted to delete or modify.

If you would like a ZIP file containing our modified Template .FLA file, then click the link below and save the zip file to your own hard drive.

Winrar is a free download that can then be used to extract the .FLA flash project file. Get "Winrar" for free at http://www.cnet.com/topic-software/winrar.html

Download our Passy World Slideshow Template by clicking the link below, and then saving the file to your hard drive using your web browser.

http://www.passyworld.com/passyMisc/PassySlideshowTemplate.rar


Resizing our Photos to 640x480 Pixels for Flash

The one drawback for this slideshow is that we have to have all the pictures we are going to use saved as JPG's and all sized at 640x480 pixels.

However, if we have Adobe CS3 Photoshop, resizing is very quick and easy. The Crop tool can be set to 640px x 480px maximum size, and provided our photos are bigger than this required 640x480 size, we can crop a section of photo, save it as .JPG, and it will be the exact correct size for our Flash project.



Note that we saved each of our 640x480 photos in Photoshop using "Save for Web and Devices" as JPG type, with quality set to "High".


Replacing the Default Flash Project Photos

To replace the default photos with our own photos, we have to go to the Library in Flash, (Window > Library), and then click on the "photos" folder.

Next double click on the tree icon next to the first photo, which should bring up the following panel:



Now click the Import button, and on this panel, navigate to our own photo, and click "open" to have it replace the default photo. We also have to manually rename the photo to change its name in the Library.

Next we need to change the caption at the bottom of the photo. First we need to click the correct black dot keyframe on the "pictures" layer to get our desired photo is displayed.

We then click on the same position black dot in the "Captions" layer, and this should take us into edit the caption. We then need to click on the "T" text tool, then click our mouse into the caption and edit it:



After the caption is edited, simply change off the "T" tool and onto the black pointer arrow tool, and then click off the caption area, and we are done.

We can repeat this process for the next three photos we have, since the default project comes with a total of four photos.


Adding Extra Photos to the Slideshow Project

Firstly we need to add each of our 640x480 photos into the Flash Library. Do
File > Import > Import to Library > then navigate to the photo we want, and click open.

(It sometimes takes a couple of seconds for the photo to be imported). We then need to drag the photo from its place in the Library into the "Photos" folder.

Next we have to click at the top of the Flash Timeline and highlight in red all of the last frames like this:



We then do Insert > Timeline > Frame, (or Press F5), which will produce a set of blank frames at the next position at the end of the current timeline.

We now click onto the "Picture" Layer, where the new empty rectangle shaped frame is, and do Insert > Timeline > Keyframe, (or press F6). This will make a duplicate copy of the last photo in the animation. We now click on this photo on the Stage, and in the properties panel we click the "Swap" option.



On the resulting panel we can click the new photo we just imported, and it will be swapped in onto the stage. All we have to do now is the Caption.

Click onto the Caption at the last current frame, and do Insert > Timeline > Keyframe, (or press F6). This will make a duplicate copy of the latest caption.
We then click onto the "T" text tool in Flash, and we can then edit in a caption for the new photo we have just added.

We now repeat the following process for all of the photos we need to add:

• Import our next photo to the Library, and move it to the Photos folder.

• With all of the last frames highlighted in red, Press F5, (or do Insert > Timeline > Frame).

• Click on the Pictures Layer and Press F6, (or do Insert>Timeline>Keyframe).

• Click the picture on the stage, and in the properties panel do the Swap to bring in our new picture.

• Click on the Captions Layer and Press F6, (or do Insert>Timeline>Keyframe).

• Use the "T" tool to edit the caption for our new photo.

Deleting Photos

Click on the top of the timeline of the frames you want to remove, and do
Edit > Timeline > Remove Frames.


Making the Slideshow Start Automatically

If we want to have the slideshow start by itself as soon as the page loads, then we need to change some of the Actionscript Code. This is detailed in the following PDF. Click the link below to access the PDF instructions document.

http://www.passyworld.com/passyPDFs/SlideshowAutoStart.pdf

If you would like to download our Passy World Auto Slideshow Template, then click the link below, and then save the file to your hard drive using your web browser. (Use Winrar to expand the .RAR file out to the .FLA file).

http://www.passyworld.com/passyMisc/SlideshowTPauto.rar


Putting the Slideshow onto a Web Page

Our Slideshow with 12 photos ended up just under 1 meg in size, and so it takes a few seconds of load time on the web page or blog.

We could use Dreamweaver to make a new HTML page, and then use Insert function to put our Flash onto the DW page. However for our Blog post here we have uploaded the .SWF file to our live "Passy World" website and then used the following blog post insert code:

(Note that the actual code needs to go continuously across the page and must not have the large spaces between items shown here. It also must not have any line returns, and needs to run continuously as one big long line of text.).



So that's it for making a Photo Slideshow using Flash CS3.

If you would like a much more sophisticated and easy to use Flash Slideshow maker, then we suggest you use Wondershare's "Flash Gallery Factory Deluxe".

Click the link below for details on how to buy this great software that we use right here at Passy World on a regular basis:

http://www.wondershare.com/pro/flash-gallery-factory-deluxe.html

Enjoy,
Big Passy Wasabi