AS3: Navigate to 3 FLV files
What it does
- This is a variation of the SWF movie we made that jumps to 3 different sections of a movie timeline (AS3NavSections.htm)
- Open the movie with the menu that jumps to 3 sections and add a layer for components that will play FLV files when the user selects the section.
The name of the FLA file we developed for that is
menu3sections.fla
If you don't have a copy of that FLA file, open AS3NavSections.htm to see how to build it.
- In that movie there are 3 sections divided up like this in the timeline:
- section 1 occupies frames 1-29.
- section 2 occupies frames 30-59
- section 3 occupies frames 60-90
- The frame at the beginning of each section has a frame label (section1, section2, section3) to which the button moves
- The frame in the middle of each section has a stop(); action
- 3 buttons in the first frame of the movie have instance names equal to each section's frame label
- ActionScript 3 in keyframe 1 of the movie passes the instance name of the button to the function, which then transfers the playline to that frame label
- In this version, we import a movie file or an FLV file into a new movie layer, at the same keyframe as the stop(); action in the middle of the section.
- Flash compiles an FLV component with your choice of skin to play the FLV movie in the frame
- We then delete the FLV component at the frame just before the first frame of the next section, and import another FLV file into another FLV component.
Example
What you need to start:
- a copy of the FLA file menu3sections.fla, created according to directions in AS3NavSections.htm
- Note: you can shrink the length of the sections or add to them to suite your own movie design
- 3 video files (if you want 3 sections -- you can add or subtract sections from the FLA file
- The video files can already be FLV files, or Flash will convert other video (MOV, AVI) to FLV format
- To convert files to FLV format, use the Flash Video encoder, a standalone program.
- For the settings for importing other video formats into Flash to convert them to FLV, see FLVcomponent.htm
How to do it
- Open menu3sections.fla in Flash
- Add a new layer named videos at the top of the layers in the timeline
- Click F6 to create a keyframe in the videos layer, at the same frame number as the stop action in the script layer (frame 15 in my video)
- Click File>Import>Import Video
- Follow one of the processes below, depending on whether the video you are importing is an FLV file or another file format.
- Click F6 to insert a keyframe in the videos layer, two frames before the beginning of Section 2.
- Select the FLVplayback from the frame
- Repeat this process in the other two sections, inserting an FLV in the middle of the section, and deleting the FLV before the beginning of the next keyframe.
- For Section 3, delete the FLV component in the next to the last keyframe in the videos layer.
- Save the movie, and click Control>Test Movie to view the video.
- When you have fixed the bugs, click File>Publish Preview to create a web page with the SWF file embedded in it.
- Copy the scripts into another page, open the web page in Dreamweaver and do File>Convert>XHTML 1.0 Transitional to fix the script tags, and remove the <embed> tag
- Save the page, view in Firefox, and test for XHTML validity.
To insert Movies that are FLV files
- On the Select Video window, check On your computer
- check On your computer
- Browse to locate the the FLV file
- Click Next
- On the Deployment window
- check Progressive download from a Web Server
- check On your computer
- On the Skinning window
- Choose a skin & color
- SkinUnder skins display below the movie frame
- Choose one with Caption for closed caption.
- On the Finish Video Import
- Click Finish
- Flash inserts the compiled FLVPlayback component in the Library.
To Insert movies that are NOT FLV files
- In the Select Video window of the wizard, be sure the on your computer radio button is checked.
- Browse to the video file you wish to convert to an FLV file. This inserts the pathname of the video.
- In the Deployment window, choose Progressive download from a web server.
- In the Encodings Window, Click Show Advanced Settings.
- In the Flash Video Encoding Settings dialog box, select Flash 8 - Medium Quality (400kbps) from the Flash Video Encoding Profile menu. This setting is the default.
- You can try other settings to adjust the file size and quality of your video if you are unhappy with the results.
- This action applies only a small amount of compression to the file.
- Click the Show Advanced Settings button, which reveals 3 tabs
- Encoding tab
- Video codec is On2 VP6 for Flash 8 Pro. The other option is Sorensen Spark which will output your video for playing in the Flash 7 player
- Frame Rate: same as source is safest. You can change it to other frame rates, which will alter encoding provile to Custom
- Key Frame Placement: Automatic lets Flash set it. Key frames are ones in which entire video frame is repainted. Frequent keyframes slow down the movie and increase its file size. If the download speed is slow, the video may stop and only display keframes
- Quality is set to Medium by encoding profile choice
- Resize video lets you resize video dimensions. Click Maintain Aspect ratio to be sure video is not distorted
- Audio codec is set to MP3, which is Flash's default and yields excellent results
- data rate is set to 96 Kbps (stereo) for this encoding profile. If FLV movie is too large, reducing audio settings will reduce file size dramatically
- Cue Points Tab
- You can designate specific times as cue points in the video
- Event cue points can be used to trigger an event when video playback gets to the cue point
- Navigation cue points insert a keyframe in the video cl9p and can be used for navigating or locating the specific point in the video clip
- Crop and Trim Tab
- Crop lets you crop edges space from any of the four edges of the video clip
- Trim lets you set an in point and out point to trim frames from the beginning or end of the movieclip
- Click OK to close the Settings dialog box.
- Click Next.
Skinning Window
Skins listed in the Skin pop-up menu are located in the Flash 8 Configuration/Skins folder or in a local Configuration/Skins folder that holds kinds you have made.
To skin with the FLVPlayback component using the FLV Playback Custom UI components, select None from the pop-up menu. See Convert Video in Flash Video encoder tutorial for instructions to use the video component.
- This skins include various combinations of buttons, to play your video
- Some of the skins display across the bottom of the video while others display below the video.
- the skins that contain the wrd All will display many buttons, including Start, stop, rewind, volume control.
- The skins that include the word External will display below the video.
- Some of the skins have minimum height and width requirements so be sure to choose one that fits the size of your video clip. Skins that state No minumum width and height will resize to fit the video clip.
- Click Next to encode the video
- The wizard puts the skin and the flv file in the same folder ase the fla file, so if the fla file has not been saved, you will be prompted to do that first.
- There is also a warning that you have to upload the skin, the SWF file and the flv component.
- You can change the pathname of the flv file in the Component inspector if you need to do that
Finish the wizard
- The Flash Video Encoding Progress window plays while the video is encoded.
- The resulting FLV file component is placed in the library for the movie.
- You need to upload the FLV file and the skin to the server, because they are separate from the SWF file.
Source:
This information and the SWF movie is drawn Chapter 5 from the excellent book Learning ActionScript 3.0: A Beginner's Guide, by Rich Shupe with Zevan Rosser (2007). It is available in Safari books online through the Cal Poly Library. Downloads for this book's examples are available on-line
Resources
