Skip navigation
haili_tu
Currently Being Moderated

add new skin elements to REOPS skin

Jul 18, 2011 12:13 PM

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/buildSkinEleme nt()[C:\projects\flash\OSMF\REOPS\src\com\realeyes\osmfplayer\model\co nfig\skin\SkinElement.as:68]

 

    at com.realeyes.osmfplayer.view::SkinContainer/_generateInstance()[C:\pr ojects\flash\OSMF\REOPS\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\SkinContai ner.as:659]

 

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

 

    at com.realeyes.osmfplayer.view::SkinContainer/_skinLoadComplete()[C:\pr ojects\flash\OSMF\REOPS\src\com\realeyes\osmfplayer\view\SkinContainer .as:801]

 

Could anyone tell me what I am missing here?

 

Thanks a lot.

 
Replies
  • Currently Being Moderated
    Oct 25, 2011 4:15 PM   in reply to haili_tu

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 27, 2011 9:52 AM   in reply to haili_tu

    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!

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 15, 2011 9:46 PM   in reply to michaelangela

    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");

                        }

     

              }

    }

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points