next page -
1 -
2 -
3 -
4 -
5 -
6 - 7 -
8 -
9 -
Quiz_intro start animation
First thing: we import the fuse classes in the Quiz_intro class
import com.mosesSupposes.fuse.*;
Now let's create a movieClip called "panel" and give it the same linkage name.create a box. and with align put this box at the center of the movieClip
Now let's create a movieClip called "big_title" and give it the same linkage name.Inside create a dynamic textfield. give the name of "title" to the istance of the text. choose your size. embedd the fonts.Align in the center of the MovieClip
Now lets write the code for the start animation. let's write the start_intro_animation method
my_background = this.attachMovie("panel","panel",10,{_x:400,_y:300})
big_title = this.attachMovie("big_title","big_title",11,{_x:400,_y:300,_alpha:0,_xscale:400,_yscale:400})
big_title.title.text = Quiz.title
enter = this.attachMovie("big_title","enter",12,{_x:400,_y:350,_alpha:0,_xscale:400,_yscale:400})
enter.title.text = "ENTER"
var myFuse = new Fuse()
myFuse.push({target:my_background,width:800,ease:"easeOutCubic",seconds:.5})
myFuse.push({target:my_background,height:600,ease:"easeOutCubic",seconds:.5})
myFuse.push({target:big_title,xscale:100,yscale:100,alpha:100,ease:"easeOutCubic",seconds:.3})
myFuse.push({target:enter,xscale:100,yscale:100,alpha:100,ease:"easeOutCubic",seconds:.3})
myFuse.push({scope:this,func:destroyFuse,args:[myFuse]})
myFuse.start()
setEnterButton()
private function setEnterButton()
{
}
and obviously we set the variable at the beginning of the class
private var my_background:MovieClip;
private var big_title:MovieClip;
private var enter:MovieClip;
Last thing is to set the method to destroy the istance of the fuse in the common methods, so in the class Quiz_base we are going to add this method:
private function destroyFuse(w_Fuse):Void
{
w_Fuse.destroy();
delete w_Fuse;
}
private function destroyMc(w_mc:MovieClip)
{
w_mc.swapDepths(0)
w_mc.removeMovieClip();
}
Fuse is working like an array where we can store a sequence of actions. In this case we are using an istance of fuse to reproduce the animation of the background and call at the end
the two movieclip, big_title and enter.
Istance of fuse
var myFuse = new Fuse()
We are starting using the method "push" our fuse. so in this case we are telling to the my_background mc to became 800px in width
and 600 in height in the second fase of the animations, in .5 seconds. we are using to do this the words:
-target (reference to which mc we want to move
-width
-height
-ease (which kind of easing. you can find
all the list of possible easing
here
-seconds (duration in seconds)
myFuse.push({target:my_background,width:800,ease:"easeOutCubic",seconds:.5})
myFuse.push({target:my_background,height:600,ease:"easeOutCubic",seconds:.5})
myFuse.push({target:big_title,xscale:100,yscale:100,alpha:100,ease:"easeOutCubic",seconds:.3})
myFuse.push({target:enter,xscale:100,yscale:100,alpha:100,ease:"easeOutCubic",seconds:.3})
the last action that our fuse will do is to delete itself. so we push this action and we can start our fuse using start().
We are using in this case the words:
-scope (where is the function to call)
-func (the name of the function)
-args (if we have to send some parameter to this function)
myFuse.push({scope:this,func:destroyFuse,args:[myFuse]})
myFuse.start()
Now let's build the code to go to the first page of the quiz
First thing: let's initiate the Zigo engine for the easing equation that are stand alone. i mean, we will use fuse for the sequence of animations, and zigo for a single animation.
So in the the contructor let's write
ZigoEngine.simpleSetup();
First thing: let's initiate the Zigo engine for the easing equation that are stand alone. i mean, we will use fuse for the sequence of animations, and zigo for a single animation.
So in the the contructor let's write
and lets give a variable name to this._parent that is app_mc. it's just a shortcut to call methods in the class Quiz
app_mc = this._parent
Lets write the code to set the enter button that will go to the first page
private function setEnterButton()
{
enter.onRollOver = function()
{
this.colorTo(0xCCCCCC,.2,"linear")
}
enter.onRollOut= function()
{
this.colorTo(0x000000,.2,"linear")
}
enter.onPress = Proxy.create(this,cleanIntroInterface)
}
private function cleanIntroInterface()
{
var myFuse = new Fuse()
var arr_fase1:Array = new Array()
arr_fase1.push({target:big_title,xscale:400,yscale:400,alpha:0,ease:"easeOutCubic",seconds:.3})
arr_fase1.push({target:enter,xscale:400,yscale:400,alpha:0,ease:"easeOutCubic",seconds:.3})
myFuse.push(arr_fase1)
myFuse.push({scope:this,func:destroyMc,args:[enter]})
myFuse.push({scope:this,func:destroyMc,args:[big_title]})
myFuse.push({scope:this.app_mc,func:"managePage",args:[1]})
myFuse.push({scope:this,func:destroyFuse,args:[myFuse]})
myFuse.start()
}
Lets see what we are doing
First thing we are setting the onRollOver and onRollOut of the enter button. in this case we are using a zigo prototype "colorTo" so we are changing the color of the button on
RollOver. colorTo accept 3 parameter
colorTo(w_color,time,ease)
Usage
my_mc.colorTo(color, seconds, animtype, delay, callback, extra1, extra2)
Parameters
color A number that represents the RGB numeric value for the color (tint)
enter.onRollOver = function()
{
this.colorTo(0xCCCCCC,.2,"linear")
}
When we press the button we call (using Proxy) the function cleanIntroInterface
enter.onPress = Proxy.create(this,cleanIntroInterface)
the function cleanIntroInterface create a new istance of fuse that animate the closing of the intro screen. after destroy the movieClip that were in the intro Screen.
at the end call the function "managePage" in the Quiz istance that is app_mc, and destroy itself. in this case we are using a temporary array to do two animation together. So we are putting
in this temporary array this to action. and we push this array inside fuse, so fuse will'execute this two animations together, and at the end will continue with its sequence.
var myFuse = new Fuse()
var arr_fase1:Array = new Array()
arr_fase1.push({target:big_title,xscale:400,yscale:400,alpha:0,ease:"easeOutCubic",seconds:.3})
arr_fase1.push({target:enter,xscale:400,yscale:400,alpha:0,ease:"easeOutCubic",seconds:.3})
myFuse.push(arr_fase1)
myFuse.push({scope:this,func:destroyMc,args:[enter]})
myFuse.push({scope:this,func:destroyMc,args:[big_title]})
myFuse.push({scope:this.app_mc,func:"managePage",args:[1]})
myFuse.push({scope:this,func:destroyFuse,args:[myFuse]})
myFuse.start()
Wow... quiz_intro is ready. now we have to build the pages. lets go in the Quiz Class.
next page -
1 -
2 -
3 -
4 -
5 -
6 - 7 -
8 -
9 -