How to Make a Flipping Book Website in Flash 8 Tutorials

Written by william harrel
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make a Flipping Book Website in Flash 8 Tutorials
Create a flipping book in Flash 8. (piles de photos 1 image by thierry planche from

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.

Skill level:

Things you need

  • Macromedia Flash 8

Show MoreHide


  1. 1

    Start a new movie (FLA) file in Flash. Then, click “Modify” on the menu bar and select “Document.” This displays the Document Properties dialogue 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. 2

    Click “File” on the menu bar and choose “Import.” Select “Import to Library” from the Import flyout menu. This displays the “Open” dialogue box. Select your images (Command-click each file), and then click “Open.”

  3. 3

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

  4. 4

    Right-click the image and choose “Convert to Symbol” from the flyout menu. This opens the Convert to Symbol dialogue box. Name the symbol in the “Name” field and set the “Type” drop-down to “Graphic.” Click “OK.”

  5. 5

    Right-click frame “80” on Layer 1 in the Timeline and choose “Insert Keyframe” from the flyout menu. This extends the Timeline to frame 80. Insert another keyframe in frame “100.”

  6. 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. 7

    Right-click any frame between frames 80 and 100. Choose “Motion Tween” from the flyout menu. This creates a fade effect between frames 80 and 100, fading the image off the stage.

  8. 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. 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.

  1. 1

    Click “File” on the menu bar and choose “Publish Settings.” This opens the Publish Setting dialogue box.

  2. 2

    Place ticks in the “Flash (.swf)” and “HTML (.html)” check boxes.

  3. 3

    Click the “Publish” button at the bottom of the dialogue 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 and 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.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.