Peter Elst

MXML making stuff move

16 10 2005

I had an interesting discussion a few days back about Flex compared to the Flash IDE, to many people it appears as though Flash applications built with MXML are by definition very static and lacking real creativity.

Don’t quite agree with that, it might just be that the typical use case for Flex is Flash applications which are generally not very ‘flashy’ but focus more on functionality. That certainly doesn’t mean it has to be that way. XML is not the most convenient format in which to build visual effects (certainly not for right-brainers) but, as Abdul Qabiz also mentions, Flex and the Flash IDE can complement each other very well.

One example is using the Flash IDE to generate assets for use in your Flex projects (which MXML can embed in the SWF at compile-time). If for example you take an Image tag and embed some SWF animation as its source you have the best of both worlds, a compelling visual experience and an object that you can still remains scriptable.

In a way Flex offers an additional layer of abstraction not only for ActionScript but also for the visual layer of your application.

Another thing I love with MXML is the way you can quickly set up effects (move, fade, resize) to run either in parallel, sequential or a combination of both. Particularly sequential effects are troublesome to script in ActionScript with having to set up listeners to wait for an effect to finish and move on to the next one.

  

  
    
      
      
      
      
    
  

  

The MXML code above defines an effect to run in sequence when the Image component is created. What the effect does is move the embedded SWF file by 100 pixels on the x and y axis over 1 second, next wait for 2 seconds then move it to x and y position over 3 seconds and finally fade it out over 4 seconds.

If you try to do it that in the Flash IDE you have two options, use the timeline — easy to visually layout, a real pain to maintain if anything changes — or script the animation which requires quite a bit of experience with ActionScript and at least five times as much code.

Its all very impressive stuff, just one day to go before we can try the public alpha of Flex Builder 2!

Actions

Informations

Date : 16 October 2005
Categories : Flex

6 responses to “MXML making stuff move”

17 10 2005: zwetan (04:21:28) :

wow, I didn’t know that you could have sequencial effects in such way in flex

interesting indeed, even when you know how to build the AS to do that, just 10 lines of MXML are way faster

is it possible to define custom effects by code or in your own MXML node ?
17 10 2005: Paul B (09:43:32) :

What your discribing seems very much like SMIL, is that a fair comment?
17 10 2005: Peter (11:18:24) :

@zwetan: yes, you should be able to script custom effects for MXML quite easily — I believe you just have to create an AS2 class and subclass one of the effects. I’ll post an example on my blog as soon as I have some time.

@Paul: its been a while since I last used SMIL — but in the way the effects are defined it does look a bit like SMIL syntax. Under the hood of course it does completely different things (generates AS2 from the MXML and compiles that).
18 10 2005: Abdul Qabiz (00:01:15) :

Nice post Peter.

Just wanted to add that, if someone doesn’t want to embed swf on compile-time they can load it runtime, this results in lighter file-size.

Following example shows that how to load a swf on runtime and control the timeline of the swf from Flex app.

##LoaderDemo.mxml##

##animation.swf##
It contains a movieclip with some animtion and stop() action on first frame of it.

-abdul
18 10 2005: Peter Elst » MXML custom effects (01:39:02) :

[...] I had an interesting comment on one of my blog posts asking about creating your own custom effects in MXML. I knew it was possible but wasn’t really up to speed on the best way to do it. Well, after a bit of research here is an example — its a very basic rotation effect that rotates an object by a given number of degrees over time. [...]
19 10 2005: Abdul Qabiz (12:40:56) :

seems, the code I posted didn’t appear

-abdul

MXML making stuff move

Actions

Informations

6 responses to “MXML making stuff move”

Conferences

Training Partners

Badges

Categories

Resources