4 Replies Latest reply: Nov 15, 2011 9:46 PM by audcaic RSS

    add new skin elements to REOPS skin

    haili_tu

      I am working on a player using the RealEyes OSMF Player Sample(REOPS). I am trying to customize the skin by adding new elements into it. Here is what I did:

      1. copy asset/skins/OSMF_Sample_Skin.fla to mySkin.fla

      2. add a new TextFiled element into the Compositions area. I also changed some existing elements like the captionField. save it and deploy it to the same folder.

      3. on REOPS/src/com.realeyes.osmfplayer, add a new actionscript file: ITitleField.as and TitleField.as to create a class for the new element as following:

       

      package com.realeyes.osmfplayer.controls
      {
          import flash.text.TextField;

       

          public class TitleField extends SkinElementBase implements ITitleField
          {
            
              public var title_txt:TextField;
             
              public function TitleField()
              {
                  super();
                  this.visible = true;
                  text = "";
              }

              public function get text():String
              {
                  return title_txt.htmlText;
              }
             
              public function set text( p_value:String):void
              {
                  if( title_txt )
                  {
                      title_txt.htmlText = p_value;
                  }
                  trace("set title text: " + p_value);
                 
              }       
          }
      }

       

      4. on REOPS/src/com/realeyes/osmfplayer/view/SkinContainer.as: add the following lines:

       

              import com.realeyes.osmfplayer.controls.ITitleField;
              protected var _titleField:ITitleField; 

       

              public function initTitleFieldInstance( p_skinElement:ISkinElementBase ):void
              {
                 
                  _titleField = p_skinElement as ITitleField;
                 
              }

       

              public function setTitleText( p_value:String ):void
              {
                  if( _titleField )
                  {
                      _titleField.text = p_value;
                  }
              }

       


      5. on my config file: I added the following:

              <skin path="assets/skins/mySkin.swf">
              <skinElement id="titleField"
                  elementClass="com.realeyes.osmfplayer.controls.TitleField"
                  initMethod="initTitleFieldInstance"
                  hAdjust="0" vAdjust="0"
                  hAlign="CENTER"
                  vAlign="BOTTOM"
                  autoPosition="true"
                  scaleMode="stretch" />

       

      but when I run the REOPS project in flash builder which open a browser to play the video, I got the following error:

       

      ReferenceError: Error #1065: Variable TitleField is not defined.

       

          at flash.system::ApplicationDomain/getDefinition()

       

          at com.realeyes.osmfplayer.model.config.skin::SkinElement/buildSkinElement()[C:\projects\fla sh\OSMF\REOPS\src\com\realeyes\osmfplayer\model\config\skin\SkinElement.as:68]

       

          at com.realeyes.osmfplayer.view::SkinContainer/_generateInstance()[C:\projects\flash\OSMF\RE OPS\src\com\realeyes\osmfplayer\view\SkinContainer.as:247]

       

          at com.realeyes.osmfplayer.view::SkinContainer/generateSkinInstance()[C:\projects\flash\OSMF \REOPS\src\com\realeyes\osmfplayer\view\SkinContainer.as:659]

       

          at com.realeyes.osmfplayer.view::SkinContainer/_generateSkin()[C:\projects\flash\OSMF\REOPS\ src\com\realeyes\osmfplayer\view\SkinContainer.as:689]

       

          at com.realeyes.osmfplayer.view::SkinContainer/_skinLoadComplete()[C:\projects\flash\OSMF\RE OPS\src\com\realeyes\osmfplayer\view\SkinContainer.as:801]

       

      Could anyone tell me what I am missing here?

       

      Thanks a lot.

        • 1. Re: add new skin elements to REOPS skin
          michaelangela Community Member

          This is an old question but I have just recently started looking into REOPS. Did you resolve this?

           

          My initial question is if the skin you are using a precompiled one (i.e. the _code_ movieclip was converted to a component clip so it contains all the code) or not. You may either need to use one that is not compiled with the _code_ component clip. Otherwise, did you include it in the _code_ movieclip? You'll notice the actions on frame 1 of _code_

           

          import com.realeyes.osmfplayer.controls.*;
          ControlBar;
          ToggleButton;
          ClosedCaptionField;
          LoadingIndicator;
          TitleField; // add this line to force inclusion of TitleField in compiled skin swf
          
          

           

          Since it is a custom element, I believe you'll need it in there to force compilation and inclusion in the skin swf for SkinContainer to instantiate.

           

          I hope that makes sense, and I hope it helps. I may have time to verify it later today. If so I'll try and follow up.

           

          Message was edited by: michaelangela Added note in AS3 code sample

          • 2. Re: add new skin elements to REOPS skin
            haili_tu Community Member

            Thanks for your message. you are the only one replied so far for my posting. I never got it solved.

             

            I basically started with one of the existing skin flash source file from \assets\skins and tried to modify it and compile it. but later on, I realized it needs a lot of steps to make it really work, so I gave up. I really hope I can find some document or online tutorial to show how to do this step by step.

             

            Thanks,

            Haili

             

            Date: Tue, 25 Oct 2011 17:08:00 -0600

            From: forums@adobe.com

            To: haili_tu@hotmail.com

            Subject: add new skin elements to REOPS skin

             

             

             

             

             

             

                  

                       

                       

                       

                Re: add new skin elements to REOPS skin

             

             

                created by michaelangela in Open Source Media Framework - View the full discussion

             

             

             

            This is an old question but I have just recently started looking into REOPS. Did you resolve this? My initial question is if the skin you are using a precompiled one (i.e. the code movieclip was converted to a component clip so it contains all the code) or not. You may either need to use one that is not compiled with the code component clip. Otherwise, did you include it in the code movieclip? You'll notice the actions on frame 1 of code import com.realeyes.osmfplayer.controls.*;

            ControlBar;

            ToggleButton;

            ClosedCaptionField;

            LoadingIndicator;

             

            Since it is a custom element, I believe you'll need it in there to force compilation and inclusion in the skin swf for SkinContainer to instantiate. I hope that makes sense, and I hope it helps. I may have time to verify it later today. If so I'll try and follow up.

             

             

                 Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/3990247#3990247

                 To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/3990247#3990247. In the Actions box on the right, click the Stop Email Notifications link.

                  

                 Start a new discussion in Open Source Media Framework by email or at Adobe Forums

              For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

            • 3. Re: add new skin elements to REOPS skin
              michaelangela Community Member

              Not a problem.

               

              I was doing testing and changes to the CaptionField and the changes never took and I was a bit confused until I noticed the different files using "compiled" and "uncompiled". Formula, Core and Lunar all have the _code_ movieclip converted to a compiled component clip. But if you look at assets/skins/RE_Skin_uncompiled.fla you'll see the _code/_code_ movieclip is not compiled. Using that instead of the compiled component clip of course got my changes to be recognized since it was compiling from source again. To get that to compile of course you'll have to update the AS3 settings to actually include the source files.

               

              I want to resolve it too as I'd like to add a play button like Strobe Media Player and have that interact correctly. In general I see a tremendous amount of flexibility with the REOPS skins and of course adding elements is key to that.

               

              Let me know if you get a chance to try it and if it works for you!

              • 4. Re: add new skin elements to REOPS skin
                audcaic Community Member

                Sorry reply here. I guess you guys may know the answer.

                 

                I am using Luna skin template from REOPS and create a test script to listen the ControlBarEven.pause ControlBarEvent.play.  I never got the event.

                 

                here is the test code.  Any idea?

                 

                package

                {

                          import com.realeyes.osmfplayer.events.ControlBarEvent;

                          import com.realeyes.osmfplayer.controls.IControlBar;

                          import com.realeyes.osmfplayer.controls.ControlBar;

                          import flash.display.MovieClip;

                          import flash.events.Event;

                 

                          public class Test extends MovieClip

                          {

                                    public var controlbar:IControlBar;

                 

                                    public function Test()

                                    {

                                              trace("ControlBarEvent Testing.........");

                                              controlbar = new ControlBar();

                                              controlbar.addEventListener(ControlBarEvent.PAUSE, onPauseTest);

                                              controlbar.addEventListener(ControlBarEvent.PLAY, onPlayTest);

                                    }

                 

                                    private function onPauseTest(p_evt:ControlBarEvent):void

                                    {

                                              trace(" got controlbar pause event");

                                    }

                 

                                    private function onPlayTest(p_evt:ControlBarEvent):void

                                    {

                                              trace(" got controlbar play event");

                                    }

                 

                          }

                }