how to resize an animation through <object>

[xber9]

Hello friends. I have problems again. There is an html5 \ canvas button made in Animate. After publication I place it on the site using <object> and that's what happened.

http://b91690vi.beget.tech/   (firefox may not open the site due to hosting directories)

However, when I set the height and width of the object as a percentage, then an empty area appears either from the top or to the right of the button. When I set the absolute value, everything is fine, but the site loses its rubberiness (I don’t know how to say it right). What and where should be changed in the code so that the values of Height and Width can be set as a percentage? (this is for resizing the button)

[kglad]

you only want the button resized, not the stage?

if so, what code are you using now to resize your button and what are your publish settings?

[xber9]

I do not use any code yet. I just want to be able to set the width and length <object> in percent and so that there is no empty area on the right or bottom of the button (or from the scenes.)

here is the setting of the publication

[kdmemory]

Hi xber9

<object type="text/hthml" 
        data="3.html"
        width="50%" height="50%"
        >
    </object>

You are aware that you are only setting width and height of the <object> element in HTML.

First of all type="text/hthml" should be type="text/html".

But there's a more general problem. You don't set the button-size with this method. The button, which is in data="3.html", doesn't change its size by manipulating the size of the <object>. Only in the case of width="3%" the button changes its size, but that is only because you allowed only 3% width for the <object> element, 3% of the available browser window width. And that forces your button to shrink, because 3% of the window width is just so slim that the nominal width of the button has to adapt (perhaps related to your Make Responsive Publish Settings) .

Then, you could manipulate the height for the <object> only, if you would put your <object> into a parent container like a <div> with the css style rules either position:absolute or position:relative and with height:50% (for example). Then the height of the <object> element, also equipped with the style rule position:absolute would adapt in height. But this would still not increase the width/height of you button in 3.html.

What i'm talking about is in HTML/CSS something like this (style rules😞

<div style="position:relative; width:50%; height:50%">
    <object type="text/html" data="3.html" style="position:absolute; width:100%; height:100%; left:0px; top:0px"></object>    
</div>

I haven't tried this, though. But, again, that won't change any size of your button.

I know what you are trying to do. You want to place several of your buttons, which are HTML5/Canvas packs with tons of extra js/html, in any html-document and manipulate their appearance like width and height as it would be an <image> tag in an html context. Errr..

I have to think about it. I have seen in your previous screenshots from your Publish Settings that you have only selected Make Responsive:Both but not Scale to fill visible area: Fit in view. Try that one as well. Might be in combination with my style rules above that the canvas size in 3.html resizes dynamically. .. But an <object> is no window javascript-object as an <iframe> would be.

try to help

Klaus

[xber9]

It did not help, <div> collapsed to zero.  http://b91690vi.beget.tech/  ! Changing the parameters of the publication did not help either. Maybe there are more ideas?

[ClayUUID]

Everything about this seems like a bad idea. There's a reason Flash buttons died off after the 90s.

[kdmemory · Accepted solution]

@

Hi xber9

While ClayUUID is  generally right in pointing out that Flash/Animate buttons are out ...

I once more looked into this <div><object></object></div> and came up with a possibility "how to resize an animation through <object>" . Well, not through <object> but through the <div> around the <object>.

See the example here: https://testline.memetic-tv.net/cjsobject/

For this to work you have to set the Publish Settings of your button(s):

• Center Stage: Both
• Make responsive: Both
• Scale to fill visible area: Fit in view

For the <div> in which the <object> is nested I've added some CSS to do the sizing. In particular I'm using the css units vw and vh.

• vw - Relative to 1% of the width of the viewport*
• vh - Relative to 1% of the height of the viewport*

* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

I use these relative units instead of %, because knowing the size ratio of the button (1:1), one can more easily set the correct proportions of the nesting <div> container. It spares you the empty spaces in a %-controlled <div>. In Web design there might be situations where the %unit is more appropriate (i.e. when using a responsive framework like Bootstrap).

One <div> including the Animate <object> looks like this:

<div style="background-color:green; position:relative; width:20vw; height:15vw; margin:1vh; padding:1vh; float:left">
    <object type="text/html"  
        data="animate_button_xber9.html"  
        width="100%"  
        height="100%">  
    </object>
</div>

float:left - I used this to have the buttons nicely side-by-side. Under normal conditions you won't need this.

I took the viewport width (vw) as the chief orientation and, knowing the size-ratio is 1:1, I assigned the same values and units to both: width and height. If for example you'd have a button with the size-ratio of 4:3 you should compose the first line like this (watch the new height):

<div style="background-color:green; position:relative; width:20vw; height:15vw; margin:1vh; padding:1vh; float:left">

... coming back to ClayUUID's imput, you can see that there are indeed issues with this method. I made a button which mimicks your round button and when you rapidly move the mouse in and out, the narrow object space around the interactive button let the cursor miss the mouseout and all buttons are blinking no matter if touched or not.

So, this was rather more about HTML and CSS than Animate

Klaus

[xber9]

Thank you for your ideas and solutions. Yes, I understand that this is generally not a very good idea, but I have to do it exactly as I described, since the button is just an example, the animation in the future will be bigger and more complicated, but the idea of decreasing will remain the same. Thanks again for your ideas and decision.