SIM1 - Class 06 - 2011

Subject SIM1 - Interactive Media 1
Competencies

BSBINN502A.1 - Build and Sustain and Innovative Work Environment (part 1)
CUFDIG506A.1 - Design Interaction (part 1)

Course Title ADVANCED DIPLOMA of SCREEN AND MEDIA (CUF60107)
Teacher Lisa Cianci - email: lisa.cianci@vu.edu.au
Class Website: http://lisacianci.vucreativeindustries.com/2011/SIM1
                         (username & password = student)

Flash and ActionScript

Today we will be covering the following topics:

 

Today we will look at getting bitmap graphics into Flash, making some text fields, and in particular, scripting for MovieClip properties - which will allow you to manipulate and control movieclips in the various screens of your interactive We will also look at how you target instances of MovieClips on different frames in the main timeline - crucial to making your Flash pieces work.

You will also be given your team allocations for Assessment Task 2 and will have the chance to get together in class and discuss concepts.

 

Graphics and Text in Flash

Read these sections in Flash Help for a good overview of the types of bitmap and vector image files you can import to Flash, and read all about text and fonts in Flash. We will use text and imported imagery in today's exercise so you can see how to put this information into practice.

using imported artwork in Flash

using text in Flash

 

 

Movieclip Properties

here's a list of movieclip properties that you will commonly need to use in AS3 (note the AS2 ones for those of you who are used to the old property names and values):

Common MovieClip Property Names
ActionScript 2 ActionScript 3
_name name
_x x
_y y
_width width
_height height
_xscale (0-100) scaleX (0-1)
_yscale (0-100) scaleY (0-1)
_rotation rotation
_alpha (0-100) alpha (0-1)
_visible visible
_xmouse mouseX
_ymouse mouseY
_parent parent

 

It's easy to manipulate these MovieClip properties:

square1.alpha = 0.5; //gives a 50% alpha transparency to your MovieClip instance

if you want to directly target the instance and event within a function and which your function is linked to, then you can refer to it like this:

e.target.alpha = 0.5;

where 'e.target' is the instance being targeted by the event listener attached to the same instance (the 'e' is the name you give to the function parameter - (e:MouseEvent), for example.

When you need to control MovieClips on different frames, you need to consider where you place the listeners (addEventListener()) because you cannot create a listener without having an instance for it to attach itself to. For example: you cannot have a listener on frame 1 for an instance that does not appear until frame 10 - this would throw an error to the Compiler Errors panel. The Flash player is not aware of the existence of an instance on a frame other than the current frame the playhead is on. So how do you target an instance on frame 10 (or any other frame) when you create a document class file?

The exercise we will do today shows how this is done. It's all in the placement of the listeners within the document class methods (functions of the document class):

here is the listener and method for a button script (button2 instance) in a document class:

button2.addEventListener(MouseEvent.MOUSE_UP, b2scripts); //this listener is in the init() method;

private function b2scripts(e:MouseEvent):void {
gotoAndStop(10); //send the playhead to frame 10
square2.buttonMode = true; //set the buttonMode to true
square2.addEventListener(MouseEvent.MOUSE_MOVE, s2scripts); //add the listener for square2
myText.text = "square rotation = " + square2.rotation; //change text in the dynamic field
}

it sends the playhead to frame 10 of the main timeline first, then creates the listener for the square2 instance because the square2 instance will be there on that frame.

I have provided an example of a flash file that contains navigation from a main screen + four other screens, and shows examples of how to manipulate movieclip properties.

get the FLA file here - movieclipTest1_empty.fla.

Make sure you save this file into your own working folder e.g. "class06". Create a subfolder in your working folder called "classes"

To get the code for this exercise, grab a copy of this Main.txt file, save it to your 'classes' folder, and rename it Main.as.

Now open up the movieclipTest1_empty.fla file provided and note the following things:

Open the Main.as file and note the following things:

In the Library of the FLA file, note the animation movieclip symbols. try dragging and dropping some onto the main timeline in the animations layer. Note how they behave. If you remember the scripts we used in class 5, you could try adding some code of your own to play() and stop() these animation instances.

The structure and scripting for this file should give you enough basic information for you to control movieclips at a basic level. Today's exercise may assist you with working on your interface for Assessment Task 1 if you haven't already, and get all of your content into the Flash file, in movieclip symbol instances that are placed on the right layers and keyframes in the main timeline. also, make sure you give instance names to everything you want to control with Flash.

You can use scripts on frame 1, but you may want to start getting your scripting working in a document class too. The best way to start is to get the code working for the navigation (buttons) that will take you to the different screens - this will allow you to test each section thoroughly as you develop your content for each screen. Then start adding the code bit by bit for each screen - beginning with the main interface and working your way along.

REMEMBER - you can't write scripts (listeners in particular) for content that doesn't exist - you must have the instances there on the main timeline for your code to work properly otherwise it will throw out errors. Don't worry if you seem to have a lot of errors - everyone will need to debug their code, and it often teaches you a lot about Flash and ActionScript.

PAY ATTENTION to the error messages in the Compile Errors panel - it will often tell you which line the error is on, and may give you a hint as to what the problem is. the most common errors are:

We will spend most of Week 7 working on this project also, so you can ask me to help you debug your code, or to check the structure of your Flash file to make sure you've got everything optimised and working properly.

 

Teams for Assessment Task 2 (Children's Interactive Story)

*Red Team*

Alastair
Haris
Damian
David

*Blue Team*

Justin
Biswash
Carmen
Kane

*Yellow Team*

Dean
Eric
Suzana

 

Today you will get the chance to start discussing AT2 with your group - what you need to do by class 9 is come up with a concept for your children's interactive.

Do some research online and look at the materials provided to help you with ideas. Make sure you read the assessment task brief very carefully for all requirements and due dates.

References for AS3

 

Use any remaining time to work on your assessment tasks.