Show different content on click

January 4, 2010

Design

Show different content when the user clicks a button.

Follow the steps below:

1. Launch Flash Designer and create a blank document.
2. Size the frame at about 300×300 (“Frame” > “Frame Size”).
3. Set the frame delay to “Stop” (“Frame” > “Frame Delay”).
4. Draw a button with the “Button” tool. While the object is selected choose “Edit” > “Move To” and use X:0 Y:0 Width:80 Height:24
5. Double click the button and rename from “Button1″ to “Page 1″
6. Duplicate “Page 1″ button with “Edit” > “Duplicate”, use Step X: 100, Step Y: 0 and count 2 to create 2 new buttons.
7. Rename buttons to “Page 2″ and “Page 3″ respectively.
8. Create new frame with “Frame” > “New” command. Frame will appear as “Frame 2″. Set frame background to “Frame 1″ (buttons should appear on the new frame). Make sure new frame has delay set to “Stop”.
9. Add 2 new frames that will appear as “Frame 3″ and “Frame 4″
10. Go back to “Frame 2″ and add “Page 1 contents” text with the “Text” tool. Center the text on the frame with “Edit” > “Align” > “Center on Page”.
11. Hit Ctrl+C to copy the text to clipboard.
12. Go to “Frame 3″ and paste the text. Double-click the text and change it to “Page 2 contents”. Repeat the same for “Frame 4″

The next step is to define mouse actions:

1. Go to “Frame 1″
2. Select “Page 1″ button. Choose “Action” > “OnClick”. Select “Go to Frame” options and choose “Frame 2″. Click OK.
3. Select “Page 2″ button. Choose “Action” > “OnClick”. Select “Go to Frame” options and choose “Frame 3″. Click OK.
4. Select “Page 3″ button. Choose “Action” > “OnClick”. Select “Go to Frame” options and choose “Frame 4″. Click OK.

Hit F9 to preview the movie.
Follow the steps below:

  1. Launch Flash Designer and create a blank document.
  2. Size the frame at about 300×300 (“Frame” > “Frame Size”).
  3. Set the frame delay to “Stop” (“Frame” > “Frame Delay”).
  4. Draw a button with the “Button” tool. While the object is selected choose “Edit” > “Move To” and use X:0 Y:0 Width:80 Height:24
  5. Double click the button and rename from “Button1″ to “Page 1″
  6. Duplicate “Page 1″ button with “Edit” > “Duplicate”, use Step X: 100, Step Y: 0 and count 2 to create 2 new buttons.
  7. Rename buttons to “Page 2″ and “Page 3″ respectively.
  8. Create new frame with “Frame” > “New” command. Frame will appear as “Frame 2″. Set frame background to “Frame 1″ (buttons should appear on the new frame). Make sure new frame has delay set to “Stop”.
  9. Add 2 new frames that will appear as “Frame 3″ and “Frame 4″
  10. Go back to “Frame 2″ and add “Page 1 contents” text with the “Text” tool. Center the text on the frame with “Edit” > “Align” > “Center on Page”.
  11. Hit Ctrl+C to copy the text to clipboard.
  12. Go to “Frame 3″ and paste the text. Double-click the text and change it to “Page 2 contents”. Repeat the same for “Frame 4″

The next step is to define mouse actions:

  1. Go to “Frame 1″
  2. Select “Page 1″ button. Choose “Action” > “OnClick”. Select “Go to Frame” options and choose “Frame 2″. Click OK.
  3. Select “Page 2″ button. Choose “Action” > “OnClick”. Select “Go to Frame” options and choose “Frame 3″. Click OK.
  4. Select “Page 3″ button. Choose “Action” > “OnClick”. Select “Go to Frame” options and choose “Frame 4″. Click OK.

Hit F9 to preview the movie.
Download the source here

, , ,

Subscribe

Subscribe to our e-mail newsletter to receive updates.

No comments yet.

Leave a Reply