Greetings to all!
Let us get back to some Actionscript effect (shall we call it recreation time").
We saw in an article
the mouse move with an animation using the
inertia and friction effect .
This time, I would like to look to how to use the mouse position to create an object movement using the proportions in between the object size, the mouse and the stage size.
Let us get into it"
I create a FLA and save it as "main.fla".
Into it:
- 4 levels named from top to bottom: code, container1, gradient and container2
- 2 keyframes by levels
Level "code":
- first keyframe: a dynamic text field named "info_txt" and a stop();
- second keyframe: a stop(); and a call of the function lets_go();
Level "container1":
- first keyframe: empty
- second keyframe: a MovieClip with an instance name "container_mc" which contains 20 MovieClip of any shape desired
Level "gradient":
- first keyframe: empty
- second keyframe: a MovieClip with an instance name "gradient_mc" which contains a rectangular gradient filled shape
Level "container2":
- first keyframe: empty
- second keyframe: another instance of "container_mc" named "container2_mc" (and its 20 MovieClip)
I create the Document Class, an AS file saved as "Main.as", implemented the following way:
Code:
package
{
import flash.display.MovieClip;
import flash.display.DisplayObjectContainer;
import flash.text.TextField;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.MouseEvent;
public class Main extends MovieClip
{
private var clips_array:Array;
private var clips_array2:Array;
public function Main()
{
init();
}
private function init():void
{
stage.frameRate=31;
this.addEventListener(Event.ENTER_FRAME,checkProgress);
}
private function checkProgress(_progress:Event):void
{
var bytes_loaded:Number=_progress.target.loaderInfo.bytesLoaded;
var bytes_total:Number=_progress.target.loaderInfo.bytesTotal;
var percent:Number=Math.round(bytes_loaded/bytes_total*100);
info_txt.text=percent.toString()+' %';
if(percent>=100)
{
this.removeEventListener(Event.ENTER_FRAME,checkProgress);
this.gotoAndPlay(2);
}
}
public function lets_go():void
{
initContainer();
initContainer2();
initGradient();
container_mc.addEventListener(Event.ENTER_FRAME,movement);
}
private function initContainer():void
{
clips_array=new Array();
for(var i:int=0;i < container_mc.numChildren;i++)
{
clips_array.push(container_mc.getChildAt(i));
clips_array[i].width=100;
clips_array[i].height=100;
clips_array[i].x=clips_array[i].width*i+20*i;
clips_array[i].y=stage.stageHeight/2;
clips_array[i].id=i;
clips_array[i].buttonMode=true;
clips_array[i].addEventListener(MouseEvent.CLICK,onClick);
}
}
private function initContainer2():void
{
clips_array2=new Array();
for(var j:int=0;j < container2_mc.numChildren;j++)
{
clips_array2.push(container2_mc.getChildAt(j));
clips_array2[j].width=100;
clips_array2[j].height=100;
clips_array2[j].x=clips_array2[j].width*j+20*j;
clips_array2[j].y=stage.stageHeight/2+clips_array2[0].height-10;
}
}
private function initGradient():void
{
gradient_mc.x=0;
gradient_mc.y=clips_array2[0].y-clips_array2[0].height/2;
container2_mc.alpha=.2;
}
private function movement(evt:Event):void
{
var rapporto:Number=evt.currentTarget.width/stage.stageWidth;
var arrX:Number=-mouseX*rapporto+stage.stageWidth/2;
var dx:Number=arrX-evt.currentTarget.x;
var ax:Number=dx*.1;
evt.currentTarget.x+=ax;
container2_mc.x+=ax;
}
private function onClick(evt:MouseEvent):void
{
trace(evt.currentTarget.id);
}
}
}
The result:
Let us analyse the code
Properties
two arrays into which I will insert the 20 MovieClip placed in the two containers
private var clips_array:Array;
private var clips_array2:Array;
Building function:
I call the method "init"
init();
Methods
init();
I impost the frame rate
stage.frameRate=31;
I add a listener to the event ENTER_FRAME which will call the method "checkProgress" as many times by seconds based on the frame rate. I create a preloader as seen in
this tutorial
this.addEventListener(Event.ENTER_FRAME,checkProgr ess);
checkProgress();
I calculate the percentage between the loaded and total bytes
var bytes_loaded:Number=_progress.target.loaderInfo.by tesLoaded;
var bytes_total:Number=_progress.target.loaderInfo.byt esTotal;
var percent:Number=Math.round(bytes_loaded/bytes_total*100);
I assign the value of the percentage to the text field "info_txt" placed on stage
info_txt.text=percent.toString()+' %';
if(percent>=100)
{
If the percentage is bigger or equal to 100, I stop the ENTER_FRAME
this.removeEventListener(Event.ENTER_FRAME,checkPr ogress);
I move the timeline to the second frame which will call the function "lets_go()" included in this Document Class
this.gotoAndPlay(2);
}
lets_go();
I call respectively "initContainer", "initContainer2" and "initGradient"
initContainer();
initContainer2();
initGradient();
I add to "container_mc" a listener to the event ENTER_FRAME which will call the method "movement"
container_mc.addEventListener(Event.ENTER_FRAME,mo vement);
initContainer();
I initialise the array "clips_array"
clips_array=new Array();
using a cycle with the number of MovieClip included in "container_mc" (retrieved via its property "numChildren") as a maximum iteration, I insert all the MovieClip in "clips_array"
for(var i:int=0;i < container_mc.numChildren;i++)
{
clips_array.push(container_mc.getChildAt(i));
I impost to each one of them a width and height
clips_array[i].width=100;
clips_array[i].height=100;
I position them horizontally on line
clips_array[i].x=clips_array[i].width*i+20*i;
clips_array[i].y=stage.stageHeight/2;
I assign a runtime property named "id". Doing so, we can retrieve the click property of each MovieClip and retrieve other values from another array. As example: we could assign an url to each MovieClip
clips_array[i].id=i;
I impost "buttonMode" to true, so that on rollOver of the MovieClip the hand mouse is visible
clips_array[i].buttonMode=true;
I assign a listener to each MovieClip to the event CLICK of the MouseEvent class which will call the method "onClick" once the MovieClip is clicked
clips_array[i].addEventListener(MouseEvent.CLICK,onClick);
}
initContainer2();
I reuse the same logic of the method "initContainer" but applied to "container2_mc" and the MovieClip inserted in "clips_array2"
clips_array2=new Array();
for(var j:int=0;j < container2_mc.numChildren;j++)
{
clips_array2.push(container2_mc.getChildAt(j));
clips_array2[j].width=100;
clips_array2[j].height=100;
clips_array2[j].x=clips_array2[j].width*j+20*j;
clips_array2[j].y=stage.stageHeight/2+clips_array2[0].height-10;
}
initGradient();
I position the MovieClip "gradient_mc" so to obtain a mirror effect
gradient_mc.x=0;
gradient_mc.y=clips_array2[0].y-clips_array2[0].height/2;
container2_mc.alpha=.2;
movement();
I calculate "rapporto" which is the result of the division of the "container_mc" width by the stage width
var rapporto:Number=evt.currentTarget.width/stage.stageWidth;
I apply the inertia effect using the X position of the mouse multiplied by "rapporto" plus half the stage width as point of arrival
var arrX:Number=-mouseX*rapporto+stage.stageWidth/2;
var dx:Number=arrX-evt.currentTarget.x;
var ax:Number=dx*.1;
evt.currentTarget.x+=ax;
I add the result value to "container2_mc"
container2_mc.x+=ax;
onClick();
I retrieve the property "id" of the clicked MovieClip
trace(evt.currentTarget.id);
You can download the file source of this article in the downloads section on this site.
Stay tuned !