I'm working on a video chat in Flex with Red5. I'm using the following code:
stage.fullScreenSourceRect = new Rectangle(vidDisp.x,vidDisp.y, vidDisp.width, vidDisp.height);
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.displayState = StageDisplayState.FULL_SCREEN
This code gives me a weird half cut fullscreen. Does anyone know any other way?
Thanks.
#Siddharth here's the videoContainer from that implementation:
<!--Video Player-->
<mx:Box id="videoContainer" width="100%" height="{Math.floor(this.width * 0.6)}">
<mx:VideoDisplay id="player" width="100%" height="100%" autoPlay="false" autoRewind="false" bufferTime="4" playheadUpdateInterval="1000" />
</mx:Box>
Related
When printing (I think at the point I call FlexPrintJob.addObject()) I get the following:
Warning: Filter will not render. The DisplayObject's filtered dimensions (3324, 1740) are too large to be drawn.
I don't know what it thinks is 3324, 1740. The mx:Box object I pass to it is about 600x100.
I'm wondering if this problem is related to another problem I'm having. What gets printed has an extra border on the bottom and the right of what I want printed. I'm hoping that understanding this message will correct my problem.
I'm using the Flex 3.5 SDK
Here's a stripped down version of the code that still allows for this problem:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
title="FPL Flight Strip"
showCloseButton="true"
borderAlpha="1"
borderColor="{BrandGlobals.COLOUR_DARK}"
borderThicknessBottom="1"
borderThicknessLeft="1"
borderThicknessRight="1"
borderThicknessTop="0"
dropShadowEnabled="true"
fontSize="{AppGlobals.fntSize}"
backgroundAlpha="1.0"
alpha="1.0"
creationComplete="init()"
close="PopUpManager.removePopUp(this);">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.printing.FlexPrintJobScaleType;
import mx.printing.FlexPrintJob;
private function init():void
{
this.setStyle('fontFamily', 'Arial');
}
private function printData():void
{
var dbPrintJob: FlexPrintJob = new FlexPrintJob();
if (dbPrintJob.start())
{
try
{
dbPrintJob.addObject(boxPrint, FlexPrintJobScaleType.NONE);
}
catch (e:Error)
{
//trace(e);
}
dbPrintJob.send();
}
}
]]></mx:Script>
<mx:VBox width="600" height="100" horizontalAlign="center" verticalAlign="middle" backgroundColor="#FFFFFF" verticalGap="1" paddingLeft="2" paddingRight="2" paddingTop="2" paddingBottom="2">
<mx:Box id="boxPrint" width="100%" height="100%" backgroundColor="#FFFFFF">
<mx:Box id="box" width="100%" height="100%"/>
</mx:Box>
</mx:VBox>
<mx:ControlBar width="100%" barColor="#E8E8E8" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
<mx:VBox width="100%" height="100%" horizontalAlign="left" backgroundColor="#E8E8E8" paddingTop="5" paddingBottom="5" paddingRight="20" paddingLeft="20">
<mx:HBox width="100%" height="100%">
<mx:Button label="Print Strip" fontFamily="Arial" click="printData()" width="100" height="25" />
</mx:HBox>
</mx:VBox>
</mx:ControlBar>
</mx:TitleWindow>
I was not able to reproduce the filter error in Flex 3.6. Are you not able to upgrade? To my knowledge, there shouldn be very few issues with backwards compatibility, unless you are heavily overriding mx_internal.
I did however get the problem with the borders. This has to do with the way you are adding your objects. It's best to wrap the thing you want to print in a container, then add the container to the print job. This let's you control things like margins and spacing.
private function printData():void
{
var dbPrintJob:FlexPrintJob = new FlexPrintJob();
if(dbPrintJob.start())
{
try
{
dbPrintJob.addObject(this.canvas, FlexPrintJobScaleType.NONE);
}
catch(e:Error)
{
//trace(e);
}
dbPrintJob.send();
}
}
<mx:Canvas id="canvas" width="100%" height="100%">
<mx:Box id="boxPrint" top="10" left="10" bottom="10" right="10" backgroundColor="#FFFFFF">
<mx:Box id="box" width="100%" height="100%" />
</mx:Box>
</mx:Canvas>
Use the canvas to paint your background and space the children into the desired print layout.
I would also suggest giving this a quick read:
Setting size, scale, and orientation
You can try using a simple font such as "Arial", and try if the error still appears, to rule out problems than font.
And avoid using any component if you're having this problem to see if that eliminates the problem.
I have a flex mobile application that I am working on that I am having issues with selecting an image from roll/taking a picture. My application is not tabbed, however one part of it contains a Tabbed View Navigator with tabs across the bottom. Within one of those tabs, I have the ability to upload an image to a webservice that I have created. However, when I select an image or take the picture, it pops back out to the initial splash screen and the application restarts. If I use the component standalone (outside of the tabbed view navigator) it selects the image and uploads without any problem.
<s:TabbedViewNavigator id="tvn" width="100%" height="100%">
<s:ViewNavigator icon="#Embed('assets/icons/contact.png')" label="contact" width="100%" height="100%" firstView="Concern.ContactInfo" firstViewData="{data}"/>
<s:ViewNavigator icon="#Embed('assets/icons/notes.png')" label="details" width="100%" height="100%" firstView="Concern.Description" firstViewData="{data}"/>
<s:ViewNavigator icon="#Embed('assets/icons/updates.png')" label="updates" width="100%" height="100%" firstView="Concern.Updates" firstViewData="{data}"/>
<s:ViewNavigator icon="#Embed('assets/icons/upload.png')" label="uploads" width="100%" height="100%" firstView="Concern.Uploads" firstViewData="{data}"/>
</s:TabbedViewNavigator>
Concern.Uploads:
<?xml version="1.0" encoding="utf-8"?>
private var urlRequest:URLRequest = new ULRequest("http://mywebservice.php");
private var file:File;
//take a new picture with the camera
protected function uploadCamera_clickHandler(event:MouseEvent):void
{
if (CameraUI.isSupported)
{
trace("camera is supported");
var myCam:CameraUI = new CameraUI();
myCam.launch(MediaType.IMAGE);
myCam.addEventListener(MediaEvent.COMPLETE,selectCompleteHandler);
}
else
{
trace("camera not supported");
statusText.text = "Camera not supported on this device.";
}
}
//select a picture from the camera roll (gallery)
protected function uploadGallery_clickHandler(event:MouseEvent):void
{
if (CameraRoll.supportsBrowseForImage)
{
trace("camera roll is supported");
var roll:CameraRoll = new CameraRoll();
roll.browseForImage();
roll.addEventListener(MediaEvent.SELECT,selectCompleteHandler);
}
else
{
trace("camera roll not supported");
statusText.text = "Camera roll not supported on this device.";
}
}
//when the selection is complete upload it
protected function selectCompleteHandler(event:MediaEvent):void
{
trace("event.data.file.url; = "+event.data.file.url);
takePhotoButton.enabled = galleryPhotoButton.enabled = false;
file = event.data.file;
file.addEventListener(Event.COMPLETE,uploadCompleteHandler);
file.addEventListener(Event.OPEN,openUploadHandler);
urlRequest = new URLRequest("http://MyWebService.php?ID=" + data.ID.toString());
statusText.text = "Uploading please wait...";
file.upload(urlRequest);
}
protected function uploadCompleteHandler(event:Event):void
{
trace("upload complete");
takePhotoButton.enabled = galleryPhotoButton.enabled = true;
statusText.text = "Photo Uploaded";
}
protected function openUploadHandler(event:Event):void
{
trace("uploading");
statusText.text = "Uploading...";
}
]]>
</fx:Script>
<s:Image source="#Embed('assets/i/logo.jpg')" horizontalAlign="center" horizontalCenter="0" bottom="0"/>
<s:Label width="100%" id="res" textAlign="left"/>
<s:Scroller width="100%" height="100%">
<s:VGroup width="100%" height="100%" verticalAlign="top" paddingLeft="15" paddingRight="15" horizontalAlign="center">
<s:VGroup width="100%" paddingTop="15">
<s:Label text="My Header" styleName="cityTitle" width="100%">
<s:filters>
<s:DropShadowFilter color="#000000"/>
</s:filters>
</s:Label>
<s:Label text="Portal" styleName="citySubtitle" width="100%">
<s:filters>
<s:DropShadowFilter color="#000000"/>
</s:filters>
</s:Label>
</s:VGroup>
<s:VGroup horizontalAlign="center" gap="25" width="100%">
<s:Button id="takePhotoButton" label="Take Photo" click="uploadCamera_clickHandler(event)" minHeight="50" width="50%"/>
<s:Button id="galleryPhotoButton" label="From Gallery"
click="uploadGallery_clickHandler(event)" minHeight="50" width="50%"/>
<s:Label id="statusText" fontSize="24" text="" color="#FFFFFF"/>
</s:VGroup>
</s:VGroup>
</s:Scroller>
Thank you in advance for any assistance.
JH
I have gotten similar behavior and recently added my insights to another question. I saw something in release notes for AIR 2.5 about the possibility of Android killing your process when the camera is low on resources.
I think it is a FOL for at least awhile, I filed a bug report (#3099508) with Adobe. I have found if I turn off Data and GPS, so lower the resources being used currently, I have a greater chance of it working. Very frustrating, but I haven't seen any workaround. In my app, I am going to detect the situation by making a note (shared object) when I press the button before going to the camera, then clear it when it returns, but if the app starts with that note set, I will put up a dialog box advising to lower resources and this is an AIR bug.
Beginner Question:
I am using the IFrame Component for Flex in Flex 4. The code below works when it is put at the top of the scrolling area. However, if I put it where it below the viewable area it will not render. I am a complete beginner to Flex. The interesting thing is when I resize the window while the HBox is in view, the Iframe will load. But scrolling to it will not. Below is my code. I have made sure everything is visible=true but it seems like I need to add a listener or somehow trick it to think that the window has been resized to get it to render. Anyone with an idea how to fix this? Thanks!
<mx:HBox visible="true" backgroundColor="#cccccc" id="facebookhbox" width="100%" height="100" horizontalAlign="center" verticalAlign="middle" verticalGap="0" verticalScrollPolicy="off">
<mx:Canvas id="facebookcanvas" visible="true" x="0" y="0" width="650" height="80">
<flexiframe:IFrame visible="true" y="0" x="0" id="facebookIFrame" source="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.examplelink.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" width="450" height="80"/>
</mx:Canvas>
</mx:HBox>
No experience with the Flex IFrame here just FYI but in generic terms you can invalidate the size of the component or invalidate the display list then call validate now in order to force the LayoutManager to recalculate the sizes of the element and it's children (or simply draw in the case of invalidating the display list):
The difficult part I see here is figuring out when exactly you want that to happen (that is capturing some sort of event from the scrollbar). For test purposes you can just create a button and in it's click handler do the following:
facebookIFrame.invalidateSize();
facebookIFrame.invalidateDisplayList();
facebookIFrame.validateNow();
If this works out then you just need to find the appropriate event from the Scroller or Canvas that tells you when scrolling is occuring (at worst you could capture mouse down mark a flag then capture mouseMove and if the flag is set then run the code to invalidate/re-validate). Basically how the layout/drawing works is that the UIComponents have flags that let it know when it needs to recalculate the size of something or redraw it, this way everything isn't always redrawn only those components that require it. In this case it seems the FacebookIFrame isn't getting invalidated at some point when it should. Let me know if I can help anymore or if this doesn't work out.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
height="100%"
width="100%"
xmlns:code="http://code.google.com/p/flex-iframe/"
mouseDown="application1_mouseDownHandler(event)"
mouseUp="application1_mouseUpHandler(event)"
mouseMove="application1_mouseMoveHandler(event)">
<mx:Script>
<![CDATA[
var isMouseDown:Boolean;
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
facebookIFrame.invalidateSize();
facebookIFrame.invalidateDisplayList();
facebookIFrame.validateNow();
}
protected function application1_mouseDownHandler(event:MouseEvent):void
{
isMouseDown = true;
}
protected function application1_mouseUpHandler(event:MouseEvent):void
{
isMouseDown = false;
}
protected function application1_mouseMoveHandler(event:MouseEvent):void
{
if(isMouseDown)
{
facebookIFrame.invalidateSize();
facebookIFrame.invalidateDisplayList();
facebookIFrame.validateNow();
}
}
]]>
</mx:Script>
<mx:Spacer height="1000"/>
<mx:Button label="Test Invalidation"
click="button1_clickHandler(event)"/>
<mx:HBox visible="true" backgroundColor="#cccccc" id="facebookhbox" width="100%" height="80" horizontalAlign="center" verticalAlign="middle" verticalGap="0" verticalScrollPolicy="off">
<mx:Canvas id="facebookcanvas" visible="true" x="0" y="0" width="650" height="80">
<code:IFrame visible="true" y="0" x="0" id="facebookIFrame" source="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.examplelink.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" width="450" height="80"/>
</mx:Canvas>
</mx:HBox>
</mx:Application>
Updated to include a full application showing the example working, this is by no means a good way of doing things, this is due to a bug in the IFrame code that should be fixed (though I'm not sure how or where the bug exists something should be causing it to invalidate appropriately where it is not).
Shaun
In my flex application, i am maintaining 5 images. When user clicks on 'next' button, it should display one image say 'image1'. If that button clicked again, then image1 should replace with image2 and so on. I am basically following 'image.visible' method. But images are displaying side by side. I think it is not the correct procedure. Any alternative? Thanks in advance
here is my code. I kept all my images and buttons in mx:panel. Even i used x and y positions which are not working.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel
title = 'Learn and Test your Knowledge'
height = '80%'
paddingBottom = '10' paddingTop = '10'
paddingLeft = '10' paddingRight = '10'
borderAlpha='0.20' fontFamily="Verdana" fontSize="15" color="#F30C32" backgroundImage="#Embed(source='../images/lad.jpg')" width="413" x="139">
<mx:Script>
<![CDATA[
public function nextEvent():void
{
// here i should write next button code
}
]]>
</mx:Script>
<mx:Image source="../images/image1.jpg" visible="true" id="image1" />
<mx:Image source="../images/image3.jpg" visible="true" id="image2"/>
<mx:Image source="../images/image3.jpg" visible="true" id="image3"/>
<mx:Button id="next" visible="false" click="nextEvent()">
</mx:Button>
The best way is to use only one image component if you are only ever showing one image. You can create an array or vector with the embedded images and reference that to change the source property on the image component. Here is an example: (the code below will work with any layout/container)
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image id="image" click="imageClick()" source="{new images[0]()}" />
<mx:Script>
<![CDATA[
[Embed(source="assets/1.png")]
private var image1:Class;
[Embed(source="assets/2.png")]
private var image2:Class;
[Embed(source="assets/3.png")]
private var image3:Class;
private var images:Array = [image1, image2, image3];
private var imageIndex:uint = 0;
protected function imageClick():void
{
imageIndex++;
if(imageIndex == images.length) imageIndex = 0;
image.source = new images[imageIndex]();
}
]]>
</mx:Script>
</mx:Canvas>
Specify the x and y position of images as same and play around with their visibility.It ll definitely work.
ViewStack is my option it fits very well in this occasion.
At a time it shows only one component, for next action it will automatically override previous content by its new component.
<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
<mx:Canvas id="one" click="myViewStack.selectedChild=two;">
<mx:Image source="assets/1.png" />
</mx:Canvas>
<mx:Canvas id="two" click="myViewStack.selectedChild=three;">
<mx:Image source="assets/2.png" />
</mx:Canvas>
<mx:Canvas id="three" click="myViewStack.selectedChild=four;">
<mx:Image source="assets/3.png" />
</mx:Canvas>
<mx:Canvas id="four" click="myViewStack.selectedChild=five;">
<mx:Image source="assets/4.png" />
</mx:Canvas>
<mx:Canvas id="five" click="myViewStack.selectedChild=one;">
<mx:Image source="assets/5.png" />
</mx:Canvas>
</mx:ViewStack>
I'm new to Flex (and Flash) and just playing around at the moment. I was using the drawing methods on a Canvas to color it blue, and wanted to draw text, however, I have an error somewhere in the code.
<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" enterFrame="enterFrame(event)" applicationComplete="addtext(event)">
<mx:VBox width="640" height="480">
<mx:Label id="debug" text="No debug yet." />
<mx:Button id="myButton" label="Hello World" />
<mx:Button id="myOtherButton" label="Foo Bar Baz" />
<mx:Canvas id="myCanvas" width="100%" height="100%" />
</mx:VBox>
<mx:Script>
<![CDATA[
import flash.text.engine.*;
import mx.controls.*;
public function addtext(event:Event):void
{
Alert.show("foo!");
var str:String = "Hello World.";
var format:ElementFormat = new ElementFormat();
var textElement:TextElement = new TextElement(str, format);
var textBlock:TextBlock = new TextBlock();
textBlock.content = textElement;
var textLine:TextLine = textBlock.createTextLine(null, 300);
textLine.x = 30;
textLine.y = 200;
Alert.show("baz!");
this.addChild(textLine); // Execution appears to cease here.
Alert.show("bar!");
}
public function enterFrame(event:Event):void
{
myCanvas.graphics.clear();
myCanvas.graphics.beginFill(0x66666FF);
myCanvas.graphics.drawRect(0, 0, myCanvas.width, myCanvas.height);
myCanvas.graphics.endFill();
}
]]>
</mx:Script>
</mx:Application>
The alerts get to "baz!" but not "bar!", so the error is somewhere there. Also, I've been running this in Firefox and fdb, but fdb isn't outputting anything - it's just launching a Flash player. A starting point on how to debug Flash
IMHO this is a somewhat fuzzy mix up between flash and flex.
First: I would suggest that if you would like your canvas to be blue, you'd use:
<mx:canvas backgroundColor="0x66666FF" width="100%" height="100%" />
Secondly the text layout framework (Commonly TLF) is a topic I would reccomend you skip until you are a bit more familiar with flex and flash.
The error you are having is because TextLine does not implement IUIComponent, and therefore cannot be added to a Flex container.
If you want to use TLF, you will need to add a spark component capable of handling it, to your application, ex. s:RichText or s:TextArea
Happy coding!!