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

Practical Activities/Week06/sit363-lab06.html

SIT363: Authoring of Interactive Media

SIT363: Authoring of Interactive Media Week Five Lab: Building Interaction

Aims

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

• use multi-layers and multi-frames to create a Tab interaction
• use Actionscript to change the colour of symbols

Our goal in this lab is to create the Flash tabbed interface shown below. Spend a few minutes playing with the interface and working out what each component does. You can change the colour of display background using the first tab. On the second tab you can select between no symbol, a square or a circle symbol. As well as selecting a symbol, you should also be able to change the colour of the symbol.

Task 1: Create the Shape picker / colour change outcome as presented above, by following the steps below.

 

 

Step 1 - Frame 1

In the first stage you will need to setup your project. You will need 5 layers. I labelled mine (top to bottom): Scripts, Toolsets, Tabs, Workspace and Background as shown below.

Build the Flash presentation over three frames. Frame 1 will set up the symbols. Frame 2 will host Tab 1 and Frame 2 will host Tab 2.

Work only in Frame 1 for the moment. In the Background Layer, set the colour for the Stage. I have used a pale blue colour. In the Workspace Layer, create three shapes. The white square is placed on the stage with a black border. Convert this shape into a Movie Clip symbol. I used the name "Workspace" for this symbol. Now create two other shapes off-stage. I have positioned these to the left of the stage but they can be created anywhere. Make the shapes about the same size and create them with no border. Your Workspace Layer should now look like the one below:

You will need to give each of the symbols an instance name. I have used myDisplay, mySquare, and myCircle for my names.

Step 2 - Frame 2

Frame 2 hosts Tab 1. The Tabs are created by combining a number of rectangle shapes together. Don't worry about the Shape Tab button yet. Just concentrate on getting your Base Tab looking right. When you are done, convert the whole Base Tab to a symbol.

Create a button object to make the Shape tab. You can give this object any animation properties that you like. I have given the Over frame a green border, and changed the shading lines in the down frame. Position the Shape tab button so that it looks like the next tab to be selected as shown below:

The Toolset Layer in Frame 2 holds the colour selector object. Add some text and an instance of the Color Selector Component. Give the Color Selector an instance name. The complete Frame 2 will look like the image shown below:

Step 3 - Frame 3

Frame 3 is developed in almost the same way that we developed Frame 2. The are some obvious differences which you can identify by looking at the sample. The main difference is the Toolset layer for this frame. The Toolset consists of three button objects: a text button ("Name"), a square button and an circle button. I have not created any animation effects with these buttons. Also on this layer is a square, unfilled box shape that has been converted to a symbol. This symbol is positioned over the "None" button initially.

Step 4 - Actionscript Frame 2

Frame 1 has no Actionscript associated with it. We want the presentation to flow directly into Frame 1. We could have buildt the presentation with Frame 1 and Frame 2 combined. However, I have separated them here just so you can see how the development process works.

The Actionscript in Frame 2 needs to set up the presentation and then activate the two interaction elements on this frame: the Shape tab button and the Color Selector object.

The Actionscript for this frame should be familiar to you. There are no suprises here. You need to create an event listener and an event handler for each of the interaction elements:

This script shows how you can modify the colour of symbols. First you need to create a variable that creates an instance of a colorTransform class. It is defined by initializing it to the colorTransform object that is part of the Stage (the "this" object). Once created the color is changed to the selected colour. Lastly, the colorTransform is applied to the myDisplay object.

Step 5 - Actionscript Frame 3

The script for Frame 3 is a bit more complex. There are five interactive elements in this frame: the Base tab button, the "None" button, the Square button, the Circle button, and the Colour Selector object. Create an event listener for each object.

The Base tab button and the Colour Selector object have simple actions as you can see below. With the colour selection, the principles are the same as shown above. We need to change the colour of both the square and the circle so that when the user changes the shape, the colour will match what has been selected.

The most complex interactions are those related to selecting the shape to view. These interactions need to swap the shape symbols and to move the yellow selection box as well. The position of each box is hardcoded into the functions. Note that a negative value means that the object is off-stage. Also note how the shapes are centred within the workspace.

Task 2: Once you have this presentation working, modify the set of shapes so that you can also include a triangle symbol in your selections.

 

Challenge Task:

Based on the Tasks above create a Flash presentation that includes three tabs. Each tab should display one of the interactions (different one on each tab) that you have constructed in previous weeks.

 

__________________________________________________________________

 

Reflection Questions:

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

Practical Lab 5 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 part of this weeks task did I find most challenging?

• which section of the task did you find the most challenging?