I am trying to do a video player with Adobe AIR Flex and utilizing StageVideo. In order to get StageVideo, the player is in actionscript file which is loaded into flex project on run time. To be able to display StageVideo, the backgroundAlpha has to set to 0. On main window, I am able to get black background by putting backgroundColor="#000000". However, on the secondary window, this seems like doesn't work. The background become white color.
At first I am planning to put a black rectangle at the back to cover the white background. But the problem is the video always loaded at the lowest level. I tried with addElementAt and addChildAt trying to push the video element in the front of that black rectangle, but it didn't work.
Main window code (shows black background):
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="init(event)" showStatusBar="false" backgroundColor="#000000" backgroundAlpha="0">
</s:WindowedApplication>
Second window code (shows white background):
<s:Window xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init(event)" showStatusBar="false" backgroundColor="#000000" backgroundAlpha="0">
</s:Window>
So, how can I get the black background for my second window?
Thank you.
Related
<s:SkinnableContainer styleName="top" width="1458" height="131" >
<s:VGroup left="50" verticalAlign="middle" height="131" styleName="profile_info">
<s:Image source="#Embed(source='images/logo.png')"/>
</s:VGroup>
</s:SkinnableContainer>
in my application I have this:
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="800" height="600" addedToStage="stretchHandler()">
private function stretchHandler():void{
stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP;
this.width = stage.stageWidth;
this.height = stage.stageHeight;
}
but the SkinnableContainer and the image inside doesn't scale, how to scale them?
To have your content scale to it's container you must set height and width as a percentage EG:
<s:SkinnableContainer styleName="top" width="100%" height="100%"/>
This would make your container always be the same size of its parent. However content of your container would still follow its own sizing settings.
Layout settings are also important, in a Group two object set to 100% would overlap each other and which ever is higher in the z order will be on top. However in a VGroup the two items at 100%/100% would each take 50% of the height and 100% width.
Note 1: Spark Image acts like a container arround the source image, while "the container" will scale to the parent container, the source image will follow slightly different rules, you have to use Image.fillMode and Image.scaleMode to control it (I recommend reading the docs on this)
Note 2: All UIComponents have min/max hieght/width properties as well as the standard size props
Try this,
All container width and height should be percentage(%) based and Image aswell also for image need to give scaleMode="stretch" fillMode="scale".
<s:SkinnableContainer left="300" styleName="top" width="90%" height="40%">
<s:Image source="#Embed(source='images/logo.png')" width="100%" height="100%" scaleMode="stretch" fillMode="scale"/>
</s:SkinnableContainer>
This will work.
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'm trying to set a Spark list control to 100% height of a View inside of a TabbedViewNavigatorApplication.
<s:List dataProvider="{dp}" itemRenderer="renderers.Renderer" width="100%" height="100%" />
Using this I can't seem to get the list to fit to the view, it always ends up being much too tall.
I'm testing using the Flash Builder mobile profile, the results seem to be the same across all phones. Setting the height to some number under 50% seems to bring the list closer to full width but it's not consistent across phones.
My app container is set for 160DPI
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" applicationComplete="init(event)">
I haven't come across this issue until I started using TabbedViewNavigatorApplication, 100% seems to work fine in a standard view based application.
Thanks!
If you give an object a % height, Flex will still measure the object's height and use the measured height if it is bigger than the calculated percentage.
To prevent this, specify any non-zero value for minHeight (e.g. minHeight="1"). This tells the layout manager that it's ok for the object to be less than its measured height.
Wanted to give an update, looks like I missed something dumb on my end.
I was creating my ViewNavigators using
var vN:ViewNavigator = new ViewNavigator();
I had set my vN width using
vN.percentWidth=100;
But I forgot to set the height
vN.percentHeight=100;
That seemed to fix everything.
Thanks!
I have an Image object that gets resized to the containers size when the image loads.
The images that it will load are dynamic in size so after resize I end up with a sliver of the image object's white background showing.
How can I make the Image object not have a white background and be transparent.
Parts of the PNG's have transparent parts but show up as white due to the white background of the object is it loaded into.
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" headerHeight="20" >
<mx:Script>
<![CDATA[
public function set source( val:String ):void{
this.img.source = val;
}
private function onLoad( e:Event ):void{
// resize image on load to fit
var scale:Number = (this.height - 38) / this.img.contentHeight; // 38 is adjustment for headheight and padding
this.img.scaleX = scale;
this.img.scaleY = scale;
}
]]>
</mx:Script>
<!-- how do I make this image object have a transparent background -->
<mx:Image id="img" complete="onLoad(event)" />
</mx:Panel>
[EDIT]
In the screen shot visible are 2 of the objects made from the code I posted above.
As you can see there is a white border.
and here is one of the PNGs
This png has a transparent 1 inch border at 350#PPI this is 72 PPI So a tad smaller
You can not see the the border here obviously but if you drag it to your desktop and open in photoshop you will see it
[EDIT]
As SuperSaiyen suggested I added backgroundColor="#000000" to the panel and I got this result. As you can see I got a black border now.
So i went ahead and added backgroundAlpha="0" along with backgroundColor="#000000" to the panel and got this.
So now I almost have it but there is still that bluish color around it. Its not quite 100% transparent yet.
I really have no idea why the panel background would change the image tag.
I guess some kind of inheritance from the parent is going on.
Still need to get rid of the blue.
Instead of setting the scale, try this:
<mx:Image id="img" height="{this.height-38}" maintainAspectRatio="true" />
I attempted to recreate your issue, and even with the scale I did not see the white borders.
I have a black border because that is the background of the panel...
<mx:Panel id="thePanel" headerHeight="20"
horizontalAlign="center" verticalAlign="middle"
height="200" width="150"
backgroundColor="#000000">
<!-- how do I make this image object have a transparent background -->
<mx:Image id="img" height="{thePanel.height-38}" maintainAspectRatio="true" />
</mx:Panel>
Edit:
So the background you're seeing is the background of the box behind the panel, not the image (see opaqueBackground prop on panel). What you want then is to set the background of the panel to be the same color as the borders of the panel. Is panel the right container to use? How about a HBox with roudned corners?
<mx:VBox id="thePanel" cornerRadius="4" backgroundColor="0xd1dbe9"
horizontalAlign="center" verticalAlign="middle"
height="200" width="150"
paddingBottom="5" paddingLeft="5" paddingTop="5">
<mx:Label text="Bind to title String" />
<mx:Image id="img" width="100%" height="100%"/>
</mx:VBox>
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">