I'm having trouble to resize my custom UIComponent that wrap flash.media.Video object (The reason I choose this way is because mx.control.VideoDisplay doesn't support streaming playback that available in flash.media.Video that is attachNetStream()). Once I create a 320x240 Video size and remove it from its parent, I can't replace it with another one, bigger or smaller.
Here's my code (this one only capture Camera not NetStream).
package media
{
import flash.media.Camera;
import flash.media.Video;
import mx.controls.VideoDisplay;
import mx.core.UIComponent;
public class VideoUI extends UIComponent
{
private var video:Video;
public function VideoUI(width:int, height:int)
{
super();
video = new Video(width, height);
var cam:Camera = Camera.getCamera();
video.attachCamera(cam);
addChild(video);
}
}
}
The other part,
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import media.VideoUI;
private function addVideoOutput():void
{
// initial video size
var video:VideoUI = new VideoUI(160,120);
HBoxVideo.addChild(video);
}
protected function resizeVideo(event:MouseEvent):void
{
var videoList:Array = HBoxVideo.getChildren();
for (var i:int = 0; i < videoList.length; i++)
{
var video:VideoUI = videoList.pop();
HBoxVideo.removeChild(video);
// new size that produce the previous size :(
video = new VideoUI(320, 240);
HBoxVideo.addChild(video);
}
}
]]>
</mx:Script>
<mx:Button click="addVideoOutput()" x="10" y="265" label="add"/>
<mx:HBox x="10" y="10" width="100%" id="HBoxVideo">
</mx:HBox>
<mx:Button x="58" y="265" label="resize" click="resizeVideo(event)" id="resizeButton"/>
</mx:Application>
Thank you very much.
By default, new instances of the Video class are 320 pixels wide by 240 pixels high. You will need access to your video in the VideoUI Class so that you can change the width and height.
As follows:
Change all appearances of your video variable in VideoUI.as to
_video
and apply a getter.
New Video UI Class
package media
{
import flash.media.Camera;
import flash.media.Video;
import mx.core.UIComponent;
public class VideoUI extends UIComponent
{
private var _video:Video;
public function VideoUI(width:int, height:int)
{
super();
_video = new Video(width, height);
var cam:Camera = Camera.getCamera();
_video.attachCamera(cam);
addChild(_video);
}
public function get video():Video{
return _video;
}
}
}
Replace in your main mxml file
video = new VideoUI(320, 240);
with
video.video.width=320;
video.video.height=240;
Note: You should rename your VideoUI instance to videoui or the sorts. It is a little confusing. You can also move this to your VideoUI Class or make a method. The choice is yours.
Related
As requested, I'm giving a more detailed description of the problem...
First off I have this MXML:
<mx:Panel x="270" y="10" width="690" height="680" id="mainContainerPanel">
<mx:Canvas x="270" y="10" width="670" height="640" id="canvas" initialize="onInit()">
<mx:Script>
protected function onInit():void
{
spiro = new Spirograph(canvas);
}
</mx:Script>
</mx:Canvas>
</mx:Panel>
This passes the tag object to the constructor of my main AS3 class file. This works fine, where in the constructor I have:
function Spirograph(canvas:Canvas):void
{
mainContainer = canvas;
mainContainer.graphics.beginFill(0xFFFFFF);
mainContainer.graphics.drawRect(0, 0, 670, 640);
mainContainer.graphics.endFill();
}
At the moment, I am adding all Sprite objects to the mainContainer by using a wrapper class called SpriteUIContainer:
package includes
{
import flash.display.Sprite;
import mx.core.UIComponent;
public class SpriteUIContainer extends UIComponent
{
public function SpriteUIContainer(sprite:Sprite)
{
super();
this.explicitWidth = sprite.width;
this.explicitHeight = sprite.height;
this.x = sprite.x;
this.y = sprite.y;
addChild(sprite);
}
}
}
which is used in the following way:
private var circCentre:Sprite = new Sprite();
circCentre.x = mainContainer.width / 2;
circCentre.y = mainContainer.height / 2;
circCentre.graphics.lineStyle(3, 0xD0B917);
circCentre.graphics.beginFill(0xF2DF56, 0.2);
circCentre.graphics.drawCircle(20, 20, 50);
circCentre.graphics.endFill();
mainContainer.addChildAt(new SpriteUIContainer(circCentre), 1);
The circCentre Sprite never appears on screen and I don't understand how I can get it to appear.
Any help much appreciated!
By 'attached' do you mean you are adding new sprites to the UIComponent using the addChild method?
If so; You'll have to add code to size and position that new 'sprite' relative to the other objects in the container. There is no such code in your example. I recommend implementing this code in updateDisplayList().
More information on updateDisplayList() is in this Flex Component Lifecycle documentation.
If you need more help, you'll have to expand on how your adding new sprites to the UIComponent instance; and perhaps show an example where you add more than one.
I have a Flex ActionScript Application, I need to draw a simple rectangle in stage. I am using
firstapp.mxml and another Class called Book.as;
here is the complete code which i have done.
firstapp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import com.books.Book;
import flash.display.*;
var n:Book = new Book;
//n.var1 = "Another String";
addChild(n);
]]>
</mx:Script>
</mx:Application>
Book.as
package com.books
{
import flash.display.*;
public class Book extends Sprite
{
public var var1:String = "Test Var";
public var var2:Number = 1000;
public function Book()
{
var b = new Sprite;
b.graphics.beginFill(0xFF0000, 1);
b.graphics.drawRect(0, 0, 500, 200);
b.graphics.endFill();
addChild(b);
}
}
}
I'm new in Flex, So please help me to fix this. I want to show the rectangle.
Since you're trying to add this to a flex component, you probably need to wrap Book in a UIComponent instance:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import com.books.Book;
import flash.display.*;
var n:UIComponent = new UIComponent;
n.addChild(new Book);
addChild(n);
]]>
</mx:Script>
</mx:Application>
Another way of doing this would be to instead make Book inherit UIComponent, like so:
package com.books
{
import flash.display.*;
public class Book extends UIComponent
{
public var var1:String = "Test Var";
public var var2:Number = 1000;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
graphics.beginFill(0xff0000, 1);
graphics.drawRect(0, 0, 500, 200);
graphics.endfill();
}
}
}
Then you can add Book directly to your application, like so:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:books="com.books.*"
layout="absolute">
<books:Book />
</mx:Application>
Additionally, I suggest you read up on the Flex component architecture. There's some pretty good documentation from Adobe on the subject, but you should be aware that the information is specific to Flex 3 (I noticed you're using Flex 3, hence the link). Even while a lot of the information may still be applicable to Flex 4 (the component lifecycle for instance) there are differences, especially in terms of skinning.
USE var n:Book = new Book(); instead of var n:Book = new Book;
macke showed you good way. But if you want just to show something quickly, change
addChild(b);
to
rawChildren.addChild(b);
Edit: Some clarifications: application is UIComponent, therefore its addChild method needs UIComponent. You want to add Sprite. This can be done with rawChildren.addChild method from application. rawChildren is useful to get Sprites work with UIComponents, but you have to manage sprites yourself (sizes and layout).
I can take snapshot of a component. But the problem is the component is lil bigger with scroll bars. The saved image has scrollbars (only the visible area is getting saved). What i need is I want the entire component to be saved as an image.
This exact functionality is available while we print the component using FlexPrintJob, where by setting the FlexPrintJobScaleType.NONE.
But here in my case i want it to be saved using ImageSnapShot ( not thru FlexPrintJob ).
Thanks Advance,
Sriss
I thought I knew how to do this, but there seem to be lots of awkward issues. I got it working but it's not nice. :-( Maybe you can improve on it.
Here's the code for an example application. And below is the code for the MyCanvas class. When you click the button an image of the Canvas container but without scrollbars should be drawn.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:my="*">
<mx:Script><![CDATA[
import flash.display.BitmapData;
import flash.events.Event;
import mx.containers.Canvas;
import mx.graphics.ImageSnapshot;
import flash.geom.Matrix;
import mx.core.ScrollPolicy;
public function onclick():void
{
var bitmapData:BitmapData = ImageSnapshot.captureBitmapData(canvas);
canvas.addEventListener("BitMapReady", onBitMapReady);
canvas.horizontalScrollPolicy = ScrollPolicy.OFF;
canvas.CreateBitMapData();
}
private function onBitMapReady(e:Event):void
{
DrawBitmapDataAt(canvas.bitMapData, 100, 100);
canvas.removeEventListener("BitMapReady", onBitMapReady);
canvas.horizontalScrollPolicy = ScrollPolicy.AUTO;
}
private function DrawBitmapDataAt(bitmapData:BitmapData,x:int,y:int):void
{
var matrix:Matrix = new Matrix();
matrix.tx = x;
matrix.ty = y;
box.graphics.lineStyle(0,0,0);
box.graphics.beginBitmapFill(bitmapData, matrix, false);
box.graphics.drawRect(x,y,bitmapData.width,bitmapData.height);
}
]]></mx:Script>
<mx:Box id="box">
<my:MyCanvas width="50" height="50" backgroundColor="white" id="canvas">
<mx:Button label="Hello" click="onclick()" />
</my:MyCanvas>
</mx:Box>
</mx:Application>
MyCanvas class:
package
{
import flash.events.Event;
import flash.events.TimerEvent;
import mx.containers.Canvas;
import flash.display.BitmapData;
import mx.core.ScrollPolicy;
import mx.graphics.ImageSnapshot;
import flash.utils.Timer;
public class MyCanvas extends Canvas
{
public var bitMapData:BitmapData;
private var creatingBitMap:Boolean = false;
private var timer:Timer;
public function CreateBitMapData():void
{
this.horizontalScrollPolicy = ScrollPolicy.OFF;
creatingBitMap = true;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (creatingBitMap == true && this.horizontalScrollBar == null)
{
bitMapData = ImageSnapshot.captureBitmapData(this);
this.dispatchEvent(new Event("BitMapReady"));
creatingBitMap = false;
timer = new Timer(10);
timer.addEventListener(TimerEvent.TIMER, onTimer);
this.width += 1;
timer.start();
}
}
private function onTimer(e:TimerEvent):void
{
this.width -= 1;
trace("timer");
timer.removeEventListener(TimerEvent.TIMER, onTimer);
timer.stop();
}
}
}
I was laying out my Flex components using mxml and had them working correctly. But then I wanted to switch them over to Actionscript because I wanted them to extend a base component that provides default functionality.
I've go the code working except that my components that used to fill the entire space using width="100%" and height="100%" appear to display just using the default sizes. Do you know How I can get them to take up the entire space again?
Here is a test component I am playing with that exhibits the problem.
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:bbq="components.*"
backgroundGradientColors="[#000000, #3333dd]"
minWidth="480" minHeight="320"
layout="vertical" verticalAlign="top" horizontalAlign="center"
paddingLeft="0" paddingRight="0" paddingTop="30" paddingBottom="0"
width="100%" height="100%" >
<mx:VBox backgroundColor="0xcccc66">
<mx:ViewStack id="mainViewStack" width="100%" height="100%" color="0x323232">
<bbq:TestComp id="testComp" height="100%" width="100%" />
<bbq:ResultsBox />
</mx:ViewStack>
</mx:VBox>
TestComp.as
package components {
import mx.containers.VBox;
import mx.containers.Panel;
import flash.events.*;
public class TestComp extends VBox {
private var p:Panel;
function TestComp(){
super();
percentHeight = 100;
percentWidth = 100;
}
override protected function createChildren():void {
super.createChildren();
p = new Panel();
p.percentHeight = 100;
p.percentWidth = 100;
p.title = "Test Comp";
addChild(p);
}
}
}
Add inherited method calls; calls to super() methods;
import mx.containers.VBox;
import mx.containers.Panel;
import flash.events.*;
public class TestComp extends VBox {
private var p:Panel;
function TestComp(){
super(); // add this line
percentHeight = 100;
percentWidth = 100;
}
override protected function createChildren():void {
super.createChildren(); // add this line
p = new Panel();
p.percentHeight = 100;
p.percentWidth = 100;
p.title = "Test Comp";
addChild(p);
}
}
In you mxml:
<local:TestComp width="100%" height="100%" />
I think I might know what it is. I think I explicitly set the width and height of one of the other components in the viewstack, and I think that affected the viewstack itself so that all of the other components that were added to it also go those dimensions.
resizeToContent=true
I have a page-like flex application. In my main application is a holder (a canvas) that displays all the pages. The problem is that the components that are loaded inside the holder are bigger than the holder is when the main application starts. The holder height is set to 100% but still he gets scrollbars when I load a bigger component inside of him then himself.
How can I solve this problem? And if it isn't solvable would it work correct if I use a viewstack?
--update---
the holder looks like this:
<mx:canvas height="100%">
</canvas>
But the end of the application is 500 pixels lower so canvas height is 500 pixels high. Now I put a new child inside the holder that is 1000 pixels high. Now the holder hight should be 1000 pixels high
Prior to adding the component to the main canvas check the size of the child component to see if its bigger than the parent. If it is then you can use scaleX and scaleY on the object to scale it down to fit in your defined area.
What you declared in your question is the default behavior for any flex container... put larger things in it and you'll get scrollbars. To eliminate the scrollbars use:
horizontalScrollPolicy="off"
verticalScrollPolicy="off
Edit:
Use "resizeToContent" on a tabNavigator or viewStack... or you can bind the width of the parent container to the width of the current child.
This is some code I was playing around with for an auto sizing canvas
// save as AutoResizeCanvas.as
package
{
import mx.containers.Canvas;
import mx.core.Container;
import mx.core.UIComponent;
public class AutoResizeCanvas extends Canvas
{
public function AutoResizeCanvas()
{
super();
}
override protected function measure():void
{
super.measure();
var nh:int = 0;
var nw:int = 0;
for( var n:int = 0; n< this.numChildren; n++)
{
var c:UIComponent = this.getChildAt( n) as UIComponent;
if( c is Container)
{
var cc:Container= c as Container;
nh += /*cc.viewMetricsAndPadding.top + */cc.viewMetricsAndPadding.bottom + c.height;
nw = Math.max( nw, cc.viewMetricsAndPadding.left + cc.viewMetricsAndPadding.right + c.width);
}
else
{
nh += c.height;
nw = Math.max( c.width, nw);
}
}
this.measuredWidth = nw;
this.measuredHeight = nh;
}
}
}
// test code, paste into your project's main mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.containers.Panel;
import mx.containers.HBox;
private function addOne():void
{
var hb:Panel = new Panel();
hb.height = 100;
hb.width = 100;
hb.y = rc.numChildren * 110;
rc.addChild( hb);
}
]]>
</mx:Script>
<local:AutoResizeCanvas id="rc" verticalScrollPolicy="off" borderStyle="solid"/>
<mx:Button x="497" y="10" label="Add HBox" click="addOne()"/>
</mx:Application>