Flash CS3 Pro HOT

Movie Clips

Movie clip symbols

-Continue to play even if the Main Timeline has stopped, “Timeline Independent”

-Can contain multiple layers, including graphic symbols, button symbols, and even other movie clip symbols, animations, sounds, ActionScripting

-Must preview by clicking on:

Control>Test Movie

Movie clip demo

-Insert>New Symbol-Name your Movie clip movSample (or any name you want) -Select Movie clip option-Create a tween or animation on the movie clip timeline-Click on scene 1 to return to project timeline-Drag instance of movie clip onto stage-Click on Control>Test Movie to preview-Movie clip will repeat and unlike a graphic symbol with animation it doesn’t need to have more than one frame in the project timeline-Movie clips are timeline independent, they continue to repeat

Movie clips vs Animated graphic symbols

-Create a new graphic symbol-Within the graphic symbol timeline create an

animation-Exit symbol timeline (click on Scene 1)-Drag instance of graphic symbol onto timeline

-Control>Test Movie-Drag an instance of a movie clip symbol onto

timeline

-Add frames to Scene 1 timeline (must have same number of frames as graphic symbol to play)

-Control>Test Movie

Movie clips can added to button states

-Edit an existing button or create a new button

-Add an additional layer to the button

-On this layer insert key frame (F6) to the desired button state that you wish to add the movie clip to

-Drag movie clip form library onto this key frame

-Click on scene 1 to return to project timeline

-Add button to stage

-Control>Test Movie

-Movie clip should play during that button state

Importing libraries from previous projects

-You can import library items from other flash projects

-File>Import>Open External Library

-Select the desired .fla file

-This will open only the library from this project file

-Two libraries will be open

-Dragging an instance form this new external library onto the stage will copy the symbol into the internal library

Flash CS3 Pro HOT

CH 13Working With Text

8

Spell Check

-Text>Check Spelling

-Select Change to approve each change or Change All to automatically change all found typos at once

9

Bandwidth Profiler

-Open an existing flash project

-Control>Test Movie

-View>Bandwidth Profiler

-Size is the file size of your .swf file

10

Variable

-A variable is a container that holds information or a value

variablename=“value given to this variable”;

11

variablename=“value given to variable”;

Example:

joe=“Joe Cool is cool”;

-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”

12

variablename=“value given to variable”;

-Quotes around value allow you to have a string for its value, a string simply means a word or words or a combination of words and numbers for its value such as a phrase

-Values for variables can also contain numbers

-variablename can contain only letters, numbers with letters, and underscores, no spaces

-Should begin with lowercase letter though

-Cannot begin with numbers or underscores

13

String literal vs expression

String literal (can be used with a word or words with spacing and/or numbers 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 (number, no quotes required, no spacing or letters allowed)joe=5367123;

An expression represents a value and can be interpreted by ActionScript to do something like a calculation or ??

14

Three different types of text elements:

-Static text

-Dynamic text

-Input text

15

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.

16

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.

17

Input Text

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

18

Modify text

-Select text block

-Properties Inspector>Font>Arial and select 12pt

-Use device fonts should NOT be checked

-Font becomes embedded in movie

-Checking device font will not embed font and instead use built in device font if the viewer does not have that font installed on their system.

-Built in device fonts are also listed under the fonts area within the property inspector:

_sans or _serif or _typewriter

-In this example almost all users should have Arial font but embedding the font guarantees this font will be used

19

Anti-Aliasing text

Anti-aliasing attempts to remove aliasing (jaggies, stair stepping, sharp edges) by blurring the edges to make text appear smoother and less pixilated

-Anti-aliasing on by default

-When using font size 10 pt and smaller it is recommended that you turn off anti-aliasing which will actually make the text look sharper

-To turn anti-aliasing off

-Select text block

-Select Properties Inspector>Alias text buttton (looks like letter A)

20

Dynamic text field

-Start a new project-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 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

21

Dynamic text field continued

-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 text editor-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

22

Dynamic text field continued

-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();

or select this action by choosing Global Functions>Browser/Network>loadVariables -Next, we need to add the text file filename we are dynamically linking to-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 (scene1)For example:

loadVariables(“content.txt”, this);continued

23

Dynamic text field continued

-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 and the Show Border Around Text is selected-If you still have problems viewing check to make sure you have named all correctly and use same names

content is the variable namecontent= defines the text as the dynamic contentcontent.txt is the text filecontent.txt has to be in the same folder directory as

flash project fileloadVariables(“content.txt”, this); loads content.txt file

into the variable, content, in the this timeline (current scene)

24

Dynamic text field and HTML

You can add select HTML tags to your dynamic text field-Open up the Flash project from last example-Open up text file (content.txt) from last example-Add bold tags around the first sentence by adding opening and closing HTML bold tags <b></b> -For example the opening text in my content.txt file would look like the following:

Content= <b>First sentence is here. </b> Second sentence…-Within Flash select the Dynamic text field and within the properties inspector select the Render as HTML button (looks like a less than and greater than sign <>)

continued

25

Dynamic text field and HTML continued

-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 for all supported tags:Flash>Help>ActionScript reference>Working with Text>Using HTML-formatted text>Supported HTML tags

26

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-Create two buttons, up and down-Add a buttons layer-Place instance of down button on the buttons layer-Open the Actions panel (f9)-Global Functions> Movie Clip Control> on

Select release from code hintcontinued

27

Scrollable Dynamic Text

-Insert a blank line below on(release) {-Select Built-in Classes> Movie> TextField> Properties> scroll-Modify instanceName to the instance name you used in the last stepFor example, I will use textBio in this example

on (release) {textBio.scroll}

-After the word scroll, add +=1 (1 represents the number of lines to scoll, scrolls up one line)

textBio.scroll+=1continued

28

Scrollable Dynamic Text continued

-Repeat these steps for the up button, modify your code so that the scroll code for the up button instance

reads -=1

For example the code for the up button should read:

on (release) {

textBio.scroll-=1

}

-Control>Test Movie

29

Dynamic Text and CSS

-Flash supports CSS Cascading Style Sheets (CSS)

-Allows you to create text styles to apply to HTML documents

-In the last example Flash loaded a dynamic text file and rendered the text as HTML

-You could apply CSS styles to this document

-See book for examples

30

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

31

Input Text continued

-Within the Properties Inspector change the Text Type to 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 buttoncontinued

32

Input Text continued

-Click on the Character button within the Prop. Insp.-Select the Specify Ranges option and select both the Uppercase and Lowercase (Shift click), click OK-Create a submit button and add below input box-Select the button and open the Action panel (f9)-Global Functions> Movie Clip Control> on

Select release from code hint-Type a comma after release and select k options (press k and scroll down) and choose keyPress”<Enter>” from code hint-Add a blank line below this line-Choose Statements>Conditions/Loops>if-Between the parentheses and after if type the following:variablenamegoeshere!= null

continued

33

Input Text continued

-Replace variablenamegoeshere with the name of your variable assigned to the input text box in the first step

!= means not equal to and null means blank-Insert a blank line below-Choose Global Functions> Timeline Control> nextFrame -Your code should look similar to the following:

on (release, keyPress "<Enter>") {if (inputName!=null) {nextFrame();}}

-Note: inputName represents the variable name that I assigned to the input text box

continued

34

Input Text continued

-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 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

-You should not select the Border Around Text button continued

35

Input Text continued

-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 variablenamegoeshere =

-Replace variablenamegoeshere with your variable name from the last sep

-For this example I used message =

-After message = type the following:

“Welcome, “+inputvariablenamegoeshere+”. Thank you for visiting”;

continued

36

Input Text continued

-Replace inputvariablenamegoeshere with the variable name you used for the input text variable

-For this example I used the variable inputName

-Your code should look similar to the following:

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