Flash Concepts Reviewed
Flash 3
1
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.
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
7
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_towns
end_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
8
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
9
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
10
Continued
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
11
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
12
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
13
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();
}
14
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
15
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
16
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
17
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
18
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
19
Three different types of text elements:
•Static text
•Dynamic text
•Input text
20
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.
21
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.
22
Input Text
•Input test is text that the end user is required to input
such as a user name and password, forms, and
surveys.
23
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
24
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
25
Continued
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
26
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
27
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)
28
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
29
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
30
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)
31
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
32
Variable
•A variable is a container that holds information or a
value
variablename="value given to this variable";
33
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
34
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
35
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
36
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
37
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
38
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
39
Continued
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
40
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
41
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
42
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
43
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
44
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
45
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
46
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.
47
Continued
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);
48
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.
49
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
50
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
51
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
52
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 53
main timeline, Scene 1
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
54
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
55
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();
56
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
57