From after effects to flash poetry in motion graphics - part 2 pdf

Create your own custom video player for Flash.. A brief word on streaming Before you convert the video created in the previous chapter to the Flash Video format,you must understand the f

12.Save the file This will create an AEP file that retains all of the project settings This

is an extremely valuable file in situations where changes need to be made to thevideo

13.Quit After Effects 7

14.Locate the QuickTime file you have just created and open it in QuickTime (seeFigure 1-24)

Figure 1-24 The project playing in the QuickTime player.

Summary

This chapter has lived up to its title—“From Concept to Final Product in After Effects 7.”

It also started us on our dragon hunt

You started off the chapter by learning how to create a project and a new Composition inAfter Effects In many respects, once you learn how to create a new Composition in AfterEffects, you will repeat these steps innumerable times as you create motion graphics foruse in Flash 8 The key aspect of the Composition is ensuring you maintain the 4:3 aspectratio of the video’s dimensions and that you use square pixels They are important whenthe video is used in Flash

You were also shown how to add content to the timeline, how to trim content to specificdurations on the timeline, and how to move clips and layers around in the timeline Wealso showed you how manipulate the content by adding keyframes to a layer and scaling

or changing the opacity of a clip between those keyframes In many respects, you have covered there is very little difference between a keyframe in After Effects and its Flashcounterpart

We also showed you how to add and format text, how to create a new solid, and how toadd audio to the project

The chapter finished by using the Render Queue to output the final QuickTime movie

In the next chapter, we continue our dragon hunt by converting the video you havecreated to an FLV file, and you will learn how to play the video through the newFLVPlayback component We are also going to show you how to create your own customplayer in Flash that does everything the FLVPlayback component does but in a space that

is rather small See you there

2 FROM FINAL PRODUCT TO UPLOAD

IN FLASH PROFESSIONAL 8

In the previous chapter, you created a video using After Effects In this chapter, you pare the video for playback in Flash Professional 8 and upload it to your website.

pre-The phrase “prepare the video for playback in Flash Professional 8” is what has really ten the attention of web developers and their clients Ever since the late 2005 introduction

got-of Flash Prgot-ofessional 8, it seems like video has exploded across the Web One got-of the sons, as you will soon discover, is that Adobe pulled off the impossible: they made webvideo more feature-rich but easier to create and deploy than ever before Almostovernight, it seemed, web video moved from being seen as an interesting feature to amust-have element in websites

rea-In this chapter, we are going to do the following:

Convert a QuickTime video to Flash Video (FLV) format

Use the Flash components to play the video

Create your own custom video player for Flash

A brief word on streaming

Before you convert the video created in the previous chapter to the Flash Video format,you must understand the following:

Flash Video streams into the Flash Player from your web server

The decisions you make before you create the video will directly impact whetherthe viewer has a positive or a negative experience with the video

The key word is stream, which is a fancy word that describes the flow of information from

the server to the SWF in the web page The best way of envisioning a stream is to regard it

as being like a river that connects a lake in a mountain to a lake in a valley The water flowssmoothly from the lake in the mountain, down the river, and into the lake in the valley.The water in the river moves at a constant speed, and the water rarely overruns the banks

of the river, flooding the town that straddles the river Let’s assume that a rather large storm occurred over the lake in the mountain and a foot of rain falls into the lake Thatamount of water will rush out of the lake, down the river, flood the town, and eventuallyrun into the lake in the valley, causing it to overrun its banks It is no different with FlashVideo

rain-When it comes to streaming, the river is the connection, or pipe, between the server and the Flash Player The width of the connection, bandwidth, determines how much informa- tion can flow into the Flash Player, and how fast the river flows is the data rate If too much

information flows down the pipe, it will clog the Flash Player, and the user will experienceinordinate wait times; video that plays, stops, replays; or even video that is jerky It is theprudent Flash designer who has not only a design strategy in place but also a bandwidthstrategy as well

In very basic terms, streaming is the distribution of real-time or live audio or video throughthe Internet

For the purposes of this discussion, there are three primary characteristics that definestreaming media:

It enables real-time or on-demand access to audio/video content through theInternet That means the audio or the video plays immediately—there is no delay

The ability to provide on-demand content can’t be understated Any video youproduce can be accessed at any time from anywhere

It is transmitted by a media server application (for example, a Flash Media Server orReal Media Server) and is played back and processed by a client player application(in this case Flash Player 8 or RealPlayer) as it is received

In basic terms, the video is transferred to a web page using a server applicationsuch as a web server or a Flash Media Server and is displayed in a browser using aclient application such as Flash Player 8 The rate the data is fed into the client bythe server is, in general terms, the stream This stream of data into a Flash Player isthe key issue surrounding the successful delivery and playback of a video If toomuch information is moving into the client, it can’t keep up When this happens,

the information is buffered A buffer is nothing more than a place where enough

data is stored to start playing the video and to play it successfully through to pletion Videos that take an inordinate amount of time to load and play or thatstart and stop are symptomatic of a developer who didn’t pay attention to thestream of data from the server to the client

com-Though a hallmark of web media technologies is that a file has to download before it starts

to play, Flash moves in a different direction It uses a progressive download, which starts

the video playing before the download completes

Streamed files are received, processed, and played when they arrive, and no ual copy of the video is left behind

resid-This is true of files that are streamed to Flash Player 8 through a Flash Media Server

FLV files arriving via your regular web server will wind up in the browser cache

Obviously, if security of the files is paramount, the Flash Media Server is a logicalsolution

The importance of data rate

One of the fundamental maxims of working with digital video is this: Data rate controls

quality Bandwidth controls the user experience.

Regardless of which computer platform is used, the pipe is your prime consideration, and

when it comes to creating and playing Flash video, always keep an eye on the pipe.

The pipe can make or break the user’s experience If he or she has a lot of bandwidth, such

as a T1 line in a corporation or high-speed Internet at home, that user can view full-lengthmovies with little or no disruption If the user is in a remote or rural situation, the odds arevery good he or she has a dial-up modem, meaning his or her bandwidth is limited

2

To wrap your mind around the differences, think of a highway tunnel that goes under alake If the tunnel is part of a four-lane highway, thousands of cars simply approach thetunnel and zip through it at the posted speed This is because the tunnel’s entrance isthe same width as the highway.

Now abruptly reduce the diameter of the tunnel from four lanes to one lane each way.Now thousands of cars have to squeeze into one lane of traffic and reduce their speed to

a crawl as they approach the tunnel’s entrance and proceed into the tunnel; we have allexperienced how infuriating such a delay can be The cars in this example represent data,and how fast they move represents the data rate Think of a T1 line as being the tunnel forthe four-lane expressway and the single-lane tunnel as dial-up service, the highway is theserver, and the user is the poor guy behind the steering wheel in the car

It goes without saying that when you plan to deliver video, you need to have a solid width strategy in place for the user, the server, and the video The server bandwidth strat-egy must take into account the maximum number of users that can access the video at anyone time The last thing you need is for your user to get into the middle of a traffic jamwaiting to download and view the video

band-When it comes to the user, you need to be aware of the width of the tunnel up ahead Youneed to leave enough room for the data stream but also other Internet activities Notdoing this is quite similar to having a transport truck sitting at the side of the road and jut-ting out into traffic Things will stop or seriously slow down as the cars reduce their speed

to avoid driving into the back of the truck In a dial-up situation, a user with a 56.6K nection can drive along the highway at 56.6 kilobits per second (Kbps) When it comes tovideo, a target data rate of 40 Kbps, which leaves room for other activities, is normal

con-So what is data rate? Data rate is simply the amount of data (cars on a highway in our ogy) transferred per second to the user’s computer This in turn determines the bandwidthrequired to play the video The data rate calculation is

anal-Data rate = (w ✕ h ✕ color depth ✕ frames per second)/compression

Let’s do the data rate calculation for the video created in the previous chapter The video’svalues are

Width: 320Height: 240Color depth: 24Frames per second: 15Compression: 60 (The benchmark compression ratio for both ON2 Flix andSorenson Squeeze is 60:1.)

Data rate = (320 ✕ 240 ✕ 24 ✕ 15)/60

Data rate = (27,648,000)/60 Data rate = 460,800

The data rate for the video at 15 frames per second (fps) is 460,800 bits per second (bps),

or 461 Kbps The second line of the calculation is there for a deliberate reason If you were

to apply no compression to the video, you would use a data rate of about 27.6 million bps

To deliver that video, you would need an Internet connection the size of the tunnelbetween Britain and France Toss in the compression, and the video can safely be delivered

compres-Remember, video is composed of both an audio track and a video track The number youset affects just the video track If you look at the data rate for the audio track, it was set to

96 Kbps This means the data rate for the video is 496 Kbps

Keyframes and streaming

Other factors that could impact the user experience are frame rate and keyframeplacement

Frame rate is the speed at which a video plays One of the more common frame rates

for digital video is 29 or 30 fps, which matches the North American video standard of29.97 fps Another common frame rate is 24 fps Regardless of which one you have beenhanded, there will be occasions when you may wish to reduce the rate such as in low-bandwidth situations If you want to lower the frame rate, you should use equal divisions

of the source frame rate For 30 fps, use 15 fps, 10 fps, 7.5 fps, and so on For 24 fps, use

12 fps, 8 fps, 6 fps, and so on

The Flash Player supports a maximum data rate of 4 megabits per second (Mbps).

2

Be careful when you consider playing with the frame rate Your FLV frame rate should be

as close to the Flash frame rate as possible The reason is the audio track in the video—italways plays back at the original frame rate Let’s assume you create an FLV file that uses

24 fps Place that in a Flash movie that plays back at 12 fps The video portion will play at

12 fps, but the audio will zip along at 24 fps a nasty scenario to say the least

Keyframes in video, in many respects, are similar to keyframes in Flash In video, a keyframe

contains all of the data in that frame—where they part company is in what happens

between the keyframes In video, the frames between the keyframes are called difference

frames , also referred to as delta frames by techie types Difference frames remove the

stuff that doesn’t move or change from each frame between the keyframes This meansthe file size is reduced Now let’s be very careful because a bad decision here can ruin yourwork

If you were to stand at the side of a major city intersection and shoot cars and peoplewalking by, there is going to be a lot of change and very few difference frames Now sayyou were to take your camera into a farmer’s field and shoot some footage of a tree.There wouldn’t be a lot of change, meaning there could be a lot of difference frames Thisexplains why a 30-second video of a Formula One race is a lot larger in file size than that

of a 30-second video of a tree in a field Fewer difference frames means larger file size.The problem is, if you spread out the keyframes in the Formula One video, the figure qual-ity degrades and looks blurry We wish we could say to you there is a hard-and-fast ruleabout keyframe frequency, but there isn’t

Before you encode the video, watch the video and see whether there is a lot of movementboth in the video and with the camera This will determine the keyframe frequency

By spreading out the keyframes, you can have quite a positive impact upon the final size

of the FLV file What you don’t want to do is to think all video is created equally If there is

a lot of motion—a Formula One race—you will need more keyframes If you have a ing head” video—a tree in a field—you can get away with fewer keyframes The bottomline is this decision is up to you, but it is the prudent developer who reviews the entirevideo prior to converting the file to FLV

“talk-Frame size

Another major factor to consider is the physical size of the video The larger the video is onscreen, the greater the demand it places on bandwidth Common video sizes are listed here:

NTSC: 640✕48 PAL: 768✕576 (This is the European standard.) Wide screen: 720✕576

Flash Video: Pick a number

If you are going to be building a custom video controller that contains

a scrubber, one keyframe per second is the benchmark.

Obviously, creating an FLV file at 720✕576 is going to pose a huge issue to the poor viewer.

This is why most FLV files use 320✕240, 240✕180, 160✕120, and 80✕60 Even so, the

astute developer keeps the user, not the technology, foremost in mind, creating the video

by targeting the bandwidth

A larger video—320✕240—requires more screen real estate It will also have a higher

res-olution and better quality The downside is a larger file size and a rather large appetite forbandwidth, making it difficult, at best, for the poor user with a dial-up connection

On the other hand, a smaller video—240✕180 or 160✕120—has a smaller browser

foot-print, and the trade-off will be a decrease in resolution and detail The upside, of course,

is a smaller file size and a reduced bandwidth requirement

When you use the Flash 8 Video Encoder or any other application that creates the FLV file,you will be asked the following questions regarding how the FLV file will be created:

What bit rate will be used to stream the video?

What frame size will be used to present the video?

What frame interval should be used for the keyframes?

So much for theory, let’s get to work

Creating the FLV file using the Flash 8 Video

Before you start converting your After Effects videos to the FLV format, you need to have

a deployment strategy in place This strategy asks a simple question:

What version of the Flash Player will be targeted?

The answer will determine which codec will be used in the Flash 8 Video Encoder to press the video and the components you can use If you are targeting Flash Player 6 or 7,you can’t encode a video containing an alpha channel (which allows you to define trans-parency levels in your video), and you can’t use the new FLVPlayback components inFlash 8 Though you can use both of the codecs—Sorenson Spark and ON2VP6—thatcome bundled with the Video Encoder, it is better you stay with the Sorenson Spark codec

com-In fact, if you choose one of the presets aimed at Flash Player 7, the default codec will bethe Sorenson Spark codec

2

1.Launch the Flash 8 Video Encoder In both the Mac and the PC versions of Flash,the Video Encoder can be found in the Flash application folder on your hard drive.

On the PC, the application can be found at C:\Program Files\Macromedia\Flash 8 Video Encoder On the Mac, it can be found at MacintoshHD\Applications\Macromedia\Flash 8 Video Encoder

2.When the Video Encoder opens, locate the video prepared in the previous chapter(a copy of the file, FinalOpener.mov, can be found in the Exercise folder withinthe Chapter 2 code download), and drag and drop it onto the interface When yourelease the mouse, the video will drop into place, and you will be shown the com-pression to be applied to the file and whether the file has been encoded as shown

in Figure 2-1

Figure 2-1 You can drag and drop a video into the Video Encoder or you can use the File menu.

The next step is not to click the Start Queuebutton, which will start encoding the videousing a preset value You are about to discover you really don’t need to use the presets.Leave them to the rookies

Another method of adding a video to the Video Encoder is to select File➤

Addor click the Add button as shown in Figure 2-1, and, when the Open

dialog box appears, navigate to the folder containing the video.

3.Select the file and click the Settings button to open the Flash Video EncodingSettingsdialog box When it is open, click the Show Advanced Settingsbutton tobring up the Advanced Settings options as shown in Figure 2-2.

Figure 2-2 The Video Encoder’s advanced options

When you click the Show Advanced Settingsbutton, the entire interface opens At the top,the pull-down menu presents you with a number of preset encoding values These presetsare aimed at either Flash Player 7 or Flash Player 8 If you choose a Flash 7 preset, theSorenson Spark codec will be used, and, if you choose a Flash 8 preset, the ON2VP6 codecwill be used for the compression You can also scrub across the video using the scrubbut-ton and even set the In and Out points for the encoding by dragging the sliders under thescrubber

The next areas ask how you wish to treat the video and the audio tracks in the video

4.Make sure the Encode video box is checked and select ON2VP6 from the Videocodecpull-down menu

5.Click the Qualitypull-down menu and select Customfrom the choices

6.You will now notice that the Max data ratearea is no longer grayed out Enter 300

as the Max data rate

2

The number you just entered into the Max data ratearea is an arbitrary number The sion regarding data rate is one we consider as being subjective, not objective The reason,

deci-as we pointed out earlier, is that data rate determines quality, and no two people can everagree on a definition for quality The best advice we can give you here is to experimentwith various rates and determine which settings best suit your quality needs

7.Check the Encode audiobox to ensure the audio track will be encoded into the FLVfile Not selecting it will result in your producing a video for the deaf Select

48 kbps (mono)from the Data ratepull-down menu

This is another area where all decisions are subjective The reason we selected a monotrack with a relatively medium data rate was because we are “falling in love with the user,not the technology.” You can’t just assume that all your users have decent sound systemsattached to their computers that would justify medium-quality stereo sound You maychoose to disagree, of course Reducing the file from stereo to mono also reduces the size

of the audio track by 50%, which means the sound will stream and be processed by theuser’s computer that much faster

8.Click once in the Output file name area and name the file Opener If your VideoEncoder settings resemble those in Figure 2-3, click OK to return to the mainVideo Encoder window

Figure 2-3 The encoding settings for the project

9.When you return to the Video Encoder window, click the Start Queuebutton Theprocess will start, as you see in Figure 2-4, and you will be shown the progress ofthe encoding process and the settings used If you make a mistake, you can alwaysclick the Stop Queuebutton To return to the encoding settings, select the video inthe Video Encoder window and selectEdit ➤Reset Status.

Figure 2-4 The video is being encoded.

When the encoding finishes, the FLV file will be placed in the same directory as theQuickTime MOV that was just encoded At this stage, you can select the file in the windowand click the Removebutton to remove the video from the queue If you do remove thevideo, you won’t be deleting the original video In fact, a dialog box will open that reas-sures you this isn’t the case If you realize you made a mistake with one of the settings, andyou haven’t removed the video from the queue, select the video and then selectEdit ➤

Reset Status This essentially tells the Video Encoder the video is going to be encoded, and,when you click the Settingsbutton, the encoding settings applied to the video will beintact

10.Quit the Video Encoder

You are now in for a very pleasant surprise If you open the folder containing theQuickTime movie and the FLV file you just created, you will notice that the video is 19MB

in size, while the FLV file you just created is about 1.5MB This is quite normal, and, whenyou create and test the video player in the next exercise, you will also discover a seriousfile-size reduction does not mean a major quality sacrifice on your part

The FLV file you created can only be read by the Flash Player You can’t double-click the FLV file and preview the video If you wish to do that, head over to www.

download.com and do a search for FLV players They offer the current version of FLV

Player (at the time of this writing it is 1.3.3.) of one of the best, by Martijn de Visser.

2

Figure 2-5 You can go directly to the Video Encoder from After

Effects using the Export menu in After Effects

Playing an FLV file in Flash Professional 8

Now that you have created the FLV file, you are half the way there to getting the video toplay on a website The balance of this chapter is designed to show you four ways ofaccomplishing this task:

Use the new Flash 8 FLVPlayback component

Use the Flash 6-7 MediaPlayback component when Flash Player 6 or the FlashPlayer 7 is your target player

Use the FLVPlayback UI controls to create a custom player

Create your own player

You should be aware the last two methods will require the use of ActionScript to make theplayer fully functional If you have never been exposed to ActionScript, don’t let that get

in your way The code presented will get you up and running in no time and does notget into the really advanced stuff you can do with ActionScript In fact, the code to be pre-sented is the absolute minimum you need to know to stream video

If you are a hardcore After Effects user, you have probably read this section and dered why we were wasting our time You can create the FLV file right out of After Effects 7 by selectingFile ➤Export ➤Macromedia Flash Video (FLV), as demonstrated in Figure 2-5 You are absolutely correct, but doing so opens the Flash 8 Video Encoder.

won-By reviewing the application, you now know how to use the window that opens when you choose that menu item in After Effects.

The other thing to keep in mind is you are eventually going to have to use ActionScript

in your video endeavors You won’t be able to avoid it Let’s look a couple of scenarios,shall we?

You are the master of your After Effects universe and have decided to permit the world tomarvel at your After Effects prowess on your website The design is quite radical, and thedesign of the FLVPlayback component simply doesn’t mesh with your design Though youcan change the look and feel of the component, in the hands of someone who is new toFlash or has a basic understanding of ActionScript, changing a component is not recom-mended You will need to create your own video player, and, to do that, you will need tocreate your own custom controller

In the second scenario, your work is going to appear in an ad on one of the major sites outthere The problem is, you have been told that the SWF file you create for the video can

be no more than 30K in size Considering the fact the FLVPlayback component adds 37K to

a SWF file, you are going to have to create your own player to fit

You may be looking at those two scenarios and thinking, “As if that will ever happen!” Wecan assure you, it will The standard file size for a SWF file in any rich media ad on a page

is around 40K, and the car and movie companies are not using the components for thatvery reason They are creating their own custom players to meet that constraint Anotherexample is CNET.com, who make extensive use of Flash Video on their site and use theirown custom controller Try navigating to www.cnet.com and looking around the site for

a bit

Using the Flash 8 FLVPlayback component

This is where everybody starts with Flash Video because it is both easy to do and “codefree.”

1.Open a new Flash document and save it to the Chapter 2 Exercise folder—we’llleave what to name the file up to you The reason for this is “basic self-defense.” Byhaving the FLA and the FLV files in the same folder, you will never lose the path toyour video

2.SelectWindow ➤Componentsto open the Componentspanel

3.Click FLVPlayback—Player 8once and when it opens drag a copy of the FLVPlaybackcomponent to the stage You will most likely see a big black box (shown in Figure2-6) with an FLV icon in the middle If there are controls visible, they are the onesassigned when the component was last used

2

Figure 2-6 The component is on the stage.

4.Click the component on the stage once and then select the Parameterstab in theProperty inspector This is where the video is added to the component

5.Double-click the contentPatharea of the component to open the Content Pathlog box (see Figure 2-7) Click the Browse button (the foldericon) to open theBrowse for FLV Filedialog box Navigate to the folder containing the FLV you justcreated Select the FLV file and click the Openbutton The dialog box will close andthe name of the selected FLV file will appear in the Content Pathdialog box

dia-Figure 2-7 The FLV file to be added to the component is select through the Content Path

dialog box

6.Select the Match source FLV dimensionscheck box The neat thing about this checkbox is it reads the height and width metadata that was added to the FLV file whenyou created it This means, for example, if you have an FLV file that is 723 pixelswide and 124 pixels high, the component will automatically spring to those dimen-sions Click OKto close the dialog box and return to the Parameterspanel in theProperty inspector

7.Scroll down the parameter list and double-click the Skinarea to open the SelectSkin dialog box Select SteelExternalAll.swf, as shown in Figure 2-8, fromthe list.

Figure 2-8 You can choose from among 27 different skin styles.

There are a couple of things to be aware of when choosing a skin Pay attention to theminimum width number associated with the skin If the FLV file is only 240 pixels wide andthe minimum width is 270 pixels, the controller will not fit the video The other thing to beaware of is if you choose one of the skins with “over” in its name, the controller willappear over the video In this case, you have a decision to make If you want the controls

to be visible for the entire video, set the autoHideproperty in the Parameterstab—the onejust under the Skinparameter—to false The controls will appear over the video and willhide what is under them If you set the autoHide parameter to true, the controls will appearanytime the user rolls over the video

If you see a path such as C:\Documents\My Documents\Videos\myVideo.flv in the

contentPatharea, you are about to experience a world of hurt That path will be wired into the SWF file, and, when you try to play the video from your website, the SWF file will follow the path and inform whoever was unlucky enough to select the video that the path can’t be found This is why it makes sense to place the SWF file in the same folder as the FLV file.

hard-Yes, you can use a remote location for your FLV files If you have a number of them in

a folder on your site, you can set the path to http://www.mysite.com/FLVfolder/

myVideo.flv.

2

8.Save the movie and test it by pressing Ctrl+Enter (PC) or Cmd+Return (Mac) Themovie will be exported as a SWF file and, when it finishes exporting, the Export dia-log box will close and the video will start playing as shown in Figure 2-9 When youfinish the video, click the closebutton to return to Flash.

Obviously there is a lot of wasted space in this movie The video sits on an overly largestage Next, you’ll fit the stage to the video and along the way discover a rather nastygotcha associated with the FLVPlayback component

1.When you return to Flash, select the component on the stage and then click thePropertiestab of the Property inspector

2.Set the X and Ycoordinates for the component to 0 The video will now tuck upagainst the top-left edge of the stage

3.Click the stage once and then click the Sizebutton in the Property inspector Thiswill open the Document Propertiesdialog box

4.Click the Contentsbutton and click OK When the dialog box closes, you will noticethat the stage has shrunk to fit the video

Not quite In fact “GOTCHA!!!”

The SWF file you created should be regarded as being a test SWF file Testing

a Flash movie is not the same as publishing a Flash movie Though a SWF file

is created when you test the movie, it is common practice to selectFile ➤

Publish Optionsin Flash when creating a SWF file.

Figure 2-9.

The video playing in the skin

Yes, you can change the look and feel of a skin No, we are not going to cuss how to accomplish this in this book The reason is reskinning a compo- nent is not exactly an easy task to accomplish, and, if you don’t know what you are doing, you can easily break the component.

dis-5.Click the component on the stage, and, using the left or right arrow key, nudge thecomponent until you can see the stage As you can see from Figure 2-10, the con-trols are actually off of the bottom of the stage This means if you were to publishthe movie and post it to a website, the video would have no controls Let’s fix thisnasty situation right now.

6.Click the stage and click the Sizebutton to return to the Document Propertieslog box Change the height setting from 240to 280pixels When you return to thestage, select the component and reset its Xand Ycoordinates to 0

dia-7.Save and test the movie

That is all you need to know to get yourself going with video in Flash Still, there are acouple of things to keep in mind when using the FLVPLayback component:

The component only works in Flash Player 8 If your target player is Flash Player 7

or lower, you can’t use this component

When you publish the video, you will have two SWF files appear in the folder Onewill contain the name of the Flash movie, and the other will have the name of theskin applied to the component Both of these files must be in the same folder forthe component to work

Targeting video for Flash 7 or lower

There will be instances when the target player for video will be Flash Player 7 or even FlashPlayer 6 This could be a situation, for example, where the video is being placed in a richmedia advertisement and the specifications preclude the use of Flash Player 8 In this case,you can use the MediaPlayback component in the Media - Player 6 - 7 area of the FlashComponentspanel Here’s how:

1.Open the file created in the previous exercise Select the FLVPlayback componentand delete it

2.Open the Componentspanel and open the Media - Player 6 - 7component strip

Figure 2-10.

The stage shrinks to fit only the video portion of the component

2

3.Drag a copy of the MediaPlayback component to the stage and set its dimensions

to 320by 240and itsXand Ypositions to0in the Property inspector

4.Select the component on the stage and select Window ➤ Component Inspector.When the Component inspector opens, click the Parameters tab and specify thefollowing settings:

FLVFPS:24URL: Opener.flvAutomatically PlayUse Preferred Media SizeControl Placement:BottomControl Visibility:On

5.If your settings resemble those shown in Figure 2-11, save and test the movie

Figure 2-11 The style used for the MediaPlayback component is called Halo.

Using the FLVPlayback Custom UI components

This section answers a question that may be nagging at you: “That’s all well and good, guys,but what if I only need a minimal set of controls?”

This is a valid question because there will be occasions when the full set of controls in thecomponent is a bit overdone It could be a situation where your clients are being given anopportunity to view their videos on a staging server, and all you really need is to give themthe ability to play a video, fast forward through the video, pause/play the video, and evenreduce the video’s volume Each of these features is available to you as a separate control.Follow these steps to create just such a video project:

1.Open the Controls.fla file located in the Chapter 2 Exercise folder All we havedone for you is to add an FLVPlayback component, with no skin, to the stage andcreate layers for the controls and the scripts you will write.

2.Open the components window and open FLV Playback- Custom UI

3.Select the Controls layer and drag a copy of the BackButton, ForwardButton,PlayPauseButton, and Volume components to the stage the video as shown inFigure 2-12

With the components on the stage, you can now turn your attention to making themwork This will be accomplished through the use of ActionScript Before you write the

code, you must give each component a name—called and instance name—so that Flash

knows what to do when a button is clicked

When components are dragged from the Componentspanel to the stage, a copy of the component is placed in the Library When you drag a copy of the PausePlayButton component, copies of the PauseButton and PlayButton components, as well as the PausePlayButton component, are placed in the Library.

Figure 2-12.

The components are on the stage and ready

to be wired up with ActionScript

You may notice that we have locked the Actions layer This is a common practice among Flash developers By locking the Actionslayer, you can’t add content such as text or figures to the layer that will hold the ActionScript Even though the Actions

layer is locked, you can still add your script to it.

2

1.Select each component on the stage, and in the Property inspector give them thefollowing instance names:

FLVPlayBack:myVideo(see Figure 2-13)BackButton:btnBack

PausePlayButton:btnPlayForwardButton:btnForwardVolumeBar:btnVolume

2.Click the first frame once in the Actionslayer and press the F9 key to open theActionspanel If you are using a Mac, F9 opens Expose To open the Actionspanel

on a Mac, press the Option+F9 keys

3.When the Actionspanel opens, click once in the Scriptpane and add the followingcode:

If you have never written ActionScript before, you may be looking at this and wondering,

“Huh?” If you have never used the components, you may also be wondering the samething

These components are already smart enough to control a video All you have to do is pointone to the video component and tell Flash that the component being clicked has aninstance name Thus the first line of code, in English, reads “The btnPlay component isthe instance name for playPauseButton, which turns the video, playing through theFLVPlayback component named myVideo, on and off.”

4.Save and test the movie When you click the Playbutton, the video, as shown inFigure 2-14, starts playing

Creating a custom video player

To this point in the chapter you have been using the tools provided in Flash to create avideo player Though the tools are both easy to use and powerful, there will come a timewhen either due to space constraints or the need “for something different” you will startlooking at creating your own custom player A great example of this is the first exercise inthis chapter The final file size for the SWF file is 34K On the surface this may seem like arelatively small size, but you can create a custom player that essentially performs all of thesame tasks in a space that is 10K or less In the Flash universe, “small is beautiful.”

Figure 2-14 The video is under the control

of the buttons added to the stage andcoded in the Script pane

If you are new to ActionScript, you may notice that some words such as backButton are blue and others are black The words in blue are keywords used by ActionScript, and they must be spelled and capitalized exactly the way you entered them If you enter backbutton, the word would be colored black, Flash wouldn’t have a clue what you are talking about, and the backbutton simply wouldn’t work.

2

How is this possible? Pair a video object with ActionScript.

When you open the Flash Library and select the Library optionspull-down menu, you willsee a menu item named New Video.This is the video object, and when it is placed on thestage, you can use ActionScript to feed a video stream into it and to manage the stream

We are going to start this chapter’s final exercise in precisely that manner and then startbuilding upon the exercise to the point where you will have created a fully functionalvideo controller that fits in a very small space Along the way, you will also learn how todeal with a rather complex project How do you deal with complexity? From a position ofsimplicity

When building this sort of thing, you just don’t start constructing and coding until youreach the end of the task That is a surefire recipe for failure Instead, determine whatneeds to be constructed and coded, build and code it, and then test it In short, build a bitand test it Build a bit more and test it In this way, if there is a mistake or an issue, it isdealt with immediately, you know exactly where the problem occurred, and, best of all, itwon’t ripple through the entire project

In this project, we are going toStream video into a video object

Create a pause/playbutton that will pause and play the video

Create a rewindbutton that will scoot the video’s playback head back to the start ofthe video

Create a scrubber bar that will allow the user to jog forward and backward in thevideo

Create a button that turns the sound on and off

Each one of these techniques will be contained in a file that can be found in the Completedfolder within the Chapter 2 code download If you have never really dug into ActionScript,each of the files will show you how a project is constructed and how one bit of code buildsupon the others As well, each of the following exercises is designed to move throughActionScript in a straight line from basic to somewhat advanced in a controlled manner.Along the way, you will obtain a firm grasp of the video techniques and code used for theremainder of this book

Let’s get busy

Streaming video into a video object

First off this isn’t going to be as difficult as it may first appear There really are only threesteps involved in the code, and, if you can remember six lines of code, you are in thegame