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>
Related
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)
I am very new to actionscript. I want to access already existing BitmapImage in mxml so as to change its source The Bitmap Image already exists im mxml with its id. I dont hav e to create it dynamically only its source is to be set.
I have seen some examples but they add image itself dynamically I dont want that.
Action Script3 is to be used.
here is the code:
Kindly suggest.
<fx:Script>
//code to set image source to url1(a string)
</fx:Script>
<s:Graphic>
<s:BitmapImage
id="ini_image"
source="#Embed('C:/horizontal_red.png')"
width="640"
height="480"
fillMode="scale"
includeIn="ready"
/>
</s:Graphic>
I tried it like this :
var ini_image:BitmapImage = new BitmapImage();
ini_image.source = url;
But it gives error in namespace might be because ii is creating a new object of same type with same name. Which is not allowed.
Please correctify me if I am wrong and suggest corrections.
I assume you have more than one state in your application, so you have to take care if the ready state was or not initialized before setting the BitmapImage source. Hope the following code example will solve your problem.
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
currentState="other">
<s:states>
<s:State name="ready"/>
<s:State name="other"/>
</s:states>
<fx:Script><![CDATA[
private function onButtonClick(event:MouseEvent):void {
currentState = 'ready';
ini_image.source = 'http://lorempixel.com/200/200';
}
]]></fx:Script>
<s:Graphic>
<s:BitmapImage
id="ini_image"
source="http://lorempixel.com/100/100"
width="640"
height="480"
fillMode="scale"
includeIn="ready"
/>
</s:Graphic>
<s:Button click="onButtonClick(event)"/>
</s:Application>
You can also include image in both states and use different image source.
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
currentState="other">
<s:states>
<s:State name="ready"/>
<s:State name="other"/>
</s:states>
<s:Graphic>
<s:BitmapImage
id="ini_image"
source.other="http://lorempixel.com/100/100"
source.ready="http://lorempixel.com/200/200"
width="640"
height="480"
fillMode="scale"/>
</s:Graphic>
<s:Button click="onToggleStates(event)"/>
<fx:Script><![CDATA[
private function onToggleStates(event:MouseEvent):void {
currentState = currentState == 'other' ? 'ready' : 'other';
}
]]></fx:Script>
</s:Application>
I'm looking to animate a popup window using the effect.
The problem is that the effect is applied to the content of the popup window, not the popup window itself (including the title bar, minimize, maximize buttons etc)
Have a look at the result here..
My code is really simple and logically, should work if it is possible to animate a window.
<?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">
<fx:Script>
<![CDATA[
import comps.MyWin;
[Bindable]
private var _win:MyWin;
protected function openPopup():void
{
_win = new MyWin();
_win.width = 300;
_win.height = 300;
_win.open();
}
protected function animatepopup():void
{
MyEffect.play();
}
]]>
</fx:Script>
<fx:Declarations>
<s:Move id="MyEffect" xFrom="{_win.x}" xTo="{_win.x + 150}" target="{_win}"/>
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button label="Open" click="openPopup()"/>
<s:Button label="Animate" click="animatepopup()"/>
</s:WindowedApplication>
I think you need to target the object's NativeWindow instance in order to move and resize the object.
Thus, replace _win.myProperty with _win.stage.nativeWindow.myProperty:
<s:Move id="MyEffect" xFrom="{_win.stage.nativeWindow.x}" xTo="{_win.stage.nativeWindow.x + 150}" target="{_win.stage.nativeWindow}"/>
Then, the animation will affect the NativeWindow and not the internals of the window.
I'm trying to dispatch MouseEvent for HTML component in an AIR application. This way I want to simulate a click on HTML elements with ActionScript code. Here is my AIR 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">
<fx:Script>
<![CDATA[
private function clickHTML(event:MouseEvent):void {
var e:MouseEvent = new MouseEvent(MouseEvent.CLICK,true,false,10,10);
html.dispatchEvent(e);
}
]]>
</fx:Script>
<s:Button label="Click HTML" x="10" y="10" click="clickHTML(event)"/>
<mx:HTML id="html" x="10" y="50" width="100" height="100"
location="page.html" click="trace('html was clicked')"/></s:WindowedApplication>
Here is the code for page.html:
<html>
<body onClick="alert('Clicked!')" bgcolor="grey">
Page loaded
</body>
</html>
When you click HTML element by yourself, there is an alert and MouseEvent, but when event dispatched with script there is only MouseEvent.
How to make it work?
You need directly call JavaScript functions in order to your html content do something.
Check this arcticle:
Accessing HTML DOM and JavaScript objects from ActionScript
I have a parent w/ a popup child. When parent loads, I have to call a function within the popup without showing the popup (thus, I load "pupLove" but don't include it in layout)....I then pass this data to the parent. When the user manually clicks another button to open the popup, the same function is called & data passed to the parent. However, I am not able to pass dg.length to the parent. I believe the root problem is that I am loading "pupLove" & thus the parents are getting confused.....I'm guessing if I get rid of "pupLove" I can pass the data correctly but will need to call the child's function at creationComplete of the parent....how do I do that?
Here's my parent:
<?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"
backgroundColor="green" width="50%" height="100%"
xmlns:local="*"
>
<fx:Script>
<![CDATA[
import pup;
import mx.managers.PopUpManager;
public function showPup(evt:MouseEvent):void {
var ttlWndw:pup = PopUpManager.createPopUp(this, pup, true) as pup;
PopUpManager.centerPopUp(ttlWndw);
}
]]>
</fx:Script>
<mx:VBox>
<local:pup id="pupLove" visible="false" includeInLayout="false" />
<s:Button click="showPup(event);" label="launch Pup" />
<mx:Text id="Ptest" color="black" text="from Parent:{pupLove.dg.length}" />
</mx:VBox>
</s:Application>
And a popup child called 'pup.mxml':
<?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="400" height="300">
<fx:Script>
<![CDATA[
public function init():void{
// send php call
}
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
private function removePup(evt:Event):void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<fx:Declarations>
<s:ArrayCollection id="dg">
</s:ArrayCollection>
</fx:Declarations>
<s:TitleWindow width="100%" height="100%" close="removePup(event)">
<mx:VBox>
<mx:Text id="test" color="red" text="from Child:{dg.length}" />
<s:Button label="add Items" click="dg.addItem({id:'cat'})" />
</mx:VBox>
</s:TitleWindow>
</s:Group>
UPDATE: I guess my question can be more easily stated as: "is there a way to call a child's function from the parent without actually loading the child?"
Well, if in your child's function, you don't need to access any of its UI component, then you could instanciate the child in the parent view and call the method.
When you need to display the popup afterwhile, use the PopupManager addPopup method with this existing instance instead of using createPopup