Copy link to clipboard
Copied
Hi
is there a way to scale the size of an object from a button.
For example:
I have a button (call it button1)
I also have a circle (let's call this circle1). This circle is 100px in diameter.
So when I click on the button I would like the circle to scale to 50% of its original size (100px diameter).
If this could happen with a smooth transition that would be even better.
How would I go about this please?
Thanks for any advice.
There is a tween library built into AS3, you can read about it here:
Tween - Adobe ActionScript® 3 (AS3 Flash) API Reference
The first part of the problem is knowing that the button was clicked. You add a listener to the button that when it's clicked it than calls a function, like this:
button1.addEventListener(MouseEvent.CLICK,shrinkcircle);
The 'shrinkcircle' function will be what tells the circle to scale, and using the tween library the whole code would be:
import fl.transitions.Tween;
import fl
...Copy link to clipboard
Copied
start a tween in a button listener function.
if you need more help, as3 or createjs?
Copy link to clipboard
Copied
There is a tween library built into AS3, you can read about it here:
Tween - Adobe ActionScript® 3 (AS3 Flash) API Reference
The first part of the problem is knowing that the button was clicked. You add a listener to the button that when it's clicked it than calls a function, like this:
button1.addEventListener(MouseEvent.CLICK,shrinkcircle);
The 'shrinkcircle' function will be what tells the circle to scale, and using the tween library the whole code would be:
import fl.transitions.Tween;
import fl.transitions.easing.*;
button1.addEventListener(MouseEvent.CLICK, shrinkcircle);
function shrinkcircle(e: MouseEvent) {
new Tween(circle1, "scaleX", Elastic.easeOut, 1, .5, 3, true)
new Tween(circle1, "scaleY", Elastic.easeOut, 1, .5, 3, true);
}
The Elastic.easeOut part is the easing setting, there are simpler ones, like this is no easing at all:
new Tween(circle1, "scaleX", None.easeNone, 1, .5, 1, true)
new Tween(circle1, "scaleY", None.easeNone, 1, .5, 1, true);
The 3 in the first example means the tween will take 3 seconds. The second example is set to 1 second.
You will read online that many people use other tween libraries, that amongst other things let you tween two properties under one tween. It wouldn't look any different, and if you do use those libraries you'll have to include their libraries. The one I showed is built in.
Copy link to clipboard
Copied
Hi and thanks for your advice.
I will explore what you've said
It sounds like fun and full of potential.
So this would work for html5 Web pages and apps???
I thought AS (action script) was finished?
Copy link to clipboard
Copied
no, html5/createjs is different:
this.button1.addEventListener('click', shrinkcircle.bind(this));
function shrinkcircle(e) {
//new Tween(circle1, "scaleX", Elastic.easeOut, 1, .5, 3, true)
// new Tween(circle1, "scaleY", Elastic.easeOut, 1, .5, 3, true);
createjs.Tween.get(this.circle1).to({scaleX:1.5,scaleY:1.5}, 1000);
}
Copy link to clipboard
Copied
So just to make sure I'm getting this right.
I'd use AS3 for apps.
JSCREATE for Web pages/ html5?
Also, is there a JSCREATE library?
Thanks
Copy link to clipboard
Copied
It's CreateJS, and when you publish one of the things published is the library. You have the option of using the copy it published, or using a hosted version of the library, if you want to save a little download space.
It is for HTML5 Canvas projects.
AS3 is still used by more demanding apps and games online, as well as being used in animation production and in apps. It also can publish applications for macOS and Windows.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Thanks Colin and kglad. This is really valuable information to get me started.
I'll be back!! (very likely 🙂
Copy link to clipboard
Copied
you're welcome.