Movie Clips

Movie clip symbols

•Movie clips have their own timeline•A Movie clips timeline can contain content and be animated just like the main timeline (scene 1 timeline)•Can contain multiple layers, including graphic symbols, button symbols, and even other movie clip symbols, animations, sounds, ActionScripting, and more•Movie clips or MC’s continue to play even if the Main Timeline has stopped•MC are called “Timeline Independent”•Must preview their animation in the main timeline by previewing movie: Control>Test Movie

Movie clip demo

•Insert>New Symbol•Name your Movie clip•Select Movie clip option•Create a tween in the movie clip timeline•Click on scene 1 to return to main timeline•Drag instance of movie clip onto stage•Click on f5 to extend movie clip for desired duration•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

Animated Movie clips vs Animated graphic symbols

•Create a new graphic symbol•Add an animation to the graphic symbols timeline •Make animation at least 20 frames long•Exit symbol timeline (click on Scene 1)•Drag instance of graphic symbol onto timeline•Control>Test Movie•Create a new layer•Drag an instance of an animated movie clip symbol onto the timeline (use MC from last example)•Have both symbols appear for 10 frames (f5 adds frames)•Control>Test Movie•Graphic symbol displaying in the main timeline must have the same number of frames as the animation inside its timeline in order for the whole animation to show

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 blank key frame (f7) to the over state-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 the over button state

Importing libraries from previous projects

•You can import library items from other flash projectsFile>Import>Open External Library

•Open the desired project file (.fla)•Switch back to current project by clicking on project tab above timeline•On Library panel switch to other project, click on drop down menu at top and select the desired library/project•Drag an instance from library onto the stage •A copy of the symbol will be added to the current projects library•Switch library back to the current project, click on drop down menu at top and select current project

Working With Text

8

Spell Check

•Flash allows you to run a spell checkText>Check Spelling

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

9

Three different types of text elements:

-Static text

-Dynamic text

-Input text

10

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.

11

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 location•Use dynamic text when you want to automatically show information that is updated often

12

Input Text

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

13

Modify text

•Select text block•Select desired font

Properties Inspector>Font•Select desired size•Use device fonts should NOT be checked•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.•Font will actually become embedded in movie

continued

14

Modify text continued

•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

15

Anti-Aliasing text

•Anti-aliasing attempts to remove aliasing by blurring the edges to make text appear smoother and less pixilated•Aliasing is also often described as jaggies, stair stepping, sharp edges•Anti-aliasing on by default•When using font size 10 pt and smaller it is recommended that you turn off anti-aliasing, doing so actually makes the text look sharper•To turn anti-aliasing off, select text block

Properties Inspector>Alias text buttton

16

Dynamic text field Actionscript 2.0

•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, MultilineOptionally select 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)

continued

17

Dynamic text field continued

•In the Properties Inspector under the Var: (variable) field type a variable name, for example content•Open a simple text editor such as TextEdit (Mac)•When using TextEdit make sure to set preferences to plain text first, then start a new document•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

18

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

19

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 content

content.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)

20

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

21

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

22

Scrollable Dynamic Text Actionscript 2.0

•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> onSelect release from code hint

continued

23

Scrollable Dynamic Text continued

-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

24

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 -=1For example the code for the up button should read:

on (release) {textBio.scroll-=1}

-Control>Test Movie

25

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

26

Input Text Actionscript 2.0

-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

27

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 button

continued

28

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

29

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

30

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

31

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

32

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

33

Bandwidth Profiler

•Open an existing flash projectControl>Test Movie

•While movie is playing open the profilerView>Bandwidth Profiler

•Size displayed is the file size of your .swf file

34

Variable

•Variable are used in programming•Actionscript can use variables•A variable is a saved or stored value•Varaible holds a specific value

variablename=“value given to this variable”;

35

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”

36

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

37

String literal vs expression

String literalCan be used with a word or words with spacing and/or numbers spacing, quotes requiredjoe=“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

Expression 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