2 Replies Latest reply on Jan 25, 2010 3:29 AM by Wout Lemmens

    How to dynamically add text (i.e. subclip 'metadata') to an ImageElement

    Wout Lemmens

      In short what I would like to achieve:

       

      Put several VideoElements in a SerialElement, but prepend each video with an ImageElement to which text is added (text as in 'metadata' of the subclip being displayed). This as an announcement of what is coming up next (by displaying that image for 2 seconds or so).

      This image should be created dynamically, as the video's (in fact subclips) aren't defined upfront (and thus the images can not be defined upfront).

       

      I was wondering if it is possible to manipulate an ImageElement (combining text and images into a new image, or adding text to an existing image), and provide an ImageElement with such a dynamically created image? I couldn't find anything useful around the Graphics drawing object, like drawText or something. And besides that it seems ImageElements can only be created via an ImageLoader and a URL (and not via an image that is available as embedded asset).

       

      I hope my question is clear enough and someone has some ideas how to implement this (or if it is possible at all with OSMF).

       

      Thanx in advance.

      Wout

        • 1. Re: How to dynamically add text (i.e. subclip 'metadata') to an ImageElement
          bringrags Level 4

          Sounds like there are a few questions here:

           

          1. Adding text to images:  I would look at the Captioning Plugin, which provides support for using a captioning format (like DFXP) to add captions to any arbitrary piece of media.  (The example shows video, but there's no reason it couldn't work with images.)  However, if all you want to do is create text that can be integrated into a SerialElement, you could use this prototype of a text-based MediaElement.

          2. Displaying an image for 2 seconds:  If you wrap the ImageElement in a TemporalProxyElement and assign a duration to the latter, then the image will show for a fixed amount of time.  See the "Slideshow" example in the Example Player.

          3. ImageElements with dynamically created images:  Under the hood, ImageElements work with the flash.display.Loader class, which is ultimately what gets displayed.  To adjust this image using native Flash drawing APIs, just get the displayObject property from the ImageElement's DisplayObjectTrait.  You could then do anything to it that you can do to a DisplayObject.  To load an image statically, you would probably have to write a custom ImageLoader (which gets passed to ImageElement) that doesn't try to remotely load the image URL, but works with embedded image resources.

          • 2. Re: How to dynamically add text (i.e. subclip 'metadata') to an ImageElement
            Wout Lemmens Level 1

            Thanks for your extensive reply.

             

            I had a look at the options you suggested.

             

            With the captioning you define a file with all the captions defined. But as I only wat to display some descriptive text prepended to each videoElement in a SerialElement, captioning did not fit my needs.

             

            But with your prototype using a TextElement as MediaElement did fit, almost exactly.

             

            With this function I define what text to display and for how long. It creates a ParallelElement, and puts in a background image, and 'overlays' the text I enter.

             

                        private function showText(text:String, duration:int):void {
                            var parallelElement:ParallelElement = new ParallelElement();
                            var image:ImageElement = new ImageElement(new ImageLoader(), new URLResource(new URL(BACKGROUND_IMAGE)));
                            parallelElement.addChild(new TemporalProxyElement(duration, image));
                            var textElement:TextElement = new TextElement(text)
                            parallelElement.addChild(new TemporalProxyElement(duration, textElement));
                            serialElement.addChild(parallelElement);
                            applyAdjacentLayout(parallelElement, image, textElement);
                        }

             

            The TextElement is taken from your example (including the TextViewTrait). In the TextElement the format and styling can be defined. With the applyAdjacentLayout function (as used in the ExamplePlayer - 'Parallel Composition (Adjacent)') I make sure the placement is as I want.

             

            So now I can dynamically display some descriptive text about a subclip before displaying that specific subclip.

             

            Thnx!

            Wout