asked on

Animate XML elements separately?

Hey there- I have a simple XML file which loads text into TextFields via a for loop.

I want to access each of these textfields and animate them one at time onto the stage. How would I do that with the existing code below. Keep in mind that each textfield should remain evenly spaced to one another and remain as such when new elements are added to the XML doc.

Thanks!

AS3:
package {
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import flash.text.TextFieldAutoSize;
	//transition import classes
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
 
	public class DocumentClass extends Sprite {
		private var urlLoader:URLLoader;
		private var urlRequest:URLRequest;
		private var xml:XML;
		private var xmlList:XMLList;
		private var newFormat:TextFormat;
 
		public function DocumentClass():void {
			urlLoader = new URLLoader();
			urlRequest = new URLRequest();
			urlRequest.url = 'bc.xml';
			urlLoader.addEventListener(Event.COMPLETE, onXMLLoaded);
			urlLoader.load(urlRequest);
		}
		private function onXMLLoaded(evt:Event):void {
			var widthValue:Number;
			var spacer:Number = 10;
			var startPos:Number = 0;
 
			xml = new XML(evt.target.data);
			xmlList = new XMLList(xml.item);
 
			newFormat = new TextFormat();
			newFormat.color = 0x666666;
			newFormat.font = "Verdana";
			newFormat.size = 14;
			newFormat.underline = false;
 
			for (var i:int = 0; i < xmlList.length(); i++) {
				var s:MovieClip = new MovieClip();
				addChild(container);
				container.mouseChildren = false;
				container.buttonMode = true;
 
				var tf:TextField = new TextField();
				tf.text = xmlList[i].title;
				tf.setTextFormat(newFormat);
				tf.autoSize = TextFieldAutoSize.CENTER;
				tf.border = true;
				tf.borderColor = 0x000000;
				tf.background = true;
 
				tf.x = startPos;
				tf.y = 10;
 
				widthValue = tf.width;
 
				container.path = xmlList[i].path;
				container.addChild(tf);
				container.addEventListener(MouseEvent.MOUSE_DOWN, onSDown);
 
				//keeps the elements evenly spaced on stage
				startPos = startPos + (widthValue + spacer);
			}
		}
		private function onSDown(evt:MouseEvent):void {
			var linkReq:URLRequest = new URLRequest(evt.target.path);
			navigateToURL(linkReq, '_self');
			trace(String(evt.target.path));
		}
	}
}
 
XML:
<?xml version='1.0' encoding='ISO-8859-1' ?>
<bc>
  <item>
    <title>0000</title>
    <path>/</path>
  </item>
  <item>
    <title>00000000</title>
    <path>/Folder</path>
  </item>
  <item>
    <title>0000</title>
    <path>/Folder/Folder</path>
  </item>
  <item>
    <title>000000</title>
    <path>/Folder/Folder/Folder</path>
  </item>
</bc>

Open in new window

worked

ASKER

Ok. So I "push" the container MovieClip from the xmlList into a separate array, containerArray. From there I can reference each textfield by index and animate it. Great, but this method is not flexible. For instance, if I add a new item to my XML doc, this item will not animate with the others. How do I make this simple animation dynamic in reference to the the xmlList?

package {
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import flash.text.TextFieldAutoSize;
	//transition import classes
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
 
	public class DocumentClass extends Sprite {
		private var urlLoader:URLLoader;
		private var urlRequest:URLRequest;
		private var xml:XML;
		private var xmlList:XMLList;
		private var newFormat:TextFormat;
 
		public function DocumentClass():void {
			urlLoader = new URLLoader();
			urlRequest = new URLRequest();
			urlRequest.url = 'bc.xml';
			urlLoader.addEventListener(Event.COMPLETE, onXMLLoaded);
			urlLoader.load(urlRequest);
		}
		private function onXMLLoaded(evt:Event):void {
			var widthValue:Number;
			var spacer:Number = 10;
			var startPos:Number = 0;
 
			xml = new XML(evt.target.data);
			xmlList = new XMLList(xml.item);
 
			newFormat = new TextFormat();
			newFormat.color = 0x666666;
			newFormat.font = "Verdana";
			newFormat.size = 14;
			newFormat.underline = false;
			
			var containerArray:Array = new Array(); 
			
			for (var i:int = 0; i < xmlList.length(); i++) {
				var container:MovieClip = new MovieClip();
				addChild(container);
				container.mouseChildren = false;
				container.buttonMode = true;
 
				var tf:TextField = new TextField();
				tf.text = xmlList[i].title;
				tf.setTextFormat(newFormat);
				tf.autoSize = TextFieldAutoSize.CENTER;
				tf.border = true;
				tf.borderColor = 0x000000;
				tf.background = true;
 
				tf.x = startPos;
				tf.y = 10;
 
				widthValue = tf.width;
 
				container.path = xmlList[i].path;
				container.name = "container" + i;
				//put contents of s into separate sArray
				containerArray.push(container);
				
				container.addChild(tf);
				container.addEventListener(MouseEvent.MOUSE_DOWN, onSDown);
				
				//keeps the elements evenly spaced on stage
				startPos = startPos + (widthValue + spacer);
				
			}
			var myTween:Tween = new Tween(containerArray[0],"x",Strong.easeOut,-30,0,1,true);
			var myTween:Tween = new Tween(containerArray[1],"x",Strong.easeOut,-60,0,1,true);
			var myTween:Tween = new Tween(containerArray[2],"x",Strong.easeOut,-90,0,1,true);
		}
		
		private function onSDown(evt:MouseEvent):void {
			var linkReq:URLRequest = new URLRequest(evt.target.path);
			navigateToURL(linkReq, '_self');
			trace(String(evt.target.path));
		}
	}
}

Open in new window

ASKER CERTIFIED SOLUTION

worked

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial