Spark VideoDisplay events

I'm just getting started with Flex 4, I want to use the new Spark VideoDisplay component, but I can't seem to figure out how to use a couple events I need. The old MX VideoDisplay had "metadataReceived" and "ready" events, but I can't seem to find their new Spark equivalents. There is the "mediaPlayerStateChange" event, which I have subscribed to and am checking the VideoDisplay instance's "mediaPlayerState" property, but that only seems to return "buffering" and "playing". Is there some other property or event I should be using?
Greg

Hi,
I think that with the media framework being included with flashbuilder now would be the ideal time to start using this over the tradition mediaplayer, it is a superior option as you get much better control over how you handle digital media.
Its worth at least a look if you are considering using a mediaplayer in your apps.
http://opensource.adobe.com/wiki/display/osmf/Open+Source+Media+Framework;jsessionid=72AAD F6C4610F8A96161E740699E5E18
David.

Similar Messages

How to get metadata using Spark VideoDisplay in Flex4?

The MX VideoDisplay has "metadataReceived" event, but the Spark VideoDisplay has not.
Does anyone have any suggestions? Thanks.

Hello B.Venkatesan,
I am pasting code snippet below, u will get help from it.
call this function in itemclik event of your datagrid.
protected function dg_itemClickHandler(event:ListEvent):void
                var txt1:TextInput = new TextInput();
                var txt2:TextInput = new TextInput();
                var newValue1:String = dg.selectedItem.name;     //dg is id of ur datagrid and name is the datafield of first column
                txt1.text=newValue1;
                txt1.x=350;
                txt1.y=150;
                this.addElement(txt1);
                var newValue2:String = dg.selectedItem.per;
                txt2.text=newValue2;
                txt2.x=350;
                txt2.y=250;
                this.addElement(txt2);
Thanks and Regards,
Kanchan Ladwani | [email protected] | www.infocepts.com

Is there a better option than spark VideoDisplay with AV syncing capabilities

We have developed an AIR application that involves syncing multiple audio tracks with a video track. We are using the Spark VideoDisplay component for video and the Flash SoundChannel object for audio. We are having trouble keeping the audio synced with the video. Is there a better component to use for this? Is there some technique to keeping audio and video synced in Flash/AIR?

Andrea,
Your sample does not look like being »foot-intensive«, I only find two footnotes. And those will not be a problem for FrameMaker.
For 2-column text layout FrameMaker (as InDesign) gives you the option to create one text frame set to have two columns, or create two connected text frames, each of them one column. To keep the footnote in the original column, you would use the latter method. More information can be found in the online help:
http://help.adobe.com/en_US/framemaker/using/WS6C3D24E6-2965-48bb-B6CF-50D1439AEB01.html
Regarding other elements of the sample pages I don’t see any stumbling blocks. Just be aware that the general approach to layout, and especially when using XML-structured documents, is completely different from InDesign. With InDesign you just move all the frames wherever and whenever you want. With FrameMaker you plan ahead, create master pages and paragraph styles and then follow this original design. Creating layout changes »on the fly« is just not the way you work in FrameMaker. But this limitation is the reason for a higher layout consistency.
- Michael

Spark VideoDisplay - how to set `background` color

Hello!
How can I set the background color of the Spark VideoDisplay to be something else than the default black one?
Thank you.

There is no button involved in the following code, but it may
be of use to you:
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init()">
<mx:Script>
<![CDATA[
private var origColor:uint;
private function init():void {
origColor = dc.getStyle("selectionColor");
public function setBackGrdColors(newColor:uint):void {
dc.setStyle("selectionColor", origColor);
if(dc.selectedDate){
var dayOfWeek:Number = dc.selectedDate.day;
else{
return;
switch(dayOfWeek) {
case 0:
if(sun.selected)
dc.setStyle("selectionColor", newColor);
break;
case 1:
if(mon.selected)
dc.setStyle("selectionColor", newColor);
break;
case 2:
if(tue.selected)
dc.setStyle("selectionColor", newColor);
break;
case 3:
if(wed.selected)
dc.setStyle("selectionColor", newColor);
break;
case 4:
if(thu.selected)
dc.setStyle("selectionColor", newColor);
break;
case 5:
if(fri.selected)
dc.setStyle("selectionColor", newColor);
break;
case 6:
if(sat.selected)
dc.setStyle("selectionColor", newColor);
break;
default:
break;
]]>
</mx:Script>
<mx:VBox horizontalAlign="center" verticalGap="20">
<mx:DateChooser id="dc" textAlign="left"
change="setBackGrdColors(cellColor.selectedColor)"/>
<mx:HBox width="100%" horizontalAlign="center">
<mx:CheckBox id="sun" label="Sun"/>
<mx:CheckBox id="mon" label="Mon"/>
<mx:CheckBox id="tue" label="Tue"/>
<mx:CheckBox id="wed" label="Wed"/>
</mx:HBox>
<mx:HBox width="100%" horizontalAlign="center">
<mx:CheckBox id="thu" label="Thu"/>
<mx:CheckBox id="fri" label="Fri"/>
<mx:CheckBox id="sat" label="Sat"/>
</mx:HBox>
<mx:HBox width="300" horizontalAlign="center">
<mx:Label text="Background Color" />
<mx:ColorPicker id="cellColor"
selectedColor="#FF00FF"/>
</mx:HBox>
</mx:VBox>
</mx:Application>

Is there an alternative to spark.VideoDisplay for mobile devices?

Hey everybody,
a half year ago I started developing an app for android devices with a livestream of the device camera.
Unfortunately as I started the app a few days ago (I didn't work on the app for about 2 months) I got this camera-image on my display:
So as you can see something's wrong here. When I started working on the app I used spark.VideoDisplay as container for
my video and it worked quiet well. When I was searching for a solution to get this right I didn't find any hint on how to fix it.
Every tutorial & discussion I found so far didn't work for me .
The image above is created by this code (actually it's only a little testclass I wrote, not the app, but it produces the same picture):
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" creationComplete="main()">
          <fx:Declarations>
          </fx:Declarations>
          <fx:Script>
                    <![CDATA[
                                        import flash.media.Camera;
                                        import flash.media.Video;
                                        private var cam:Camera = Camera.getCamera();
                                        protected function main():void{
                                                  cam.setMode(640, 480, 15);
                                                  cam.setQuality(0, 80);
                                                  var video:Video = new Video(640, 480);
                                                  video.attachCamera(cam);
                                                  myVid.addChild(video);
                    ]]>
          </fx:Script>
          <s:SkinnableContainer height="100%" width="100%" x="0" y="0">
                    <s:VideoDisplay id="myVid" height="100%" width="100%" y="0" x="0">
                    </s:VideoDisplay>
          </s:SkinnableContainer>
</s:View>
My test device is a Samsung Galaxy Nexus and unfortunately I don't have another device to test this code.
Does anybody know about an alternative component I can use instead of spark.components.VideoDisplay or is there any other way to assign the camera-input to a container like spark's VideoDisplay?
Thanks so far!
Greetings, cloudyandbright

It seems nobody else encountered this problem. Maybe somebody who displays the camera input could post how it works for him / her?
I already tried to add it to the sprite by using "addChild(video)" instead of "myVid.addChild(video)" or to create a new uicomponent (mx.core.UIcomponent), pass the video to the uicomponent and then attach the uicomponent to spark.Group, but that didn't work either. So basically at the moment I can't think of another possible way to display the video.

Spark Label event problem

Event handler for a Spark.Label control:
private function onLabelClick(e:MouseEvent):void
trace(e.target);
trace(e.target.text);
First trace returns: '[object TextLine]'
Then I get this: ReferenceError: Error #1069: Property text not found on flash.text.engine.TextLine and there is no default value.
What is going on here and how to fix it ??
And: is it just me or does anyone else have LOADS of problems dealing with all the new 'improvents' in Flex 4??
(I have to admit that I find the new spark stuff very confusing)

Hi,
Try using currentTarget.
As far as flex 'problems', flex 4 is in beta and as things change this could be considered a problem but its beta which means expect a little confusion
fundamentally the basic stuff still work the same, spark has a bit of a learning curve which is to be expected when a product becomes more powerful.
<?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">
<fx:Script>
<![CDATA[
protected function label1_clickHandler(event:MouseEvent):void
lblResult.text = event.currentTarget.text;
]]>
</fx:Script>
<fx:Declarations>

</fx:Declarations>
<s:Label x="148" y="85" text="A Label that is clickable" click="label1_clickHandler(event)"/>
<s:Label id="lblResult" x="148" y="115" text="result"/>
</s:Application>

Why spark videodisplay control does not work when i run the application?

Even in the mode design I can not see the video, thks.....

@Jorge,
Try using file:/// instead of file:/.
This seems to work for me:
<?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">
    <s:VideoDisplay x="159" y="96"
            source="file:///C:/Documents and Settings/pdehaan/My Documents/My Videos/walking.flv"
            loop="true"
            width="384" height="267"/>
</s:Application>
But I'd probably recommend copying the .FLV file into your Builder project or putting it online instead of trying to play it back from a hardcoded file:/// path.
Peter

Spark button event record.

Hi,
I've the issue about record event in automation framework. A mouse events (double click, click, mouseDown) do not recording method which listen the event, i.e. automationManager.addEventListener(AutomationRecordEvent.RECORD, recordHandler, false, 0, true) but events from keyboard such as SPACE or ENTER is successfull recorded.
This is snippet of xml environment files with event for spark button:
<ClassInfo Name="SparkButton" Extends="SparkButtonBase" SupportsTabularData="false">
        <Implementation class="spark.components::Button"/>
        <Events>
            <Event Name="Click"   >
            <Implementation class="flash.events::MouseEvent" Type="click"/>
                <Property Name="triggerEvent" DefaultValue="1">
                    <PropertyType Type="Enumeration" Codec="event"/>
                </Property>
                <Property Name="ctrlKey" DefaultValue="false">
                  <PropertyType Type="Boolean"/>
                </Property>
                <Property Name="altKey" DefaultValue="false">
                  <PropertyType Type="Boolean"/>
                </Property>
                <Property Name="shiftKey" DefaultValue="false">
                  <PropertyType Type="Boolean"/>
                </Property>
            </Event>
            <Event Name="TypeSpark" >
                <Implementation class="flash.events::KeyboardEvent" Type="keyPress"/>
                <Property Name="keyCode" >
                    <PropertyType Type="String" Codec="keyCode" DefaultValue="ENTER"/>
                </Property>
            </Event>
      </Events>
</ClassInfo>
In what may be the cause?
Thanks.

The Spark button in this case is not itself toggleable. You will need to use a ToggleButton. Spark controls are not the swiss army knives that Flex 3 components were (in order to keep things a bit lighter).
The new Spark skinnable components control their own state internally and the components themselves in turn set the currentState of their associated skin at runtime. The current state of the component is not (in general) directly controllable via 'currentState'.
Regards,
Corey

Switch video file in Spark VideoDisplay cause memory leak

I wrote an air app, and found out if I keep swith video files in spark object VideoDisplay, eventually, the app crashs. anyone know how to fix this problem?

I think air still has issues with video generally speaking, was doing some
research project a couple of months ago and run into something similar and lots
of other crushes. I had to put that aside due to other priorities but I am
interested in this also. It would be good to check the Adobe Jira you might be
finding related bugs. You can vote and subscribe to get notified in case
something is changing.
C

VideoDisplay Events

Hello everyone, I'm a newbie here, i just wanted to seek for
help regarding my VideoDisplay. I have an application that have a
VideoDisplay object, i just wonder if there is a way to which i can
trigger the movie being played on it coz i need to load another
page right after the video has ended, something like redirecting
but not really like that. any help would be very much appreciated.
thanks in advance.

Hi,
I think that with the media framework being included with flashbuilder now would be the ideal time to start using this over the tradition mediaplayer, it is a superior option as you get much better control over how you handle digital media.
Its worth at least a look if you are considering using a mediaplayer in your apps.
http://opensource.adobe.com/wiki/display/osmf/Open+Source+Media+Framework;jsessionid=72AAD F6C4610F8A96161E740699E5E18
David.

VideoDisplay and events question and looping the video?

i have a flex ap that starts a video via a button click, i also have an event handle to detect when the video is finished
code sample below
private function loadandstartvideo(event:Event):void
          var thisvideo:VideoDisplay = VideoDisplay.getChildbyName("thisvid")
          thisvideo.removeevent(event.Complete,videoDisplay)
          thisvideo.source = "path/to/vid/"
          thisvideo.addeventListen(event.complete,restartvid)
          thisvideo.play();
private function restartvid(event:Event):void
          var thisvideo:VideoDisplay = VideoDisplay.getChildbyName("thisvid")
          thisvideo.play()
the above code is not the exact code the problem i have is that the loadandstart switched the video just fine but the restartvid function never gets called?
anyone have a clue? if you need the exact code i can post it.

here is the actual code. i poisted the other post from a different computer...
playinto is the function called from the button click
private function playintro(boardID:Number):void
        introIndex = boardID;
        var boxid:Number = boardID - 1;
        var vidBoxName:String = "hwsVid" + String(boardID);
        var vidBox:VideoDisplay = VideoDisplay(HWSDisplay.getChildByName(vidBoxName));
        vidBox.source = "path to vid;
        tempWidth = vidBox.width;
        tempHeight = vidBox.height;
        tempX = vidBox.x;
        tempY = vidBox.y;
        vidBox.x = 0;
        vidBox.y = 0;
        vidBox.height = Number(disHeight.text)
        vidBox.width = Number(disWidth.text)
        vidBox.maintainAspectRatio = false;
        var tempVidBox:VideoDisplay = new VideoDisplay;
        var tempBoxName:String = "";
        var a:Number;
        for (a=1;a<10;a++)
                if (a != boardID)
                        tempBoxName = "hwsVid" + String(a);
                        tempVidBox = VideoDisplay(HWSDisplay.getChildByName(tempBoxName));
                        tempVidBox.visible = false;
        vidBox.addEventListener(Event.COMPLETE,onIntroComplete)
        vidBox.play()
private function onIntroComplete(event:Event):void
        var vidBox2:VideoDisplay = VideoDisplay(event.currentTarget);
        vidBox2.removeEventListener(VideoEvent.COMPLETE,onIntroComplete)
        vidBox2.source = "path to loop vid;
        vidBox2.x = tempX;
        vidBox2.y = tempY;
        vidBox2.height = tempHeight;
        vidBox2.width = tempWidth;
        vidBox2.addEventListener(VideoEvent.COMPLETE,restartVidLoop)
private function restartVidLoop(event:VideoEvent):void
        var vidBox:VideoDisplay = VideoDisplay(event.currentTarget);
        vidBox.removeEventListener(Event.COMPLETE,restartVidLoop);
        vidBox.addEventListener(Event.COMPLETE,restartVidLoop);
        vidBox.play();

Enable smoothing on VideoDisplay

Hi,
When playback a video in Flex air application, the video looks pixel and the edges is not smooth. I have do some searching for example, but all examples are for Flex 3 with MX videodisplay, not spark videodisplay. I tried it and I get the error message "Error exist in the project: SWF Loader". I don't have SWF loader in that project.
Here is my 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" xmlns:custom="custom.*">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import org.osmf.events.TimeEvent;
            protected function videodisplay1_completeHandler(event:TimeEvent):void
                Alert.show("The Video Playback completed.");
        ]]>
    </fx:Script>
    <fx:Declarations>
        
    </fx:Declarations>
    
    <custom:SmoothVideoDisplay source="video/00_02_setup.mov" smoothing="true"/>
</s:WindowedApplication>
package custom {
    import mx.controls.VideoDisplay;
    import mx.core.mx_internal;
    use namespace mx_internal;
    public class SmoothVideoDisplay extends VideoDisplay
        private var _smoothing:Boolean = false;
        public function SmoothVideoDisplay()
            super();
        [Bindable]
        public function set smoothing(val:Boolean):void{
            if (val == _smoothing) return;
            _smoothing = val;
            videoPlayer.smoothing = _smoothing;
        public function get smoothing():Boolean{
            return _smoothing;
How can I solve the problem? How can I have the good video quality playback in flex? Thanks.

See this article to improve the scaled video quality in flex by enabling the smoothing property. Here the videoDisplay component is extended to expose the smoothing and deblocking property.
http://askmeflash.com/tutorial/8/how-to-smooth-resized-video-in-videodisplay-component

Spark check box on FlexEvent.CHANGE

Spark check box does not check/uncheck itself when the FlexEvent.CHANGE is fired on its own instance. Is it a bug in the flex frame work? but when the same is done on the mx;Checkbox it works properly.
i'm using flashbuilder 4.0 standalone with with 4.0.1 SDK in it.
eg:
checkbox.dispatchEvent(new Event(Event.CHANGE)); // this is for spark /mx - for mx the checkbox will
//uncheck/check when this event is fired
// for spark this event is not captured

I don't believe this should have had this behavior with the MX CheckBox. The change event should fire after the selected property is changed, but, dispatching it should not cause the selected property to change.
Can you describe why you would want the change event to update whether the CheckBox is selected or not?
Joan

Air 3.5 front camera issue

I am using the latest air 3.5 sdk to build an video application. But I find that the front camera can not render correctly in spark.VideoDisplay, while the back camera is ok.
My deivce is galaxy nexus, android 4.1.2, the code is below:
protected function init(event:FlexEvent):void
        cam = getFrontCamera();
        if (cam != null)
                videoDisplay.videoObject.attachCamera(cam);
public function getFrontCamera():Camera
        if (Camera.isSupported == false)
                return null;
        var numCameras:int = Camera.names.length;
        var frontCam:Camera;
        for (var i:int = 0; i < numCameras; i++)
                frontCam = Camera.getCamera(Camera.names[i]);
                if (frontCam.position == CameraPosition.FRONT)
                        break;
                frontCam = null;
        return frontCam;
<s:VideoDisplay id="videoDisplay" x="0" y="0" width="100%" height="100%" creationComplete="init(event)">
                <s:source>
                        <s:DynamicStreamingVideoSource host="" streamType="live">
                                <s:DynamicStreamingVideoItem />
                        </s:DynamicStreamingVideoSource>
                </s:source>
</s:VideoDisplay>
The camera result below:
Any help will be appreciate.

Looks like he created a bug report, I am having the same issue and cannot find a work around on droid bionic after upgrading from 3.4 to 3.5.
Please vote if it looks like your issue, https://bugbase.adobe.com/index.cfm?event=bug&id=3364427

VideoPlayer and adding Cue Points

I'm having a tough time getting cue points to work with the new sparks VideoPlayer. In the documentation, it states that VideoDisplay has been replaced with VideoPlayer, but most of the examples on the web are for VideoDisplay.
I'm calling the usual 2 classes from the mx namespace.
     import mx.events.CuePointEvent;
     import mx.controls.videoClasses.CuePointManager;
then trying to dynamically add cue points like this:
I then create an instance of the CuePointManager, with myVid [type sparks VideoPlayer]
     cuePointManager = new CuePointManager(myVid);
then create a new cuePt Objectwith name and time properties and try to add it as a cue point:
     myVid.myCuePointManager.addCuePoint(cuePt);
where
- myVid is the VideoPlayer instance
- myCuePointManager is an instance of CuePointManage
- cuePt is an Object with name and time
I get errors about cooercing myVid [type sparks VideoPlayer]
1067: Implicit coercion of a value of type spark.components:VideoPlayer to an unrelated type mx.controls.videoClasses:VideoPlayer
1119: Access of possibly undefined property cuePointManager through a reference with static type spark.components:VideoPlayer
Can someone please be very kind and give me a nudge in the right direction. I've been pulling my hair on it for a day now, and couldn't find any tutorials specifically on the new sparks VideoPlayer and how to add dynamic cue points to it.
Thanks,
David
P.S. Video is big on the web. I would say that sorting out the VideoPlayer should be one of the top priorities in the new version of the SDK.

The short answer (and the official one) is that our new Spark VideoPlayer doens't support cuePoints.
The longer answer is that as OSMF (Open Source Media Framework, which is what the Spark VideoDisplay/VideoPlayer components ship with) adds cue point support, you might be able to take a newer build of OSMF and start using cue points. Here's some info on OSMF and cuePoints: http://blogs.adobe.com/osmf/2009/11/cue_point_support_in_osmf.html . You could try taking one of their recent builds and playing around with it. In order to bring those classes in to Flex, I'd probably reccomend monkey-patching on top of spark.components.VideoDisplay and changing a few things as some of the underlying OSMF APIs that Flex is dependent on have probably changed. Then, you'd have to look at how to expose cuePoints from the spark VideoDisplay component.
-Ryan

Spark VideoDisplay events

Similar Messages

Maybe you are looking for