COMPUTER GRADE 7

COMPUTER GRADE 7

COVERAGE FOR SECOND GRADING

ANIMATION IN A FLASH

Lesson 5 : Animation! Animation

Lesson 6: Character Development

Lesson 7: Mask Text and More

Lesson 8: Interactivity

Lesson 9: Flash for the Web

*** Lesson 5 and 6 were already discussed so handout regarding these lessons will be posted later.***

Lesson 7: Mask, Text and More

Flash allows you to cover certain portions of your animation because in animation exaggeration is used in order highlight a point.

MASKING- an animation technique in which a portion of an image is covered by a layer so that certain effect could be produced.

Mask Layer – the layer which contains a shape or object that will show the contents of the covered layer.

Masked Layer – The layer underneath the mask layer. (covered layer)

Text Tool – Is used to put text on your animation.

Text Types:

a. Static text – used for creative and graphic purposes.

b. Dynamic Text – used for website functions, allows multiple lines of text to be displayed

c. Input text – used for interactivity; for passwords and games

Breaking text Apart – is used if you want to animate each single letter which means you want to make each letter a separate object. (CTLR + B once)

Converting Texts to Vector images – Break the text twice (CTRL + B twice)

Distributing text to Layers – Allows you to distribute broken down text to individual layers by right-clicking the selection and selecting Distribute to Layers.

Animation Tips:

The stage in Flash can be linked to the viewfinder of a camera. It defines the limits of the area that will be visible in your animation.

Shots –The followings shots can be done by modifying the size of the object relative to the stage.

      a. bust shot            b. close up shot          

c. face shot           d. full body shot

      e. long shot            f. medium shot           

g. waist shot

*One skill that animators and artists need to develop is their sense of perspective.

Perspective – is the recreation of how an image is viewed in space.

a. Bird’s eye view – focus on the object comes from above it.

b. Worm’s Eye View – Focus on the object comes from the ground.

c. Fish’s Eye View – focus on the object come from below the ground or water.

LESSON 8 – Interactivity

The Action Panel is where you place lines of codes in order to add interactivity to the animation.

ActionScripts – is the programming language use for flash applications. It tells the flash movie even the Web browser or computer what to do. Codes written in in ActionScripts are placed in the timeline or attached to buttons and movie clips.

Commands - instructions to tell the Flash what to do.

Functions - a series of commands to do specific task.

Operator – predefined functionality such as adding and subtracting

Variables – to store information.

- begin with letter, underscore or dollar sign. Spaces are not allowed in variables names.  It is recommended to start with a lowercase letter and then use uppercase letters for succeeding words.

 Data Types – represent certain values. Allowable values are integers and negative whole numbers, floating numbers and strings.

Conditionals – makes the flash movie decide which course of action to take.

Example of conditional statements are the if and else statement.

If (condition) {

                        Statement1;    }  

else {     statement2;        }

Loops – instructions for flash to repeat actions.

a. For loop 

   for (initialization; condition; incrementation)

     {     statement;    }

b. while loop

    while (condition)

   {    statement;   }

c. do while  loop

   do  {   statement;  

   } while (condition)

Example of ActionScript Program

The ball will initially roll from left to right; when it hits the right side of the screen, it will change its direction and roll towards the left. And when it hits the left side of the screen, it will again change direction and roll towards the right. Our button should be able to change the direction of the ball, so when the ball is rolling towards the left and we press the button, it will go to the right and vice versa.

We will need two objects: a movie clip and a button. The movie clip “ball” has several lines of codes in it for it to roll:

onClipEvent(load) {

    var dir: Number = 0;

}

onClipEvent(enterFrame) {

    if (dir==0) {

       this._x+=5;

        if (this._x>650){

       dir=1;

      }

}else if(dir==1)  {

     this._x-=5;

      if(this._x<100) { 

     dir=0;

  }

}

}

Add the following lines of code to the button so you can change the direction of the ball anytime.

on(press) {

  if(ball.dir==1) {

    ball.dir=0;

} else if (ball.dir==0) {

   ball.dir=1;

}

}

Button states – the four main states inside the button.

a. up state                  b. over state   

c. down state               d. hit state

Lesson 9 – Flash for the Web

Pure Flash Websites

            To navigate around your pure Flash websites, use buttons that will execute gotoAndStop() commands.

1. Create a blank keyframe and five it a label, in this sample, the label is “home”.

2. Create blank keyframes and implement your designs on these frames. Don’t forget to put labels on the frames.

3. Create  new layer that will contain your buttons. The buttons created will be executing gotoAndStop() commands to navigate through your frames. Select the button, then on the action panel type the following lines of codes.

    on(release)  {   gotoAndStop(“home”);  }   

4. Place stop() commands as actions on very keyframe you created from steps 1 to 2. If no stop() command is used, the movie clip will display the first frame up to the last frame repeatedly when the document is published