sm1205 interactivity topic 03: flow control spring 2010scm-cityu1
Post on 20-Dec-2015
214 Views
Preview:
TRANSCRIPT
SM1205 Interactivity
Topic 03: Flow Control
Spring 2010 SCM-CityU 1
Button
• Simplest UI element• Map action to each button
Spring 2010 SCM-CityU 2
pressperform action
Exercise
• Use 2 buttons to control the size of the photo
Spring 2010 SCM-CityU 3
Album Example
• Two buttons for nagviation (Previous & Next)
Spring 2010 SCM-CityU 4
Album Example
• Load Image sequence as keyframes– Create new Flash file (AS3.0)– Open menu item “File => Import => Import to stage”– Select the first photo file (d/l from course homepage)– The system finds image sequence, answer “Yes” to
load the all files
Spring 2010 SCM-CityU 5
Album Example
• Add Controls• Add one more layer (layer2)• Add two buttons to this layer (btn_prev, btn_next)
– Open “Window => Common library => buttons”– Select and add the button you like
• Add a dynamic text field(txt_index)
Spring 2010 SCM-CityU 6
Album Example
• Add ActionScript & test the behavior• Goto frame 1 layer 2• Open the action panel (press F9)• Type the code in next slide
– We will explain the code
• Press Ctrl+Enter to test the movie• You can press the buttons to view the
previous/next photo
Spring 2010 SCM-CityU 7
Album Examplestop();
txt_index.text = currentFrame + "/" + totalFrames;
btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick);
btn_next.addEventListener(MouseEvent.CLICK, onNextButtonClick);
function onPrevButtonClick(e:MouseEvent) : void {
prevFrame();
txt_index.text = currentFrame + "/" + totalFrames;
}
function onNextButtonClick(e:MouseEvent) : void {
nextFrame();
txt_index.text = currentFrame + "/" + totalFrames;
}
Spring 2010 SCM-CityU 8
Album Example
• Simple movie control– currentFrame – Current frame number– totalFrames – total frames = last frame number– stop() – stop (pause) the movie– play() – play the movie, starting from current frame– prevFrame() – goto the previous frame– nextFrame() – goto the next frame– gotoAndPlay(f) – goto frame f and play the movie– gotoAndStop(f) – goto frame f and stop the movie
Spring 2010 SCM-CityU 9
Album Example
• Handle mouse click events– Add event listener
btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick);
btn_next.addEventListener(MouseEvent.CLICK, onNextButtonClick);
– Add event handlersfunction onPrevButtonClick(e:MouseEvent) : void {
prevFrame();
txt_index.text = currentFrame + "/" + totalFrames;
}
function onNextButtonClick(e:MouseEvent) : void {
nextFrame();
txt_index.text = currentFrame + "/" + totalFrames;
}
Spring 2010 SCM-CityU 10
Album Example
• We can go from first photo to last photo• How about we press the previous button when we
at the first photo– No effect?– Goto the last photo? How to achieve this?
Spring 2010 SCM-CityU 11
How About IF…
• If structure – only run the process B if the condition A is true
Spring 2010 SCM-CityU 12
Condition ACondition A Process BProcess Btrue
false
if
How About IF…
if (condition) {// process
}Spring 2010 SCM-CityU 13
• Syntax – if statement– Start with “if” keyword– Condition put in parentheses– Process put in braces– Each pair of braces defines a block, which groups a set of statements together
How About IF…
• Condition in AS is a condition expression– Has value true / false (boolean value)– Usually is a comparison expression– E.g. a < b, a >= c, a == b
• Comparison Operators– equal (==), not equal (!=)– Less than (<), greater than (>),– less than or equal to (<=), greater than or equal to (>=)Spring 2010 SCM-CityU 14
How About IF…
var a:int = 1;
var b:int = 1;
if (a == b) {trace(“same”);
}
Spring 2010 SCM-CityU 15
• Examplesvar flag:Boolean = true;
if (flag == true) {trace(“yes”);
}
var flag:Boolean = true;
if (flag) {trace(“yes”);
}Output: “same”Output: “same” Output: “yes”Output: “yes”
Output: “yes”Output: “yes”
How About IF… Album Examplefunction onPrevButtonClick(e:MouseEvent) : void {
if (currentFrame > 1) {
prevFrame();
}
if (currentFrame == 0) {
gotoAndStop(totalFrames);
}
txt_index.text = currentFrame + "/" + totalFrames;
}
function onNextButtonClick(e:MouseEvent) : void {
if (currentFrame < totalFrames) {
nextFrame();
}
if (currentFrame == totalFrames) {
gotoAndStop(1);
}
txt_index.text = currentFrame + "/" + totalFrames;
}
Spring 2010 SCM-CityU 16
Test the movie again after modified the code!
How About IF…
• Sometime we need to combine conditions and test them in a single if statement
– E.g. age > 21 and gender == “male”
• Logical Operators– and (&&), or (||), not (!)
Spring 2010 SCM-CityU 17
How About IF…
var a:int = 13;
var b:int = 12;
if (a>10 && b>10) {
trace(“>10”);
}
Spring 2010 SCM-CityU 18
• Examplesvar pass:Boolean = true;
var score = 50;
if (!flag || score<60) {trace(“fail”);
}
Output: “>10”Output: “>10” Output: “fail”Output: “fail”
How About IF…
var a:int = 13;
var b:int = 12;
if (a>10 && b>10) {
trace(“>10”);
}
Spring 2010 SCM-CityU 19
• Examplesvar pass:Boolean = true;
var score = 50;
if (!flag || score<60) {trace(“fail”);
}
Output: “>10”Output: “>10” Output: “fail”Output: “fail”
• If-else structure – if the condition A is true, run process B, otherwise run process C
Or ELSE…
Spring 2010 SCM-CityU 20
Condition ACondition A Process BProcess Btrue
false
if
Process CProcess C
Or ELSE…
• Syntax – if-else statement– Start with “if” keyword– Condition put in parentheses– Process A put in braces after “if” keyword– “else” keyword put after Process A– Process B put after “else” keyword
Spring 2010 SCM-CityU 21
if (condition) {
// process A
} else {
// process B
}
Or ELSE IF…
• Example
Spring 2010 SCM-CityU 22
var age:int = 20;
if (age >= 21) {
trace(“adult”);
} else {
trace(“child”);
}
Output: “child”Output: “child”
Or ELSE IF… Album Examplefunction onPrevButtonClick(e:MouseEvent) : void {
if (currentFrame > 1) {
prevFrame();
} else {
gotoAndStop(totalFrames);
}
txt_index.text = currentFrame + "/" + totalFrames;
}
function onNextButtonClick(e:MouseEvent) : void {
if (currentFrame < totalFrames) {
nextFrame();
} else {
gotoAndStop(1);
}
txt_index.text = currentFrame + "/" + totalFrames;
}
Spring 2010 SCM-CityU 23
Test the movie again after modified the code!
Or ELSE IF…
• We can use else-if structure to check multiple conditions
– Grouping two or more if-else statement together– Beware how “if” and “else” are matched
Spring 2010 SCM-CityU 24
Or ELSE IF…
Spring 2010 SCM-CityU 25
Condition ACondition A Process CProcess Ctrue
false
if
Process CProcess C
Condition BCondition B
false
Process DProcess Delse-if
true
second if-elsesecond if-else statement statement
Or ELSE IF…
• Syntax
Spring 2010 SCM-CityU 26
var age:int = 15;
if (age >= 21) {
trace(“adult”);
} else if (age > 12) {
trace(“teen”);
} else {
trace(“child”);
} Output: “teen”Output: “teen”
The code in bolded is the second
if-else statement
Exercise
1. Use 4 buttons to move the Flash icon in the display area
2. Add checking so that the icon does not go outside the window
Spring 2010 SCM-CityU 27
Write-once, Run-many
• Function– A portion of code within a larger program– Performs a special task– Relatively independent to other part of the program– Can be used many time
• Examples– prevFrame();– gotoAndStop();
Spring 2010 SCM-CityU 28
Write-once, Run-many
• Function– can be called several times from several places in the
program– After calling a function, will “return” to the next
instruction after the “function call”
Spring 2010 SCM-CityU 29
function onPrevButtonClick(e:MouseEvent) : void {
prevFrame(); // call function prevFrame();
// after called prevFrame(), start to execute next statement
txt_index.text = currentFrame + "/" + totalFrames;
}
Write-once, Run-many
• Surely, we call define our own function• Syntax
Spring 2010 SCM-CityU 30
function yourFunctionName(): void
{
// place your code here
// can use multiple statements
}
Write-once, Run-many
• examples
Spring 2010 SCM-CityU 31
function printAtoE(): void
{
trace(“A”);
trace(“B”);
trace(“C”);
trace(“D”);
trace(“E”);
}
Write-once, Run-many
• Functions often have parameters as input values– to define action of functions– more flexible control– Dynamic behaveior
• Syntax
Spring 2010 SCM-CityU 32
function name(parameter:type, parameter:type, …): void
{
// place your code here
// can use multiple statements
}
Write-once, Run-many
• examples
Spring 2010 SCM-CityU 33
function addAndPrint(a:int, b:int): void
{
var sum:int = a + b;
trace(sum);
}
function displaceIcon(x:int, y:int): void
{
myIcon.x += x;
myIcon.y += y;
}
Write-once, Run-many
• Functions can have return value as output values– to define result of functions– Similar to mathematic function, e.g. f(x) = 2x
– Syntax
Spring 2010 SCM-CityU 34
f(1) = 2f(2) = 4f(13) = 26…
function name(parameter:type, …): returnType
{
// place your code here
// remember to return a value after computation
return x;
}
Write-once, Run-many
• examples
Spring 2010 SCM-CityU 35
var x:int = 10;
var y:int = 7;
Var result:int = addThreeInt(x, y, 5);
function addThreeInt(a:int, b:int, c:int): int
{
var sum:int = a + b + c;
return sum;
}
top related