I have load flash swf file to my flex project.
I have used SWFLoader for that to load the swf file.
var loader:SWFLoader = new SWFLoader();
loader.load("player/VideoPlayer.swf");
loader.width = 320;
loader.height = 280;
parentContainer.addElement(loader);
In which parentContainer is <s:BorderContainer. It's width 320 and height 280.
I have also tried to set like following, but didn't got succeeded:
function onComplete(event:Event):void
{
loader.width = 320;
loader.height = 280;
}
Problem: But when i run it swf file load to full width and height. How can i set it's width and height to it's parent container?
I have also tried like:
<s:BorderContainer id="parentContainer" width="320" height="280">
<s:SWFLoader width="320" height="280" scaleContent="false" autoLoad="true"
source="#Embed(source='player/VideoPlayer.swf')" />
</s:BorderContainer>
But still it take 100% size of application. Application size is 600 X 500.
Edit:
swfloader cover whole application and all other flex component hide beside the swfloader
From the documentation:
scaleContent
A flag that indicates whether to scale the content to fit the size of the control or resize the control to the content's size. If true, the content scales to fit the SWFLoader control. If false, the SWFLoader scales to fit the content.
I do not know why do not work because the default value for scaleContent is true, try to set the property:
<s:BorderContainer id="parentContainer" width="320" height="280">
<s:SWFLoader width="320" height="280" scaleContent="true" autoLoad="true"
source="#Embed(source='player/VideoPlayer.swf')" />
</s:BorderContainer>
Or:
var loader:SWFLoader = new SWFLoader();
loader.load("player/VideoPlayer.swf");
loader.width = 320;
loader.height = 280;
loader.scaleContent = true;
parentContainer.addElement(loader);
Related
My Requirement given below:
I want to span same image across two canvas.
Like I have HBOX with two canvas as childs. I want to drag first canvas
display object into second canvas with half portion of that object in 1st canvas and half in second canvas.
Thanks in advance if someone has any idea.
You can split your image, after dropping it, using, for example, copyPixels() on the BitmapData of your image.
Take this example where I used two images in two Groups :
<s:VGroup x="0" y="0" width="300" height="500">
<s:Group id="group_top" width="200" height="200" >
<s:Image id="img_top" x="0" y="0" width="100%" height="100%"
source="assets/image.jpg"
mouseDown="img_top_mouseDownHandler(event)"
mouseUp="img_top_mouseUpHandler(event)"/>
</s:Group>
<s:Group id="group_bottom" width="200" height="200" >
<s:Image id="img_bottom" x="0" y="0" width="100%" height="100%" source=""/>
</s:Group>
</s:VGroup>
For the dragging and dropping, I used the old startDrag() and stopDrag() just for the example of course, you may need to use another way according to your needs.
protected function img_top_mouseDownHandler(event:MouseEvent):void
{
img_top.startDrag();
}
protected function img_top_mouseUpHandler(event:MouseEvent):void
{
img_top.stopDrag();
img_top.x = img_top.y = 0;
split_image();
}
And to split the image, I did like this :
protected function split_image():void
{
var bitmap_data_source:BitmapData = img_top.bitmapData;
var w:int = bitmap_data_source.width,
h:int = bitmap_data_source.height;
var bitmap_data_top:BitmapData = new BitmapData(w, h);
bitmap_data_top.copyPixels(
bitmap_data_source,
new Rectangle(0, 0, w, h/2),
new Point()
);
var bitmap_data_bottom:BitmapData = new BitmapData(w, h);
bitmap_data_bottom.copyPixels(
bitmap_data_source,
new Rectangle(0, h/2, w, h/2),
new Point()
);
var bitmap_top:Bitmap = new Bitmap(bitmap_data_top);
img_top.source = bitmap_top;
var bitmap_bottom:Bitmap = new Bitmap(bitmap_data_bottom);
img_bottom.source = bitmap_bottom;
}
Hope that can help.
I made canvas like this ,
<canvas id="mainCanvas" style="width:310px;height:212px;">
</canvas>
then try to put png on the canvas in my script
var canvas=document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
var img= new Image();
img.src = "img/player.png";
context.drawImage(img,0,0,310,212);
my plyer.png size is 312 *212 , the same size as canvas size.
However,my png file is expansioned on the canvas. Consequently, right edge and bottom edge protrude from the canvas.
Why my png doesn't fit in ??
All canvas should have width and height attributes specified
<canvas width="310" height="212"></canvas>
Width and height shouldn't use 'px'.
With javascript use:
var c = document.querySelector('canvas');
c.width=310;
c.height=212;// as Ken Fyrstenberg mentioned
Also be sure to wait till image will load.
img.onload(function(){
//drawimage
});
You need to apply the size as an attribute not styles. Try this:
<canvas id="mainCanvas" width="310" height="212">
</canvas>
with the following code,it shows write backgroup now
<s:BorderContainer width="100%" height="80%" backgroundAlpha="0">
<s:Image id="bg" width="100%" height="100%"/>
<s:Image id="img" width="100%" height="100%" />
</s:BorderContainer>
var black:BitmapData = new BitmapData(bg.width,bg.height,false,0X656565);
bg.source = new Bitmap(black);
var bitmap:Bitmap = new Bitmap(data.bytes); //a png BitmapData
img.source = bitmap;
In the statement
var black:BitmapData = new BitmapData(bg.width,bg.height,false,0X656565);
you have already set the transparency to false.
Instead try:
var black:BitmapData = new BitmapData(bg.width,bg.height,true,0X00000000);
The third parameter sets the transparency to true and allows the bitmapData to take 32 bit colors which includes the alpha values also. The 32 bit color for the transparency part is passed in the 4th parameter, with the first two digits after the 0x standing for alpha=0.
Hope this helps
I have a runtime generated bitmapdata and want to apply scaleninegrid for it in my flex Skin class.I did it something like this:
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
[Embed(source="progressBarTrack.png")]
private var host:Class;
[Bindable]
private var texture:BitmapData
protected function skin1_preinitializeHandler(event:FlexEvent):void
{
//here is just an example,my bitmapdata will be retrieved by an other way.
texture = Bitmap(new host()).bitmapData;
}
]]>
</fx:Script>
<s:Graphic scaleGridBottom="11" scaleGridLeft="14" scaleGridRight="40" scaleGridTop="10">
<s:Rect width="300" height="22">
<s:fill>
<s:BitmapFill source="{texture}"/>
</s:fill>
</s:Rect>
</s:Graphic>
However, it did not work no matter i set the width and height or not.I also tried to embed the source image,it worked,but as the bitmapdata is runtimely generated, i can not set the scalenine like #embed.....,scaleGridLeft.....
Is there anyway allows me to do that or anything wrong i did?i would like to get some tips before i hack into the source code,and make my own graphic element which supports it.
Many thanks!!!
Have a look at the bytearray.org ScaleBitmap class. It's an open source class that extends BitmapData to render scale9 bitmaps at runtime.
Here is my problem. I have a s:GridItemRenderer (the spark DataGrid size where I use this, is: 100% x 100%) and here is the function in it:
override public function prepare(hasBeenRecycled:Boolean):void {
myLabel.text = width.toString();
}
and here is the "myLabel" in it:
<s:Label id="myLabel" x="0" y="0" width="100%" height="20" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"/>
SO AND THE PROBLEM IS:
When i drag the side of the window, and resize it everything is fine! myLabel is updating, but sometimes the last column doesn't. BUT when I maximize the window, NOTHING happend, BUT the "width" variable is updated, but the myLabel.text doesn't. (so I try to use this.width too, but it isn't take effects)