[html5/js] How to change movieclip size

[eric_c2ti]

So my march towards conversion of all my Flash code continues in reasonably successful fashion except I've hit a new irritant.

I am trying to create "inverse" text, which essentially means dynamically drawing a box behind the text. Which I was able to do in Flash quite easily, but in HTML5 not so much.

For starters, the first major road block is that myDisplay.myBG.getBounds().width and myDisplay.myBG.getBounds().height DO NOT exist by default on a simply square fill MovieClip!!! Anyone know an easy way around this? It seems crazy to me that this is the case, but it is literally commented upon right in the EasleJS documentation:

Shape

Does not currently support automatic bounds calculations. Use setBounds() to manually define bounds.

Additionally, to add insult to injury, the setBounds() command does NOTHING to change the width or height of the object. And setTransform() seems like an incredibly tedious way to be going about this.

Any tips or pointers on where to get better ways to deal with simple shapes and modifying them would be greatly appreciated.

Thanks in advance!

[JoãoCésar]

Hi.

I do understand your frustration. I also don't really understand how CreateJS handles sizes. It seems the bounds related functions don't always return what they should. Or maybe I'm just being a noob. Luckily someone else here will shed some light.

My workaround for this is to rely on the nominalBounds property generated by Animate CC (which stores the object's original dimensions) and then set the new width and height based on the scale. Like this:

function setSize(obj, width = null, height = null)
{
    if (width)
        obj.scaleX = width / obj.nominalBounds.width;
    if (height)
        obj.scaleY = height / obj.nominalBounds.height;
}
setSize(this.mc, 400, 200);

I hope that makes sense and that helps you.

Regards,

JC

[eric_c2ti]

Wow, that is actually really useful! I am about to leave for the day, but I'll try this out first thing in the morning.

Thanks for the help!  

[ClayUUID]

JoãoCésar  wrote

function setSize(obj, width = null, height = null)

No. Don't do this. Default parameters are not currently supported in desktop Internet Explorer, so anyone trying to run this code in IE will just get a crash.

[JoãoCésar]

https://babeljs.io/

Your call. I don't think is worth avoiding next generation JavaScript because of IE. It will need special treatment anyway.

[ClayUUID]

Internet Explorer is currently the second most popular browser on Windows. Shipping code that crashes on that browser would be insanely irresponsible.

[JoãoCésar]

That's the reason we have solutions like Babel · The compiler for writing next generation JavaScript .

[ClayUUID]

When posting example code on a support forum for people who tend to not be great with JavaScript, requiring your code to be run through a third-party transpiler to not crash on the second most popular Windows browser probably isn't the best thing to do.

Ironically, your example code in this thread behaves exactly the same without the default parameter syntax, because undefined gets evaluated as false the same as null. Come to think of it, 0 gets evaluated as false as well, so if someone attempts to scale something to 0 width or height, your code would fail. A more bulletproof function would be something like:

function setSize(obj, width, height) {

    if (width !== undefined && height !== undefined) {

        obj.scaleX = width / obj.nominalBounds.width;

        obj.scaleY = height / obj.nominalBounds.height;

    }

}

[eric_c2ti]

No. Don't do this. Default parameters are not currently supported in desktop Internet Explorer, so anyone trying to run this code in IE will just get a crash.

Yeah, I already knew not to do that one, since I'm converting those phrases pretty much non-stop while converting all my AS3.

And FWIW, like 90% of my audience is Win IE 11.

[ClayUUID]

eric_c2ti  wrote

Additionally, to add insult to injury, the setBounds() command does NOTHING to change the width or height of the object.

Of course it doesn't. As the documentation clearly states, setBounds() is for telling CreateJS the dimensions of an object. It doesn't do scaling. As explained here, there are technical reasons why CreateJS can't figure out the exact dimensions of certain object types:

Width & Height in EaselJS - CreateJS Blog

Update: Width & Height in EaselJS - CreateJS Blog

Now, nominalBounds is something that doesn't exist in the vanilla CreateJS library. This is a property added by the Flash/Animate exporter, representing an object's dimensions at 100% scale with no rotation. The exporter can add this information because Animate does know the exact size of its objects, being far less limited than the HTML5 canvas API.

So since width and height are so unreliably available to CreateJS, it doesn't support resizing by assigning to them. It only supports resizing by scaling, which doesn't require knowing an object's base size. 200% is 200%, no matter how big something is to start with.

[eric_c2ti]

ClayUUID  wrote

Now, nominalBounds is something that doesn't exist in the vanilla CreateJS library. This is a property added by the Flash/Animate exporter, representing an object's dimensions at 100% scale with no rotation. The exporter can add this information because Animate does know the exact size of its objects, being far less limited than the HTML5 canvas API.

This may be another stupid question (but hey, why stop now when I'm on a roll!) but where can I find a  list of all the non-standard goodies that Animate CC is adding? I know there's exportRoot and now I also know there's nominalBounds, but is there a complete listing somewhere for all this stuff?

Thanks again, guys! All this help and insight is much appreciated!

[ClayUUID]

It would be great if there was a list of all this stuff, but sadly there is not. I only found out about nominalBounds accidentally because someone mentioned it in the comments for one of the above CreateJS blog posts. Lord only knows what other useful undocumented features there are.

[Elisei Kulikovsky]

I found that getBounds() and getTransformedBounds() start to work (return values, not null) if "Multiframe bounds" is checked in Publish Settings.

[ClayUUID]

.