How to Make a Flipping Book Website in Flash 8 Tutorials

Create a flipping book in Flash 8.

Flipping book websites, also called "flip books," "slide shows," portfolios," and "image galleries," display pages, usually photos, one after the other. Flash 8 supports a number of ways to create flipping books. Techniques range from fairly simple to difficult and elaborate. One easy and fairly common method is to use Flash tweens to fade the images on and off the stage, and then use Flash's Publish option to export the SWF movie file and embed it in an HTML web page. Flash's Publish feature automatically exports the SWF and creates the supporting code in the HTML page.

Things You'll Need

• Macromedia Flash 8

Instructions

Creating the Flipping Book in Flash 8

1. Start a new movie (FLA) file in Flash. Then, click "Modify" on the menu bar and select "Document." This displays the Document Properties dialog box. Set the "Width" and "Height" dimensions to match the size of the images that you plan to use to create the flipping book.

2. Click "File" on the menu bar and choose "Import." Select "Import to Library" from the Import fly-out menu. This displays the "Open" dialog box. Select your images (Command-click each file), and then click "Open."

3. Drag an image from the Library to the stage and center it. You can center the image by sight with your mouse or use the Align panel's "To stage" option to center the image precisely. To open the Align panel, click "Window" on the menu bar and choose "Align."

4. Right-click the image and choose "Convert to Symbol" from the fly-out menu. This opens the Convert to Symbol dialog box. Name the symbol in the "Name" field and set the "Type" drop-down to "Graphic." Click "OK."

5. Right-click frame "80" on Layer 1 in the Timeline and choose "Insert Keyframe" from the fly-out menu. This extends the Timeline to frame 80. Insert another keyframe in frame "100."

6. Select the image on the stage in frame "100." Click the "Style" drop-down in the Properties panel and choose "Alpha." Drag the Alpha slider to the left to set the value to "0." This makes the image transparent, or invisible.

7. Right-click any frame between frames 80 and 100. Choose "Motion Tween" from the fly-out menu. This creates a fade effect between frames 80 and 100, fading the image off the stage.

8. Click the "Insert Layer" button in the lower-left corner of the Timeline panel to create a new layer. Drag the new layer downward, to place it below Layer 1.

9. Repeat these steps to place the rest of your images on the stage. Stagger each image out 80 frames. Create fade-out tweens in the next 20 frames. For example, place the next image in frame 80 on Layer 2. Insert a keyframe in frame 160 to extend the Timeline. Then, create the fade-out effect between frames 161 and 180. Place the next image in frame 160 on Layer 3, and so on.

Publishing the Flipping Book

1. Click "File" on the menu bar and choose "Publish Settings." This opens the Publish Setting dialog box.

2. Place check marks in the "Flash (.swf)" and "HTML (.html)" check boxes.

3. Click the "Publish" button at the bottom of the dialog box. Flash exports the SWF and creates an HTML web page container, saving them with same file name and in the same directory as the FLA file. You can view the flipping book web page by double-clicking the HTML file.

Tips & Warnings

• This procedure creates three files---the SWF movie file, an HTML web page file, and a JavaScript JS file. When you upload the flipping book to a web server, make sure you include all three files. Otherwise, your flipping book won't work.

References

• Associated Content: Creating a Motion Tween Using Flash Pro 8
• Republic of Code: Creating Animations Using Flash Motion Tweens
• Justin Everett Blog: Alpha Fades in Flash 8

Resources

• Read this Article in Spanish