Flash 3

1. Flash Concepts Reviewed Flash 3

2. About FLV and F4V video Video encoded for Adobe Flash Player comes in two "container" formats: FLV and F4V (H.264). F4V is the newer format, based on the H.264 codec supported in Flash Player 9.0.115 and later. The FLV format supports the On2 VP6 codec for Flash Player 8 and the Sorenson Spark codec for Flash Player 7.

3. Encoding video options You can now encode FLV files in three ways: through the Video Import Wizard, with the stand-alone Adobe Media Encoder and through the Flash Video QuickTime Export plug-in, which lets you encode audio and video into the FLV file format when exporting from third-party video editing applications that support QuickTime exporter plug-ins.

4. Adobe Media Encoder This stand-alone utility allows you to encode source video into FLV format. Adobe Media Encoder is installed along with Flash CS4 Professional. When encoding video using Adobe Media Encoder, you can choose from three different video codecs with which to encode your video content for use with Flash Player: H.264, On2 VP6, and Sorenson Spark. A codec is an algorithm that controls how video files are compressed during import and decompressed during playback.

5. On2 VP6 recommended codec • On2 VP6 video codec, provides superior video quality using the smallest possible file size. The On2 VP6 codec is the default video codec to use when encoding Flash content that uses video and FLV content to use with Flash Player 8 and 9. The On2 VP6 codec provides higher quality video when compared to the Sorenson Spark codec encoded at the same data rate. Sorenson codec is older and no longer recommended.

6. Video On2 VP6 alpha channel support • On2 VP6 video codec provides support for the use of an alpha channel with composite video • Alpha channel support lets you encode video so the background is removed and saved as a transparency. Allows you to overlay (or composite) the video on top of other Flash content, while the video remains in the foreground.

7. Importing Video CS4 File>Import>Import Video Select either the On your computer or Already deployed to a web server option When selecting the On your computer option, click on Browse and pick a compatible file format, must be flv or f4v format If not in the required format you will should click on the Launch Adobe Media Encoder button and encode video file before continuing Select load external video with playback component Continued

8. Importing Video When selecting the Already deployed to a web server option, type in the absolute url of the video file. For example: http://sites.csn.edu/cg/avalentiner/119/sample/cafe_townsend_home.flv For either option you will need to select a skin and then click Next Click on Finish, flash will prompt you to save your project Flash references your video file that must be available on the Web or within your host directory when you publish your swf file. Select keyframe of video clip and reposition if desired Continued

9. Importing Video Control>Test Movie Video only needs to appear in one frame but playhead must stop on that frame Flash creates a flv video file that is referenced and must be included with your final published swf file Select video on stage and within the properties inspector select the Component Inspector Panel icon, adjust settings as desired Video is shown as a flv playback component in library Note: An .flv or .f4v file is a Flash Video File, it requires a special player in order to view the file outside of flash. It is used primarily as a file format to add video into a Flash .fla project

10. Importing a sound loop Search for a sound loop Go to flashkit.com and search for a loop Or on the lab computers search for aif Within flash click File>Import>Import to Library Open Library(cmd+l) Double click on sound in the library to view its properties Optional: under compression change MP3 to desired quality Leave Preprocessing (convert stereo to mono) unchecked Modify Bit rate to approx 56kbps For Quality select Best Continued

11. Importing a sound loop -Click Test to preview sound, click OK to accept settings This will overide the default sound settings for this file only -Create a new movie symbol, name soundloop -Click on the first frame of the movie clip, drag sound from library onto stage -Press f5 to insert frames so that entire sound (waveform) shows -Within the Properties inspector verify that Sync is set to Stream for this sound clip -Click on Edit if you wish to edit the volume of the sound clip -Return to the project timeline (click on Scene 1) -Insert new layer, name soundloop -Click on frame 1 and drag sound loop movie clip to stage Continued

12. Importing a sound loop Soundloop movie clip frames should extend to the end of the scene, wherever the content ends, press f5 to extend Control>Test Movie Every scene where you want the soundloop to play, simply create a new layer and drag soundloopmovieclip to layer and extend the frames

13. Controlling a movie clip instance Create a new movie clip with some animation Add clip to stage Select the movie clip on stage (select small circle looks like crosshairs or scope) Within the property inspector name movie clip instance Type a name in the Instance Name field Add two button instances to a new layer, play and stop Select the stop button On property inspector give an instance name of stop_btn Repeat step for play button Name instance play_btn Continued

14. Controlling a movie clip instance using Actionscript 2.0 not recommended Actionscript 2.0 syntax shown below Add an Actions layer, select frame 1 and within actions panel type the following Repeat steps for play_btn Control>Test Movie objectinstance name, stop_btn stop_btn.onRelease = function() { Stop(); }

15. Actionscript 3.0 and CS4 Recommended you use Actionscript 3.0 with Flash CS4 Actionscript 3.0 syntax shown below recommended for buttons/movieclips mute_btn instance name of button mute_btn.addEventListener(MouseEvent.CLICK, goMuteSound);function goMuteSound(e:MouseEvent):void {Stop();} goMuteSound function name label in timeline called main

16. Preloader SWF format is a streaming format, meaning, it can begin playing before it is completely downloaded Preloader gives visual feedback to the viewer while movie is loading while they are waiting Preloader can exist in the beginning frame, in any scene, or at different points in the movie Uses ActionScript to detect the status of the SWF file that is loading Once entire movie or amount you specify is loaded, the movie will then begin to play

17. Preloader Demo Open an existing project that contains content such as sounds, pictures, or audio/video Create a movie clip which will play while movie is loading (create a "loading…" mesage) Return to the main project timeline Add a new layer, name loader Add the movie clip to frames one and two of the loader layer Add a new layer, name actions Click on frame 2 of this layer and insert a blank keyframe (f7) Continued

18. Preloader Demo Select frame 2, open the actions panel (f9) and type the following: Actionscript 2.0 example(also works in 3.0) if (_framesloaded>=_totalframes) { gotoAndPlay("main"); } else { gotoAndPlay("pre"); } You will need to add a frame label for frame 1 saying pre and one for frame 3 saying main Continued

19. Preloader Demo Control>Test movie Test preloader by… View>Bandwidth Profiler View>Download Settings>56K View>Simulate Download Try hitting CMD+Enter several times to refresh

20. Three different types of text elements: Static text Dynamic text Input text

21. Static Text Static text is text that you would use to display information or to label buttons, forms, or navigation. Use Static text when you want to simply display text.

22. Dynamic Text Dynamic text is used to show up-to-date information that Flash can generate automatically from an external text file or a database. Use dynamic text when you want to automatically show information from an external text file or a database. Use dynamic text when you want to automatically show information that is updated often.

23. Input Text Input test is text that the end user is required to input such as a user name and password, forms, and surveys.

24. Dynamic text field -Add three layers, naming text, actions, and background -Text should be the first or top layer -Select the Text layer -Select the text tool from the Toolbar -Within the Properties Inspector select Dynamic Text, Multiline, and Show Border Around Text (paper icon) -Set Font similar to Verdana, Black, size 10 -Click and drag (down and to the right) on the stage to create a text field (block/box) -In the Properties Inspector under the Var:(variable) field type a variable name, for example content Continued

25. Dynamic text field Open a simple text editor such as TextEdit (Mac) or Notepad (PC) When using TextEdit make sure to set preferences to plain text first, then start a new document for this option to take effect Type your text content or cut and paste text into At the very top of document, and at the very beginning before your text content, add the following yourvariablename= Replace yourvariablename with the variable name you used in the last step For example I will use content= The word content represents the variable I defined in the prior step, must be spelled exactly the same Continued

26. Dynamic text field Save text file as content.txt and save within the same directory or folder as your Flash project Within Flash select frame 1 of the actions layer Open the Actions panel (f9) Type the following exactly as shown: loadVariables(); Within the parenthesis add the text file filename surrounded by quotes, "content.txt" , a comma, and then the word this which represents the current scene (Scene 1) Actionscript 2.0 example: loadVariables("content.txt", this); Continued

27. Dynamic text field Control>Test Movie If text fails to show, then check your dynamic text field by clicking in it and within the Property Inspector make sure Font color is set to Black If you still have problems viewing check to make sure you have named all correctly and all use same names

28. Dynamic text field content is the variable name content= defines the text as the dynamic content, inside text doc content.txt is the name of the text file content.txt has to be in the same folder directory as flash project file loadVariables("content.txt", this); loads content.txt file into the variable, content, in the this timeline (current scene)

29. Dynamic text field and HTML You can add select HTML tags to your dynamic text Open up text file (content.txt) Add bold tags around the first sentence by adding opening and closing HTML bold tags <b></b> Example: content= <b>First sentence is here. </b> Second sentence… Within the properties inspector select the Render as HTML button (looks like a less than and greater than sign <>) Continued

30. Dynamic text field and HTML Control>Test Movie Select HTML tags supported <b></b> <i></i> <br> <font></font> <img src="filename.gif"/> <li></li> <p> <a href="hyperlink address">Name</a> see Flash help: Flash>Help>ActionScript reference>Working with Text>Using HTML-formatted text>Supported HTML tags

31. Scrollable Dynamic Text Open up the Flash project from last example Select the dynamic text field (on stage) and within the properties inspector type an instance name in the Instance Name field (below where it says Dynamic Text) For example I will use the name textBio Add two button instances, up and down Give buttons instance names Add actions layer and in frame one add action shown on next slide within Actions panel (f9)

32. Scrollable Dynamic Text Actionscript 2.0 Example: up_btn.onRelease = function() { textBio.scroll+=1 } dwn_btn.onRelease = function() { textBio.scroll-=1 } Up_btn and dwn_btn represent instance names of buttons Control>Test Movie

33. Variable A variable is a container that holds information or a value variablename="value given to this variable";

34. variablename="value given to this variable"; First you are declaring the variable, I wish to create a variable called joe, and then you are assigning a value to this variable, joe (the variable) is now equal to a string of words "Joe Cool is cool" joe="Joe Cool is cool"; joe is the variable name joe has a value of Joe Cool is cool

35. String literal vs expression String literal (can be used with multiple words with spacing and/or numbers with spacing, quotes required) joe="Joe Cool is cool"; A string literal represents a value contained between the quotes and ActionScript does not try to interpret what is contained within the quotes Or we could also define as an expression (one word name or number, no quotes required) joe=5367123; joe=joecooliscool; An expression represents a value and can be interpreted by ActionScript to do something like a calculation

36. variablename="value given to this variable"; Quotes around value allow you to have a string for its value, a string simply means more than one word for its value such as a phrase or several words with spaces Values for variables can also contain numbers Variable name should begin with lowercase letter Variable name can only contain letters, numbers, and underscores Variable name cannot begin with numbers or underscores or be a reserved word -end of slides

37. Input Text Start a new project Add three layers, naming text, input field, and message Select the text layer Select the Text tool from the Toolbar Within the Properties Inspector change the Text Type to Static Text, Fontto Arial, Font Size 12, Text Color Grey and Bold Click on stage to create text block Type static text that you want to appear on stage: For example: Please enter your name: Select the input field layer, then select the Text tool Within the Properties Inspector change the Text Type to Input Text Continued

38. Input Text Create an input text box by clicking on stage (click and drag) place below where it says please enter your name: Within the Properties Inspector set the Line Type to Single Line Type a name in the variable field to assign a variable name In the example we used inputName Select the Show Border Around Text button Continued

39. Input Text Click on the Character button within the Prop. Insp. Create a submit button and add below input box Actionscript 2.0 example on (keyPress "<Enter>") { if (inputName!=null) { nextFrame(); } } Note: inputName represents the variable name that I assigned to the input text box, != means not equal to and null means blank Continued

40. Input Text -Select the message layer and add a blank keyframe (f7) to to the second frame -Select the Text tool and within the Properties inspector set the Text Type to Dynamic Text -Below the existing Welcome text create a text block (mouse click and hold down, drag right and down) -Within the Properties inspector select the Show border Around Text button and in the Var: field type a variable name -For this example I will use message as my variable name -Change Fontto Arial, Font Size 12, Text Color Grey and Bold, select the center text alignment option and change the Line Type to Multiline Continued

41. Input Text You should NOT select the Border Around Text button Click on the Character button to embed the font (follow the same steps as we did before) Click on frame 2 of the actions layer and open the Actions panel (f9), type the following: variablenamegoeshere= Replace variablenamegoeshere with your variable For this example I used message = After message = type the following: "Welcome, "+inputvariablenamegoeshere+". Thank you for visiting"; Continued

42. Input Text -Replace inputvariablenamegoeshere with the variable name with inputName -Example: message = "Welcome, "+inputName+". Thank you for visiting"; -Select frame 1 of the actions layer -Within the Actions panel(f9) type the following: stop(); -Control>Test Movie

43. Frame labels Create a new movie with four buttons insctances (bio, resume, portfolio, contact), place only the background and portfolio buttons on the stage Select buttons and give instance names Create two layers within the project timeline, a buttons layer and a labels layer Select frame 1 of the labels layer and in the property inspector type the name start (type start under where is says Frame label, on left side) On the labels layer select frames 5, 10, 20, 25 and add a blank keyframe (F7) Add labels to frames 5, 10, 20, 25 (bio, resume, portfolio, contact) Select frame 30 and press F5 to extend frames up to frame 30 Continued

44. Frame labels Actionscript 2.0 example Add a layer and name actions, make this the first layer (above the buttons and labels layer) Select frame 4, open the Actions panel (F9), type the following: stop(); Select the first button (bio) bio.onRelease = function() { gotoAndPlay("bio"); } Select portfolio button, repeat steps adding action Add the resume button to frame 5 and add the video button to frame 20 of the buttons layer Continued Continued

45. Frame labels Add frames so that the resume button appears from frame 5 to frame 14 Add frames so that the video button appears from frame 20 to frame 29 Add actions to these buttons at frame 5 and frame 20 of the button layer Add Actionscript to resume button and video button Control>Test Movie

46. loadMovieNum A flash file .swf has the ability to load other swf files into itself Useful for large projects with larger file sizes Process is referred to as Load Movie This example uses the loadMovieNum action Ability to stack layers of flash files on top of each other Layers are referred to as levels Main timeline (Scene 1) always located at level 0 Number of levels is infinite Stacking order displays the higher level number in front of the other levels

47. loadMovieNum Actionscript 2.0 example Open an existing project or create a new one Add an action to either your project timeline or a movie clip timeline that is being used in your project Click on frame where you want action to appear Within the Actions panel type: Actionscript 2.0 example loadMovieNum("main.swf", 50); main.swf represents the URL or in this case file we want to load and 50 represents the level The main timeline is in level 0 anything placed above this level will appear on top of or over that level. Continued

48. loadMovieNum The higher the number the higher the stacking order Main timeline and any other levels will still be visible loadMovieNum("main.swf", 50); main.swf represents the URL and 50 the level URL path can be either relative or absolute main.swf is a relative path main.swf must be located within same folder as the main project file. Or you can use an absolute path loadMovieNum("http://www.csn.edu/flash/main.swf ", 50);

49. loadMovieNum You can add as many .swf files to a Flash project by simply adding additional loadMovieNum Click on the frame where you want next file to appear Within the Actions panel type: loadMovieNum("filename.swf", levelnumber); filename.swf represents the file we want to load levelnumber represents the level For example: loadMovieNum("gear.swf", 60); The main timeline is in level 0, main.swf is in level 50, gear.swf is in level 60.

50. Using a Large graphic 1600x1200 Go to images.google.com and search for 1600x1200 image Save picture locally (cmd+mouseclick and save as) File>Import>Import to Library Open Library(cmd+l) Double click on imported image Uncheck use imported jpeg data (if checked) Adjust quality settings to 50 and click test Click OK to accept Rename layer to bg Drag image on stage Convert to graphic symbol, f8 Continued