Practical ActivitiesWeek06lab08-1.pngPractical Activities.docx

Practical Activities/Week06/lab08-1.png
Practical Activities/Week06/sit363.css
body {
background-color: #FFFFFF;
color: #000000;
font-family: verdana, veneva, helvetica, sans-serif;
font-size: 10pt;
margin: 20px;
}
h2 {
color: #3333cc;
font-size: 130%;
font-weight: bold;
text-align: center;

}
h3 {
color:#006699;
font-size: 120%;
}
h4 {
color:#9900ff;
font-size: 110%;
}
p {
text-align: left;
margin-left: 15px;
padding-left: 0px;
}

.brand {
color:#000000;
font-size: 120%;
text-align: center;
}
.yellow_box {
margin-left: 60px;
margin-right: 60px;
padding: 4px;
border: 1px solid #000000;
background-color: #FFFFE0;
}
.green_box {
margin-left: 60px;
margin-right: 60px;
padding: 4px;

background-color: #E0FFE0;
}
.blue_box {
margin-left: 60px;
margin-right: 60px;
padding: 4px;
background-color: #E0E0FF;
}
.red_box {
margin-left: 60px;
margin-right: 60px;
padding: 4px;
background-color: #FFE0E0;

}
strong.big {
font-size: 120%;
}
.red_bold {
color: #F00;
font-weight: bold;
}
.greencode {
font-family: "Courier New", Courier, monospace;
color: #009F00;
font-size: 11pt;
}
.bluecode {

color: #0000FF;
font-size: 11pt;
}
.blackcode {
color: #000000;
font-size: 11pt;
}
Practical Activities/Week06/lab08-5.swf

Practical Activities/Week06/sit363-lab06.html
SIT363: Authoring of Interactive Media
SIT363: Authoring of Interactive Media
Week Five Lab: Building InteractionAims
At the completion of this session you should be able to:use
multi-layers and multi-frames to create a Tab interactionuse
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: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?

Practical ActivitiesWeek06lab08-1.pngPractical Activities.docx

Practical ActivitiesWeek06lab08-1.pngPractical Activities.docx

Recommended

Recommended

More Related Content

Similar to Practical ActivitiesWeek06lab08-1.pngPractical Activities.docx

Similar to Practical ActivitiesWeek06lab08-1.pngPractical Activities.docx (20)

More from ChantellPantoja184

More from ChantellPantoja184 (20)

Recently uploaded

Recently uploaded (20)

Practical ActivitiesWeek06lab08-1.pngPractical Activities.docx