Control Video in Flash: Paul Wyatt Shows

54
54
Project two User-centred design Project three xxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxx
Adobe Flash
Paul Wyatt shows you how to weave together multiple time-lapse video clips to create a stunning interactive interface
Video and Flash were made for each other. With a little bit of coding know-how, its possible to sequence a set of video clips to create a dramatic website interface that will impress peers and clients alike. In this project we use four time-lapse videos each triggering the next to play to create a Flash website that works in a similar way to a DVD menu. We have a video opener movie with the obligatory skip button, followed by a movie that loops until the user clicks a button. That causes another movie to play, activating an event at the end in this case, a browser window is opened. We use simple code that switches the visibility of layers, and monitors how far along each video has played. This code is provided in full on your cover disc, and can easily be tweaked for your own interactive projects without the need to compile it from scratch. Youll also find some tips for making and encoding your own video clips if you choose to do so.
Control video in Flash
Paul Wyatt Award-winning designer and writer Wyatt specialises in web design and motion graphics. His portfolio of clients includes Virgin Media, D&AD and Talkback Thames www.paulwyatt.co.uk
On your disc Youll find the resources you need to work along with this project on your cover disc, in the Resources section. These include Flash files, code, and the original QuickTime movie file
Skills Create an interactive interface Understand basic coding in Flash Create and encode video clips in FLV format
Computer Arts Projects _July 2009
www.computerarts.co.uk
CAP125.tut_3dflash 54
28/5/09 3:55:28 pm
Control video in Flash xxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxx
55 55
Open up partial_tutorial.fla on your cover disc. This is an ActionScript 2 document with dimensions of 800x450 pixels. Change the name of the default layer to intromovie by doubleclicking it and typing in the new name. Select Window>Components to bring up the Components pop-up panel.
01
02
In the Components panel click the + icon to expand the Video menu, and select FLVPlayback. Click and drag an instance of this onto the stage. Select the FLVPlayback component with the Selection tool. Go to Position and Size in the Properties Inspector panel, and change the width (W) to 800px and height (H) to 450px. Set X to O, and Y to 0.
July 2009_ Computer Arts Projects
28/5/09 3:55:29 pm
56 56
04 03
In the Properties Inspector panel give the FLVPlayback component the instance name intromovie. Go to Window>Component Inspector. Click on the Component Inspector tab, and drag it below the stage to where the Motion Editor is. Release and dock this panel here.
Set the Component options by clicking the Value setting for autoPlay, and selecting True from the drop-down options. Click in the Value box for contentPath to reveal the Content Path pop-up menu. Click the folder icon, and browse for the source file intro.flv on your cover disc. Hit Open, then click OK to close the pop-up box.
05
In the Value option for skin choose None from the Select Skin pop-up box. Hit OK to make the selection, and close the box. Click the Timeline tab, and create a new layer by clicking the New Layer icon located underneath the layer stack. Double-click the default name, and name this loopmovie.
06
Drag a new FLVPlayback component from the Components panel onto the loopmovie layer. Resize it to 800x450px, and position it at X and Y positions of 0 using the Property Inspector. Give the FLVPlayback component the instance name loopmovie.
28/5/09 3:55:31 pm
57 57
08
Create a new layer named hitmovie0. Add an FLVPlayback component to the layer, and resize it as before to 800x450px. Give this component the instance name hitmovie0. Set the Value settings in the Component Inspector for autoPlay to false, then browse and select the file hit0.flv from your cover disc for the contentPath value.
09
Create a new layer named hitmovie1. Add an FLVPlayback component to the layer, and resize it to 800x450px. Give this component the instance name hitmovie1, and select the file hit1.flv for the contentPath value. Drag the hitmovie0 layer above the hitmovie1 layer.
Encoding the video
07
In the Component Inspector, set the Value settings for autoPlay to false, skin to None, then browse and select loop.flv from your cover disc for the contentPath value.
All the original QuickTime movie files are included on your cover disc, so you can try out a bit of FLV encoding. Youll find the Adobe Media encoder lurking in your Mac applications folder, or if youre a PC user, the programme should be located here: C:\Program Files\Adobe\Adobe Media Encoder CS4. Open the encoder, and click Add to browse and add files to be encoded. Click the Preset option to choose an encoding profile we used Web Medium Quality. Hit Start Queue, and the movies will be encoded as FLV files into the same directory as the original QuickTime movies.
Recording tips and tricks

The video clips for this project were filmed with an HD mini-cam. One hour of footage was speeded up using Final Cut Pro to condense it into three minutes. If you dont have the time, energy or equipment to produce your own videos, you can purchase reasonably priced ones from online vendors like iStockphoto (www. istockphoto.com).
10
Create a new layer and name it AS (for ActionScript). Select Window>Actions to reveal the Actions panel. Click, drag and release the panel next to the Component Inspector tab underneath the stage area.
28/5/09 3:55:31 pm
58 58
Create a new layer and name it skipbutton. Drag an instance of skipbutton from the library onto the new layer. Position this at X: 636 and Y: 385. Give it the instance name of skipbutton in the Properties Inspector.
11
12
Create a new layer named title. Drag an instance of the movie clip title onto this new layer from the library. As the Opacity is set at 0 on the first frame of this movie clip, click the coloured square next to the layer name to outline the layer and help you position it at X: 27 and Y: 27.
Creative possibilities
Another application of this code and technique could be to use a stock video of an explosion for your intro movie. Using Adobe Premiere, After Effects or Final Cut, you could edit this movie to freeze at the explosion point. Your loop movie could then be a slow-motion version of the explosion, while your hit movies could show the whole explosion reversed at high speed. There are countless creative possibilities to explore.
14
Create another layer and name it labels. Drag an instance of the movie clip buttonlabels onto this layer. As in step 12, use the layer outline mode to help position it at X: 435 and Y: 311. Give this the instance name labels.
13
The buttons are created by overlaying two transparent movie clips over the labels layer. Create a new layer named hitbuttons. Drag two instances of buttonoverlay from the Library, and position one at X: 83.5 and the other at Y: 411. Select each button, and in the Properties Inspector panel select Style: Alpha, and then enter 0 in the percentage box under Color Effect.
28/5/09 3:55:32 pm
59 59
15
Use the Property Inspector to give instance names to each button. Name your first button hitbtn0 and your second one hitbtn1. Giving the buttons instance names will make them invisible, and also allows them to be targeted with ActionScript.
Time-lapse using Gawker
If this project has inspired you to create your own time-lapse videos, the Mac program Gawker (www.gawker.sourceforge.net) is a great place to start. You can use any camera attached to a Mac to produce time-lapse videos that are simple to set up. Gawker also allows you to specify the number of frames youd like to capture over a given time period, providing you with a huge amount of creative control over your movies.
Time to add the code to make all this work. Open the finished example project.fla on your cover disc. Go to the AS layer, and select and copy all the ActionScript found in the Actions panel. Return to your working file, and paste this in your own Actions panel in the corresponding AS layer. All of the working code is in place: the remaining six steps of this tutorial aim to explain how it works, as well as highlighting any elements that can be tweaked to apply to your own project.
16
The code works by changing the visibility of our four FLVPlayback components according to whether a movie has finished playing, or the user has clicked a button. Lines 16 of the code set up the variables for the project, and the initial visibility state for the loop movie. A variable stores a particular value, and here we set them up for our buttons (currentButton), intro movie (introObject), loop movie (loopObject), the links, and one for when the mouse is released after a click (releaseObject).
17
Lines 819 define what function occurs when our intro movie (here referred to using its variable name, introObject) has finished playing. It then uses our FLVPlayback and movie clip instance names to define actions for these objects. Lines 1314 tell the loop movie to become visible, and then to start playing. The intro movie then becomes invisible (line 15). Finally, our labels movie clip goes to frame two and plays (line 16), and its the skip buttons turn to become invisible (line 17).
18
28/5/09 3:55:33 pm
60 60
Lines 5354 use the instance names intromovie and loopmovie, and add an EventListener to listen for when the intro movie has stopped playing. At this point, the EventListener attached to the loop movie tells the FLV to start playing.
20
Lines 3747 define the actions for what happens when the Skip button is pressed. These actions are the same as in step 18. We also activate the buttons (line 44). This bit of code looks at any movie clip that has hitbtn at the start of its name and, provided these clips are sequentially named (hitbtn0, hitbtn1 and so on), the same function will be applied to them. In this case, they are activated for use (enabled = true).
19
Lines 5667 enable a movie to play with a button. Each sequentially named button (hitbtn0, hitbtn1 and so on) is associated with an FLVPlayback component of the same prefix name (hitmovie0 and hitmovie1, for instance). This is a great, dynamic way to add more buttons and movies without having to write more code. Make sure your buttons are prefixed the same, then do the same for your FLVPlayback components, ensuring they are named prefixname0, prefixname1, and so on.
21
Lines 6974 complete the project. They specify that once the user releases their mouse button (releaseObject) after clicking one of the buttons, the links variable should open up a new browser window to display the corresponding link, which is defined in line 5 of the code (step 17). Of course, youll need to change these to apply to your project. Links are listed sequentially, and relate to the naming convention for your buttons for example, hitbtn0 will open the first listed link, hitbtn1 will open the second, and so on. Test your project to make sure that all the buttons do what theyre supposed to, and youre done.
22
28/5/09 3:55:34 pm

Control Video in Flash: Paul Wyatt Shows

Uploaded by

Copyright:

Available Formats

Control Video in Flash: Paul Wyatt Shows

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Control Video in Flash: Paul Wyatt Shows

Uploaded by

Copyright:

Available Formats

54

Project two User-centred design Project three xxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxx