Notes Week1 a3

7/29/2019 Notes Week1 a3

1/8

Open > Action Script 3 file.

Layers

Have a specific AS3 layer for your code. Put your AS3 on the frame that corresponds/lines-up with your

symbols in the layers below. i.e if ur symbols in the first frame, put code in first frame but in the AS3 layer

youve made.

Linkage - place objects on stage through AS3 code

var smiley_face:MovieClip = new SmileyFace();

^name of varible ^we r makn a MC ^the linkage name/the new stuff we are adding from the library - w/o dragging & dropping

(Instead of dragging & dropping from the

library) (a linkage is also a function)

Right click your symbol in the

library>Properties.

-expand to advanced

-tick 'export for action script'-Convention of naming is CamelCasing

-the name cannot be the same as any other

including its instance (for ur instance use all

lower case and under scores)

addChild(); convert to symbol>

-Name it, this will show up in library (can use spaces etc.) (symbol name isnt the same as instance name)

-Pick a symbol type

-Movie Clip (can have frames within it to create animation, this will ur default 80% of time.

-Button (click-on-able buttons, with up,over, down & hit.)

-Check Registration when you rotate your object it will rotate around that point.

-The top left default is good most of the time unless you have like a wheel, then ull want it centred.

-Symbol done, and will now show up in ur library

-Drag out of library to make copies, right click duplicate to make changes creating a similar symbol

-Double click on a symbol to work on it in isolation (use tabs up top to go back out, or dble click grey

space.)


2/8

-Deleting symbols off your stage is okay, theyll be kept in your stage

Action Script

-ActionScript is the language we use to "communicate"with objects on our display -and tell them what to

do (e.g. change color)

-Test early, Test often, Test All The Time ! Write some code test it, (cmd + enter) , if there is an error a new

tab will pop up by the timeline tab, dble click on the error description and it will highlight the line with theerror. - handy, bcoz if theres an error none of the other code will work either !

-Look out for Flashes colour coding of AS3, i.e default flash properties i.e 'width' when spelt correctly will

be automatically made blue. Also makes it easier to read code statements.

-make comments in AS3 by using //

Instances

-Objects are called instances (buttons, movie clips, text fields etc.) -To "communicate"with these

instances, we must give them names.

-Instance/Object must first be >converted to a symbol mc or btn-Select objct (1xclick) >Properties Inspector now give name

-Only name with letters(case sensitive), numbers, underscores.

-Dont start name with a number

Properties

characteristics that describe instances

-i.e. scaleX ,scaleY, x , y , rotation, width, height, alpha

Syntax:instanceName.property = value;

i.e. instanceName.rotation = 45;

Functions

e.g. stop(); trace(); addEventListener();

-they always have brackets after them

-they will turn blue if theyre standard flash functions

-you can make your own functions

Variables

-Naming : Must be unique, do not use these words:" var, this, new", case-sensitive, only use letters,

numbers, underscores , cant begin with a number.

-Common Naming Conventions: CamelCasing & Hungarian notation using s,n,r at beginning to identify by

data type.

-Think of a variable as a container. It's like a box where you can put something in. But instead of a physicalobject, a variable can contain information/MC/numbers/text.

-The var keyword is used to declare or create the variable. You only need to do that once.

The syntax for declaring a variable is as follows:


3/8

var variableName:dataType;

var smiley_face:MovieClip = new SmileyFace();

^name of varible ^we r makn a MC ^the linkage name/the new stuff we are adding from the library - w/o dragging & dropping

Data types

-Number data type is made up of numbers. 3 items. var quantity:Number;

-String data is made up of characters. example John. var firstName:String;

-The Boolean data type only chooses between 2 values - true orfalse.

var isActive:Boolean;

USING VARIBLES, LINKAGE & FUNCTIONS TOGETHER

import flash.events.MouseEvent;

var smiley_face:MovieClip=new SmileyFace();

addChild(smiley_face);

smiley_face.stop();

smiley_face.x=200;

smiley_face.y=50;

minus_btn.addEventListener(MouseEvent.CLICK, makeSad);

function makeSad(e:MouseEvent):void{

smiley_face.gotoAndStop(2);

}

plus_btn.addEventListener(MouseEvent.CLICK, makeHappy);

function makeHappy(e:MouseEvent):void{

smiley_face.gotoAndStop(1);

}

remember to add code to change x & y co-ordinates as these will have been reset to 0. i.e.

smiley_face.x=200;

To assign a value to a variable,- type the variable name = desired value. variableName = value;.

In the bottom line u can see quantity has a value of 12.

var quantity:Number;

quantity = 12;

-to do the whole thing on one line of code instead of 2>var quantity:Number = 12;

-Next, add some trace statements to verify that Flash is able to access the values assigned to the variables:

var quantity:Number = 12;

var price:Number = 1.25;

trace("The quantity is: " + quantity);

trace("The price is: " + price);


4/8

trace("The total is: " + price * quantity);

Another example:

var popArtist:String = "name of famous pop artist";

var cheese:String = "name of type of cheese";

trace("A new superhero has been spotted around campus, leaping from building to building. Who is he?

Are you sure you wanna know?\n\nRumor has it that this superhero is a student on campus who was

bitten by a radioactive " + popArtist + ". When he woke up, he felt very strange, but still decided to attend

class. His classmates thought he was acting strange, and they began to avoid him because he started

smelling like " + cheese + " mixed with burnt);

Concatenation operator

uses the plus (+) sign, allows you to concatenate or combine String values.

Example:var sFName:String = "John";var sLName:String = "Doe";trace(sFName + " " + sLName);// This outputs John Doe

Events & Event Handling

Event: i.e a mouse click, pushing of a button

(1) the starting of the game, and (2) the user pressing the space bar key. The respective responses

would be: (1) the starting of the counter for the time limit, and (2) the firing of the lasers.

Let's take a look at an actual example. In the image below, you will see that there is some ActionScript

on the keyframe on the lastframe of the Flash movie.

This last frame contains a stop() action, which will prevent the animation from looping when it

reaches the end.

So the eventthat Flash is waiting for in this example would be: the moment that the playhead enters

the last frame. While the response would be: the Flash animation stops.


5/8

User-based events

User-based events are those that are initiated directly by the user, such as a mouse click or a keyboard

press. In the space fighter game example, the user pressing the spacebar key is considered a user-

based event. Whenever the user presses the spacebar, the spaceship fires its lasers. So whatever code

in the Flash movie is responsible for shooting the lasers should be executed only when the user-based

event of pressing the spacebar key happens.

Event Listener

In order for you to be able to 'handle events' in Flash, you must write what is called an event listener.

An event listener is a function that will execute only when the specified event occurs (a mouse click, a

press of a keyboard key, etc...). In order for an event listener to know the right moment at which to

execute, it must be registered to an event's source.

3 important event handling elements

(1) the event, (2) the response, and (3) the event source.

(1)Events

An eventrefers to a specific occurrence that happens as your Flash movie runs. In ActionScript 3event handling, events are identified by specifying the event class as well as the event constant.

Event classes can be thought of as the different groups used to classify different kinds of events.

-Event,complete, deactivate, and open events etc.

-KeyboardEvent, key down (i.e. when user presses key) and key up (i.e. when a key is released)

- MouseEvent.

Event constants are specific names that refer to the events themselves. Let's consider the Within the

MouseEvent class there are constants such as clicks and mouse roll overs

CLICK - constant for a mouse click

ROLL_OVER - constant for a mouse roll over

Syntax:EventClass.EVENT_CONSTANT

e.g.

MouseEvent.CLICK specifies a mouse click event

MouseEvent.ROLL_OVER specifies a mouse roll over event

(2) ResponseA response refers to what is going to happen once Flash detects the occurrence of an event. e.g. after a

button is clicked (MouseEvent.CLICK), we can instruct the Flash movie to respond by playing an audio


6/8

file. The response is specified as a function. This function's body will contain the line(s) of code that will tell

Flash what to do. This function, referred to as an event listener (also sometimes referred to as an event

listener function orlistener function).

function eventListener(){

// response to make when the event happens}

(3)Event Source

An event source refers to the object that is directly related to the event. In most cases, it is the object from

which the event originates from. e.g. with a mouse click event, the button that was clicked would be the

object that the mouse click happened to, and is therefore considered as the event source.

Bring the 3 things together using the addEventListener()

method.

The addEventListener()method registers the event listener

function with the event source so that the event listener function

can "hear"when the event is announced.Once an event listener function is registered with an event source,

the event listener function sits there quietly, "listening"for when

the event is dispatched or announced. It then enables the

appropriate response to happen.

Syntax:eventSource.addEventListener(EventClass.EVENT_CONSTANT, eventListenerFunctionName);

function eventListenerFunctionName(e:EventClass):void{

// code for response goes here}

-Let's create an example:

1. Create a new Flash ActionScript 3.0 document2. Draw a shape on the stage and convert it into a Button symbol3. Give this instance an instance name ofmy_btn4. Create a new layer for the ActionScript, then select frame one of this layer5. Go to the Actions Panel and type the following code in the Script pane:6. my_btn.addEventListener(MouseEvent.CLICK, onClick);7.8. function onClick(e:MouseEvent):void9. {10. trace("The event handler works!");

}

You've just written some code that handles a mouse click event. Go ahead and test your movie. When you

click on the button, you should see the phrase The event handler works! come out in the outputwindow.

-In order for the event listener function to respond at the right time, the add event listener statement must

contain the following 3 pieces of information:

1. the event source2. the event3. the name of the event listener function to be executed once the event is triggered


7/8

In the example we created, the add event listener statement would be:my_btn.addEventListener(MouseEvent.CLICK, onClick);

Event Source:my_btn

Event:MouseEvent.CLICK

Event Listener Function Name:onClick

var smiley_face:MovieClip = new SmileyFace

addChild(SmileyFace);

smiley_face.stop();

now add code to change x & y co-ordinates as these will have been reset to 0. i.e.

smiley_face.x=200;

Inverse Kinematics - draw a shape - then add bones (bone tool) to it to animate (bk3 ch2)

it creates a new layer called armature

bind - you use bind to tell flash which points should be connected to which bones

Adobe kuler - creating colour palettes

motion tweening (bk3 ch2)

motion editor - for easing ins and outs etc

3D rotation - cool 3D effect

3D translation - animate values on the x y &z for a sense of depth

Deco ?

AS3 - book IV

Working with the Timeline

In a nut shell working with the timeline, you must:

-Make a button. You can do it on the Stage or by using Action Script.

-Attach a listener to the button. The listener tells the button what to listen for - usually a click on a

button.

-Write a function that alters movement on the Timeline. Actions include moving to a frame and

stopping, moving to a frame and restarting stopped movement, or starting play from the Timelines

current position.

Task: Create 2x buttons that create seperate reactions.

make 3x different layers


8/8

-1. Actions or AS3

-2.Frames

-3.Buttons

Create your buttons in buttons layer, one on frame 1 & insert a keyframe on frame 3. Convert buttons

into button symbols and name them, click advanced options, tick exportForActionScript, give class a

name in CamelCasing. Then assign them instance names. In the frames layer, frame 1 is ur default txt,frame 2 is the text you want the first button to reveal, and frame 3 is the text you want the secound

button to reveal (these would be like your differnt web pages different content). Insert a keyframe on

frame 3 of the Actions or AS3 layer. (TIP:lock all layers apart from the one your working on to avoid

mistakes.) In this scenario the first button was named 'Win' and the second 'Lose'.

-----------------------------------------------------stop();

Win.addEventListener(MouseEvent.CLICK,goWin);

Lose.addEventListener(MouseEvent.CLICK,goFearless);

function goWin(e:MouseEvent):void

{

gotoAndStop(2);

}

function goFearless (e:MouseEvent): void

{

gotoAndStop(3);

}

-----------------------------------------------------

1. The play head has stopped with the stop(); statement

2. The event listener was added to both the Win and Lose instances of the buttons. Each one listens for a

button CLICK.

3. The Win button's function is goWin(); the Lose button's function is goFearless();. Each function moves

the playhead to the keyframe youve told it to go to.

in Actions box try utilising 'Auto format' and 'Show Code Hint

Action Script files & classes

Writing code on the timeline is not ideal. So we want to write code that is independent of the timeline. We utilize how flash

stores symbols in the library, and identify the different symbols by their class names. (right click symbol in

library>properties>advance>tick export for action script 3> rename class name in CamelCase)

Notes Week1 a3

Documents

Transcript of Notes Week1 a3