Adobe Flash Builder Flex Video Player - Full screen on init - actionscript-3

I have a created a flex application with a video player. The application goes full screen. Now I am trying to make the video go on full screen on inital launch.
I have tried to google how to do this, but came up with nothing. Here is my app code:
<?xml version="1.0" encoding="utf-8"?>
<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"
creationComplete="myVid.play();"
applicationComplete="init()"
showStatusBar="false"
xmlns:media="org.osmf.media.*">
<s:VGroup>
<s:VideoDisplay id="myVid"
source="augusta.mp4"
autoPlay="true"
volume="0"
loop="true"
width="100%"
height="100%"
/>
</s:VGroup>
<fx:Script>
<![CDATA[
private function init():void
{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
]]>
</fx:Script>
</s:WindowedApplication>

Updating the container with the newly-resized dimensions would be a first step:
<?xml version="1.0" encoding="utf-8"?>
<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"
creationComplete="onCreationComplete(event)"
applicationComplete="init()"
showStatusBar="false"
xmlns:media="org.osmf.media.*">
<s:VGroup id="vidContainer">
<s:VideoDisplay id="myVid"
source="augusta.mp4"
autoPlay="true"
volume="0"
loop="true"
width="100%"
height="100%"
/>
</s:VGroup>
<fx:Script>
<![CDATA[
private function onCreationComplete(e:FlexEvent):void
{
vidContainer.width = this.width;
vidContainer.height = this.height;
myVid.play();
}
private function init():void
{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
]]>
</fx:Script>
</s:WindowedApplication>
(note that I didn't actually test this; I don't have a video file handy for testing the VideoDisplay component)

Related

Adobe AIR, External swf file when loaded from swf does not render properly

I was trying to create an Adobe AIR application that loads an external swf file. However when the swf file is loaded from it does not render properly.
My Main.mxml file:
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0"
creationComplete="Created()">
<fx:Script><![CDATA[
private var moduleLoader:Loader;
private function Created():void {
moduleLoader = new Loader();
var urlre: URLRequest = new URLRequest("Shell1.swf"); //http://localhost:8080/aps/
moduleLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
moduleLoader.load(urlre);
}
private function loaded(event:Event):void {
uic.addChild(moduleLoader);
}
]]></fx:Script>
<mx:UIComponent id="uic" width="100%" height="100%" ></mx:UIComponent>
</mx:Application>
My Shell1.mxml file:
<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="100%" height="100%" creationComplete="Created(event)"
backgroundColor="0xf5deb3">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function Created(event:Event):void {
}
]]>
</fx:Script>
<fx:Declarations>
<mx:RemoteObject id="RO" destination="AdministrationHandler"
fault="Alert.show(event.fault.faultString), 'Error'">
</mx:RemoteObject>
</fx:Declarations>
<s:Group id="Group" width="100%" height="100%">
<s:Label id="Introduction"
text="This is a demo application to show that the flex based application works. Click on the button below get generate a random number"
styleName="FilterLabel"/>
<s:VGroup id="VertGroup" paddingLeft="10" paddingRight="10" paddingTop="10" width="100%" height="100%">
<s:Label backgroundColor="green" width="1000" id="firstNumberLabel" text="Enter First Number"
styleName="FilterLabel"/>
<s:TextInput id="firstNumber" width="20%"/>
</s:VGroup>
</s:Group>
</s:Application>
When Shell1.swf is loaded directly in adobe air (by mentioning it application-descriptor.xml), it looks like:
But when I load it by using Main.mxml it looks like this:
So why is that the Components are not properly rendered when Shell1.swf is loaded from Main.swf ?

TextInput setFocus not working in flash builder 4.6

I'm using Flash Builder 4.6. and working for a flex project in which i want to setFocus on textInput after the intitialize is complete. I am using the code myTextInput.setFocus();
this is working fine cursor are blinking but not Highlighting the TextInput for focusing the TextInput. My All code is here:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" initialize="init();">
<fx:Script>
<![CDATA[
private function init():void{
myTextInput.setFocus();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel x="54" y="23" width="250" height="200">
<s:TextInput x="98" y="42"/>
<s:TextInput id="myTextInput" x="98" y="12"/>
</s:Panel>
</s:Application>
Index-template:
function setFocus(){
window.document.getElementById("APPNAME").focus();
$('#myTextInput').focus();
$('#myTextInput').focusEnables=true;
}
</script> </div>
Application:
private function init():void{
if (ExternalInterface.available) {
ExternalInterface.call('setFocus');
}
}

HIde Flex Video Player's controls

I have skinned the controls of the video player through VidoePlayerSkin.
I need to play the video always in full screen and show / hide the controls on tap.
i can't access the VideoPlayerSkin class's controls group element in action script. What is the solution for this?
Edited further query
This issue is solved but now if I want to use any controls the controls bar dissapears. It shouldn't when I click on an element inside the controls bar.? Any suggestions
This demo code show/hide controls of VideoPlayer by click. Is that what you want?
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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()">
<s:VideoPlayer id="video" source="rtmp://fmsexamples.adobe.com/vod/mp4:_cs4promo_1000.f4v"
width="100%" height="100%"
loop="true"
autoPlay="true" />
<s:Button label="fullscreen" click="{stage.displayState = stage.displayState == StageDisplayState.FULL_SCREEN ? StageDisplayState.NORMAL : StageDisplayState.FULL_SCREEN}"/>
<fx:Script>
<![CDATA[
private function init():void
{
video.videoDisplay.addEventListener(MouseEvent.CLICK, onVideoClick);
}
private function onVideoClick(e:MouseEvent):void
{
video.playerControls.visible = !video.playerControls.visible;
}
]]>
</fx:Script>
</s:Application>

pass variable from a component to TitleWindow in Flex4

I am trying to access a variable defined in an mxml component from a TitleWindow but I cannot get it. I also declared a variable in my titleWindow which references to the component. And I also tried using parentDocument to access the variable but in vain.
Any precious help on this. Thanks.
See my codes below:
This is my component (Comp.xml) where I have declared the variable testVar.
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
<fx:Script>
<![CDATA[
public var testVar:String = "Testing";
]]>
</fx:Script>
</s:Group>
This is my titleWindow code:
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" left="10"
creationComplete="titlewindow1_initializeHandler(event)"
width="100%" height="100%"
>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import com.Comp;
public var varComp:Comp;
public function titlewindow1_initializeHandler(event:FlexEvent):void
{
//Alert.show(new String(Application));
Alert.show(new String(varComp.testVar));
}
]]>
</fx:Script>
</s:TitleWindow>

Manipulate data object in a itemrenderer - Adobe Flex 4

I have a simple Itemrenderer with the following code:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" width="90" height="90">
<s:VGroup horizontalAlign="center">
<mx:Image source="{data.photo}" toolTip="{data.name}" />
</s:VGroup>
</s:ItemRenderer>
I would like to manipulate the data object before that it's binded to the image attributes (source and tooltip). To do this, I modified the code in this way:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" width="90" height="90"
initialize="itemrenderer1_initializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function itemrenderer1_initializeHandler(event:FlexEvent):void
{
var obj:Object = this.data;
//here the manipulation
}
]]>
</fx:Script>
<s:VGroup horizontalAlign="center">
<mx:Image source="{data.photo}" toolTip="{data.name}" />
</s:VGroup>
</s:ItemRenderer>
When I try to access to the this.data object, it's always empty! Is there a way to manipulate the data object before binding? Probably i don't have to use this.data, but i cannot find any other object to edit
Another solution would be to override the set data function, like this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" width="90" height="90"
creationComplete="itemrenderer1_creationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import valueObjects.Product;
[Bindable]
private var prd:Product;
override public function set data(value:Object):void
{
super.data = value;
//here i can access to the this.data object!
this.prd = this.data as Product;
}
]]>
</fx:Script>
<s:VGroup horizontalAlign="center">
<mx:Image source="{prd.photo}" toolTip="{prd.name}" width="70" />
<mx:Label text="{prd.name}"/>
</s:VGroup>
I found it! I can access to the this.data object only when the creation of the ItemRenderer is completed! to this I have to manipulate the object after the creationComplete event!
Here the code:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" width="90" height="90"
creationComplete="itemrenderer1_creationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import valueObjects.Product;
[Bindable]
private var prd:Product;
protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
{
//here i can access to the this.data object!
this.prd = this.data as Product;
}
]]>
</fx:Script>
<s:VGroup horizontalAlign="center">
<mx:Image source="{prd.photo}" toolTip="{prd.name}" width="70" />
<mx:Label text="{prd.name}"/>
</s:VGroup>
</s:ItemRenderer>
Although not a new thread, do NOT go with CreationComplete. The event is invoked only once. The data will be set whenever the hosting component decides that the itemRenderer should be re-used. E.g. useVirtualLayout=true for a list.