Highlighted

how to resize an animation through <object>

Community Beginner ,
May 03, 2019

Copy link to clipboard

Copied

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)

@

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

Views

211

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

how to resize an animation through <object>

Community Beginner ,
May 03, 2019

Copy link to clipboard

Copied

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)

@

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

Views

212

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 03, 2019 0
Adobe Community Professional ,
May 03, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2019 0
Community Beginner ,
May 04, 2019

Copy link to clipboard

Copied

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

Desktop_190504_1111_1.jpgDesktop_190504_1112.jpgDesktop_190504_1112_1.jpgDesktop_190504_1112_2.jpg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 04, 2019 0
Advocate ,
May 04, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 04, 2019 1
Community Beginner ,
May 04, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 04, 2019 0
Adobe Community Professional ,
May 04, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 04, 2019 0
Advocate ,
May 06, 2019

Copy link to clipboard

Copied

@

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 06, 2019 1
xber9 LATEST
Community Beginner ,
May 07, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2019 0