CSS and Flash CS6

[mika]

Hi guys,

i’m starting to build this bootstrap site where I have flash animation on my fontpage. –> http://testi9.aada.fi/index.php?cID=180

My animation size is 1472px x 485px. Now I want it to be 100% width on bootstrap site so that it would strech nicely on different screen sizes.

I added this css code on bootstrap css file:

#swfcontent168 {
border:solid thin #f00;
width:100%;
}

Now my flash animation is 100% but somehow those “symbols” that are
on my flash animation on each side are visible too and animation is not shrech as i would like it to be.

Can someone help me out with this?

// Mika

[Senff]

Before someone jumps in an yells “Don’t use Flash!!! It’s dead!!” (which wouldn’t help you with your issue….) — I don’t see any Flash on your page, but a <canvas> animation, and it’s wrapped in an iframe.

Did you change it, or am I missing something?

[mika]

Yeah, now i changed my demo site so now it uses html5 animation with iframe code that animatron gave me

`
<iframe src=”http://clips.animatron.com/947bf0de9fe423f743e97608052de4e7?w=1472&h=485&t=0&r=1&#8243; width=”1472″ height=”485″ frameborder=”0″></iframe>

`
How to make this animation/ifame to be responsive??

I tried to change width 100% but without help..

// Mika

[Senff]

You can make the iframe itself responsive (which it is right now), but the contents inside it are located on animatron.com (at http://clips.animatron.com/947bf0de9fe423f743e97608052de4e7?w=1472&h=485&t=0&r=1 ), so that’s out of reach and you have no control over that, I’m afraid.

Unless you would dynamically change the SRC value of the iframe (for example, change it to http://clips.animatron.com/947bf0de9fe423f743e97608052de4e7?w=320&h=105&t=0&r=1 for smaller screens or something like that) but then you’ll have a lot of work on your hands.

[Author]

Posts