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

12. S ave 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 the video. 13. Q uit After Effects 7. 14. Locate the QuickTime file you have just created and open it in QuickTime (see Figure 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 in After Effects. In many respects, once you learn how to create a new Composition in After Effects, you will repeat these steps innumerable times as you create motion graphics for use in Flash 8. The key aspect of the Composition is ensuring you maintain the 4:3 aspect ratio of the video ’s dimensions and that you use square pixels. They are important when the video is used in Flash. You were also shown how to add content to the timeline, how to trim content to specific durations on the timeline, and how to move clips and layers around in the timeline. We also 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 dis - covered there is very little difference between a keyframe in After Effects and its Flash counterpart. 30 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 7486CH01.qxd 11/7/06 12:41 PM Page 30 1 31 FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7 We also showed you how to add and format text, how to create a new solid, and how to a dd audio to the project. T he 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 have created to an FLV file, and you will learn how to play the video through the new FLVPlayback component. We are also going to show you how to create your own custom player in Flash that does everything the FLVPlayback component does but in a space that is rather small. See you there. 7486CH01.qxd 11/7/06 12:41 PM Page 31 7486CH02.qxd 11/10/06 9:45 AM Page 32 2 FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 7486CH02.qxd 11/10/06 9:45 AM Page 33 In the previous chapter, you created a video using After Effects. In this chapter, you pre- p are the video for playback in Flash Professional 8 and upload it to your website. T he phrase “prepare the video for playback in Flash Professional 8” is what has really got- ten the attention of web developers and their clients. Ever since the late 2005 introduction of Flash Professional 8, it seems like video has exploded across the Web. One of the rea- sons, as you will soon discover, is that Adobe pulled off the impossible: they made web video more feature-rich but easier to create and deploy than ever before. Almost overnight, it seemed, web video moved from being seen as an interesting feature to a must-have element in websites. 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 whether the 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 flows smoothly 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 rain- storm occurred over the lake in the mountain and a foot of rain falls into the lake. That amount of water will rush out of the lake, down the river, flood the town, and eventually run into the lake in the valley, causing it to overrun its banks. It is no different with Flash Video. 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 experience inordinate wait times; video that plays, stops, replays; or even video that is jerky . It is the prudent Flash designer who has not only a design strategy in place but also a bandwidth strategy as well. In very basic terms, streaming is the distribution of real-time or live audio or video through the Internet . FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 34 7486CH02.qxd 11/10/06 9:45 AM Page 34 For the purposes of this discussion, there are three primary characteristics that define s treaming media: I t enables real-time or on-demand access to audio/video content through the Internet. 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 you produce can be accessed at any time from anywhere. It is transmitted by a media server application (for example, a Flash Media Server or Real 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 application such as a web server or a Flash Media Server and is displayed in a browser using a client application such as Flash Player 8. The rate the data is fed into the client by the server is, in general terms, the stream. This stream of data into a Flash Player is the key issue surrounding the successful delivery and playback of a video. If too much 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 com- pletion. Videos that take an inordinate amount of time to load and play or that start and stop are symptomatic of a developer who didn’t pay attention to the stream of data from the server to the client. 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 resid- ual copy of the video is left behind. 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 logical solution. 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-length movies with little or no disruption. If the user is in a remote or rural situation, the odds are very good he or she has a dial-up modem, meaning his or her bandwidth is limited. FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 35 2 7486CH02.qxd 11/10/06 9:45 AM Page 35 To wrap your mind around the differences, think of a highway tunnel that goes under a l ake. If the tunnel is part of a four-lane highway, thousands of cars simply approach the t unnel and zip through it at the posted speed. This is because the tunnel’s entrance is the 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 all experienced 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 for the four-lane expressway and the single-lane tunnel as dial-up service, the highway is the server, 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 band- 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 any one time. The last thing you need is for your user to get into the middle of a traffic jam waiting to download and view the video. When it comes to the user, you need to be aware of the width of the tunnel up ahead. You need to leave enough room for the data stream but also other Internet activities. Not doing 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 con- nection can drive along the highway at 56.6 kilobits per second (Kbps). When it comes to video, a target data rate of 40 Kbps, which leaves room for other activities, is normal. So what is data rate? Data rate is simply the amount of data (cars on a highway in our anal- ogy) transferred per second to the user’s computer. This in turn determines the bandwidth required to play the video. The data rate calculation is 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’s values are Width: 320 Height: 240 Color depth: 24 Frames per second: 15 Compression: 60 (The benchmark compression ratio for both ON2 Flix and Sorenson Squeeze is 60:1.) Data rate = (320 ✕ 240 ✕ 24 ✕ 15)/60 Data rate = (27,648,000)/60 Data rate = 460,800 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 36 7486CH02.qxd 11/10/06 9:45 AM Page 36 The data rate for the video at 15 frames per second (fps) is 460,800 bits per second (bps), o r 461 Kbps. The second line of the calculation is there for a deliberate reason. If you were t o 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 tunnel between Britain and France. Toss in the compression, and the video can safely be delivered to most users. If you are creating video for Internet delivery, use these common data rates for delivery of the FLV file to the Flash Player: Connection type Data rate Dial-up 60 Kbps DSL Between 150 and 300 Kbps Cable Between 200 and 300 Kbps T1 or T3 line 150 to 430 Kbps One final consideration in regard to data rate is that the number shown in the compres- sion applications is a bit disingenuous. If you use the FLV Encoder and use the Medium default setting, you set the data rate of a video to 400 Kbps. This is not the final data rate. Remember, video is composed of both an audio track and a video track. The number you set 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 keyframe placement. 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 of 29.97 fps. Another common frame rate is 24 fps. Regardless of which one you have been handed, 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). FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 37 2 7486CH02.qxd 11/10/06 9:45 AM Page 37 Be careful when you consider playing with the frame rate. Your FLV frame rate should be a s close to the Flash frame rate as possible. The reason is the audio track in the video—it a lways 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 means the file size is reduced. Now let’s be very careful because a bad decision here can ruin your work. If you were to stand at the side of a major city intersection and shoot cars and people walking by, there is going to be a lot of change and very few difference frames. Now say you 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. This explains 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 rule about keyframe frequency, but there isn’t. Before you encode the video, watch the video and see whether there is a lot of movement both 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 “talk- ing head” video—a tree in a field—you can get away with fewer keyframes. The bottom line is this decision is up to you, but it is the prudent developer who reviews the entire video prior to converting the file to FLV. Frame size Another major factor to consider is the physical size of the video. The larger the video is on screen, 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. FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 38 7486CH02.qxd 11/10/06 9:45 AM Page 38 Obviously, creating an FLV file at 720✕576 is going to pose a huge issue to the poor viewer. T his is why most FLV files use 320 ✕2 40, 240 ✕1 80, 160 ✕1 20, and 80 ✕6 0. Even so, the a stute 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 for bandwidth, 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 Encoder When you installed Flash Professional 8 onto your computer, you also installed a “side application” named the Flash 8 Video Encoder. The sole purpose of the Video Encoder is to convert a video file such as a MOV, AVI, or WMV file into the Flash Video format, which has the .flv extension. Keep in mind that FLV files can only be used with Flash. They can’t be viewed by any other media player, and even then FLV files can only be viewed in Flash using either the FLVPlayback component or through an ActionScript-controlled player you construct. 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 com- 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 in Flash 8. Though you can use both of the codecs—Sorenson Spark and ON2VP6—that come bundled with the Video Encoder , it is better you stay with the Sorenson Spark codec. In fact , if you choose one of the presets aimed at Flash Player 7, the default codec will be the Sorenson Spark codec. FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 39 2 7486CH02.qxd 11/10/06 9:45 AM Page 39 [...]... shown in Figure 2- 1 8 Figure 2- 1 8 Six lines of code is all it takes to stream a video into a video object on the stage As we progress through the various steps in this exercise, you will find the files in the Chapter 2 Completed folder The file for this exercise is CustomPlayer1.fla 57 7486CH 02. qxd 11/10/06 9:45 AM Page 58 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Creating buttons to control... the rewind button to the left side of the bar and place the play button just to the right of it Select the rewind button and convert it to a movie clip named Rewind Do the same thing with the play button but name it Play 15 Select the Rewind movie clip and give it the instance name of mcRewind Select the play button and give it the instance name of mcPlay as shown in Figure 2- 2 2 2 Figure 2- 2 2 The play... Play button, the video, as shown in Figure 2- 1 4, starts playing Figure 2- 1 4 The video is under the control of the buttons added to the stage and coded in the Script pane Creating a custom video player To this point in the chapter you have been using the tools provided in Flash to create a video player Though the tools are both easy to use and powerful, there will come a time when either due to space... these values in the Property inspector: Instance name: myVideo Width: 320 Height: 24 0 X: 0 Y: 0 55 7486CH 02. qxd 11/10/06 9:45 AM Page 56 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS When you finish, you should see what looks like a box with a big X through it on the stage as shown in Figure 2- 1 7 That’s all you need to do for the Video layer Lock the Video layer by clicking the lock button on the... in your way The code presented will get you up and running in no time and does not get into the really advanced stuff you can do with ActionScript In fact, the code to be presented is the absolute minimum you need to know to stream video 44 7486CH 02. qxd 11/10/06 9:45 AM Page 45 FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 The other thing to keep in mind is you are eventually going to have to. .. and double-click the Skin area to open the Select Skin dialog box Select SteelExternalAll.swf, as shown in Figure 2- 8 , from the 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 the minimum width number associated with the skin If the FLV file is only 24 0 pixels wide and the minimum width is 27 0 pixels,... now know how to use the window that opens when you choose that menu item in After Effects 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 to play on a website The balance of this chapter is designed to show you... project 42 7486CH 02. qxd 11/10/06 9:45 AM Page 43 FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 9 When you return to the Video Encoder window, click the Start Queue button The process will start, as you see in Figure 2- 4 , and you will be shown the progress of the encoding process and the settings used If you make a mistake, you can always click the Stop Queue button To return to the encoding settings,... video using a preset value You are about to discover you really don’t need to use the presets Leave them to the rookies 40 7486CH 02. qxd 11/10/06 9:45 AM Page 41 FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 3 Select the file and click the Settings button to open the Flash Video Encoding Settings dialog box When it is open, click the Show Advanced Settings button to bring up the Advanced Settings... If you set the autoHide parameter to true, the controls will appear anytime the user rolls over the video 47 7486CH 02. qxd 11/10/06 9:45 AM Page 48 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Yes, you can change the look and feel of a skin No, we are not going to discuss how to accomplish this in this book The reason is reskinning a component is not exactly an easy task to accomplish, and, . Flash counterpart. 30 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 7486CH01.qxd 11/7/06 12: 41 PM Page 30 1 31 FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7 We also showed you how to add. 2- 3 . The encoding settings for the project FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 42 7486CH 02. qxd 11/10/06 9:45 AM Page 42 9. W hen you return to the Video Encoder window, click. Settings button to bring 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 Settings button, the entire interface