1

Flash Concepts Reviewed

Flash Concepts

4

2

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

3

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

4

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: 50Minimum area: 10 Curve fit: Very smoothCorner threshold: Few corners

(if you do not like the result undo and try again)

5

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: how smooth the outlines in the traced shape are drawn

and how closely they match the original image

Corner threshold: 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

6

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

7

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

8

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

9

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

10

Components

–User Interface (UI) Components within Flash can be used to create forms and related form elements

11

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

12

Form related User Interface (UI) Components

–Check box–Combo box–List (box)–Button–Radio button–TextArea

13

UI Component Types Detailed

Button Button, can be clicked on and can also be programmed with a behavior or

action to do something

CheckBox Check box, can be selected or deselected (checked or unchecked)

ComboBox Drop down menu, provides multiple choices, user selects one choice

Label Label, similar to a text field but allows an instance name to be assigned

List List, list of choices in a scrollable menu

Loader A container in which you can load other movies or JPEGs

14

UI Component Types Detailed

Numeric Allows users to step through an

Stepper ordered set of numbers

ProgressBarDisplays the loading progress while a user waits for content to load

RadioButtonRadio button, allows one to many choices to be listed but only one can be chosen for an assigned group

ScrollPane Allows the user to view movie clips, JPEGs, and SWF files through a scrollable window

15

UI Component Types Detailed

TextArea Can be used to display text or for users to type in text

TextInput Allows users to insert text such as as a username and password

Window Draggable window for displaying content that includes a title bar and close button

16

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 )

17

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

18

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

19

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

20

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

21

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

22

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

23

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

Continued

24

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

25

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

26

Flash Exchange

-Located at Flash’s website: http://www.adobe.com/cfusion/exchange/index.cfm?event=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

27

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