3.2.2. Click-to-Flip Buttons*
If a Flash object covers the whole HTML page, you would like to enable the Flash object such that you can click on the Flash object to flip to the previous or next page in FlipViewer.
To achieve this in FlipViewer (PC and Mac) for a FlipBook, you need to add two big transparent buttons to the Flash object using Adobe Flash. These two big buttons act as the Forward (links to the next page) and Backward (links to previous page) buttons.
When a Flash object is displayed in centerfold mode, each button should cover half the size of the Flash object.
Steps of preparing Flash object for FlipViewer (PC and Mac) (Refer “SampleForFlipViewer.fla”):
1. In Adobe Flash, add a new layer and name it “Main Action”. This layer should be the top layer.
2. At the “Main Action” layer, insert three key frames. Put the ActionScript “this.stop();” at the first and third frames.
3. Add a new layer below “Main Action” layer and name it “Cursor”.
4. Open the “SampleForFlipViewer.fla” file provided by your ID issuer. Open Library Window (Window > Library). You will see FlipCursor in the Library window. Select the FlipCursor object and copy it (Ctrl-C).
5. Go back to the FLA file that you are working. Open the Library Window (Window > Library) and paste the FlipCursor into your library. You should see the FlipCursor object being added on the stage under the “Cursor” layer.
6. Add a new layer below the “Cursor” layer and name it “Main Movie”. You should put your main movie over here.
Note: Put all your animation in the timeline of this main movie. Do not include sub-movies in your main movie.
7. For example, I imported a JPEG file and convert it into a Movie Clip symbol called “mymovie”, and give an instance name MC_sample. I double-clicked on the “mymovie” to go into its timeline. In the timeline of “mymovie”, I named the layer “Movie”. On the “Movie” layer, I added motion tween to create simple animation. Then, I added another layer on top of the “Movie” layer called “Action” layer. On “Action” layer, I inserted a keyframe at the first and last frame and added the ActionScript “this.stop();” for both keyframes. I also added a “Sound” layer and inserted a music file.
8. If you want to add links in your Flash object, you need to add two layers: “Link” and “Hotspot” layers below the “Main Movie” layer.
9. On the “Link” layer, add the text of your link.
10. On the “Hotspot” layer, use the Rectangle Tool to draw a rectangle box around the text of your link. Use the Arrow Tool to double-click the rectangle and convert it into a Button symbol, and name it “hotspot”.
11. Add two new layers below all other layers: “BackButton” and “ForwardButton”.
12. Hide all layers except the “BackButton” layer and select it. Use the Rectangle Tool to draw a large rectangle box that covers the left-half of the movie. Use the Arrow Tool to double-click the rectangle and convert it into a Button symbol, and name it “BackButton”.
13. Hide all layers except “ForwardButton” layer and select it. Use the Rectangle Tool to draw a large rectangle box that covers the right-half of the movie. Use the Arrow Tool to double-click the rectangle and convert it into a Button symbol, and name it “ForwardButton”.
14. Select the frame 2 of the “Main Action” layer and insert a keyframe at frame 2. Add the following ActionScript to the this keyframe:
|
_root.MC_sample.gotoAndPlay(2); |
15. Hide all layers except the “Hotspot” layer. Use the Arrow Tool to select the “hotspot” button and add the following ActionScript to this “hotspot” button. Change "http://www.flipviewer.com" to your URL.
|
on(rollOver) { _root.FlipCursor.gotoAndStop(3); } on(release) { getURL("http://www.flipviewer.com"); }
|
16. Hide all layers except the “BackButton” layer. Use the Arrow Tool to select the “BackButton” button and add the following ActionScript to this “BackButton” button. Change MC_sample to the instance name you give for your main movie. Change "leftpage.html" to the filename of the previous page. By clicking this big BackButton, FlipViewer will flip to the previous page.
|
on (rollOver) { if (_root._currentframe==1) { _root.gotoAndPlay(2); } _root.FlipCursor.gotoAndStop(2); }
on (rollOut) { _root.FlipCursor.gotoAndStop(1); }
on (release) { _root.FlipCursor.gotoAndStop(1); _root.MC_sample.gotoAndStop(1); _root.gotoAndStop(1); stopAllSounds (); getURL ("leftpage.html"); } |
17. Hide all layers except the “ForwardButton” layer. Use the Arrow Tool to select “ForwardButton” button and add the following ActionScript to this “ForwardButton” button. Change MC_sample to the instance name you give for your main movie. Change "rightpage.html" to the filename of the next page. By clicking this big ForwardButton, FlipViewer will flip to the next page.
|
on (rollOver) { if (_root._currentframe==1) { _root.gotoAndPlay(2); } _root.FlipCursor.gotoAndStop(2); } on (rollOut) { _root.FlipCursor.gotoAndStop(1); } on (release) { _root.FlipCursor.gotoAndStop(1); _root.MC_sample.gotoAndStop(1); _root.gotoAndStop(1); stopAllSounds (); getURL ("rightpage.html"); } |
18. Choose File > Publish to publish the Flash object (.SWF file).
19. Add the following scripts into the header section of the HTML page (i.e. section between <head> and </head>) that embeds the Flash object.
|
<script language="VBScript"> <!-- // DO NOT DELETE THIS VBSCRIPT // This bit of VBScript must be available for Flash to communicate with JavaScript. // (This is just a standard technique recommended by Macromedia) //--> Sub ebooksysflashcontrol_FSCommand(ByVal command, ByVal args) call ebooksysflashcontrol_DoFSCommand(command, args) end sub </script> <script language="JavaScript"> function ebooksysflashcontrol_DoFSCommand(command, args) { external.NotifyMsg(command, args) } </script> |
20. Double-check the HTML page to make sure that you have assigned the ID “ebooksysflashcontrol” for the embedded Flash object.
21. Publish the FlipBook for FlipViewer using FlipBook Creator.
Limitation:
After you open a FlipBook in Mac FV, you need to click at least once at a Flash object to activate the playing of Flash animation. After one click on a Flash object, Flash objects in the rest of the HTML pages will be played automatically when you flip to the pages.
Note:
* Applicable to FlipBooks for FlipViewer only