lab 4 challenge task only - lab 6 task 1, task 2, and challenge task

Practical Activities/week04/sit363-lab04.html

SIT363: Authoring of Interactive Media Week Four Lab: Working With Actionscript

Goal

This lab is dedicated to consolidating the techniques that we have learnt so far. By now you should have developed your skills to a stage where you can start working through the textbook. It would be a useful exercise to work your way through Chapter One. The project in Chapter One creates a complete Flash project that demonstrates a number of tools and fundamental Actionscript commands.

Aims

At the completion of this session you should be able to:

• add scripts to Flash movies to create simple interactive media interfaces.
• develop scripts that interact with data elements.

Background

This Flash project will develop a simple interface to move backwards and forwards through a set of photos. This interface was developed using "buttons" as interactive elements and "event listeners" to identify when buttons are clicked.

Please download the Flash projects associated with these examples and review the code.

Buttons

In this exercise you can use the Flash built-in button library. You can find this library using the menu: Window->Components. From the pop up menu select User Interface and then select the Button  option.  After you have selected your button, you can (if you wish) edit its properties to change the way it looks.

To use your button you need to do the following:

1. Use the button properties window to give the button an instance name, e.g. btnPicOne
2. Create a script in a new layer in the same frame as the button.
3. Create a button event listener for each button in the frame, e.g.     btnPicOne.addEventListener(MouseEvent.CLICK, doPicOne);
4. Include a stop(); command after you have defined all of the button event listeners.
5. Create a function for each event handler that will respond to each event listener, e.g.     function doPicOne(evt:MouseEvent):void {         gotoAndPlay(2);     }

Task 1: Using buttons for Navigation

In this lab we will develop a few projects that extend these concepts.

Task 1: Using buttons to switch between two different displays (Part 1). We want to create a menu display that offers two choices: Show Pic One and Show Pic Two. When the user clicks the "Show Pic One" button, the movie "jumps" to display the first picture. The first picture needs to have a button that takes the user back to the menu. Clicking the "Show Pic Two" button will "jump" to the second picture. It will also have a back button to take the user back to the menu.

The code for frame 1 will look something like:     btnPicOne.addEventListener(MouseEvent.CLICK, doPicOne);     btnPicTwo.addEventListener(MouseEvent.CLICK, doPicTwo);     stop();     function doPicOne(evt:MouseEvent):void {         gotoAndPlay(2);     }     function doPicTwo(evt:MouseEvent):void {         gotoAndPlay(3);     }

 

Now you will need to think about the internal navigation that needs to occur between the picture pages and the main menu frame.

If we look at the process that we have just used to move between the main menu frame and the picture frames we can identify the types of information which will be needed for this next step.

Therefore we will need the following on the picture frames:

• a button (one that is not a copy of the previous button) Copied buttons share the same properties and therefore will be connected.
• script that will tell the button what to do and where to take the end user back to: btnBack1.addEventListener(MouseEvent.CLICK, doBack1);       stop();     function doBack1(evt:MouseEvent):void {         gotoAndPlay(1);     }

Now you are ready to try out your Button Navigation.

 

Task 1 - Part 2: Using buttons to switch between two different displays (Part 2). Build a similar project to Task 1 except this time build the interface to complete an animated transition as the menu morphs into Pic One and back into the menu. Repeat for Pic Two.

 

Task 2: Building Buttons

Building Buttons (Part 1).

You will recall from the lecture that the action of using a button involves three main states: the button waits for the mouse pointer; the mouse pointer is over the button; and the user interacts with the button. Therefore to build a button we need to create an object that exhibits these three states.

To build your button you need to create a new symbol object. Choose Insert->New Symbol... from the menu. Don't forget to change the symbol type to "Button".

• You will see the three button states and separate frames within the timeline.
• Create a new keyframe in each of the button state frames.
• The last frame in the button is called "Hit". This frame defines the area of the button that is active.
• Add a new image to each keyframe (button state) that defines what the button looks like during each action.
• Generally, the same image is used with slight variations that simulate response to "Mouse Up", "Mouse Over" and "Mouse Down" actions.
• Close the symbol definition. It will be saved in the library. To use your button drag it from the library onto the stage.

Practice this technique by creating a few variations. Experiement with using bitmap graphic images, vector graphic images, or text. Try using visual effects (convert the image to a movie clip and then apply a filter) to create variations between the burron states.

Building Buttons (Part 2).

Build a similar project to Task 1 except this time build an animated sequence for the over state of the button.

To build an animated sequence you need to follow the following steps.

• Build the button as outlined in Task 1.
• Selction the "Over" frame.
• Open the image associated with the "Over" frame by double-clicking.
• When the image is open, you will reveal a new timeline. This timeline that then be contructed in exactly the same way that you constructed timelines in weeks one or two.
• Build an animation within this timeline.
• Close the animation timeline by backtracking along the breadcrumb trail at the top of the stage.

Practice this technique by creating a few variations. Experiment with using animations within the other button states.

 

Challenge Exercise: Face Selector

Using buttons and layers.

Build a new project that places a number of objects on the stage but not within the visible area. Each object should be on its own layer. Use a button menu to select which objects become visible. You can use this approach to build a face as shown below. Try clicking the same button more than once.

 

Help for Task 2:

var g_face:int = 0;

var g_eyes:int = 0;

var g_nose:int = 0;

var g_mouth:int = 0;

var MyBase:MovieClip = Base;

btnFace.addEventListener(MouseEvent.CLICK, doChangeFace);

btnEyes.addEventListener(MouseEvent.CLICK, doChangeEyes);

btnNose.addEventListener(MouseEvent.CLICK, doChangeNose);

btnMouth.addEventListener(MouseEvent.CLICK, doChangeMouth);

stop();

function doChangeFace(evt:MouseEvent):void {

    SquareFace.x = 620;

    RoundFace.x = 620;

    OvalFace.x = 620;

    g_face = g_face + 1;

if (g_face==1) {

   OvalFace.x = 350;

   MyBase = OvalFace;  

}

else if (g_face==2) {

SquareFace.x = 350;

MyBase = SquareFace;

}

else if (g_face==3) {

RoundFace.x = 350;

MyBase = RoundFace;

}

else { g_face = 0; MyBase = Base;

}

}

 

This is an example of what you layout for this task should look like.

 

Reflection Questions:

Please use the Reflection link below to complete the following reflections questions and submit them to your Portfolio.

Practical Lab 4 Reflection Questions:

1. What did I learn in this week’s activities?

• Write a Short statement about what you have learnt in this week's practical class.

• Which task did I find most challenging?

• Out of the three tasks today which did you think was the most challenging?