?
Solved

Animate XML elements separately?

Posted on 2009-02-09
2
Medium Priority
?
335 Views
Last Modified: 2013-11-12
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

0
Comment
Question by:worked
  • 2
2 Comments
 

Author Comment

by:worked
ID: 23594271
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

0
 

Accepted Solution

by:
worked earned 0 total points
ID: 23602118
Got it. No need to reply, unless you have a better way.  Thanks!
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;
		private var containerArray:Array = new Array();
 
		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 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;
				//put contents of container(xml.path.title) into separate containerArray
				containerArray.push(container);
				container.addChild(tf);
				container.addEventListener(MouseEvent.MOUSE_DOWN, onSDown);
				//keeps the elements evenly spaced on stage
				startPos = startPos + (widthValue + spacer);
			}
			//tween the MovieClips in the containerArray
			animate();
			//trace out the amount of item in each array
			trace(xmlList.length());
			trace(containerArray.length);
		}
		
		private function animate():void {
			var myTween:Tween;
			var startPos:int = -100;
			var j:int = 0;
			while (j < containerArray.length) {
				myTween = new Tween(containerArray[j],"x",Strong.easeOut,(startPos - (j * 100)),0,.5,true);
				j++
			}
		}
 
		private function onSDown(evt:MouseEvent):void {
			var linkReq:URLRequest = new URLRequest(evt.target.path);
			navigateToURL(linkReq, '_self');
			trace(String(evt.target.path));
			evt.updateAfterEvent();
		}
	}
}

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
Suggested Courses

862 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