Solved

How can i do smooth box scaling and positioning animation?

Posted on 2008-10-17
21
457 Views
Last Modified: 2013-11-11
Hi,
I am new in actionscripting,

My flash document size is
width: 995px;
height: 800px;

On layer 1 - 1st frame I have two buttons
1st button instance name "button1" &
2nd button instance name"buttonTwo"

and

on 2nd layer 1st frame i have box movieClip
instance name "box"
width of the box is : 300px;
height of the box is : 600px;
By default the box is positioned in
x-axis : 347.5
y-axis :100.0
of the flash document


Now once i click 1st button i want the box to move its position with an ease tween animation to
x-axis : 40
y-axis :100.0
and re-size itself to
width 600px;
height 600px;


once i click the 2nd  button i want the same box to move its position with an ease tween animation to

x-axis : 680
y-axis :200
and re-size itself to
width 250px;
height 300px;

Can you please help me with the script?

0
Comment
Question by:skilleddesigner
  • 11
  • 10
21 Comments
 
LVL 39

Expert Comment

by:blue-genie
Comment Utility
being new to AS, you really should get into the habit of using the help files. (F1) they provide explanations, and examples on how to do things.
to do the tween in AS2.0. i'm going to provide the code examples from the help file as is - and you can put it together to meet your requirements.

//from the help file - this is how you do a tween
//the parameters (instance name , property to change, transition, start position, end position, duration, use seconds)

import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween(ball_mc, "_x", Elastic.easeOut, Stage.width, 0, 3, true);

to start the animation when you click a button, you could use a simple onRelease, but lets use the event listener

myButton.addEventListener("click", doAnimation1);

so what this means is when the button is clicked, its going to look for a function called doAnimation1, so create one.
then in that function put the tween code in (the imports only need to do once)
you want to change 4 properties

so create 4 variables for each tween.

ie.

var tween1:Tween = new Tween(blah blah);
var tween2:Tween = new Tween(blah blah);

and you'll need 2 function and 2 event listeners for the 2 buttons.

so start with that and lets see how you get along with that.
its the only way to learn.

blu.
0
 
LVL 2

Author Comment

by:skilleddesigner
Comment Utility
Nothing is going in my mind,
please could write example of one button action & integrate the button with the function??
It would be a great help , My client is really getting on my nerves. :(
0
 
LVL 39

Expert Comment

by:blue-genie
Comment Utility

here's an example for 1 tween instance
var tween1:Tween;
//define all here with unique variable names
myButton.addEventListener("click", doAnimation1);

function doAnimation1() {
tween1 = new Tween(ball_mc, "_x", Elastic.easeOut, start, end, 3, true);
}

other than doing it for you there's not much more I can help you - make the effort - refer to the help file and we can move on from there.

if you don't understand something, ask, but it ain't gonna help you if you don't try it yourself.

0
 
LVL 2

Author Comment

by:skilleddesigner
Comment Utility
i did something

1st frame

import mx.transitions.Tween;
import mx.transitions.easing.*;
myButton.onRelease=function(){
new Tween(ball_mc, "_x", Elastic.easeOut, 0,100,1, true);
}

Button instance name "myButton"

Which looks cool, but how can scale it from "0" width to

Width of the box is : 300px;
height of the box is : 600px;

I guess i know it has to do something with _xscale & _yscale but how can i code it ?

any idea??


0
 
LVL 39

Expert Comment

by:blue-genie
Comment Utility
if u read my first post.
you have to have 4 lines of that code that say new Tween - because you're changing 4 properties.
x, y, _xscale and yscale.
0
 
LVL 2

Author Comment

by:skilleddesigner
Comment Utility
WOW, this looks interesting
i did something like this


import mx.transitions.Tween;
import mx.transitions.easing.*;
myButton.onRelease=function(){
var tween1:Tween = new Tween(ball_mc, "_x", Elastic.easeOut, 0,300,1, true);
var tween1:Tween = new Tween(ball_mc, "_y", Elastic.easeOut, 0, 347,1, true);
var tween1:Tween = new Tween(ball_mc, "_xscale", Elastic.easeOut, 100,200,1, true);
var tween1:Tween = new Tween(ball_mc, "_yscale", Elastic.easeOut, 100,300,1, true);
}

Which works the way i wanted , thanks you my friend

Now second question,
once i click the second button , it should change its _xscale,yscale,_x & y with a transition
that it resume its current property from the last properties it had.

I hope you understood my friend. :)





0
 
LVL 39

Expert Comment

by:blue-genie
Comment Utility
i'd recommend when u first load set the variables as in

var orgX:Number = ball_mc._x;
var orgYScale:Number = ball_mc._yscale; etc do for all the others.

then on the second button you'll do exactly the same as the first one but change the variables to where it is now

i.e ball_mc._x

to where it was before

orgX

0
 
LVL 2

Author Comment

by:skilleddesigner
Comment Utility
after i write
var orgX:Number = ball_mc._x;

how will i puts its value and classes for the transitions??
0
 
LVL 39

Expert Comment

by:blue-genie
Comment Utility
hey?

what you're doing is setting some variables. yes.
so declare the variables.
then do exactly as you have been with the previous post except now its for the other button.
and instead of saying go from 0 to 30 for example you're going to say go from its current _x to its orgX - yes. that's what you were refering to yes?
why you want to make your own life more difficult when you're moving 1 object around and you know exactly where its going to and from where why you don't just hard code it. by that i mean put the specific values in there.
enough now.
0
 
LVL 2

Author Comment

by:skilleddesigner
Comment Utility
i know i am being really annoying its because i need this work to be done
and i am sorry but i am null in actionscripting, I am just good at copy pasting stuff...

It would be a great help if you could write the code whatever you are trying to make me understand, i am really "0" nothing going in my head.

I believe i better go for actionscripting classes but unfortunately the country i am in doesnt provided this kinda education.

Friend please help me.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 39

Expert Comment

by:blue-genie
Comment Utility
why the hell are you trying to do something you don't know how to do without first going through the help files.
EE is not here to do the work for you, but to help you understand.
i don't know what you don't understand.
you managed to copy and paste the first part and make it work, the second button is exactly the same. so i don't understand what specifically you don't get.

0
 
LVL 2

Author Comment

by:skilleddesigner
Comment Utility
its okay, thanks friend
Yes i know that very well that EE doesnt work for anyone, Its only provide helps to people who really needs it. And i am in indeed.

Well, my client wants this kinda transition but i just can't no to him.
I will loose the client dude.

I searched in the website but unable find any...and thats y i am here in EE.
At could you guide me with a website which has this kinda transition so that i take some inspiration from it ??
0
 
LVL 39

Expert Comment

by:blue-genie
Comment Utility
what transition are you refering to?
copy and paste the code you did for the first button. assign it to the second button. swap the start and stop values around.
tell me what happens.
0
 
LVL 39

Expert Comment

by:blue-genie
Comment Utility
sorry if i'm being short with - i'm irritated with an ex ass client of my own.
ok let me make sure i understand.
assume you have a ball clip on the stage.
you have 2 buttons.
when you press the first button. it moves x and y and gets changes its size.

now when you click the second button that box must move from where it currently is, to the new position and to its new size.

so now you said the first one worked yeah?

myButton.onRelease=function(){
var tween1:Tween = new Tween(ball_mc, "_x", Elastic.easeOut, 0,300,1, true);
var tween1:Tween = new Tween(ball_mc, "_y", Elastic.easeOut, 0, 347,1, true);
var tween1:Tween = new Tween(ball_mc, "_xscale", Elastic.easeOut, 100,200,1, true);
var tween1:Tween = new Tween(ball_mc, "_yscale", Elastic.easeOut, 100,300,1, true);
}

so just apply the same code to the next button and change the variables for the ones you want.

0
 
LVL 2

Author Comment

by:skilleddesigner
Comment Utility
please dont get angry ... you are dealing with a newbies here....

I have

myButton1
myButton2
myButton3


import mx.transitions.Tween;
import mx.transitions.easing.*;


import mx.transitions.Tween;
import mx.transitions.easing.*;


myButton1.onRelease=function(){
var tween1:Tween = new Tween(ball_mc, "_x", Strong.easeOut, 0,300,1, true);
var tween1:Tween = new Tween(ball_mc, "_y", Strong.easeOut, 0, 347,1, true);
var tween1:Tween = new Tween(ball_mc, "_xscale", Strong.easeOut, 100,200,1, true);
var tween1:Tween = new Tween(ball_mc, "_yscale", Strong.easeOut, 100,300,1, true);
}


myButton2.onRelease=function(){
var tween1:Tween = new Tween(ball_mc, "_x", Strong.easeOut, 300,500,1, true);
var tween1:Tween = new Tween(ball_mc, "_y", Strong.easeOut, 347, 100,1, true);
var tween1:Tween = new Tween(ball_mc, "_xscale", Strong.easeOut, 200,100,1, true);
var tween1:Tween = new Tween(ball_mc, "_yscale", Strong.easeOut, 300,100,1, true);
}


What went in my head and understood from you, i did this and its works fine.
but

when i click "mybutton1" its comes to a certain position
and when i click the mybutton2 , it resume from the 1st position to the second position
I wanted that,

But after that i have more buttons in which specify different _x, _y, _scale,_yscale
suppose i am on "myButton1" Position and i click the 9th Button  then it should resume from the 1st button's position to 9th one ( like i did for the "myButton1" and "myButton2")

there i am confused.

0
 
LVL 39

Expert Comment

by:blue-genie
Comment Utility
i am also confused.
give me the FULL big picture here. number of buttons, and how many movieclips are you moving around.
you keep adding a new twist with each post.

1. import statement

from the help file

"Lets you access classes without specifying their fully qualified names. For example, if you want to use a custom class macr.util.users.UserClass in a script, you must refer to it by its fully qualified name or import it; if you import it, you can refer to it by the class name

The import statement applies only to the current script (frame or object) in which it's called. For example, suppose on Frame 1 of a Flash document you import all the classes in the macr.util package. On that frame, you can reference classes in that package by their simple names

On another frame script, however, you would need to reference classes in that package by their fully qualified names (var myFoo:foo = new macr.util.foo();) or add an import statement to the other frame that imports the classes in that package.
"
so the moral of the story, you only need to import it once.

2. how many buttons are you planning to have.
scenario. (i'm only using x position here)
my swf file loads, my ballmc is at x position 0.

cool. i press btn 2 and now it goes from position 0 to 100.
cool. now i press btn 3 - where is that supposed to go from and where must it go to?
if i press btn 4 where must it go from and where must it go to?

that's the reason why i suggested setting the original values. you tell me if you need them.
when a clip first loads (first frame of your movie) you'll be able to get its properties, like x position , width height etc. right.
so when my file first loads (assuming you're not bouncing around on frames here) and assuming 1 item that's going to be manipulated.
i create a variable.

i call it objectsOriginalXPosition.

so I declare the variable and set it to my clips x position.

var objectsOriginalXPosition:Number = ballmc ._x;

if you do a trace now on the variable it should tell you where the objects original x position was as start. (347.5 according to your first post)
so then you set a whole bunch of other variables for the properties you want to store for later use . eg. width, height etc.

now when your button9 wants to start the animation from the original start position (347.5) to say the new end position of 500 , you put the variable (which is just a container with a value) into the code instead of the number for the start value, and 500 for the end value.


0
 
LVL 2

Author Comment

by:skilleddesigner
Comment Utility
thank you my friend, thank you so much,
I was expecting answer something like this:

import mx.transitions.Tween;
import mx.transitions.easing.*;

button1.onPress = function(){
   new Tween(box_mc,"_x",Strong.easeOut,box_mc._x, 40,2,true);//2 is the num of seconds
   new Tween(box_mc,"_y",Strong.easeOut,box_mc._y, 100,2,true);
   new Tween(box_mc,"_width",Strong.easeOut,box_mc._width,100,2,true);
   new Tween(box_mc,"_height",Strong.easeOut,box_mc._height,600,2,true);
}
button2.onPress = function(){
   new Tween(box_mc,"_x",Strong.easeOut,box_mc._x, 40,2,true);//2 is the num of seconds
   new Tween(box_mc,"_y",Strong.easeOut,box_mc._y, 200,2,true);
   new Tween(box_mc,"_width",Strong.easeOut,box_mc._width,100,2,true);
   new Tween(box_mc,"_height",Strong.easeOut,box_mc._height,100,2,true);
}

But you have taken lots of headache for me.
sorry for trouble.
and you really best its that i am stupid that i didnt understand you.
but i asked the same question in other forum and they got me what i was trying to say
and they replied with these 8 lines of code.

i guess its the same thing what you are trying to say....all this time
but it would be greater help if you could just write these 8 lines code for me.
thanks once again.
and sorry once again.










 















0
 
LVL 39

Accepted Solution

by:
blue-genie earned 500 total points
Comment Utility
fine I give up. here u go.
I won't try and help you to learn and understand i'll just do the work for you.
i appreciate your being brave to doing something you don't know how, but seriously, instead of just taking the code and saying cool i'm done, actually try and understand it.
you need to learn to apply the code and what it does and why.

the code snippet below 1st button takes it from start position to new positions.
the second button goes from new positions after button1 is clicked and takes it back to the original positions.
any other buttons you just copy and paste and change the values - which is what i've been trying to tell you all along.

import mx.transitions.Tween;

import mx.transitions.easing.*;

var orgX:Number = box_mc._x;

var orgY:Number = box_mx._y;

var orgW:Number = box_mc._width;

var orgH:Number = box_mc._height;
 
 

button1.onPress = function(){

 var t1:Tween = new Tween(box_mc,"_x",Strong.easeOut,box_mc._x, 40,2,true);//2 is the num of seconds

 var t2:Tween = new Tween(box_mc,"_y",Strong.easeOut,box_mc._y, 100,2,true);

 var t3:Tween = new Tween(box_mc,"_width",Strong.easeOut,box_mc._width,100,2,true);

 var t4:Tween = new Tween(box_mc,"_height",Strong.easeOut,box_mc._height,600,2,true);

}

button2.onPress = function(){

 var t5:Tween = new Tween(box_mc,"_x",Strong.easeOut,40,2, orgX,true);

  var t6:Tween = new Tween(box_mc,"_y",Strong.easeOut,100,2, orgY,true);

  var t8:Tween = new Tween(box_mc,"_width",Strong.easeOut,100,orgWidth,2,true);

  vart t9:Tween = new Tween(box_mc,"_height",Strong.easeOut,100,orgHeight,2,true);

} 

Open in new window

0
 
LVL 2

Author Closing Comment

by:skilleddesigner
Comment Utility
I understand that my friend, you are trying to make me understand the concept and script.
But it was very difficult for me because  i dont know coding.
But if a experts code it i can understand and modify the code and use it wherever i need it.
any way thank you very much... YOU ARE THE BEST! :)
0
 
LVL 39

Expert Comment

by:blue-genie
Comment Utility
yah!!!!
do you understand the code now and what it does and why?
0
 
LVL 2

Author Comment

by:skilleddesigner
Comment Utility
Yes my friend
after all your explanation there couldn't be any doubt.  :)
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
The viewer will learn how to count occurrences of each item in an array.
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now