3 Replies Latest reply on Mar 24, 2010 11:11 AM by jcastelain

    Dragging media elements

    jcastelain Level 1

      Hi all,

       

      I was wondering how to enable a media element for "mouse dragging"

       

      1 - I have a  MediaContainerUIComponent on the root of my Flex app.

       

      2 - I create a new MediaContainer() which I assign to the MediaContainerUIComponent's container property

       

      3 - I create a VideoElement and add it to my MediaContainerUIComponent's container using :

       

      MediaContainerUIComponent.container.addMediaElement(videoElement);

       

      4 - I try to get the DisplayObjectTrait from the VideoElement and register for the MouseEvent.CLICK event

       

       

      var trait:DisplayObjectTrait = videoElement.getTrait(MediaTraitType.DISPLAY_OBJECT) as DisplayObjectTrait;
      
      if(trait && trait.displayObject) {
           trait.displayObject.addEventListener(MouseEvent.CLICK, videoElement_mouseClickHandler);
      
      }
      

       

       

      
      
      
      
      
      
      
      

       


      This doesn't seem to be the correct approach of doing it.
      If anyone could explain me how to do it, I'd appreciate.
      Thanks
        • 1. Re: Dragging media elements
          bringrags Level 4

          The DisplayObject for VideoElement is Video, which subclasses DisplayObject.  The "click" MouseEvent is not dispatched by DisplayObject, but by its subclass InteractiveObject.  So you won't ever get this event from a Video object.

           

          However, MediaContainer should dispatch the "click" event since InteractiveObject is in their inheritance hierarchy, so if you change the approach to "dragging media containers", then presumably this would work.

          • 2. Re: Dragging media elements
            jcastelain Level 1

            oops my bad.

             

            Thanks for the help Brian

            • 3. Re: Dragging media elements
              jcastelain Level 1
              <?xml version="1.0"?>
              <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"
                        xmlns:samples="org.osmf.samples.*"
                        applicationComplete="applicationCompleteHandler()"
                        >
              
                   <fx:Script>
                        <![CDATA[
                             import org.osmf.containers.MediaContainer;
                             import org.osmf.elements.ParallelElement;
                             import org.osmf.elements.VideoElement;
                             import org.osmf.examples.buffering.SynchronizedParallelElement;
                             import org.osmf.layout.LayoutMetadata;
                             import org.osmf.media.MediaElement;
                             import org.osmf.media.MediaPlayer;
                             import org.osmf.media.URLResource;
                             import org.osmf.net.NetLoader;
                             import org.osmf.traits.DisplayObjectTrait;
                             import org.osmf.traits.MediaTraitType;
                   
                   
                             private var _parallelElement:SynchronizedParallelElement;
                             private var _largeVideo:VideoElement;
                             private var _largeContainer:MediaContainer;
                             private var _smallContainer:MediaContainer;
                             private var _smallVideo:VideoElement;
                             
                             private var _mediaPlayer:MediaPlayer;
                             
                             // Thanks to OSMF samples ... 
                             private static const REMOTE_PROGRESSIVE1:String = "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv";
                             private static const REMOTE_PROGRESSIVE2:String = "http://mediapm.edgesuite.net/strobe/content/test/elephants_dream_768x428_24_short.flv";
                   
                             private static const LARGE_VIDEO_WIDTH:Number =  640;
                             private static const LARGE_VIDEO_HEIGHT:Number = 480;
                             
                             private static const SMALL_VIDEO_WIDTH:Number =  200;
                             private static const SMALL_VIDEO_HEIGHT:Number = 150;
                             
                             private var _videosToggled:Boolean;
                             
                             private function applicationCompleteHandler():void {
                                  createMediaElements();
                             }
                   
                             private function createMediaElements():void {
                                  _parallelElement = new SynchronizedParallelElement();
                                  
                                  _largeVideo = new VideoElement(new URLResource(REMOTE_PROGRESSIVE1));
                                  _smallVideo = new VideoElement(new URLResource(REMOTE_PROGRESSIVE2));
              
                                  _parallelElement.addChildAt(_largeVideo, 0);
                                  _parallelElement.addChildAt(_smallVideo, 1);
                   
                                  _mediaPlayer = new MediaPlayer(_parallelElement);
                                  
                   
                                  mediaContainerUIComponent.container = new MediaContainer();
              
                                  _largeContainer = new MediaContainer();
                                  _largeContainer.clipChildren = true;
                                  _largeContainer.addMediaElement(_parallelElement.getChildAt(0));
                                  
                                  _smallContainer = new MediaContainer();
                                  _smallContainer.addMediaElement(_parallelElement.getChildAt(1));
                                  
                                  
                                  mediaContainerUIComponent.addChild(_largeContainer);
                                  mediaContainerUIComponent.addChild(_smallContainer);
                                  
                                  applyMediaElementLayout(_largeVideo, 0, 0, LARGE_VIDEO_WIDTH, LARGE_VIDEO_HEIGHT);
                                  applyMediaElementLayout(_smallVideo, 
                                       LARGE_VIDEO_WIDTH - SMALL_VIDEO_WIDTH, 
                                       0, 
                                       SMALL_VIDEO_WIDTH,
                                       SMALL_VIDEO_HEIGHT);
              
                                  _smallContainer.addEventListener(MouseEvent.MOUSE_DOWN, smallContainer_mouseDownHanlder);
                                  _smallContainer.addEventListener(MouseEvent.MOUSE_OUT, smallContainer_mouseUpHandler);
                                  _smallContainer.addEventListener(MouseEvent.MOUSE_UP, smallContainer_mouseUpHandler);
                             }
                   
                             private function applyMediaElementLayout(element:MediaElement,
                                                                        x:Number = 0,
                                                            y:Number = 0,
                                                                        w:Number = 0,
                                                                        h:Number = 0,
                                                                        horizontalAlign:String = "left",
                                                                        verticalAlign:String = "top"):LayoutMetadata {
                   
                                  var metadata:LayoutMetadata = element.getMetadata(LayoutMetadata.LAYOUT_NAMESPACE) as LayoutMetadata;
                                  if(!metadata) {
                                       metadata = new LayoutMetadata();
                                       element.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, metadata);
                                  }
                                  metadata.x = x;
                                  metadata.y = y;
                                  metadata.width = w;
                                  metadata.height = h;
                                  metadata.horizontalAlign =  horizontalAlign;
                                  metadata.verticalAlign =  verticalAlign;
                                  return metadata;
                             }
                             
                             private function smallContainer_mouseDownHanlder(event:MouseEvent):void {
                                  _smallContainer.startDrag();
                             }
                             
                             private function smallContainer_mouseUpHandler(event:MouseEvent):void {
                                  _smallContainer.stopDrag();
                             }
                             
                             private function toggleButton_mouseClickHandler(event:MouseEvent = null):void  {
                                  if(_videosToggled) {
                                       _videosToggled = false;
                                       
                                       _largeContainer.removeMediaElement(_parallelElement.getChildAt(1));
                                       _smallContainer.removeMediaElement(_parallelElement.getChildAt(0));
                                       
                                       applyMediaElementLayout(_largeVideo, 0, 0, LARGE_VIDEO_WIDTH, LARGE_VIDEO_HEIGHT);
                                       applyMediaElementLayout(_smallVideo, LARGE_VIDEO_WIDTH - SMALL_VIDEO_WIDTH, 0, SMALL_VIDEO_WIDTH, SMALL_VIDEO_HEIGHT);
                                       
                                       _largeContainer.addMediaElement(_parallelElement.getChildAt(0));
                                       _smallContainer.addMediaElement(_parallelElement.getChildAt(1));
                                  }
                                  else {
                                       _videosToggled = true;
                                       
                                       _largeContainer.removeMediaElement(_parallelElement.getChildAt(0));
                                       _smallContainer.removeMediaElement(_parallelElement.getChildAt(1));
                                       
                                       applyMediaElementLayout(_smallVideo, 0, 0, LARGE_VIDEO_WIDTH, LARGE_VIDEO_HEIGHT);
                                       applyMediaElementLayout(_largeVideo, LARGE_VIDEO_WIDTH - SMALL_VIDEO_WIDTH, 0, SMALL_VIDEO_WIDTH, SMALL_VIDEO_HEIGHT);
                                       
                                       _largeContainer.addMediaElement(_parallelElement.getChildAt(1));
                                       _smallContainer.addMediaElement(_parallelElement.getChildAt(0));
                                       
                                  }
                                  
                             }
                        ]]>
                   </fx:Script>
                   
                   <s:layout>
                        <s:VerticalLayout 
                             horizontalAlign="center" 
                             verticalAlign="middle" />
                   </s:layout>
                   
                   <samples:MediaContainerUIComponent
                        id="mediaContainerUIComponent"
                        width="{LARGE_VIDEO_WIDTH}" 
                        height="{LARGE_VIDEO_HEIGHT}"
                             />
                   
                   <s:Button label="Toggle videos"
                        width="100"
                        click="toggleButton_mouseClickHandler()" />
              
              </s:Application> 
              

               

               

              Simple example of what I was trying to acheive for those interested,

              Cheers