?
Solved

FLEX : How to programatically play an animations in sequence

Posted on 2010-01-04
3
Medium Priority
?
474 Views
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:
	mybox.name="box" + x;
	mybox.setStyle("showEffect", myshoweffect);
	mybox.setStyle("hideEffect", myhideeffect);
	if (x>0){
		mybox.visible=false;
		mybox.includeInLayout = false;
	}
	mypanel.addChild(mybox);
}
				
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

0
Comment
Question by:chuela
  • 2
3 Comments
 
LVL 19

Accepted Solution

by:
moagrius earned 2000 total points
ID: 26173234
you can use Sequence in MXML - not sure how you'd do it in ActionScript.

Here's an example:  http://blog.flexexamples.com/2007/09/19/sequencing-effects-in-flex-using-the-mxsequence-tag/

and the attached snippet is a sequencing example from Flex 3 Bible
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#eeeeee">

  <mx:Sequence id="moveOn">
    <mx:Move
      xFrom="{0-myImage.width}" xTo="150"
      yFrom="0" yTo="0"/>
    <mx:Pause duration="500"/>
    <mx:Move yTo="100"/>
  </mx:Sequence>
    
  <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" 
    click="myImage.visible=true"/>
  <mx:Button x="374" y="375" label="Hide Image" 
    click="myImage.visible=false"/>
</mx:Application>

Open in new window

0
 

Author Closing Comment

by:chuela
ID: 31672538
You are a genius!
0
 
LVL 19

Expert Comment

by:moagrius
ID: 26173445
glad you got it working : )
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is intended to introduce all collision detection principles in flash, their strengths, weaknesses and workarounds. The main method for Collision Detection in flash is using hitTestObject. But unless you'll be pushing rectangular shapes without …
There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
The goal of the tutorial is to teach the user how to how to record live broadcast.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.
Suggested Courses
Course of the Month13 days, 23 hours left to enroll

809 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