I have this xml
<?xml version="1.0" encoding="UTF-8"?>
0xff0033
2
0x666666
1
6
0x33dd55
2
0xff6666
2
5
20
0xdd00dd
2
0x66ff66
4
8
and this AS3
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([AutoAlphaPlugin]);
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("data.xml"));
function LoadXML(e:Event):void{
xmlData = new XML(e.target.data);
createRectangles();
}
function createRectangles():void{
var mc:Sprite = new Sprite();
mc.name = "mc"+i;
addChild(mc)
var i:int;
var numRecs:int = xmlData.rec.length();
var lineWeight:Number;
var lineColor:Number;
var fillColor:Number;
var rectWidth:Number;
var rectHeigth:Number;
var rectStartX:Number;
var rectStartY:Number;
var fadein:Number;
var fadeOut:Number;
for (i=0; i rectStartX = Number(xmlData.rec[i].startpoint.@px);
rectStartY = Number(xmlData.rec[i].startpoint.@py);
rectWidth = Number(xmlData.rec[i].dims.@w);
rectHeigth = Number(xmlData.rec[i].dims.@h);
fillColor = int(xmlData.rec[i].skin.fillcolor);
lineColor = int(xmlData.rec[i].skin.linecolor);
lineWeight = int(xmlData.rec[i].skin.lineweigth);
mc.graphics.lineStyle(lineWeight, lineColor);
mc.graphics.beginFill(fillColor);
mc.graphics.drawRect(rectStartX,rectStartY,rectWidth,rectHeigth);
mc.graphics.endFill();
}
}
this creates in this case 3 rectangles dynamically.
Where I am having difficulties is creating timelines dynamically per box where the fadeins and fadeouts are coming from the xml data too. The following code represents what I woul like to achieve, but completely steered by the xml file.
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([AutoAlphaPlugin]);
var mc:Box = new Box();
var fadein:Number = 0;
var fadeout:Number = 4;
mc.visible = false
mc.alpha = 0;
addChild(mc);
var mc1:Box = new Box();
var fadein_1:Number = 4;
var fadeout_1:Number = 6;
mc1.visible = false
mc1.alpha = 0;
addChild(mc1);
var mc2:Box = new Box();
var fadein_2:Number = 6;
var fadeout_2:Number = 8;
mc2.visible = false
mc2.alpha = 0;
addChild(mc2);
var timelineMain:TimelineMax = new TimelineMax();
var timelineA:TimelineMax = new TimelineMax();
var timelineB:TimelineMax = new TimelineMax();
var timelineC:TimelineMax = new TimelineMax();
timelineA.insert(new TweenLite(mc, 0, {delay:fadein, x:100, y:100}));
timelineA.insert(new TweenLite(mc, 1, {delay:fadein, autoAlpha:1}));
timelineA.insert(new TweenLite(mc, 1, {delay:fadeout, autoAlpha:0}));
timelineB.insert(new TweenLite(mc1, 0, {delay:fadein_1, x:180, y:100}));
timelineB.insert(new TweenLite(mc1, 1, {delay:fadein_1, autoAlpha:1}));
timelineB.insert(new TweenLite(mc1, 1, {delay:fadeout_1, autoAlpha:0}));
timelineC.insert(new TweenLite(mc2, 0, {delay:fadein_2, x:260, y:100}));
timelineC.insert(new TweenLite(mc2, 1, {delay:fadein_2, autoAlpha:1}));
timelineC.insert(new TweenLite(mc2, 1, {delay:fadeout_2, autoAlpha:0}));
timelineMain.insert(timelineA);
timelineMain.insert(timelineB);
timelineMain.insert(timelineC);
timelineMain.play()
I am pretty sure there is a simple "best practice" for this. Pleas help.
