Flash CS3 - Flash CS4

Free tutorials and scripts for all.
Actionscript 3.0

Animations with Actionscript 3.0 - spring and friction

This is a discussion on Animations with Actionscript 3.0 - spring and friction within the Tutorials forums, part of the Flash English category; This article is the follow of the article in which we have seen how to apply a spring effect with ...


Go Back   Forum Flash CS3 Flash CS4 > Flash CS3 Flash CS4 > Flash English > Tutorials

Register FAQ Members List Calendar Search Today's Posts Mark Forums Read
  1 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 29-09-07, 09:44
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,535
Rep Power: 6
Flep is on a distinguished road
Animations with Actionscript 3.0 - spring and friction

This article is the follow of the article in which we have seen how to apply a spring effect with Actionscript 3.0. For the ones who have not read yet 'Animations with Actionscript 3.0 " the spring' I suggest you take at look at it to understand best this article. In the example of the spring, my object was looping from right to left in a oscillatory sense.
you take at look at it to understand best this article. In the example of the spring, my object was looping from right to left in a oscillatory sense.
Next, we will see how to reduce the oscillation til the object stops completely.
Let"s see how...

First case:
I create a FLA and save it as "spring_1.fla".
I create a Movie Clip and assign it an instance name "clip_mc".
I create a Document Class, an AS file saved as "SpringAndFrizione.as", implemented the following way:
Code:
package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class SpringAndFrizione extends MovieClip
	{
		private const spring:Number=.1;
		private const frizione:Number=.9;
		private var centro:Number;
		private var vel_x:Number=0;

		public function SpringAndFrizione()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			centro=stage.stageWidth/2;
			
			clip_mc.x=-200;
			clip_mc.y=stage.stageHeight/2;
			clip_mc.addEventListener(Event.ENTER_FRAME,muovi);
		}
		
		private function muovi(e:Event):void
		{
			var acc_x:Number=(centro-e.target.x)*spring;
			vel_x+=acc_x;
			vel_x*=frizione;
			e.target.x+=vel_x;
		}
	}
}
The result:







Second case:
I create a FLA and save it "spring_1_a.fla"
I create a text field containing whatever text you fancy.
Using the keyboard shortcut CTRL+B, I divide the text field in as many fields as there are letters.
I convert each text field in a Movie Clip and assign the instance names of clip_0_mc, clip_1_mc, clip_2_mc, etc etc...
I create the Document Class, an AS file saved as "SpringAndFrizione_a.as", implemented the following way:
Code:
package
{
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.Event;
	import flash.events.TimerEvent;
	
	public class SpringAndFrizione_a extends MovieClip
	{
		private var clips_array:Array;
		
		private const spring:Number=.1;
		private const frizione:Number=.85;
		private var centro:Number;
		
		private var timer:Timer;
		
		private var t_e:TimerEvent;

		public function SpringAndFrizione_a()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			clips_array=new Array(clip_0_mc,clip_1_mc,clip_2_mc,clip_3_mc,clip_4_mc,
			clip_5_mc,clip_6_mc,clip_7_mc,clip_8_mc,clip_9_mc);
			
			for(var i:int=0;i < clips_array.length;i++)
			{
				clips_array[i].y=-200;
				clips_array[i].vel_y=0;
			}
			
			centro=stage.stageHeight/2;
			
			startTimer(t_e);
		}
		
		private function callStartTimer():void
		{
			timer=new Timer(8000,1);
			timer.addEventListener(TimerEvent.TIMER,startTimer);
			timer.start();
		}
		
		private function removeListeners():void
		{
			for(var i:int=0;i < clips_array.length;i++)
			{
				clips_array[i].removeEventListener(Event.ENTER_FRAME,muovi);
				clips_array[i].y=-200;
				clips_array[i].vel_y=0;
			}
		}
		
		private function startTimer(t:TimerEvent):void
		{
			removeListeners();
			
			timer=new Timer(100,clips_array.length);
			timer.addEventListener(TimerEvent.TIMER,go);
			timer.addEventListener(TimerEvent.TIMER_COMPLETE,finito);
			timer.start();
		}
		
		private function go(t:TimerEvent):void
		{
			clips_array[timer.currentCount-1].addEventListener(Event.ENTER_FRAME,muovi);
		}
		
		private function muovi(e:Event):void
		{
			var acc_y:Number=(centro-e.target.y)*spring;
			e.target.vel_y+=acc_y;
			e.target.vel_y*=frizione;
			e.target.y+=e.target.vel_y;
		}
		
		private function finito(t:TimerEvent):void
		{
			callStartTimer();
		}
	}
}
The result:







Let"s analise the code:
in each case, the base for the script is the same as the one seen in the spring effect article,
in this case I add the value "frizione", a constant value which is used to slow the spring til complete stop.
It is easier to do then explain :P

Let"s focus on the methods muovi() of the first and second case:

with just the spring, the code was this
I apply the inertia (see the article Inertia with Actionscript 3.0 )

var acc_x:Number=(center-sprite.x)*spring;
I add the inertia to the value of the speed variable (vel_x)
vel_x+=acc_x;
I add the speed to the object"s X which I want to move
sprite.x+=vel_x;

Adding the friction, the code becomes like this:
I apply the inertia
var acc_x:Number=(centro-e.target.x)*spring;
I add the inertia to the value of the speed variable (vel_x)
vel_x+=acc_x;
I multiply the value of vel_x by the value of the friction (in this case the friction is 0.9, so it would be the same as to say divided by 9)
vel_x*=frizione;
I add the speed to the object"s X which I want to move
e.target.x+=vel_x;

NB: In the second case, I do not have a single variable which determines the speed (vel_x), but I need that each Movie Clips has its proper speed. So I assign in runtime a property to each Movie Clip (MovieClip.vel_x)

Have fun!
__________________

 


I recommend: Essential Actionscript 3.0

- I do not reply technicians pvt messages. Open a thread !
- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !

Last edited by Flep; 28-08-08 at 06:38..
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #2 (permalink)  
Old 20-03-08, 17:54
Junior Member
 
Join Date: Mar 2008
Posts: 3
Rep Power: 0
kkoleno is on a distinguished road
Re: Animations with Actionscript 3.0 ? spring and friction

thanks for the great tutorial...however...i'm very new to the whole action script file thing and didn't know what to do after making the file. do you connect those to the movie clips somehow or what do you do to make them work? thanks so much!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3 (permalink)  
Old 24-03-08, 08:53
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,535
Rep Power: 6
Flep is on a distinguished road
Re: Animations with Actionscript 3.0 ? spring and friction

Hi kkoleno and welcome

Sorry, I did not get you.
What do you mean with: 'do you connect those to the movie clips' ?
__________________

 


I recommend: Essential Actionscript 3.0

- I do not reply technicians pvt messages. Open a thread !
- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads

Thread Thread Starter Forum Replies Last Post
Animation with Flash CS3 - spring friction and gravity Flep Tutorials 2 14-11-08 12:09
Animations with flash CS3 - spring and friction + mouse Flep Tutorials 1 15-10-08 12:44
Flash PHP Image Size in Resizing Window with Animations DC3 Flash CS3 | PHP | mySQL 0 22-06-08 23:53
Animations with Actionscript 3.0 - the spring Flep Tutorials 0 03-10-07 19:38
Animations with Flash CS3 - spring on 3 points Flep Tutorials 0 27-09-07 09:20


All times are GMT. The time now is 16:51.

Powered by vBulletin version 3.7.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC4
Forum SiteMap