FLEX : How to programatically play an animations in sequence

Posted on 2010-01-04
Last Modified: 2013-11-11
I have added several HBoxes dynamically to a panel (addChild)
These HBoxes show / hide depending on a button clicked, this is, when the button clicks, the current visible HBox hides and the next one shows (visible =true)

I have added an effect to each HBox for showing and hiding
But they are playing simultaneously making it look funky upon showing and hiding the boxes

How can they be made to play sequentially?
This is, the current visible box, plays the effect and dissapears
And only after that, the next box to be shown plays the appearing effect and shows up?
for (var x:int=0;x<n;x++){

	var mybox:Hbox = new Hbox:"box" + x;

	mybox.setStyle("showEffect", myshoweffect);

	mybox.setStyle("hideEffect", myhideeffect);

	if (x>0){


		mybox.includeInLayout = false;





public function buttonclick(e:Event):void{

 // Hide visible box and show next

 // Here's where the effects overlap and show funky


Open in new window

Question by:chuela
    LVL 19

    Accepted Solution

    you can use Sequence in MXML - not sure how you'd do it in ActionScript.

    Here's an example:

    and the attached snippet is a sequencing example from Flex 3 Bible
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="" layout="absolute" backgroundColor="#eeeeee">
      <mx:Sequence id="moveOn">
          xFrom="{0-myImage.width}" xTo="150"
          yFrom="0" yTo="0"/>
        <mx:Pause duration="500"/>
        <mx:Move yTo="100"/>
      <mx:Move id="moveOff" 
        xTo="{0-myImage.width}" xFrom="150"
        yTo="{0-myImage.height}" yFrom="100"/>
      <mx:Image id="myImage" source="assets/flower1.jpg" x="150" y="100" 
        showEffect="{moveOn}" hideEffect="{moveOff}"/>
      <mx:Button x="150" y="375" label="Show Image" 
      <mx:Button x="374" y="375" label="Hide Image" 

    Open in new window


    Author Closing Comment

    You are a genius!
    LVL 19

    Expert Comment

    glad you got it working : )

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
    I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
    The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
    The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now