Your SlideShare is downloading. ×
Flash create a video chapter menu
Flash create a video chapter menu
Flash create a video chapter menu
Flash create a video chapter menu
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flash create a video chapter menu


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. .net technique flash Flash create a l CD Your essentia s m thi All the code fro month’s tutori found on this al can be issue’s CD. video chapter menu Avoid clumsy YouTube content by adding a DVD-style chapter navigation system to your site. Paul Wyatt explains how to customise your videos Knowledge needed Flash CS3, video editing program 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. Requires Photoshop CS3, Flash CS3 This interactivity uses cue points. Cue points give you control over your Project time 1 hour 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 At a recent ‘Best Website of the Year’ judging day I was shocked by native video format) timeline. the amount of website video material that had been sloppily Navigation cue points are the ones we’ll be using for our chapter menu. embedded into content pages via YouTube. This material stuck out This type of cue point is seekable. You can use button instances to ‘seek’ like a sore thumb and was completely out of look and feel with the rest of predetermined cue points, which you embed using the Flash media encoder. the sites. For a blog it’s fine; for a portfolio or a company’s showcase site, Click the button and go straight to that point within the video file. One forget it. It looks unprofessional and sloppy. important point when working with seekable cue points is that you can’t jump Instead, make your own video pages in Flash. Entertain and excite your ahead in a progressively downloading Flash video, unless that part of the visitors with a custom design and some great interactivity. Make it big, make it video has already been downloaded. However, if you’re using streaming Flash bold, make it loud. Grab your visitors’ attention! video content you can seek forward without having to wait for the seek to This Flash tutorial will show you how to create a DVD-style chapter chapter points to be loaded. 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 Encode the movie really help to sell the content. From your .net CD, copy the folder Onthedisc to your hard drive. Open up the To inspire us further, we’ve got advice from the web’s very own celebrity Adobe Flash video encoder. Depending on your particular system set-up, you and entertainment queen, Susy Johnson. Susy works across a number of should be able to find the encoder at Program Files > Adobe > Adobe Flash websites, including The Hallmark Channel, Diva TV and Movies 24, and CS3 Video Encoder. here she gives us her pick of the best entertainment websites. Web content From the Flash video encoder click the Add button and navigate to the specialist Sam Peliza, senior web producer at Virgin Media, also tells us that QuickTime movie from the Onthedisc folder. You’ll see the Flash is great and good design never hurts. She gives us her expert tips. path to the file appear in the Encoder window. Hit the Settings button and To start customising your video, open up final.swf from your .net CD to a panel will open below this. This is where we’ll set compression, size and view the final version of the project we’ll be working on. Click on any of our navigation cue points. Choose the Flash 8 – Medium quality (400 kbps) the chapter points on the far left ‘test your strength’ machine. You’ll see the 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 Navigation Arriving Navigation Bridge Navigation The tower Navigation Fighting Navigation Meet the boss 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. 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 74 .net april 2008 NET174.tut_flash 74 13/2/08 12:32:24
  • 2. .net technique flash f In depth Sam Peliza of Virgin Media knows a thing or two about what works on the web Sam Peliza Occupation Senior web producer, Virgin Media About Sam Sam Peliza has worked as a web producer at, Lycos UK and Emap URL .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 It’s an energetic and exciting design, using their trademark style of graphics, photos and creatives. The Take your cue To create your video chapter menu, use the Flash Video encoder music and video page displays the record sleeves, where you can access to place cue points. Scrub along the timeline to position them in the desired place their music and videos via a bright and funky animated player that’s simple to use and fast loading. Entertain and excite your This is also the case with American musician Beck’s website, which can be found at It’s a visual feast of experimental and random animation – pretty much the same style as his music. It’s important that a visitors with a custom design site is designed so that it’s relevant to the subject matter, to present a strong and confident identity to the users. and some great interactivity British singer-songwriter Adele (who’s been described by the music press as ‘the new Amy Winehouse’) has a great video-specific site,, where you can view her music videos and gigs full screen, as if you’re Create a new layer and name it video. Hit Ctrl+F7 to bring up the Flash watching a TV music channel. It’s laid out well and is relatively fast components panel. From this, drag out an instance of the FLVPlayback considering the size of the files. component. Drop this into the video layer. In the Properties panel, give the Using Flash can also add infinite fun and interactivity to a website. Last playback component the instance name of my_flvPb. year’s colourful The Simpsons Movie website did Click once onto the FLVPlayback component and select the Parameters tab exceptionally well, not only for its already massive fan base but also for its at the bottom of the Flash interface. Click within the empty right-hand panel ‘create your own avatar’ tool, which allowed the user to design their own of the Content path option. A small magnifying glass will appear in the far Simpsons character – providing many a new profile picture for Facebook right of this panel; click it to reveal a pop-up box. Use this to navigate to the members. The site had few clips related to the actual movie, but acted as a wombatmovie.flv file. Select the option here to Match source FLV dimensions tool to get people interacting online with the whole brand, which in turn and click OK. The FLV file is now associated with the playback component. assisted with the promotion of the film. Any further changes within the Parameters tab will affect how the video is My only slight issue with the site was that I found the usability a bit iffy. displayed and how the video is played back. Set autoplay to true (again by Navigation is as important as speed and design, and getting a balance clicking within the empty panel to its right). Scroll back down to the Skin between the three will give you a cracking site and get your users coming parameter. Click in the empty panel alongside it to reveal the Select skin pop- back for more! 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 On the button Producing the video preview buttons is an important step. the Movieclips folder and click Open. In the Import video dialog box select Multi-select the six QuickTime movie files to be imported into the project .net april 2008 75 next> NET174.tut_flash 75 13/2/08 12:32:26
  • 3. .net technique flash 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. Custom shapes Use the Pen tool to draw around the corners of the ‘test your weight’ To make these, create a new layer and name it buttons. Select the Pen tool graphic. This creates a path that will form the basis of your custom shaped button 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, In depth The web’s first lady of 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. entertainment gives us the 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 lowdown on what’s hot online (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 Susy Johnson 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 Occupation Content manager/producer the button from the stage – don’t worry, it will still be available in the library. About Susy: Susy Johnson works for NBC Universal on Repeat the process to produce five more custom shape buttons. Name them TV channel websites such as Diva TV and Movies 24. sequentially: button 2, button 3 and so on. URL 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 .net: Inspire us! What are the most cutting-edge entertainment sites out the timeline out. At frame 1, on the mask layer, create a blank keyframe by there at the moment? right-clicking and selecting insert blank keyframe. Create another blank SJ: With internet users becoming increasingly web savvy, they’re demanding keyframe at frame 8. At frame 7 right-click and choose insert keyframe. Into much more from their websites. Users know more about the website and this drag an instance of your first custom button shape – button 1. Add how they want to use it. They have expectations that need to be met and at another layer and name it video. Click and drag the mask layer so it’s above this moment in time, interaction is hot! the video one. Plot blank keyframes at frames 1 and 8. At frame 7, add a A prime example of this is the revolutionary campaign for E4’s Skins keyframe and drag an instance of fadevideo 1. ( Channel 4 found that its target audience was watching Select the shape in the mask layer and copy it using Ctrl+C. Create a new less TV, so knew it had to do something different. Before the show had even layer called position and click in the first keyframe. From the Edit menu launched on air there was a well established online community: people had choose Paste in place. For now, click the Eye icon next to it to make the layer favourite characters and the audience had been allowed to get involved by invisible. We’ll use this later to help us position the layer on the stage and to styling the music, fashion and films in online competitions. Never before define a clickable area. had a teen drama been so interactive, with staggering results. Another extremely creative site was the one for the film Pan’s Labyrinth Make an invisible button ( It’s no longer enough to show a trailer for a film. Right-click on the mask layer and select Mask from the menu. In a new layer Along with the trailer were downloads, videos and e-cards – but what really named arrow, drag an instance of the movieclip Marker onto it. Insert another caught my eye was the detail that went into the Sketchbook competition. keyframe at frame 7 and then at frame 14. Right-click the keyframes at frame 1 The competition may have created the incentive, but the design and flow of and 7 then select Create motion tween. Select the Marker movieclip in frame this tool was superior to anything I’d seen. I loved the Pirates of the 1 and in the Properties panel select Alpha in the Color option. Reduce the Caribbean: Dead Man’s Chest site, too ( Disney never percentage to 0 per cent. Do the same for the version of the marker at frame fails to impress me with its inventive and imaginative look at marketing its 14. The marker will now fade in and out once we hook the interactive buttons latest movie. The layout was crisp and the key images were used incredibly up to the actionscript. well. The interaction and interest looking round the site really stood out. Add a new layer named actions. On this, plot stop actions at frames 1 and And it’s not just the big players that realise the effect of a great 7. At frame 14 we want the playhead to go back to frame 1, so in the Actions interactive website. Celebrity sites are also getting in on the action. The panel for that frame add the code gotoAndStop(1);. Then add a new layer singer Christina Aguilera has an incredibly effective and interactive website and name it labels. Plot an empty keyframe at frames 1, 2 and 8. Use the (, as does JK Rowling ( I was blown away with the Tom Green website ( here is someone who obviously has a keen interest in the online environment. It To produce our preview 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 buttons, we’ll embed short beyond the Facebook-type forums and look at ways to really get people to interact with your site. bursts of low quality video <prev 76 .net april 2008 NET174.tut_flash 76 13/2/08 12:32:27
  • 4. .net technique flash 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 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 In position With its visibility on, place the bright green button over the correct panel type in this chapter one. in the ‘test your weight’ graphic. Turning its visibility off will make the button invisible 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 naming the instances sequentially on the stage. Select the first frame of the at frame 2. actions layer and hit F9 to reveal the Actions panel. We’ll create a button With the visibility of the position layer turned on, return to the buttons function which we’ll use for all six buttons. Add the code at line 48: 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 function gotoIn() { the test your own weight graphic. Once in place, give this button the instance this.gotoAndPlay(“in”); 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 function gotoOut() { an invisible button in the first frame, it defines a clickable and solid – albeit this.gotoAndPlay(“out”); invisible – area, which the end user’s mouse will be able to identify as a clickable area. } The final stages Now wire this function up to the buttons. Add the code at line 57: It’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 seek_btn_1.onRollOver = gotoIn; Duplicate symbol box rename the file to btn 2 and click OK. seek_btn_1.onRollOut = gotoOut; Now enter this movieclip and change over the mask layer shape with seek_btn_2.onRollOver = gotoIn; the movieclip Button 2, change the video to fadevideo 2 and the text layer seek_btn_2.onRollOut = gotoOut; to chapter two. seek_btn_3.onRollOver = gotoIn; Give this new button the instance name of seek_btn_2 on the stage. seek_btn_3.onRollOut = gotoOut; Repeat this for the remaining buttons, changing the relevant symbols and seek_btn_4.onRollOver = gotoIn; seek_btn_4.onRollOut = gotoOut; seek_btn_5.onRollOver = gotoIn; Resources Sites with great video navigation 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 Camper creation Portfolio perfection embed YouTube content onto your websites. Take the time in Flash and your Proof, if proof were needed, Another great example of video work, whether it’s for business or pleasure, will always look professional. why creating your own video navigation comes from web integration using Flash pays designer Stuart Twigger on his About the author huge dividends. Here’s a great site portfolio site. The visitor sees a Name Paul Wyatt for Camper shoes: click around video of Steve bring up each of his and take inspiration from this menu items using a TV remote – Site excellent integration of Flash a humorous and imaginative way Areas of expertise Interactive web design, motion video and animation. to draw people in. graphics and video Clients The X Factor, Fanta, Smirnoff and Research Studios Best biscuit Happy Faces, because they’re so damn cheerful .net april 2008 77 NET174.tut_flash 77 13/2/08 12:32:28