Flash Lecture 6

MouseEvents in Flash:

dogMC.addEventListener(MouseEvent.CLICK, bark);

(Does this statement look like gibberish to you?)

The Second Commandment of using FLASH

Thou SHALT know how to make MouseEvents

Introduction to Actionscript

Dot Notation

Dot notation describes objects (Properties)
Dot notation gives instructions (Functions)
Standard used in structured languages (Java, C++...etc)

Dot Notation - Describing an Object

Describing real world examples:

                                 The house is a red color.
                                 The house has two bedrooms.
                                 The car has four doors.
                                 The car gets 23mpg.
                                 The car is a white color.

Dot Notation - Describing an Object

Using Dot Notation in Actionscript:

                                 house.color = red;
                                 house.bedrooms = 2;
                                 car.doors = 4;
                                 car.mpg = 23;
                                 car.color = white;

Note: Just like a period ends a sentence,the semi-colon ends an Actionscript statement.

Dot Notation - Describing an Object

Using Dot Notation in Actionscript:

color, bedrooms are properties of the house.
doors, mpg, color are properties of the car.

Describe Objects by assigning values to a property.

Dot Notation - Giving Instructions to an Object

Using Dot Notation in Actionscript:

                                                        car.drive();
                                                            car.turnLeft();
                                                            car.reverse();
                                                            dog.bark();
                                                            dog.sit();
                                                            dog.playDead();

Dot Notation - Giving Instructions to an Object

                 Functions are denoted by the ()

                 Functions contains a list of instructions or code.

                 There are built-in functions like:
                          stop(); gotoAndPlay(); addEventListener();

                 There are custom functions we need to create.

Walk-through an Example:

http://goo.gl/dJwphg
http://goo.gl/0fHZSg

Anatomy of a Function

                     function Name( Input ):Output {
                                         // list of Actionscript Code
                     }

                                       Black box analogy:

Anatomy of a Function

Some functions have no input/output:

Some built-in functions expect an Input value-
gotoAndPlay(10); gotoAndStop("rollover");

Anatomy of a Function

Some functions can require input for an expected output:

So this example custom function could be used like this:

carMC.width = randomNumber(20,50);

we could set the width of a car movieClip to the output of a function -> a random number between 20 and 50.

Anatomy of a Function

For this semester we will just create functions
without any output values. So we use :void

function Name( Input ):void {

// list of Actionscript Code
}

Anatomy of a Function

Putting the () to good use.

We use the function input values inside the () to give
more detailed instructions to the functions.

                                         drive (); --> Speed, Direction
                                         brake (); --> Pressure
                                         bark ();    --> volume

These input values are called function parameters.

Anatomy of a Function

Creating a custom function with input parameters

                               function Name(variable:type):void{
                               }

function Name     - declares a function
(variable:type) - tells a function to expect an input type
           :void          - no function output
               {}                 - container of all the actionscript commands.

The input parameters inside the () use variable:type pairs.

Anatomy of a Function

Creating a custom function with input parameters

                                function bark(vol:Number):void{
                                               dogMC.gotoAndPlay("Bark");
                                               dogMC.scaleX = vol;
                                               dogMC.scaleY = vol;
                                }

                               if we call function bark(2);
                               --> we give instructions to the dogMC object

Anatomy of a Function

Creating a custom function with input parameters

                             function drive(speed:String):void{
                                               carMC.gotoAndPlay(speed);
                             }

                              if we call the function drive("slow");
                               --> we give instructions to the carMC object

Using Mouse Events to trigger custom functions.

dogMC.addEventListener(MouseEvent.CLICK, bark);

The () says we're giving an instruction to the dogMC object.

Look! addEventListener is a function with 2 input parameters

Somewhere inside flash this function exists:

function addEventListener(EventType, FunctionName):void{

// list of coded instruction

}

Using Mouse Events to trigger custom functions.

dogMC.addEventListener(MouseEvent.CLICK, bark);

addEventListener expects 2 input parameters.

The first is an Event Type - MouseEvent

MouseEvent.CLICK means its a CLICK type Mouse Action

Using Mouse Events to trigger custom functions.

dogMC.addEventListener(MouseEvent.CLICK, bark);

addEventListener expects 2 input parameters.

The second is a custom Function Name- bark

There needs to be a custom bark() function defined somewhere.

function bark():void{

}

MouseEvents in Flash:

dogMC.addEventListener(MouseEvent.CLICK, bark);

(Does this still look like gibberish?)

Interactive Storybooks are the modern day
digital versions of the pop-up books.

Interactive Storybooks using Flash
Animations + MouseEvents.

http://goo.gl/bAKqv
http://goo.gl/g6hlQP
http://goo.gl/50kb7o

Interactive Graphic Novels:

http://goo.gl/82r0U
http://goo.gl/mFJYG

Class Assignment - Due Apr 2 & Apr 9

Create an Interactive Storybook in Flash

Part 1 --> In Photoshop or Illustrator, layout

                       screens/storyboard
                       of a folktale/fairytale. Using the story Text + Images.
                       Make 3-8 screens to tell part of the story.
                       Due the April 2nd.

Part 2 --> Bring the screen designs into Flash and design at least
                       eight (8) different animations or visual effects using
                       MouseEvents.
                       Due the April 9th.

Interactive Storybooks using Flash
Animations + MouseEvents.

Walk-through creating a simple example.

http://goo.gl/HyMMXJ