Link to home
Start Free TrialLog in
Avatar of skilleddesigner
skilleddesigner

asked on

How can i do smooth box scaling and positioning animation?

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?

Avatar of blue-genie
blue-genie
Flag of South Africa image

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.
Avatar of skilleddesigner
skilleddesigner

ASKER

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. :(

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.

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??


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.
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. :)





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

after i write
var orgX:Number = ball_mc._x;

how will i puts its value and classes for the transitions??
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.
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.
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.

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 ??
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.
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.

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.

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.


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.










 















ASKER CERTIFIED SOLUTION
Avatar of blue-genie
blue-genie
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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! :)
yah!!!!
do you understand the code now and what it does and why?
Yes my friend
after all your explanation there couldn't be any doubt.  :)