Flash Concepts Reviewed
Flash Concepts
4
1
Compressing Bitmaps reviewed
−File>Import>Import to Stage (select a photo to import)
−Double click on photo in library to modify properties
−For photos use photo jpeg (compression)
−Uncheck the “use imported jpeg data” option
−Set quality to 50% or lower to greatly reduce file size
−For logos, text, solid colors use Lossless (PNG/GIF)
instead
−Click test to determine new file size
−Click on OK to save
2
Converting bitmaps to vectors advantages
−Converting imported jpg image into a vector image has
other advantages
−Vector image can be modified and changed and colored
or painted if desired
−Image quality is maintained
−Modify>Break Apart
(converts instance only to vector/shape)
−Dragging instance into library creates a new symbol
−Select Graphic symbol option
−Symbol can now be motion tweened and alpha
transparency can be changed
3
Trace Bitmap
(converting a bitmap into a vector graphic)
–Import an image into the library
–Drag an instance of this symbol to the stage
–Select instance and then click on
–Modify>Bitmap>Trace Bitmap
–Trace Bitmap options:
Color threshold:
50
Minimum area:
10
Curve fit:
Very smooth
Corner threshold:
Few corners
(if you do not like the result undo and try again)
4
Trace Bitmap options:
Color threshold:
1 to 500
(number of colors decreases/increases)
Minimum area:
1 to 1000
(number of surrounding pixels to consider when
calculating the color of a pixel)
Curve fit:
Corner threshold:
how smooth the outlines in the
traced shape are drawn and
how closely they match the
original image
whether to use sharp edges
(many corners) or smoother
edges (few corners)
*Optimum file size = high color threshold, high minimum area,
smooth curve fit, and few corners
5
Mock video effect
−Before video we had mock video
−Using a sequence of slightly different images to create an
animated video look in our movie
−Ability to import a series of bitmap graphics all at once
−File>Import>Import to Stage
−Select the first image in sequence, click Open
−Click yes when prompted to import entire sequence
−Sequence imported to stage, timeline, and library
(For this example I used a sequence from Flash HOT book CD
chap_08>sequence>bigair—01.png)
Continued
6
Mock video effect
–Click on the edit multiple frames button (under timeline)
−Set markers to cover all frames
−Select layer and reposition images as desired, all frames
will be adjusted
−OR click Windows>Design Panels>Align and align
images as desired
−Turn off the edit multiple frames button
−Control>test movie
−Insert frames (f5) in between keyframes to achieve
desired look
Continued
7
Mock video effect
–You will have to select frames individually
−Select first frame in sequence
−Click on Modify>Bitmap>Trace Bitmap
−Color threshold: 100
−Minimum area:
10
−Curve fit:
very smooth
−Corner threshold: few corners
−Play around with different adjustments until you achieve
the desired look
−May have problems undoing a traced bitmap, so save
before converting
−Repeat steps for all frames in sequence
−Control>Test Movie to view
−It’s possible that these new vector images could become
bigger in file size than the original images, if quality is too
high
8
Syncing audio to animation
–Import a audio clip into your library that you want to sync
animation to
–Drag audio clip to layer where you want sound to begin
–Expand audio clip so that entire sound plays by pressing
(f5)
–Click anywhere on sound waveform that is showing on the
sound layer and within the property inspector set sound
sync option to Stream
–Add animation to a new layer and match animation to
audio by scrubbing playhead back and forth and previewing
by pressing enter
–Optional, edit sound clip by clicking on edit within the
property inspector
9
Components
–User Interface (UI) Components within Flash can be used
to create forms and related form elements
10
User Interface (UI) Components
–Forms in Flash are similar to forms in HTML which allow
users to interact and select information or fill out (forms)
with their own information
–Forms are most often used to have viewers fill out an
online inquiry with their own answers or information such
as in a survey or order form
11
Form related User Interface (UI) Components
–Check box
–Combo box
–List (box)
–Button
–Radio button
–TextArea
12
UI Component Types Detailed
Button
CheckBox
ComboBox
Label
List
Loader
Button, can be clicked on and can also
be programmed with a behavior or
action to do something
Check box, can be selected or
deselected (checked or unchecked)
Drop down menu, provides
multiple choices, user selects one
choice
Label, similar to a text field but allows
an instance name to be assigned
List, list of choices in a scrollable menu
A container in which you can load
other movies or JPEGs
13
UI Component Types Detailed
Numeric
Stepper
ProgressBar
RadioButton
ScrollPane
Allows users to step through an
ordered set of numbers
Displays the loading progress while a
user waits for content to load
Radio button, allows one to many
choices to be listed but only one
can be chosen for an assigned group
Allows the user to view movie clips,
JPEGs, and SWF files through a
scrollable window
14
UI Component Types Detailed
TextArea
TextInput
Window
Can be used to display text or for
users to type in text
Allows users to insert text such as as a
username and password
Draggable window for displaying
content that includes a title bar and
close button
15
Four steps to creating (form) components
-Add component(s) to your project
-Configure the components (define/modify)
-Modify their appearance
-Write ActionScript to enable the components
functionality
(The last step will require advanced knowledge of
ActionScript as well as an application server to submit
the data to, for example when a user fills out the form
and presses the submit button you may want the info to
be submitted to another server or database )
16
Creating a form demo
-Create a new scene or start a new project
-Determine which form elements (components) you will be
using or determine what questions or info you want users
to provide
-Create a new layer, components
-Open the Components panel (cmd f7 mac / ctrl f7 pc)
-Drag 1x ComboBox, 1x List, 4x RadioButtons,
1x
TextArea, 1x Button onto the stage
-Use the Align panel to align (cmd k mac/ ctrl k pc)
-Create a new layer, text
-Select text tool, type directions or questions next to each
form component
Continued
17
Creating a form demo
-Select the ComboBox
-Within the Properties inspector select the Parameters tab
-Type an Instance name, quantity
-(type quantity under the word Component in the Instance
name field)
-Double click right of labels
-Within the Values window, select + , then select field and
type 0, select + , select field and type 1, etc
-Repeat this step for each number/quantity value you want
to list (quantities 0 through 5)
-Control>Test Movie
Continued
18
Creating a form demo
-Select the List box
-Within the Properties inspector click on the Parameters tab
-Type an Instance name, text
-Double click right of labels
-With the Values window, select + , then select field and type
first product name, for example Jr Skateboard, select + , select
field and type second product name, for example Sr
Snowboard, etc
-Repeat this step for each product or selection option you want
to list
-Control>Test Movie
-Select the first RadioButton
-Within the Properties inspector (Parameters tab) type an
Instance name, red
-Click to the right of groupName and type colorsGroup
Continued
19
Creating a form demo
-Click to the right of label, type red
-Select the next RadioButton
-Within the Properties inspector type an Instance name,
black
-Click to the right of groupName and type colorsGroup
-Repeat this step for each of the two remaining color
options you want to list
-Control>Test Movie
-Select the TextArea box (allows for text to be typed)
-Within the Properties inspector type an Instance name,
text
-Make sure wordWrap is set to true
-Select Button (on stage)
-Within Properties inspector, right of label, type Submit
Continued
20
Creating a form demo
-Control>Test Movie
-When you test movie, each form component should work/
function except the submit button will not have any
functionality (doesn’t actually submit)
Continued
21
Creating a form demo
-The submit button, in order to take the information that is
typed by the viewer and then submit it, you will need to
have some advanced ActionScript attached to the button
-This would also require the use of an application server set
up to accept our form information
-These topics are beyond the scope of this class
-The most important think to learn how to create a form and
the various form components that are available
22
Modifying component themes
-This step doesn’t seem to work
-This builds off of the last form demo
-Add a new layer, theme
-Select frame 1 and within the Actions panel type the
following:
_global.style.setStyle(“theme color”, “haloBlue”);
_global applies the themeColor to every component in the
movie
setStyle defines this themeColor parameter as haloBlue
-Control>Test Movie
23
Continued
Modifying component themes continued
-You can change theme color to haloBlue, haloOrange, or to
any hexadecimal color value such as #C1CEOF
-Hexadecimal color values look like the following:
#999999
-The 999999 will be replaced with the hexadecimal value
(To learn more about hexadecimal color values go to
images.google.com and do a search for hexadecimal
color to see examples of hex color values)
Continued
24
Modifying component themes
continued
-Select frame 1 of the theme layer and within the Actions panel
add the following three lines of script:
_global.style.setStyle(“fontFamily”, “verdana”);
_global.style.setStyle(“fontSize”, “14”);
_global.style.setStyle(“color”, “#000000”);
-Control>Test Movie
25
Flash Exchange
-Located at Flash’s website:
http://www.adobe.com/cfusion/exchange/index.cfm?eve
nt=productHome&exc=2&loc=en_us
-Additional components and extensions are available for
use within Flash
-Components and extensions extend the capabilities of
Flash using plug ins which add additional features
-Components are imported and managed using the
Extension Manager built into Flash
26
Installing a component or extension
-Go to site, search for extension, register or log in, save
extension to your local computer
-Within Flash click on Help>Manage Extensions
-Within Extension Manager window click on File>Install
Extension
-Locate file where it was saved locally and click on Install
-The component/extension should now be available through
the components panel
-Drag component onto stage to desired location
-Within the Properties inspector, under Parameters modify
component as desired
-Control>Test Movie
27