Customizing the template

Adding your own graphics and branding to the showcase template is easy to do. Because the background graphics are only loaded once, regardless of how many video chapters are displayed, you have some freedom to add content to the background as desired. Have some fun changing the graphics by adding your own background graphic, logo, and custom content. Add some text and maybe a title if it suits your presentation. Feel free to change the canvas size, number, and position of the buttons, and anything else you can think of to spice things up.

This page is intended to help you understand how to customize the look and feel of the template assets and change their layout on the stage.

Change the background graphics and text

One of the easiest ways to make the template your own is to change the background graphics. It's usually a good idea to start the editing process in Flash with a good idea of the results you'd like to produce. Sketch out your interface design ideas or work in a graphics program to flesh out your approach.

To change the background, follow these steps:

1. Open VideoShowcase.fla in Flash CS4 Professional.
2. Select the Background layer and lock all other layers.
3. Edit the background graphics as desired.
4. To replace the background panel image, select it and press Delete on your keyboard. Draw a new graphic or import an image by choosing File > Import.

Feel free to add layers and graphics as needed to the Timeline. If you extend the Timeline beyond a single frame, make sure that all the controls appear throughout the length of the Timeline.

Change the FLVPlayback controls

This version of the showcase uses the FLVPlayback components for the display of the video. This feature makes development and ActionScript integration fairly straightforward and provides lots of possibilities for extending the template. The FLVPlayback component is the primary control used to display video. The component can display progressive video or streaming video from a Flash Media Server.

To change the video controls, follow these steps:

1. Open VideoShowcase.fla in Flash CS4 Professional.
2. On the main timeline, select the FLVPlayback layer and lock all other layers.
3. To add your own custom arrangement of video controls, first delete any controls currently on the screen that you do not want.

4. Open the Components panel and drag control components from the Video folder to the stage (see Figure 3). Place the new instance wherever you like and name each instance in the Properties inspector.

   

   Figure 3. Video control options available in the Components panel

5. Select the Actions layer and open the Actions panel to register the video controls with the FLVPlayback instance. The FLVPlayback component contains properties that match each type of control. When you assign the instance name of the control to the related FLVPlayback property, the control instance becomes associated with the video. For example, if you added a buffer bar instance named myBuffer, you would write the following code on the Actions layer to register the buffer bar instance with the video:

   flvDisplay.bufferBar = myBuffer;

   Tip: The UI component will automatically associate itself with the FLVPlayback component when you drag it onto the Stage. The step above should be used to explicitly assign instance names to the FLVPlayback component, but it's not a necessary step in this case.

Feel free to add and remove FLVPlayback UI components as desired. Be aware that some components can conflict with each other when used within a multifunctional template such as this. Experiment until you find the right mix of controls.

Please see my article, Skinning the ActionScript 3 FLVPlayback component, for more information.

Change the section and chapter buttons

The template contains two types of buttons for two types of navigation within the showcase: section buttons and chapter buttons. Section buttons define the different sections (FLV videos) available in the showcase. Clicking a section button loads a new video and chapter information to the screen. The chapter buttons provide a visual metaphor for navigating the cue point sections within the current section. Clicking a chapter button jumps to the related cue point time in the video.

Since the template's content is dynamically driven, you need only edit a single instance of either button to effect a change in all the instances. Then add and remove instances on the stage to create the number of desired buttons. Feel free to move the buttons around and change their appearance as much as you like.

To change graphics included in the buttons, follow these steps:

1. Open VideoShowcase.fla in Flash CS4 Professional.

2. Open the Library panel if it's not already open and double-click the Section Button symbol to enter its editing mode (see Figure 4).

   

   Figure 4. Double-clicking the SectionButton symbol to edit its timeline

3. Edit the Text, Background, and Border layers as desired. If you change the text field, make sure it still has the instance name label_txt.

4. Repeat the same editing process for the ChapterButton located in the Library (see Figure 5).

   

   Figure 5. Double-clicking the ChapterButton symbol to edit its timeline

To change the layout and number of buttons, follow these steps:

1. Return to the main timeline if you're not already there.
2. The section buttons appear as the long rectangular buttons in the top left of the screen. Add and remove button instances as desired. Place the instances anywhere on the stage that you like.
3. Name each button instance from the top down with the naming convention section_[n]. For example, if there are three buttons, from the top down their instance names would be section_1, section_2, and section_3.
4. The chapter buttons are the image-filled buttons on the lower left corner of the screen. Add and remove chapter button instances as desired. Place the instances anywhere that you like.
5. Name each chapter button instance with the naming convention chapter_[n]. For example, if there are three chapter buttons, their instance names would be chapter_1, chapter_2, and chapter_3.

Change the caption window

The caption window appears when the caption button is clicked. It displays caption text associated with the current chapter.

To change the caption window, follow these steps:

1. Open VideoShowcase.fla in Flash CS4 Professional.
2. Open the Library panel if it's not already open and double-click the Caption Window symbol to enter into its editing mode.
3. Hide the Mask layer and unlock the Sliding panel layer to edit the caption text fields (see Figure 6). If you change the caption text fields beyond formatting, make sure they still contain the expected instance names; title_txt and caption_txt.
4. Edit the timeline as desired, but try not to change the actions or frame labels on the Actions layer.

   

   Figure 6. Hiding the mask and unlocking the sliding panel to edit the caption text fields

   Tip: Figure 6 shows a classic tween built along the Timeline in Flash CS3. You can work with Flash CS4 motion tweens or any of the new Flash CS4 animation effects in your work. See the Animation Learning Guide for Flash for more details.

Change the ActionScript code

The ActionScript code that powers the template is located in external ActionScript 3 class files. You can find the files in the code folder in the supplied assets. In general, you won't need to edit the code, but you may find that making small changes is necessary. One of the most common changes would be to switch the cue points between the embedded type or ActionScript generated type.

To change the importCuePoint setting, follow these steps:

1. Open VideoShowcase.as in Flash CS4 Professional or in a text editor.
2. Change the importCuePoint property to true if you want the cue points to be generated dynamically. Set the property to false if you want the embedded cue points in the video to be used. If embedded cue points exist, this property should be set to false.
3. Save the file and publish the SWF file from the VideoShowcase.fla file.

Page 3 of 5

Previous Page

Next Page