Flash create a video chapter menu

.net technique flash

74 .net april 2008

Knowledge needed Flash CS3, video editing program

Requires Photoshop CS3, Flash CS3

Project time 1 hour

At a recent ‘Best Website of the Year’ judging day I was shocked by the amount of website video material that had been sloppily embedded into content pages via YouTube. This material stuck out

like a sore thumb and was completely out of look and feel with the rest of the sites. For a blog it’s fine; for a portfolio or a company’s showcase site, forget it. It looks unprofessional and sloppy.

Instead, make your own video pages in Flash. Entertain and excite your visitors with a custom design and some great interactivity. Make it big, make it bold, make it loud. Grab your visitors’ attention!

This Flash tutorial will show you how to create a DVD-style chapter navigation system for streaming FLVs. We’ll use a simple bit of code, some ingenuity for creating buttons and an interface that will appeal to visitors and really help to sell the content.

To inspire us further, we’ve got advice from the web’s very own celebrity and entertainment queen, Susy Johnson. Susy works across a number of websites, including The Hallmark Channel, Diva TV and Movies 24, and here she gives us her pick of the best entertainment websites. Web content specialist Sam Peliza, senior web producer at Virgin Media, also tells us that Flash is great and good design never hurts. She gives us her expert tips.

To start customising your video, open up final.swf from your .net CD to view the final version of the project we’ll be working on. Click on any of the chapter points on the far left ‘test your strength’ machine. You’ll see the

Flash create a video chapter menuAvoid clumsy YouTube content by adding a DVD-style chapter navigation system to your site. Paul Wyatt explains how to customise your videos

chapter name is replaced by a short clip from that chapter point. Clicking this will move the playhead of the video to the chosen chapter location.

This interactivity uses cue points. Cue points give you control over your video content. There are two types: event and navigation. ‘Event’ cue points are used to trigger off Flash events as they are reached in the FLV (Flash’s native video format) timeline.

Navigation cue points are the ones we’ll be using for our chapter menu. This type of cue point is seekable. You can use button instances to ‘seek’ predetermined cue points, which you embed using the Flash media encoder. Click the button and go straight to that point within the video file. One important point when working with seekable cue points is that you can’t jump ahead in a progressively downloading Flash video, unless that part of the video has already been downloaded. However, if you’re using streaming Flash video content you can seek forward without having to wait for the seek to chapter points to be loaded.

Encode the movie From your .net CD, copy the folder Onthedisc to your hard drive. Open up the Adobe Flash video encoder. Depending on your particular system set-up, you should be able to find the encoder at Program Files > Adobe > Adobe Flash CS3 Video Encoder.

From the Flash video encoder click the Add button and navigate to the QuickTime movie animation.mov from the Onthedisc folder. You’ll see the path to the file appear in the Encoder window. Hit the Settings button and a panel will open below this. This is where we’ll set compression, size and our navigation cue points. Choose the Flash 8 – Medium quality (400 kbps) encoding profile from the drop-down list and enter wombatmovie in the Output filename box. The output file will be located in the same directory as this source file.

Click the Cue points tab and use the top orange arrow to scrub along the timeline to view the video. Hit the + button to add cue points by typing in a meaningful designation in the Name field. For this video, cue points were named and added at:

NAME TIME EVENT Start 00.00.00.000 Navigation Arriving 00.00.20.272 Navigation Bridge 00.00.28.541 Navigation The tower 00.00.40.545 Navigation Fighting 00.01.02.418 Navigation Meet the boss 00.01.19.756 Navigation

Click OK and then hit the Start queue button. The movie will begin encoding.

Add the code Open partial.fla in Flash. This is a Photoshop PSD file, which was imported onto the Flash stage by using the PSD importer. The importer compression options were set for each layer. Flash then recreates the layer structure of the PSD as Flash layers.

Your essential CD

All the code from this

month’s tutorial can be

found on this issue’s CD.

Menus mastered For your Flash video work, take advantage of embedded cue points in the style of DVD chapters, to let your visitors navigate your video content

NET174.tut_flash 74NET174.tut_flash 74 13/2/08 12:32:2413/2/08 12:32:24

.net april 2008 75 next>


Create a new layer and name it video. Hit Ctrl+F7 to bring up the Flash components panel. From this, drag out an instance of the FLVPlayback component. Drop this into the video layer. In the Properties panel, give the playback component the instance name of my_flvPb.

Click once onto the FLVPlayback component and select the Parameters tab at the bottom of the Flash interface. Click within the empty right-hand panel of the Content path option. A small magnifying glass will appear in the far right of this panel; click it to reveal a pop-up box. Use this to navigate to the wombatmovie.flv file. Select the option here to Match source FLV dimensions and click OK. The FLV file is now associated with the playback component. Any further changes within the Parameters tab will affect how the video is displayed and how the video is played back. Set autoplay to true (again by clicking within the empty panel to its right). Scroll back down to the Skin parameter. Click in the empty panel alongside it to reveal the Select skin pop-up box. For this site, ClearExternalPlaySeekMute.swf was selected. Once this choice is made, click OK.

Create a new layer and name it actions. Hit F9 to reveal the Actions panel. We’ll create six different functions, one for each cue point, and then associate our buttons with them. The code for targeting each cue point is pretty straightforward. In the Actions panel add the code.

function cue1() { var c = this._parent.my_flvPb.findCuePoint(“start”); this._parent.my_flvPb.seekSeconds(c.time); }

This function, cue 1, creates a variable that targets your FLVPlayback components instance name of my_flvPb to seek to the cue point (findCuePoint) start. We’ll create functions for the remainder of the cue points by reusing this code but changing the function name and cue point reference. Copy and paste the remainder of this code from the Actions panel from the completed project (thesite.fla, Actionscript from lines 9 to 37).

Encode the video buttons To produce our video preview buttons we’ll embed short bursts of low-quality 100x100 pixel video into the project. This is only advised for small, short files. Select File > Import > Import to library, select the six QuickTime movies in the Movieclips folder and click Open. In the Import video dialog box select

Entertain and excite your visitors with a custom design and some great interactivity

Take your cue To create your video chapter menu, use the Flash Video encoder to place cue points. Scrub along the timeline to position them in the desired place

.net technique flashf

In depth Sam Peliza of Virgin Media knows a thing or two about what works on the web

.net: We’re bored of social networking! We need some good old fashioned entertainment. What’s attracting your attention on the web at the moment? SP: One of my favourite sites at the moment is the recently redesigned Beastie Boys site www.beastieboys.com/av. It’s an energetic and exciting design, using their trademark style of graphics, photos and creatives. The music and video page displays the record sleeves, where you can access their music and videos via a bright and funky animated player that’s simple to use and fast loading.

This is also the case with American musician Beck’s website, which can be found at www.beck.com. It’s a visual feast of experimental and random animation – pretty much the same style as his music. It’s important that a site is designed so that it’s relevant to the subject matter, to present a strong and confident identity to the users.

British singer-songwriter Adele (who’s been described by the music press as ‘the new Amy Winehouse’) has a great video-specific site, www.adele.tv, where you can view her music videos and gigs full screen, as if you’re watching a TV music channel. It’s laid out well and is relatively fast considering the size of the files.

Using Flash can also add infinite fun and interactivity to a website. Last year’s colourful The Simpsons Movie website www.simpsonsmovie.com did exceptionally well, not only for its already massive fan base but also for its ‘create your own avatar’ tool, which allowed the user to design their own Simpsons character – providing many a new profile picture for Facebook members. The site had few clips related to the actual movie, but acted as a tool to get people interacting online with the whole brand, which in turn assisted with the promotion of the film.

My only slight issue with the site was that I found the usability a bit iffy. Navigation is as important as speed and design, and getting a balance between the three will give you a cracking site and get your users coming back for more!

Sam Peliza Occupation Senior web producer, Virgin Media About Sam Sam Peliza has worked as a web producer at lastminute.com, Lycos UK and Emap URL www.virginmedia.com

On the button Producing the video preview buttons is an important step. Multi-select the six QuickTime movie files to be imported into the project



Custom shapes Use the Pen tool to draw around the corners of the ‘test your weight’ graphic. This creates a path that will form the basis of your custom shaped button

Embed video in swf and play in timeline for Deployment type. Choose Flash 8 Low Quality as the encoding profile, hit Next twice more and

then Finish to embed the file. Repeat for the other movies.Create a movie clip for each video file. Name them sequentially (smallvideo

1, smallvideo 2 and so on). To add the fade up onto the video we’ll embed each one of these movie clips into another movieclip called fadevideo 1. For each video, plot a keyframe at frames 1 and 10: right-click at frame 1 and select Create motion tween. Click onto the movieclip at frame 1 and change its Alpha setting to 0 per cent. Extend the number of frames out to 100. Create sequentially named fade up videos for each video file (fadevideo 1, fadevideo 2 and so on).

Create interactive buttons Now we have our cue point functions we’ll need buttons to add them to. Our buttons really sell the DVD chapter-style navigation. When the mouse rolls over one, a short video preview is seen of the chosen chapter. A click will then bring up the relevant chapter from the movie.

To make these, create a new layer and name it buttons. Select the Pen tool from the Tools panel. What we’re going to do is to click each corner of the six panels of the ‘test your weight’ machine to create our button’s shapes. Plot a point with the pen in the top left-hand corner of the first button panel, then move across to the top right-hand corner, bottom right, bottom right and then back to the top left. At this point you’ll see a small circle appear. This means the next point that’s plotted will close the path. Once the path is closed, select the Paint Bucket tool. Choose a colour from the Colors swatch (this will not be seen on the final button, so any colour will do) and use the bucket to fill the path.

Once this is done, click on the path around the shape and delete it. You’re now left with a custom shape. Select it and hit F8 to convert it to a symbol. Select Movieclip as the symbol type and give it the name button 1. Now delete the button from the stage – don’t worry, it will still be available in the library. Repeat the process to produce five more custom shape buttons. Name them sequentially: button 2, button 3 and so on.

Create a new movieclip symbol and name it btn 1. Create a new layer and name it mask. Move to frame 14, right-click and select insert frame to extend the timeline out. At frame 1, on the mask layer, create a blank keyframe by right-clicking and selecting insert blank keyframe. Create another blank keyframe at frame 8. At frame 7 right-click and choose insert keyframe. Into this drag an instance of your first custom button shape – button 1. Add another layer and name it video. Click and drag the mask layer so it’s above the video one. Plot blank keyframes at frames 1 and 8. At frame 7, add a keyframe and drag an instance of fadevideo 1.

Select the shape in the mask layer and copy it using Ctrl+C. Create a new layer called position and click in the first keyframe. From the Edit menu choose Paste in place. For now, click the Eye icon next to it to make the layer invisible. We’ll use this later to help us position the layer on the stage and to define a clickable area.

Make an invisible buttonRight-click on the mask layer and select Mask from the menu. In a new layer named arrow, drag an instance of the movieclip Marker onto it. Insert another keyframe at frame 7 and then at frame 14. Right-click the keyframes at frame 1 and 7 then select Create motion tween. Select the Marker movieclip in frame 1 and in the Properties panel select Alpha in the Color option. Reduce the percentage to 0 per cent. Do the same for the version of the marker at frame 14. The marker will now fade in and out once we hook the interactive buttons up to the actionscript.

Add a new layer named actions. On this, plot stop actions at frames 1 and 7. At frame 14 we want the playhead to go back to frame 1, so in the Actions panel for that frame add the code gotoAndStop(1);. Then add a new layer and name it labels. Plot an empty keyframe at frames 1, 2 and 8. Use the

<prev 76 .net april 2008

To produce our preview buttons, we’ll embed short bursts of low quality video

<prev 76 .net april 2008

In depth The web’s fi rst lady of entertainment gives us the lowdown on what’s hot online

.net: Inspire us! What are the most cutting-edge entertainment sites out there at the moment?SJ: With internet users becoming increasingly web savvy, they’re demanding much more from their websites. Users know more about the website and how they want to use it. They have expectations that need to be met and at this moment in time, interaction is hot!

A prime example of this is the revolutionary campaign for E4’s Skins (www.e4.com/skins). Channel 4 found that its target audience was watching less TV, so knew it had to do something different. Before the show had even launched on air there was a well established online community: people had favourite characters and the audience had been allowed to get involved by styling the music, fashion and films in online competitions. Never before had a teen drama been so interactive, with staggering results.

Another extremely creative site was the one for the film Pan’s Labyrinth (www.panslabyrinth.com). It’s no longer enough to show a trailer for a film. Along with the trailer were downloads, videos and e-cards – but what really caught my eye was the detail that went into the Sketchbook competition. The competition may have created the incentive, but the design and flow of this tool was superior to anything I’d seen. I loved the Pirates of the Caribbean: Dead Man’s Chest site, too (www.ilm.com/theshow). Disney never fails to impress me with its inventive and imaginative look at marketing its latest movie. The layout was crisp and the key images were used incredibly well. The interaction and interest looking round the site really stood out.

And it’s not just the big players that realise the effect of a great interactive website. Celebrity sites are also getting in on the action. The singer Christina Aguilera has an incredibly effective and interactive website (www.christinaaguilera.com), as does JK Rowling (www.jkrowling.com/en). I was blown away with the Tom Green website (www.tomgreen.com): here is someone who obviously has a keen interest in the online environment. It has Skype video chat, live streaming, virals and so much more. Take a look at this really inventive website.

So, if you want to design a website that people want to look at, think beyond the Facebook-type forums and look at ways to really get people to interact with your site.

Susy Johnson Occupation Content manager/producer About Susy: Susy Johnson works for NBC Universal on TV channel websites such as Diva TV and Movies 24. URL www.nbcuni.com



.net april 2008 77

properties inspector to type in label identifiers at frame 2 in and frame 8 out. The final layer is for the chapter name. Create a static text box at frame 1 and type in this chapter one.

Position this within the space of your custom shape. Change the visibility of the position layer shape to help you. In this layer, plot an empty keyframe at frame 2.

With the visibility of the position layer turned on, return to the buttons layer on the stage. Drag out an instance of btn 1 into it. The visible green shape will help you to accurately position the button over the correct panel of the test your own weight graphic. Once in place, give this button the instance name of seek_btn_1.

Right-click the button and select Edit in place. Select the instance of button 1 in the position layer and change its Alpha setting to 0 per cent. By having an invisible button in the first frame, it defines a clickable and solid – albeit invisible – area, which the end user’s mouse will be able to identify as a clickable area.

The final stagesIt’s easy now to produce the remaining five buttons. Right-click on the movieclip btn 1 in the Flash library. Select Duplicate and in the pop-up Duplicate symbol box rename the file to btn 2 and click OK.

Now enter this movieclip and change over the mask layer shape with the movieclip Button 2, change the video to fadevideo 2 and the text layer to chapter two.

Give this new button the instance name of seek_btn_2 on the stage. Repeat this for the remaining buttons, changing the relevant symbols and

naming the instances sequentially on the stage. Select the first frame of the actions layer and hit F9 to reveal the Actions panel. We’ll create a button function which we’ll use for all six buttons. Add the code at line 48:

function gotoIn() { this.gotoAndPlay(“in”);

} function gotoOut() { this.gotoAndPlay(“out”);

}

Now wire this function up to the buttons. Add the code at line 57:

seek_btn_1.onRollOver = gotoIn; seek_btn_1.onRollOut = gotoOut; seek_btn_2.onRollOver = gotoIn; seek_btn_2.onRollOut = gotoOut; seek_btn_3.onRollOver = gotoIn; seek_btn_3.onRollOut = gotoOut; seek_btn_4.onRollOver = gotoIn; seek_btn_4.onRollOut = gotoOut; seek_btn_5.onRollOver = gotoIn; seek_btn_5.onRollOut = gotoOut; seek_btn_6.onRollOver = gotoIn; seek_btn_6.onRollOut = gotoOut;

We’ve now targeted each of the chapter point buttons with the function. On rollover for each button the function gotoIn will be executed. Within this is a gotoAndPlay, which takes the play head to the in label. The same happens for the Rollout function. However, the out label is targeted instead. With all the buttons wired up, hit Ctrl+Enter to test your handiwork.

Once you’ve mastered this technique, you’ll never again be tempted to embed YouTube content onto your websites. Take the time in Flash and your work, whether it’s for business or pleasure, will always look professional.

About the author Name Paul Wyatt Site www.paulwyatt.co.uk Areas of expertise Interactive web design, motion graphics and video Clients The X Factor, Fanta, Smirnoff and Research Studios Best biscuit Happy Faces, because they’re so damn cheerful

In position With its visibility on, place the bright green button over the correct panel in the ‘test your weight’ graphic. Turning its visibility off will make the button invisible

Layer it up Creating a ‘position’ layer at this stage helps you to accurately place your button symbols so that they match with the ‘test your own weight’ graphic

Resources Sites with great video navigation

Camper creationProof, if proof were needed, why creating your own video integration using Flash pays huge dividends. Here’s a great site for Camper shoes: click around and take inspiration from this excellent integration of Flash video and animation. www.camper.com

Portfolio perfectionAnother great example of video navigation comes from web designer Stuart Twigger on his portfolio site. The visitor sees a video of Steve bring up each of his menu items using a TV remote – a humorous and imaginative way to draw people in. www.stuart-twigger.com


Flash create a video chapter menu

Documents

flash video work

flash cs3

net technique flash

flash layers

flash stage

flash events

flash tutorial

video file