Scale an object from a button

[David_Marston]

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.

[kglad]

start a tween in a button listener function.

if you need more help, as3 or createjs?

[Colin Holgate · Accepted solution]

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.

[David_Marston]

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?

[kglad]

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);

}

[David_Marston]

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

[Colin Holgate]

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.

[kglad]

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

[David_Marston]

Thanks Colin and kglad. This is really valuable information to get me started.

I'll be back!! (very likely 🙂

[kglad]

you're welcome.