I've embedded a flash object in a form, and anchored it to the 4 borders. And when I resize the window, the flash application resizes too... but it tries to keep its proportions, showing unaesthetic black bars instead of change its width/length proportion.
How can I change this behaviour?
scale - Possible values: showall, noborder, exactfit, noscale.
try <param name="scale" value="exactfit">
Related
I have a simple bitmap image 3px wide and 150px high included as the top banner in my layout.
<s:BitmapImage id="blueBanner" source="{this.bmpimg}" width="100%"/>
The rest of the content is centered below this.
When the page opens no matter the size of the browser window, the image always fills the width available.
I have a browser window resize handler that resets my main content below the banner to the center of the new window size and this works perfectly.
But no matter how many times the browser is resized, the BitmapImage will never stretch wider than the original window width.
I have tried every property and method of BitmapImage that I think could affect this in the resize handler but nothing I can find has any effect at all.
I cannot understand how it remembers the original stage width to begin with.
Its parent containers are all set to 100% width and there are no unusual skins or any other reference to this object in the whole project except in a function where it can be included in the layout or not, but this function is never called in this case.
Can anyone offer any clue as to why it won't stretch automatically?
Doug
Simple , just set the width to screen.width and you are good to go.
<s:BitmapImage id="blueBanner" source="{this.bmpimg}" width="{screen.width}"/>
Thanks for all the responses. In fact I solved the problem by adding the BitmapImage line to the Application Skin. Once it's here as well as in the layout it works. I have no idea why it needs to be in both places, but once it's set up like this everything works correctly.
Setting ScaleMode makes no difference and setting screen.width either in the blueBanner tag or later in the resizeHandler (because not always available when the tag is run) also makes no difference in my layout.
Doug
I want my canvas and background image to scale to any browser size which I have learnt is possible through this.
<canvas id="canvas" style="width:100%; height:100%;
background-size:100% 100%; left:0px; top: 0px;">
Setting the width and height using percentages causes whatever I draw on top to come out blurred.
The reason for this I read is that it comes out blurry because the width and height of canvas set using css is different.
It is absolutely imperative that I keep track of the co-ordinates since I have written a collision detection logic using the original size of the image.
Is it possible to dynamically change the canvas size to fill the screen, redraw it and ensure that the collision logic works perfectly without blurry drawing on top?
Lets take an example here. The image floor.jpg that I want as the background of the canvas is 1200X700. I want the canvas to be 100% of the page width and height. My animated player that moves on top of it requires collision detection with walls which I have coded keeping in mind the 1200x700 image.
I have gone through the various similar question on this site, but can't seem to figure it out.
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
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
i'm using videodisplay to play a rtmp stream, streamed video is 800X600 which also the size of the videodisplay.
but when it starts to play a black area appears on both top and bottom of the video.
attached image shows what i mean
Depends on the ratio of video, but I think you can use something like this:
videoDisplay.scaleMode = ScaleMode.STRETCH;
or
videoDisplay.scaleMode = ScaleMode.LETTERBOX;
Update :
So in this case I think setting maintainAspectRatio as false within your <mx:videoDisplay /> will help you, Although the main purpose of that is maintaining the original aspect ratio while resizing the video.
I am not sure whats going wrong but when I am using a flash file in the web page when I am setting size
style="width: 445px; height: 386px"
white strips are embedding sideways automaticaaly,,
while using the same page with size
width="450" height="440"
no white strips appear.
It might be the problem associated with the aspect ratio.
Is there any way to set these white strps to transparent????
or to remove these strips?????
Can we see a link? Or some code? It appears to be an aspect ratio problem because the width and height are definitely a different aspect ratio in your second scenario. Or if the white strips are the flash stage, you can also set wmode to transparent, and the html background will show through.