Flash IV- Video. Joe Struss. Nov. 12, Visit the IT Learning Pod s Online Web Site at:

Transcription

1 Flash IV- Video Joe Struss Nov. 12, 2010 Visit the IT Learning Pod s Online Web Site at: Copyright c 2010 by Creative Services / ITS Permission to reproduce all or part of this document for noncommercial purposes is granted, provided the author and Iowa State University are given credit. To copy otherwise requires specific permission. The author s contact information is available at the IT Learning Pods web site.

2 General Flash Information Adobe Flash is a software authoring tool for creating scalable, interactive animated graphics and navigation controls for the Web. Flash is also one of the most popular add-on tools for internet browsers and is currently available on most browsers throughout the Web. Flash is known for creating Web graphics that are small in size but dynamic in sound, motion and graphics. Starting Flash To begin Flash on a Macintosh, look on the Macintosh lower toolbar inside the Applications folder and doubleclick on the Flash application. On a Windows system to startup Flash, click under the Start icon then select All Programs, Adobe Design, then Adobe Flash. From the Flash starting screen press Flash File (Actionscript 2.0) under Create New; this will start a Flash project for you and allow you to see the distinct areas within Flash. For the Flash layout for today s class, pull down in the upper right to Designer then pull the Properties panel under the main Stage and pull the dividing line on the left to be two columns wide. Next pull down under the layouts on the upper right and select New Workspace then save this setting as Classicplus. 1

3 Flash Layout There are five distinct areas within Flash: the Drawing Toolbar, Menubar, Timeline, the Stage/Work Area, and the Floating Panels which includes the special Properties Panel. You work in the Stage area using tools from the Toolbar. You must select the image frame on which you are working from the Timeline and the Floating Panels give you information on or allow you to change the currently selected Stage item. 2

4 Using Video within Flash Overview You have been able to use video in Flash since Flash 4. However, only with the more recent versions of Flash have you been able to control the video from within Flash and with every new version of Flash this has become easier to do. The original YouTube site used Flash version 7 for all of its video though YouTube has been switching lately to H.264/MPEG-4 AVC as its default codec for better HD support. Types of Video Flash can only directly import Flash Video Format (.flv) files. However, With QuickTime 4 (or later) installed on a Mac or a Windows system you can import into Flash:.mov,.mpg,.mpeg,.dv and.avi files. With DirectX 7 installed on a Windows system you can also import into Flash:.wmv,.asf,.mpg,.mpeg and.avi files. There are two main ways to use video from within Flash: embedded into the Flash root file itself or embedded within a Flash symbol. There are also two other ways to use Flash with video. Dreamweaver 8 and beyond can also accept.flv files directly. So you can also now use Flash to just create a progressively downloading.flv file for Dreamweaver. You can also use Flash to create a streaming video file for use with a Flash Communication Server. 3

5 Getting Started Open a Web browser and go to: and download the Data for the Flash IV class to your desktop which should just be a single file mu.mov. Making an.flv file for Dreamweaver The Adobe Creative Suite package comes with a separate Media encoder. Click under Start then Select Programs, Adobe Design and finally Adobe Media Encoder or on a Macintosh simply click on the Adobe Media Encoder icon in the Applications folder. Within the encoder, click on the Add button and add the file mu.mov. Click on the Preset scroller menu and scroll down to FLV- Flash 8 and higher. Click Start to convert your.mov file to an.flv file. 4

6 When you are done, you should have an mu.flv file that you can use in either Dreamweaver or Flash. If you click on the Preset scroller and pull down to Edit Export Settings, you can also edit the default encoder settings and edit the starting and ending points of the video. You can edit the starting and ending points of the video by moving the left and right triangles in the left display and you can also scrub the playhead to see how the video will look. On the right, you will find all the exporter options which allows you to fine tune what you want in your final exported file. Explore some of the other Export Settings on the right before quitting out of the Media Encoder. To use your FLV file within Dreamweaver, you would simply pull down under Insert to Media then over to FLV to add your video to a standard Dreamweaver web page. Go to this page: css.ait.iastate.edu/dreamweaver/ex3/ and click on the Local link on the left to see the.flv file in a finished Dreamweaver project. 5

7 Video Tips Here are some video tips for creating Flash video files which will be seen on the Web: For best results, whenever possible, always encode Flash video from an uncompressed form. Strive for simplicity. Don t use too many fancy transitions or even cross-dissolves as they don t compress well. Hard cuts are best. Know your audience and their data, frame rate and frame size. The Export Settings area will help you set this a lot more than just the standard Preset options. Know your download time. Estimate on a progressive download how much time it will take your average user to download the video. 6

8 Use clean video and audio. Basically glichfree video and audio. Try and remove noise and interlace lines from your audio and video. Embedding Video If you want your video to interact with the rest of your flash file then you need to embed your video into Flash. Select Frame 1/Layer 1 on the Timeline and press F5 five times to create five new frames. Go to frame 6 and insert a Keyframe. Save the file and name it tv1. Pull down under File to Import then over to Import Video. Click the browse/choose button and select the mu.flv file on your desktop then click on Next/Continue. Choose the Embed video in SWF and play in timeline option and press Next/Continue. Take the default Timeline options on the next screen and press Next/Continue. Finally choose the default options on the Final Screen then click on Finish to import the video. 7

9 Pull down under File and Save your tv1 Flash file. Then test out your video project by pulling down under Control to Test Movie. The video plays through but we currently have no control over the video. Adding Some Control Double-click on the Layer 1 name and change the name of that Layer to Video. Select the video on the Stage, go down to the Properties panel and change the Instance Name for the video to mu1. Pull down under Insert to Layer. Double-click on the Layer 2 name and change the name to Buttons. Go to Frame 6 of the Buttons Layer and Insert a Keyframe. Pull down under Window to Common Libraries then over to Buttons. In the classic buttons folder, double-click the Playback buttons folder and drag a gel Pause button onto the stage. 8

10 Enlarge the Pause button, by selecting it with the Arrow Tool then pulling down under Modify to Transform then over to Scale. Use the right corner anchor point to make the button bigger so that it is more visible. Select the Pause button then go to the Behaviors panel and click on the Plus button then slide down to Embedded Video and over to Pause. Choose the mu1 video clip then click on OK. Save and Test your new video. now be able to pause the video. You should 9

11 This same technique can be used to create a Play button for your video. Select the gel right button from the button Library and drag it onto the Stage and enlarge it a little. Select the right button with the Arrow tool then go to the Behaviors panel and click on the Plus button then slide down to Embedded Video and over to Play. Choose the mu1 video clip then click on OK. Use this same technique and create a fast forward and a rewind button on the stage. For the Rewind button, add the Movieclip behavior and have it Go to and Play at the start of the video (frame six). For the Fast Forward button, add the Movieclip behavior and have it Go to and Play at the middle of the video (frame 300). Save and test your video project. 10

12 If you would like to change what a button does, you can always click on an existing button and then in the Behaviors Panel, double-click on its Action to edit the action. You can also use the negative sign to delete an action. Adding a Video Stop We now have pretty good control of the video but at the end it loops back around to the beginning. To stop this, create a new layer named Actions and go to the very last frame of that layer and insert a keyframe. With that frame selected, click the Actionscript Panel button within the Properties Panel. Within Global Functions, choose Timeline Control and double-click on Stop. The stop(); command should appear on the right. Click your way out of the Actionscript Panel window. If you have done this properly, a small a should appear in your current frame. Save and test your movie. Your video should now stop at the end. 11

13 Embedded Video in a Movie Symbol It is sometimes more convenient to not have a video on the main timeline so an alternate to that is to put the video into it s own Flash symbol and use it that way instead. Pull the Playhead to Frame 6 then pull down under Edit to Select All. The layers from frame 6 on should be selected on both layers and appear darkened. Pull down under Edit to Copy. Start a new Flash project (Actionscript 2.0) and name it videomini. In this new project, pull down under Insert to New Symbol. Name the new symbol swan video and give it a Behavior: of Movie clip then click on OK. Pull down under Edit to Paste in Place. Click on Yes when Flash asks if it can add frames to your symbol. Next center your video and controller in the symbol. 12

14 Insert a new Layer named Actions in your swan video symbol. Go to the last frame in that layer and create a keyframe. Select the new keyframe then click the Actionscript Panel button within the Properties Panel. Within Global Functions, choose Timeline Control and double-click on Stop. The stop(); command should appear on the right. Click your way out of the Actionscript Panel window. Your swan video symbol is now ready to go. Normally you would want to construct the swan video in the symbol itself just as we did for tv1.fla but copying and pasting also works in a pinch. Click on Scene 1 in the left hand corner of the stage to return to the main stage. Pull down under Window to Library to show your library for this project. Click in Frame 1/Layer 1 then go to your library and drag a copy of the swan video onto the stage. Now the video is conveniently parked in a single frame. This can be very handy for using multiple video clips in a flash file. 13

15 Insert a new layer and name it Actions. Press F5 and add one new frame to the Actions Layer. Select Frame 2 of the Actions Layer and make it into a keyframe and put a text message in there. Then put a blank keyframe in Frame 2 of Layer 1. Go back to Frame 1 of the Actions Layer and add a Stop action to that frame. Now create a new layer name Buttons with two frames. Next drag a button from the button Library to Frame 1 of the Buttons Layer and place it above the video. Select the new button with the Arrow tool then go to the Behaviors panel and click on the Plus button then slide down to Movie Clip and over to Goto and Stop.... Choose the root occurrence and enter frame 2 as the stop frame then click on OK. Add the following text in front of the new button: Click this button to continue:. Put a blank keyframe in frame two of the Buttons layer. Save and test your movie. Now the movie will play but the user can continue on at any time into the rest of the normal Flash file by just pressing a button. 14

16 Fun with Embedded Video Save the minivideo project and return to your first video project. Embedded video in Flash is just like any other Flash object that you can manipulate so let s have a little fun with it. Select frame 6 of the video layer. Pull down under Modify to Transform and over to Rotate and Skew. Use one of the corner anchor points and slightly rotate your video. Save and test your project. Now the video plays at a jaunty angle. You can also annotate the video within Flash. Add a new Layer to this project and call it Text. Move to Frame 6 on the Text layer and insert a keyframe. Use the Text Tool and add the word Swan on the canvas just above the video. Next Insert a Blank Keyframe at Frame 125. Then go to Frame 310 on the Text Layer, insert a keyframe then put in the word Bowling Alley above the video. Then Insert a Blank Keyframe at Frame 345. Save and Test your annotated video. 15

17 One of the newer features in Flash are the Shadow and Glow effects. Click on one of the buttons for the video then in the Properties panel click on the Filters tab. Click on the lower left corner Add Filter button and pull up to Drop Shadow. Add some Drop Shadow to each of the buttons as it makes them look more three dimensional. Go back to the videomini project. Pull down under Modify to Document and change the background color of the document then click on OK. Select the Arrow Tool and double-click on the swan video that is on the Stage to enter Symbol editing mode. Drag Layer 2 below Layer 1 then click on Frame 1 of Layer 2. Grab the rectangle tool which is with the oval tool, choose a color other than the background color and draw a box around the video and control buttons. Click Scene 1 to return to the main stage. 16

18 Select Layer 1/Frame 1 then from your library, drag a second occurrence of the swan video onto the stage. Next pull down under Modify to Transform and then over to Scale and shrink down the video. Save and test your project. You should now have two swan video objects that work independently of each other. Publishing the Video Still in the videomini project, pull down under File to Publish Settings. Select the Flash tab and click the Protect from Import option. Select the HTML tab and note all the HTML options for publishing your project to the Web. Click the Publish button to create a.swf and.html file of your finished project to the desktop. You will need to upload both of these files to your web server and then use the.html file to view the.swf file on the Web. Go to your desktop and double-click the videomini.html file to test out your video. 17

19 Go back to the tv1 project and publish that one as well. You can use ISU WebFile at: to upload your.html and.swf files to your WWW folder on Project Vincent. More information on creating a WWW folder at Iowa State that can be viewed from the web can be found in the Intro. to Dreamweaver class handout: Simple Preloader- Optional With longer videos, you often want to have a preloader that informs the viewer that your Flash project is indeed doing something as they wait for the video to load. The answer to this is normally a preloader that informs the viewer how much longer they may have to wait. 18

20 Open the tv1 project and select Frame 6 of the Text Layer. Go to the Properties Panel and name that frame ready. A red flag should pop-up on the Timeline. Go to Frame 1 of the Text Layer and add two textboxes in the lower portion of the stage. In the Properties panel, choose a text type of Dynamic Text and in the instance name box name the leftmost box loader and the other box notyet. Pull down under Insert to New Symbol and create a Movieclip symbol named preloader. Put two keyframes into preloader and put the word Loading... as Static Text centered in both frames. Change the color of Loading... in frame two so that it looks different from frame 1. Select Scene 1 to return to the main scene. 19

21 Still in Frame 1 of the Text Layer, drag an instance of preloader from the Library and in the Properties panel give it an instance name of pre. Create a new Layer named Actionscript and make that layer the top layer. Click in Frame 1 of the Actionscript layer then click the Actionscript Panel button and type in the following: stop(); loader.text = 0; notyet.text = 0; _root.onenterframe = function() { if (_root._framesloaded == _root._totalframes) { if (_root._totalframes > 0 ) { delete _root.onenterframe; _root.gotoandstop("ready"); } } loader.text = _root._framesloaded; notyet.text = _root._totalframes; } Close out of the Actionscript Panel, Save and Test out your preloader. Publish your results in order to better see how the preloader actually works. You can see the preloader in action on the Web at: Just click on the Flash IV, Class Example 1 link. 20

22 References Flash CS4 Professional for Windows and Macintosh: Visual Quickstart Guide by Katherine Ulrich; Peachpit Press. Inexpensive quick start guide. Flash CS4: The Missing Manual by Chris Grover; Pogue Press. Great series and this one seems to have everything in it. How to Cheat in Flash CS4: The art of design and animation in Adobe Flash CS4 by Chris Georgenes; Focal Press. Interesting Flash book with a unique approach. ActionScript 3.0 Game Programming University by Gary Rosenzweig; Que. Great book for creating Flash games if you already have a programming background. Adobe Flash Resource Center: Click under the Help button and then pull down to Flash. The Flash CS4 Resources in the upper right especially Using Flash are a good place to start. Lynda.Com has a great set of online video tutorials: (Great Flash series.) Flash Series Examples and Projects: Cool Flash Video Sites: or (Choose doughboy on top menu.) 21

23 Flash Video Resources Handbrake- Great tool for ripping a DVD into a standard video file. Known as an open-source, multiplatform, multithreaded video transcoder. Also works well when converting one video source type to another. Flowplayer- Terrific tool for playing video files including Flash video files on the web. Easy to use and makes putting longer Flash video files on the web easy and more accessible. Does pseudostreaming to make a progressive download easier to view as it downloads. Includes the ability to add different control skins and playback options. Has both a non-commercial and a commercial version avaialble. iskysoft Video Convertor- Commercial but not overly expensive video convertor. Especially good at coverting video from Handbrake into an FLV file that you can use with Flash. SWFTools.com- Interesting online resource for tools to deal with Flash SWF files. Includes things like a quiz creator, converting Powerpoint to Flash, chat engines and audio tool covertors. Most tools are free to try and prices vary from there. 22