CAP125 Tut 3dflash

7/27/2019 CAP125 Tut 3dflash

1/7

54 Project three xxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxx

Adobe Flash

Controlvideo in FlashPaul Wyatt shows

you how to weave togethermultiple time-lapse videoclips to create a stunning

interactive interaceVideo and Flash were made for each other. With a little

bit of coding know-how, its possible to sequence a set of videoclips to create a dramatic website interface that will impress

peers and clients alike. In this project we use our time-lapse videos eachtriggering the next to play to create a Flash website that works ina similar way to a DVD menu. We have a video opener movie with theobligatory skip button, ollowed by a movie that loops until the userclicks a button. That causes another movie to play, activating anevent at the end in this case, a browser window is opened.

We use simple code that switches the visibility o layers,and monitors how ar along each video has played. This code is

provided in ull on your cover disc, and can easily be tweaked oryour own interactive projects without the need to compile it romscratch. Youll also nd some tips or making and encoding yourown video clips i you choose to do so.

Paul WyattAward-winningdesigner and writerWyatt specialises inweb design andmotion graphics. Hisportolio o clientsincludes VirginMedia, D&AD andTalkback Thameswww.paulwyatt.co.uk

SkillsCreate an

interactive interaceUnderstand

basic coding in FlashCreate and

encode video clips inFLV ormat

Computer Arts Projects _July 2009 www.computerarts.co.uk

54 Project two User-centred design

On your discYoull nd the

resources you needto work along withthis project on yourcover disc, in theResources section.These include Flashles, code, and theoriginal QuickTimemovie le

CAP125.tut_3dflash 54 28/5/09 3:55:28 pm


2/7

xxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxx 55

Control video in Flash 55

www.computerarts.co.uk July 2009_ Computer Arts Projects

01 Open up partial_tutorial.fa on your cover disc. This is anActionScript 2 document with dimensions o 800x450 pixels.Change the name o the deault layer to intromovie by double-clicking it and typing in the new name. Select Window>Componentsto bring up the Components pop-up panel.

02 In the Components panel click the + icon to expand theVideo menu, and select FLVPlayback. Click and drag an instance othis onto the stage. Select the FLVPlayback component with theSelection 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.

CAP125.tut_3dflash 55 28/5/09 3:55:29 pm


3/7




04 Set the Component options by clicking the Value setting or autoPlay, and selectingTrue rom the drop-down options. Click in the Value box or contentPath to reveal the Content Pathpop-up menu. Click the older icon, and browse or the source le intro.fv on your cover disc. HitOpen, then click OK to close the pop-up box.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 towhere the Motion Editor is. Release and dock this panel here.

06 Drag a new FLVPlayback component rom the Components panel onto the loopmovielayer. Resize it to 800x450px, and position it at X and Y positions o 0 using the Property Inspector.Give the FLVPlayback component the instance name loopmovie.

05 In the Value option or skin choose None rom the Select Skin pop-up box. Hit OK to make theselection, and close the box. Click the Timeline tab, and create a new layer by clicking the New Layer iconlocated underneath the layer stack. Double-click the deault name, and name this loopmovie.

CAP125.tut_3dflash 56 28/5/09 3:55:31 pm


4/7

xxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxx 57Control video in Flash 57


08 Create a new layer namedhitmovie0. Add an FLVPlayback

component to the layer, and resize it asbeore to 800x450px. Give this componentthe instance name hitmovie0. Set theValue settings in the Component Inspectoror autoPlay to alse, then browse andselect the le hit0.fv rom your cover discor the contentPath value.

07 In the Component Inspector, set the Value settings or autoPlay to alse, skin toNone, then browse and select loop.fv rom your cover disc or the contentPath value.

09 Create a new layer named hitmovie1. Add anFLVPlayback component to the layer, and resize it to 800x450px.Give this component the instance name hitmovie1, and select thele hit1.fv or the contentPath value. Drag the hitmovie0 layerabove the hitmovie1 layer.

Encoding the videoAll the original QuickTime movie les are included on your cover disc, so you can try out a bit o FLV encoding. Youll

nd the Adobe Media encoder lurking in your Mac applications older, or i youre a PC user, the programme should be locatedhere:C:\Program Files\Adobe\Adobe Media Encoder CS4.

Open the encoder, and click Add to browse and add les to be encoded. Click the Preset option to choose anencoding prole we used Web Medium Quality. Hit Start Queue, and the movies will be encoded as FLV les into the samedirectory as the original QuickTime movies.

Recordingtips andtricks

The videoclips or this projectwere lmed with anHD mini-cam. Onehour o ootage wasspeeded up usingFinal Cut Pro tocondense it intothree minutes. I youdont have the time,energy or equipmentto produce your ownvideos, you canpurchase reasonablypriced ones romonline vendors likeiStockphoto (www.istockphoto.com).

10 Create a new layer and name it AS (or 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.

CAP125.tut_3dflash 57 28/5/09 3:55:31 pm


5/7



13 Create another layer and name it labels. Drag an instance o 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.

14 The buttons are created by overlaying two transparent movie clips over thelabels layer. Create a new layer named hitbuttons. Drag two instances o buttonoverlayrom 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 thepercentage box under Color Eect.

Creative possibilitiesAnother application o this code and technique could be to use a stock video o an

explosion or your intro movie. Using Adobe Premiere, Ater Eects or Final Cut, you could edit thismovie to reeze at the explosion point. Your loop movie could then be a slow-motion version o theexplosion, while your hit movies could show the whole explosion reversed at high speed. There arecountless creative possibilities to explore.

12 Create a new layer named title. Drag an instance o the movie clip title onto this new layer rom thelibrary. As the Opacity is set at 0 on the rst rame o this movie clip, click the coloured square next to the layer nameto outline the layer and help you position it at X: 27 and Y: 27.

11 Create a new layer and name it skipbutton. Drag an instance o skipbutton romthe library onto the new layer. Position this at X: 636 and Y: 385. Give it the instance name oskipbutton in the Properties Inspector.


CAP125.tut_3dflash 58 28/5/09 3:55:32 pm


6/7

xxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxx 59


17 The code works by changing the visibility o our our FLVPlayback componentsaccording to whether a movie has nished playing, or the user has clicked a button. Lines16 o the code set up the variables or the project, and the initial visibility state or the loopmovie. A variable stores a particular value, and here we set them up or our buttons

(currentButton), intro movie (introObject), loop movie (loopObject), the links, and one orwhen the mouse is released ater a click (releaseObject).

15 Use the Property Inspector to give instance names toeach button. Name your rst button hitbtn0 and your second onehitbtn1. Giving the buttons instance names will make theminvisible, and also allows them to be targeted with ActionScript.

16 Time to add the code to make all this work. Open the nished example project.fa on your cover disc.Go to the AS layer, and select and copy all the ActionScript ound in the Actions panel. Return to your working le, andpaste this in your own Actions panel in the corresponding AS layer. All o the working code is in place: the remainingsix steps o this tutorial aim to explain how it works, as well as highlighting any elements that can be tweaked toapply to your own project.

18 Lines 819 dene what unction occurs when our intro movie (here reerred to using its variable name,introObject) has nished playing. It then uses our FLVPlayback and movie clip instance names to dene actions orthese 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 rame two and plays (line 16), and its the skip buttonsturn to become invisible (line 17).

Time-lapse using GawkerI this project has inspired you to create your own time-lapse videos, the Mac program

Gawker (www.gawker.sourceorge.net) is a great place to start. You can use any camera attachedto a Mac to produce time-lapse videos that are simple to set up. Gawker also allows you to speciythe number o rames youd like to capture over a given time period, providing you with a hugeamount o creative control over your movies.

Control video in Flash 59

CAP125.tut_3dflash 59 28/5/09 3:55:33 pm


7/7

60 Project three xxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxx60 Project two User-centred design


21 Lines 5667 enable a movie to play with a button. Each sequentially namedbutton (hitbtn0, hitbtn1 and so on) is associated with an FLVPlayback component o thesame prex name (hitmovie0 and hitmovie1, or instance). This is a great, dynamic way toadd more buttons and movies without having to write more code. Make sure your buttonsare prexed the same, then do the same or your FLVPlayback components, ensuring theyare named prexname0, prexname1, and so on.

22 Lines 6974complete the project. Theyspeciy that once the userreleases their mouse button

(releaseObject) ater clickingone o the buttons, the linksvariable should open up a newbrowser window to display thecorresponding link, which isdened in line 5 o the code(step 17). O course, youllneed to change these to applyto your project. Links arelisted sequentially, and relateto the naming convention oryour buttons or example,hitbtn0 will open the rstlisted link, hitbtn1 will openthe second, and so on. Test

your project to make sure thatall the buttons do what theyresupposed to, and youre done.

19 Lines 3747 dene the actions or what happens when the Skip button is pressed. These actions are thesame as in step 18. We also activate the buttons (line 44). This bit o code looks at any movie clip that has hitbtn atthe start o its name and, provided these clips are sequentially named (hitbtn0, hitbtn1 and so on), the same unctionwill be applied to them. In this case, they are activated or use (enabled = true).

20 Lines 5354 use the instance names intromovie and loopmovie, and add anEventListener to listen or when the intro movie has stopped playing. At this point, theEventListener attached to the loop movie tells the FLV to start playing.

CAP125.tut_3dflash 60 28/5/09 3:55:34 pm

CAP125 Tut 3dflash

Documents

Transcript of CAP125 Tut 3dflash