WEB DEVELOPMENT BLOG

June 12, 2007

When one image just won't do; incorporating slideshows on your Web site. Part 2: Flash

Last week, I showed you one way to make a slideshow for your Web site using an existing javascript. This slideshow was pretty easy to build. It caused a few validation errors, some of which I fixed, but it still worked in multiple browsers and is probably a good solution for those who need a slideshow but are only somewhat tech savvy.

Today we'll build a slideshow in Flash. Flash can do all sorts of wondrous things, including slideshows, but it is worth bearing in mind that its primary purpose is as a tool for building vector-based animations, such as the Commencement March or the dungeon I made for a class project at CIA. Vector graphics, such as line drawings, are defined mathematically and generally have smaller file sizes than raster/bitmap graphics, such as photographs, which are defined by their pixels.

When using photographs in Flash it is best to not use too many and not make them too large. Using too many bitmapped images in a Flash file will create an enormous file which will take too much time to load into your Web page. Flash is a sophisticated and powerful authoring tool. While it takes time to learn how to use Flash to create animations and interactive media presentations, slideshows are fairly simple to build.

Preparing your files

1. As you did for the javascript slideshow, you should begin by preparing a series of images sized to the same dimensions. For this project I am using a series of 5 photographs sized to 230 x 230 pixels.
2. Next, open a blank document in Flash and save it with the filename of your choice. Case users can download Flash 8 as part of Macromedia Studio 8 on the software center.
3. Double click below the timeline where it says 12.0 fps or choose "document" under the "modify" menu to edit your document properties.
4. Edit the width and height dimensions to match those of your images, then click "OK."
5. Click on the "insert layers" icon (marked with a +) and add 2 layers to the document.
6. Name these, from top to bottom, "type," "photo2" and "photo1." Save the file.

Importing your images

1. Select the first frame in layer Photo 1 by clicking on it. The circle in this frame indicates that it is a keyframe, a frame in which some change or action will occur in the timeline. Anytime you insert content into a frame it must be a keyframe.
2. Import your first image by going to the file menu, choosing "import" then "import to stage". You will notice that the circle in frame 1 is now solid, indicating you have content in the frame.
3. Go to the Window menu and choose "Align".
4. Click on your image, then in the alignment window click on "align" to stage then "align horizontal center" and "align vertical center". These are the 2nd and 5th choices in the top row. This will center your image on the stage.
5. With your photo still selected, go to modify window and choose "convert to symbol." Give your symbol a name, make sure the graphic button is checked then click "OK".
6. Create a new blank keyframe in frame 35 of layer Photo 1. To do this, select frame 35, go to the insert menu, select timeline then select blank keyframe. You will see that the frame now has a circle in it.
7. Using the same method, create additional blank keyframes in layer Photo 1 frame 75 and layer Photo 2 frames 15, 55 and 95.
8. Following the steps you took to import your first image, import your next 4 images putting the 2nd one in layer Photo 2 frame 15, the 3rd on layer photo 1 frame 35, the 4th on layer photo 2 frame 55 and the 4th on layer photo 1 frame 75. Notice that they are on alternating layers and the top layer hides the images on the lower layer. This will be helpful later on.
9. On photo layer 1 frame 1 select and copy your image. Now select frame 95 on layer photo 2, go to the edit menu and select "paste in place." This will paste your image into the frame in the same position that it appeared in frame 1.

Applying transitions and tweens

The javascript we used last week just flipped directly through the photos with no transitions. While other scripts offer transition options, Flash lets you create transitions by hand, giving you more control and more options. In today's example we're going to fade the active image out while we fade the next image in.

1. Hide and lock layer photo 2 by click on the dots below the eyeball and the lock.
2. On layer photo 1 select frame 15 then go to the insert menu, choose "timeline", then "keyframe". Note that the image in frame 1 appears in this keyframe as well. When you create a keyframe following another keyframe it will duplicate the contents of the original keyframe.
3. Insert additional keyframes in frames 20, 40, 55, 60, 80, 95 and 100.
4. Unhide and unlock layer photo 2 and insert keyframes in frames 20, 35, 40, 60, 75, 80 and 100.
5. Rehide and lock layer photo 2.
6. On layer photo one, select frame 20 then click on the photograph. Go to the properties panel. This should be below the stage. If not you can open it via the windows menu.
7. Using the drop down menu by the color box select "alpha" instead of none then change the percentage in the next box from 100% to 0%. Your image is now invisible in this frame.
8. On layer photo one, select frame 15. The image is still visible in this frame. Go to the properties panel and select "motion" in the drop down box next to "Tween." Tweens create the transitional actions between keyframes. Also notice how the options in the property panel vary depending on whether you have chosen a frame or a symbol.
9. Now grab the red slider at the top of the timeline and move it back and forth between frames 1 and 20. You will see that your image is visible from 1-15 then fades out between 15 and 20.
10. In order to apply transitions for each photograph on layer Photo 1 we'll need to add keyframes to frames 40, 55, 60, 80, 95 and 100.
11. Next make your images alpha 0% on frames 35, 60, 75 and 100, then add motion tweens to frames 35, 55, 75 and 95.
12. Now if you move the slider back and forth you'll see all the photos on layer photo 2 fading in and out with gaps of white in between.
13. Unhide and unlock layer photo 2.
14. On layer photo 2 make your images alpha 0% on frames 15, 40, 55, 80 and 95, then add motion tweens to frames 15, 35, 55, 75 and 95.
15. Save your file, go to the control menu then select test movie. Your slideshow should play in a pop up window. If I typed in the right frame numbers and you followed along, you should now have a working 5 image continuous slideshow.

Add a caption to one of the photos

1. Lock layers photo 1 and photo 2.
2. Insert a blank keyframe in frame 40 on layer Type.
3. Choose the text tool, click anywhere on the stage and type something. For this example I've typed "Grrrrrrrrrr!".
5. Adjust your font size and color in the Properties panel, and position the caption as necessary.
6. Select your text with the selection arrow and convert it to a symbol.
7. Insert a keyframe in frame 55 then a blank keyframe in frame 56.

If you are comfortable with tweens you may prefer to have your type transition the way your photographs do. Experiment to find the effect you prefer.

Publish your movie and post it to the Web.

1. Under the file menu choose "Publish settings." Click the Formats tab then under the types list check the box next to Flash. You can leave the other boxes unchecked.
2. Click publish to create the .swf file you will embed on your Web page then upload it to your Web server.
3. Follow these instructions for including the slideshow in your page.
4. View your page.

For further reference and experimentation, you may download the files used in this project.

Forthcoming topics: Linkbaiting, more on SEO, and the new logo.

Stumble It!

Posted by: Heidi Cool June 12, 2007 05:22 PM | Category: Heidi's Entries , How-to , Tips and Tricks

Posted by: hac4 (Heidi Cool) June 12, 2007 05:22 PM | Comments (2) | Trackback

Marketing & Communications | 10900 Euclid Ave. | Cleveland, Ohio 44106 | Phone: 216.368.4440
© 2004-2008 Case Western Reserve University | Cleveland, Ohio 44106 | 216.368.2000 | legal notice