html - How to make flash animation responsive

Question

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:

#swfcontent169 {
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 stretched as i would like it to be (full width).

Can someone help me out with this?

// Mika

Answer 1

You need to set the proper scaling mode for the flash object. (the scale embed property) or stage.scaleMode through AS3 code.

Here is a visual rundown of the options: (you will likely want exact fit or no border)

Let's say this is your document:

We have four boxes (one per corner), and some gray boxes that are off the stage.

Here are you options:

---

Show All:

Show all scales the content so the whole stage fits, but then you get a gutter if it's not the right size and objects off stage may be visible.

---

No Border:

This will scale it so the whole content will fill the bounds (keeping aspect), but then if it's not the exact size, you'll get cropping of the stage, see how the boxes are being cropped on the top bottom? You can change the way it aligns the cropped stage with the stageAlign property.

---

Exact Fit This will just make the whole stage fit in the area defined, but it will not honor your aspect ratio and things could looked squished/stretched.

---

No Scale This won't scale the stage AT ALL. So if the defined area is smaller than the stage, it will crop it, if larger, you'll get gutters.

---

You probably want exact fit or no border - depending on if you need the aspect ratio to be fixed. You can also use no-scale and use code to align your contents the way you want.

You can align the content several ways too using the align embed parameter.

You can adjust these in your embed code. There are also options in the FlashPro publish settings (when you click on the HTML Wrapper Format), or you can use an online tool like: http://embed-swf.org/embed-swf.php