Sunday, 30 September 2012

Scale and position easing (Flash CS6)

By importing easing transitions into a flash actionscript 2.0 document-


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

I can make objects move and change in scale, shape and position in interesting ways. The two I used were Elastic effects and Bouncing effects.

A square was made so when I moved the cursor over it the square would grow and once it reached the desired size it would almost 'bounce' on its boundaries like a ball dropping onto the floor until it stayed still then once I moved the cursor off again it shrunk and bounced into its original shape.

This was done with the following codes after naming the box 'box':



function easein()
{
new Tween(box, "_xscale", Bounce.easeOut, 100, 200, 1, true);
new Tween(box, "_yscale", Bounce.easeOut, 100, 200, 1, true);
}


function easeout()
{
new Tween(box, "_xscale", Bounce.easeOut, 200, 100, 1, true);
new Tween(box, "_yscale", Bounce.easeOut, 200, 100, 1, true);
}

box.onRollOver = easein;
box.onRollOut = easeout;


It can also be done so when the cursor moves over other objects or movie clip 'symbols' the box can change by having another object with the same code but it just has to have another name and be in the same function.

If you want another symbol to act independently then you must name the function 'function easing2() so it doesn't interfere with the first object, in this case the square.
The next shape I made was a circle which I named simply 'circle' and instead of a Bounce effect I had an Elastic effect which is very similar to the Bounce but instead of bouncing it wobbles a bit once made smaller or bigger. I did it like this:



function easein2()
{
new Tween(circle, "_xscale", Elastic.easeOut, 100, 300, 1, true);
new Tween(circle, "_yscale", Elastic.easeOut, 100, 200, 1, true);
}


function easeout2()
{
new Tween(circle, "_xscale", Elastic.easeOut, 300, 100, 1, true);
new Tween(circle, "_yscale", Elastic.easeOut, 200, 100, 1, true);
}

circle.onRollOver = easein2;
circle.onRollOut = easeout2;


This time I made the xscale grow bigger so when the whole shape grows it stretches along the xscale.

It is important to note there must always be a line of script for the yscale and xscale unless you only want a specific scale to be affected. If you want to only move the position of the shape you can remove the 'scale' from the code.

The 1 before true); on each line of code represents how many seconds it takes for the change to happen.





No comments:

Post a Comment