1

Flash 3

Flash Concepts Reviewed

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.

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.

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.

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.

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 settingsThis 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 soundloop movieclip 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

object instance 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 buttonsControl>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, Font to 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 Font to 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

51

Using a Large graphic 1600x1200

•Position graphic•Select symbol (on stage), adjust Alpha within Properties Inspector (to make semi-transparent)•Insert a new layer and name action•Select frame 15, insert a blank keyframe (f7)•Open the Actions panel and add a stop action, type:

stop();•Insert a new layer and name label•Select frame 1, insert a blank keyframe (f7)•Within the Properties Inspector, under <Frame Label>, type: zone1•Create new layer name and name navigation

Continued

52

Using a Large graphic 1600x1200

•Create some buttons•Add actions which take you to the label•Select frame 15 and insert key frame (f6) for the label layer•Within the Properties Inspector, under <Frame Label>, type: zone2•Position graphic to new desired position (move graphic, position to a new area)•Motion tween between keyframes•Add labels, buttons and actions as necessary•Control>Test Movie

Continued

53

Premade navigation in a movie clip Actionscript 2.0

•Add several button instances into a movieclip•Select the first button give an instance name of goHome•Add the following Actionscript 2.0 in the Actions panel

goHome.onRelease = function() {_root.gotoAndPlay("home");}

•Replace home with label in Scene 1 you will be using•Repeat this step for each button, add action to each•Each button should have a different scene name that it will go to and play

_root tells Flash to leave movieclip and go to the main timeline, Scene 1

54

Music selector demo

•Open a new document/project•You will need three sound files, outside of flash•Add four button instances which will play each of the sounds and mute (the four buttons should read 1, 2, 3, mute)•Give each button an instance name•Create three layers named actions, labels, buttons•Select frame 1 of the actions layer and within the Actions panel type the following: stop();•Repeat step adding stop action to frames 19, 29, 39•Select frame 1 of the labels layer and insert a blank keyframe (f7) and type a frame label, mute, within the properties inspector (under where it says Frame)•Repeat steps for the other frame labels

Continued

55

Music selector demo Actionscript 2.0

•Insert frames (f5) until frames extend enough to read label•On the Actions layer in frame 1 type the following•Within the actions panel type the following, Actionscript 2.0 example:

unoBtn.onRelease = function() {stopAllSounds();

song1 = new Sound()song1.loadSound("filename1.mp3", true);gotoAndPlay("1");

}Continued

56

Music selector demo

•Repeat steps for the two remaining buttons•Modify filename1, filename2, and filename3 to the actual filenames of your sound files•Sound files will have to be located within the same directory or folder of your flash .swf file•Select the mute button, within the actions panel type:

muteBtn.onRelease = function() {stopAllSounds();

gotoAndStop("mute");}

•Select frame 19 of the actions layer and insert a blank keyframe (f7) and within the actions panel type:

song1.onSoundComplete=function(){ song1.start();}stop();

57

Music selector demo

•Select frame 29 of the actions layer and insert a blank keyframe (f7) and within the actions panel type:

song2.onSoundComplete=function(){ song2.start();}stop();

•Select frame 39 of the actions layer and insert a blank keyframe (f7) and add script, modify to say song3•The 3 scripts will repeat the sound or song•Control>Test Movie