Mouse and proportion with Actionscript 3.0

[Flep]

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:

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 !

[appi]

Flep, I would like to congratulate for your tutorials and this amazing site. For weeks, I have been looking for a tutorial like that ... This tutorial give the sense of how to work around with arrays and movieClips from the library

My problem is that rather than have the movieClips in the stage of the flash movie. I do have them only in the library. Through an array and the loop, I can locate them on the stage and fadeIn (with a Tweener). But, If I can try to give a mouseEvent to them... It only works on the first mc and it does not work in the following three mc of the array on the stage.

Another issues is that the buttonMode does not work either.

Could you please help me with this issue? I am getting mad with this for the last two weeks.

Below I paste a copy of my class document.

package {
    import flash.display.*;
    import flash.events.*;
    import flash.filters.DropShadowFilter;

    import caurina.transitions.Tweener;
    import navigationMC;

    public class tweener_Loops extends MovieClip {

        //movieClips from the library 
        private var _maMC:maMC=new maMC;
        private var _mossMC:mossMC=new mossMC;
        private var _stonMC:stoneMC=new stoneMC;
        private var _feelMC:feelMC=new feelMC;

        //container
        private var container:MovieClip=new MovieClip;


        private var xPos:Number=250;

        private var backMC:MovieClip=new MovieClip;

        public function tweener_Loops() {


            var webArray:Array=new Array(maMC,feelMC,mossMC,redBackMC,stoneMC);

            for (var i:int=0; i< webArray.length; i++) {
                
                var web=new webArray[i];
                web.x=xPos;
                xPos += i.width +10;
                web.y=yPos;
                web.alpha=0;
                web.visible=true;
                web.mouseChildren=false;
                web.buttonMode=true;

                var shadow:DropShadowFilter=new DropShadowFilter();
                shadow.distance=10;
                shadow.angle=90;
                shadow.alpha=0.5;
                shadow.color=0xCCCCCC;

                web.filters=[shadow];

                Tweener.addTween(_maMC,{alpha:1,time:3, delay:1, transition:"linear"});
                Tweener.addTween(_mossMC,{alpha:1,time:3, delay:1.5, transition:"linear"});
                Tweener.addTween(_feelMC,{alpha:1,time:3, delay:2, transition:"linear"});
                Tweener.addTween(_stonMC,{alpha:1,time:3, delay:2.5, transition:"linear"});

                web.addEventListener(MouseEvent.MOUSE_OVER, _mouseOverWeb);
                web.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownWeb);
                
            }

        }
        public function _mouseOverWeb() {
            if (event.target==_maMC) {
                Tweeer.AddTween(_maMC,{scaleX:1.7, scaleY:1.7, time:0.5, transition:'easyOutElastic'});
            }
            if (event.target==_feelMC) {
                Tweeer.AddTween(_feelMC,{scaleX:1.7, scaleY:1.7, time:1, transition:'easyOutElastic'});
            }
        }
    }
}

I am really
Thanks in advance.

[Flep]

Hi appi and welcome

Try this one and read the comments:

package
{
    import flash.display.*;
    import flash.events.*;
    import flash.filters.DropShadowFilter;

    import caurina.transitions.Tweener;
    import navigationMC;

    public class tweener_Loops extends MovieClip 
	{
		// create an array to push every MovieClip in
        private var clips:Array=new Array();

        //container
       // private var container:MovieClip=new MovieClip;


        private var xPos:Number=250;

       // private var backMC:MovieClip=new MovieClip;

        public function tweener_Loops()
		{


            var webArray:Array=new Array(maMC,feelMC,mossMC,redBackMC,stoneMC);

            for (var i:int=0; i < webArray.length; i++) {
                
                var web:MovieClip=new webArray[i];
                web.x=xPos;
                xPos += i.width +10;
                web.y=yPos;
                web.alpha=0;
                web.visible=true;
                web.mouseChildren=false;
                web.buttonMode=true;
				// create an id for each MovieClip
				web.id=i;
				// push the MovieClip into clips array
				clips.push(web);

                var shadow:DropShadowFilter=new DropShadowFilter();
                shadow.distance=10;
                shadow.angle=90;
                shadow.alpha=0.5;
                shadow.color=0xCCCCCC;

                web.filters=[shadow];
				// use i to calculate the delay, the MovieClip is always the variable web
                Tweener.addTween(web,{alpha:1,time:3, delay:1+.5*i, transition:"linear"});

                web.addEventListener(MouseEvent.MOUSE_OVER, _mouseOverWeb);
                web.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownWeb);
                
            }

        }
        public function _mouseOverWeb() 
		{
			// use event.target to get the right MovieClip and it's id to assign the Tween delay
			var movie:MovieClip=event.target as MovieClip;
			Tweeer.AddTween(movie,{scaleX:1.7, scaleY:1.7, time:0.5*movie.id, transition:'easyOutElastic'});
        }
    }
}

[appi]

Flep, such a quick reply

I looked at the code. It doesn't give me any error but nothing comes up on the swf movie.

I decide to attach to this post a zip with files. I copy your code on the main as (tweener_loop2.as). I do not understand a few things on your code. I hope you can help me:
a) Why do I need to create another array, in your code-array 'clips' when I had one already in the constructor of the class.
b) which is the need of an id?
c) in the function _mouseOverWeb() ... why do I target the tweener with maMC rather than use the variable _maMC?

I hope I am making myself some sense. I just jump on AS3 after couple of years without touch flash at all.

Many thanks.

[Flep]

1) Into the array clips you push the MovieClip you create and add to the stage. Your array contains the names of the MovieClips linkage class only.
2) You need and id to use it for calculate the delay. 1+id*.5 - when id is 0 the result is delay 1, when id is 1 the result is 1.5, when id is 2 the result is 2 etc etc
3) you must refer at the clip on MOUSE_OVER with event.target

[appi]

Flep .... thanks very much!!!! Your are an

I still have two question for you, if you got the time. Following the code, How do I change the order of the array objects in the display list? and how do I link to each array object and URL? Hope you are not thinking I am cheeky. It is just I am been getting with this issues.

Thanks again

[Flep]

Do you mean how do you swap the depth of the array objects ?

To add URL to each object:

package
{
    import flash.display.*;
    import flash.events.*;
    import flash.filters.DropShadowFilter;

    import caurina.transitions.Tweener;
    import navigationMC;

    public class tweener_loops2 extends MovieClip 
	{
		// create an array to push every MovieClip in
        private var clips:Array=new Array();
		private var urls_array:Array=new Array('http://www.url1.com','http://www.url2.com','http://www.url3.com','http://www.url4.com','http://www.url5.com');

        //container
       // private var container:MovieClip=new MovieClip;


        private var xPos:Number=250;
		private var yPos:Number=100;

       // private var backMC:MovieClip=new MovieClip;

        public function tweener_loops2()
		{


            var webArray:Array=new Array(maMC,feelMC,mossMC,redBackMC,stoneMC);

            for (var i:int=0; i < webArray.length; i++) {
                
                var web:MovieClip=new webArray[i];
				addChild(web);
                web.x=xPos;
                xPos += i*web.width +10;
                web.y=yPos;
                web.alpha=0;
                web.visible=true;
                web.mouseChildren=false;
                web.buttonMode=true;
				// create an id for each MovieClip
				web.id=i;
				// push the MovieClip into clips array
				clips.push(web);

                var shadow:DropShadowFilter=new DropShadowFilter();
                shadow.distance=10;
                shadow.angle=90;
                shadow.alpha=0.5;
                shadow.color=0xCCCCCC;

                web.filters=[shadow];
				// use i to calculate the delay, the MovieClip is always the variable web
                Tweener.addTween(web,{alpha:1,time:3, delay:1+.5*i, transition:"linear"});

                web.addEventListener(MouseEvent.MOUSE_OVER, _mouseOverWeb);
				 web.addEventListener(MouseEvent.MOUSE_DOWN,goWeb);
             //   web.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownWeb);
                
            }

        }
        public function _mouseOverWeb(event:MouseEvent) 
		{
			// use event.target to get the right MovieClip and it's id to assign the Tween delay
			var movie:MovieClip=event.target as MovieClip;
			Tweener.addTween(movie,{scaleX:1.7, scaleY:1.7, time:0.5*movie.id, transition:'easyOutElastic'});
        }
		
		private function goWeb(event:MouseEvent):void
		{
			var request:URLRequest=new URLRequest(urls_array[event.target.id]);
			navigateToURL(request,'_self');
		}
    }
}

[appi]

yeap! I mean the depth.

[Flep]

It depends on what you want to do.
Depths are not always simple to manage.

I think this tutorial can help you:
swapDepths removed !

[appi]

I think I got stuff enough to work the whole night! Brilliant!

I would look at the tutorial .... specially because I do have many mc working in different depths.

Thanks again... you have been my angel of the week