How to Create an Interactive Book
Interactive books are a great way to engage readers through a nontraditional book setting. They can be used as games, added to websites, or simply shared among friends. They can be as simple as just a page with a button to move forward and a button to move backwards. This article will talk about how to make a basic interactive book in Flash 8 using ActionScript 2.0. As you get more comfortable with the code mentioned below, you can make more complicated interactive books.
Other People Are Reading
Instructions
-
-
1
Create a new Flash document and change the document size to 600 x 400 px.
-
2
Change the layer name to "Background."
-
-
3
Create a rectangle with the rectangle tool. Make it also 600 x 400 px and change the fill color to #FFFCC, and the stroke color to #FFCC33. Also make the stroke 5pt in thickness. Set the rectangle to X: -1.0 and Y: -1.0 *Note: You can create custom colors in your desired shade.
-
4
Use the line tool to make a line 400px tall. Set its position to X: 300.0 and Y: 0.0 to place it in the middle of the rectangle and give the appearance of left and right pages. Change its color to #FFCC33.
-
5
Create a new layer and label it "Text."
-
6
Use the text tool and start placing the text.
-
7
Create a new layer for the buttons.
-
8
Use the text tool and type Next. Right-click this text box and go to Convert to Symbol and convert it to a button. Place this button on the bottom right of the right page.
-
9
Right click on the Next button and select Actions to open the actions tab and place this code inside:
on(release){
gotoAndPlay(_root._currentFrame + 1)
} -
10
Create a new layer and name it "Actions." Right-click the first frame in this layer and type in this code:
stop();
-
11
Click the frame next to that one and hold shift while clicking the second frame in the Background layer. You should have all the frames in the second column darkened. Right-click in any of these darkened frames and select “Insert Keyframe.” You will find everything from the first column of frames has been copied into the new column of frames, except the code in the Action layer and the buttons.
-
12
Right-click the second frame in the Actions layer and type in this code:
stop();
-
13
Click the second frame in the Buttons layer. This will select the Next button, which you should deselect.
-
14
Use the text tool and type Previous, and convert it into a button like you did with Next.
-
15
Right click the Previous button and select Actions and change the code to:
on(release){
gotoAndPlay(_root._currentFrame - 1)
} -
16
Move the Previous button to the bottom left of the left page.
-
17
Right-click this new Next button and place the original code.
-
18
Change the text for these new pages.
-
19
Copy this column by clicking the top frame of the third column, holding shift, and clicking the bottom frame of the third column. Right-click and choose Insert Keyframe again. Like before, everything from the second column of Frames has copied over except the script in the Actions layer and buttons.
-
20
Change the text and repeat this step for however many pages you have. *Note: Don't forget the code for the buttons and Action layer won't be copied over, and you will need to manually replace the code.
-
21
Delete the Next button when you get to your last page, but keep the Previous button so people can move back through the story.
-
22
Go to File and select Publish. Publish out the Flash document into whatever format you need it to be for your purposes. For example, you can publish it as an HTML document to add to your website.
-
1
Tips & Warnings
Once you've mastered the use of the buttons, you can have them skip forward or backwards whatever number of frames you would like. This can be useful if you wanted to turn the book into a “Choose Your Own Adventure” book, by changing the number of frames the buttons skip to.
Adding images to the pages will make them more engaging as well.
This article uses ActionScript 2.0 and may not work with ActionScript 3.0.
References
Resources
- Photo Credit Ciaran Griffin/Lifesize/Getty Images
