Using Value Objects in Flash

5 Comments 18 February 2010

From time to time I get emails from people asking for help or advice and last week I was discussing with Gabe about how VOs might help him organize his code. I think a large amount of the visits to my blog come from Flash newbies and designers so this post is perhaps more for them as most developers will already know about VOs and will probably be using them all the time.

What is a VO?

A Value Object (VO) is as simple as it sounds, an object that stores values or data. An example of a VO is something as simple as this:

public class VideoVO
{
  public var id:String;
  public var src:String;
  public var autoPlay:Boolean;
  public var width:Number;
  public var height:Number;
}

Where would you use a VO?

The place I use them most is when loading external XML into Flash for populating content. This could be page content, or something simple like a video gallery. Sticking with the gallery idea, below is an example of using VOs.

Imagine I had a simple gallery that was populated with XML:

<videos>
  <video id="video-1">
    <title>Video 1 header</title>
    <src>resources/media/video1.flv</src>
    <autoPlay>true</autoPlay>
    <width>300</width>
    <height>200</height>
  </video>
  <video id="video-2">
    <title>Video 2 header</title>
    <src>resources/media/video2.flv</src>
    <autoPlay>false</autoPlay>
    <width>300</width>
    <height>200</height>
  </video>
  <video id="video-3">
    <title>Video 3 header</title>
    <src>resources/media/video3.flv</src>
    <autoPlay>true</autoPlay>
    <width>400</width>
    <height>300</height>
  </video>
</videos>

We could parse the data into a Vector of VideoVOs like the example below:

function parseVideoXML(xml:XML):void
{
  var i:int;
  var l:int = xml.video.length();
  var videos:Vector.<VideoVO> = new Vector.<VideoVO>(l, true);

  for(i; i < l; ++i)
  {
    videos[i] = new VideoVO();
    videos[i].id = xml.video[i].@id;
    videos[i].src = xml.video[i].src;
    videos[i].autoPlay = (xml.video[i].autoPlay == "true");
    videos[i].width = Number(xml.video[i].width);
    videos[i].height = Number(xml.video[i].height);
  }
}

Now in your gallery you can just pass a VideoVO and all your data is organized so you don’t need to pass the XML object around, and remember the structure for referencing elements.

So why bother using VOs?

There are a couple of reasons that VOs are useful. Firstly, they help you keep your code organised. It’s a clear way of separating the data from your XML files and other Developers will find it easier to pick up your code. For example, say you have a massive XML file that defines the structure of a microsite, and one small part of that site is a video gallery. Someone working on the gallery doesn’t need to have any knowledge of the XML structure, you can just tell them to write code that expects a VideoVO.

Secondly it is quicker to update things. Say I am using the video data from my XML in several places throughout my code, and the XML structure changes. I would have to go through and edit every place within my project that references the XML. However, if I parse my XML once when it’s loaded, and store the data in VOs, I only have to change path referencing in one place.

Thirdly, if you have a massive XML, it will be quicker to use VOs rather than doing lookups in the XML every time you need data. OK not much quicker, in fact you will never notice the difference, but I believe it’s always worth making your code as optimised as possible.

Another good way of using VOs in Flash

Another place where you could use VOs is with a tweening engine that requires an object to be passed to it, for example TweenMax. So for example, using the same video gallery idea, you might want to have a transition to display the video view. You could create a simple TweenVO like this:

public class TweenVO
{
  public var rotationY:Number;
  public var x:Number;
  public var scaleX:Number;
}

And then just pass the VO to your tweening engine like this:

var tweenVO:TweenVO = new TweenVO();
tweenVO.rotationY = 30;
tweenVO.x = 20;
tweenVO.scaleX = .6;

TweenMax.from(video, 1, tweenVO);

If you know any other benefits, or perhaps negatives, for using VOs please make a comment. In fact any comments are always really appreciated.


Posted in ActionScript, Tip

5 Responses to Using Value Objects in Flash

  1. 23 February 2010
    John Persson

    Really like the xml example, seams like a very clean way to reference assets.
    Though the Vector class is new to me so I did some quick research.

    Someone said itś a top level class. Even so my class dosen´t seam to recognize it.
    I use compile with in fp10 using FDT.

    Thanks!

  2. 23 February 2010
    FlashMonkey

    Thanks John. With regards to your problem, yes Vector is a top level Class. It sounds like the FP10 library is not being referenced properly in FDT. Try this:

    > Right click on your project in FDT, hover over ‘Flash Project’ and click on ‘Remove Flash Nature’
    > Right click on the project again, hover over ‘Flash Project’ and click on ‘Add Flash Nature’
    > From the dropdown in the pop-up select ‘Flex_3_SDK_0_Pure_for_FP_10′ and your class should recognize Vector.

    Hope that helps.

  3. 16 February 2011

    nice touch with the tweenVO….I like

  4. 20 May 2011
    Craig

    You said in your article “Secondly it is quicker to update things. … the XML structure changes. I would have to go through and edit every place within my project that references the XML. However, if I parse my XML once when it’s loaded, and store the data in VOs, I only have to change path referencing in one place.”

    But that’s not true. If the “structure of your xml changes” then the structure of your VO is going to need to change too.

  5. 20 May 2011
    FlashMonkey

    Hi Craig,

    What I meant was if your XML looks like this:

    <config>
      <videos>
        <video>../src/video.mp4</video>
      </videos>
    </config>

    and you change it to this:

    <config>
      <section>
        <videos>
          <video>../src/video.mp4</video>
        </videos>
      </section>
    </config>

    Then you would only need to change the reference to video node in the XML parser that stores the data to VOs rather than at every point in the project that uses that node.

    I hope that clears it up and it makes more sense, let me know if not and I can provide a more detailed example.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>