Could someone please explain why this doesn't want to work? It's a bit of decoration to go behind a logo.
When the dMove var is commented out I get the appropriate line of squares fading in and out at random spots along the x = 78 axis, but when introduced nothing appears at all...
private var floatBG:UIComponent = new UIComponent();
private function addDP(event:TimerEvent):void{
var dY:Number = 5+Math.ceil(Math.random()*60);
var dSize:Number = Math.ceil(Math.random()*12);
var dAlpha:Number = Math.random()*0.5 + 0.2
var dDuration:Number = Math.ceil(Math.random()*5000) + 1000;
var d:Sprite = new Sprite();
d.graphics.beginFill(0x1C75BC,dAlpha);
d.graphics.drawRect(78, dY, dSize,dSize);
d.graphics.endFill();
floatBG.addChild(d);
var dMove:Move = new Move(d);
dMove.xBy = 300;
dMove.duration = dDuration;
dMove.play();
var dFade:Fade = new Fade(d);
dFade.alphaFrom = 1;
dFade.alphaTo = 0;
dFade.duration = dDuration;
dFade.play();
this.addElement(floatBG);
}
Also, what would be the best/correct method for destroying the sprites at the end of each cycle?
Thanks a lot in advance, massively appreciate it!
Josh
Ok, so after a bit of playing around with it I managed to find a solution, I really appreciated Brian Bishop's help, who managed to very much point me in the right direction.
As Brian suggested, simply entering d as a UIComponent rather a sprite allowed the dMove to effect (I'm still not sure why this is, as the dFade effect worked when it was still a sprite). However adding the floatBG (BG being background, the UIComponent to which all the d UIComponents are added) each time was unnecessary, so I made this.addElement(floatBG) part of my creationComplete function
I then ran into the issue that the application began to fill with the d instances (d originally stood for "datapoint" by the way, which was kind of the theme of the effect which I was trying to create, a plume of them), and progressively slowed the application to a crawl. To continuously add d elements is necessary as it's part of the logo that sits in the corner of the screen looking as pretty as I can make it...
Eventually I came to the below solution, the crux of it was to load floatBG with 600 dummy UIComponents, and then with each cycle of the addDP function both add a moving d UIComponent to floatBG and remove another UIComponent off of the total array of children which it contains.
Thus, in the end it looked something like this:
<?xml version="1.0" encoding="utf-8"?><s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.core.DesignLayer;
import mx.core.UIComponent;
import mx.effects.effectClasses.MoveInstance;
import mx.events.EffectEvent;
import mx.events.FlexEvent;
import mx.states.RemoveChild;
import spark.effects.AnimateColor;
import spark.effects.AnimateFilter;
import spark.effects.Fade;
import spark.effects.Move;
import spark.effects.Rotate;
import spark.effects.easing.Sine;
private var floatBG:UIComponent = new UIComponent;
private var floatColour:uint = 0x1C75BC
protected function init(event:FlexEvent):void
{
//Float BackGround set up
floatBG.mask = floatMaskBlock;
floatBG.depth = -1;
this.addElement(floatBG);
//Fill FloatBG with 600 filler elements
for(var i:int=0; i<600; i++)
{
var filler:UIComponent = new UIComponent;
floatBG.addChild(filler);
}
//Float Animation Timer
var floatTimer:Timer = new Timer(1,0);
floatTimer.addEventListener(TimerEvent.TIMER,DPstartup)
floatTimer.start();
private function DPstartup(event:TimerEvent):void
{
this.addDP(5,60)
this.addDP(22,14);
this.addDP(18,18);
}
private function addDP(yf:Number,yt:Number):void
{
this.title.text = floatBG.numChildren.toString();
var dY:Number = yf+Math.ceil(Math.random()*yt);
var dXby:Number = Math.ceil(Math.random()*1000 + 50);
var dSize:Number = Math.ceil(Math.random()*12);
var dAlpha:Number = Math.random()*0.5 + 0.2
var dMotionDuration:Number = Math.ceil(Math.random()*15000) + 1000;
var dFadeDuration:Number = Math.random()*dMotionDuration;
var d:UIComponent = new UIComponent;
d.graphics.beginFill(floatColour,dAlpha);
d.graphics.drawRect(78, dY, dSize,dSize);
d.graphics.endFill();
var dMove:Move = new Move(d);
dMove.xBy = dXby;
dMove.duration = dMotionDuration;
dMove.easer = Linear;
dMove.play();
var dFade:Fade = new Fade(d);
dFade.alphaFrom = dAlpha;
dFade.alphaTo = 0;
dFade.duration = dFadeDuration;
dFade.play();
floatBG.addChild(d);
floatBG.removeChildAt(0);
};
]]>
</fx:Script>
<fx:Declarations>
<s:Sine id="Sine"/>
<s:Bounce id="Bounce"/>
<s:Linear id="Linear"/>
</fx:Declarations>
<s:Group x="88" width="1000" height="80" id="floatMaskBlock">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xffffff"/>
</s:fill>
</s:Rect>
</s:Group></s:Group>
Ok, apologies if that was pretty long-winded, but someone may find it useful... it's a nice effect (I think so anyway)
I use the mask to give a sharp edge to the point at which the d elements appear. Alternatively one could just place it behind another object, but if, as in my case, the object is a line of width less than the size of some of the d elements, such a mask is necessary.
The colour is declared as a variable at the beginning as I'll likely add a function to change it on click, or something similar.
Thanks!
Josh
I ran this in Flex 4, only change I made was to use a UIComponent instead of a spirte, which works fine. Maybe your using pure AS3 project though? Not sure about destroying after they play.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.effects.Fade;
import mx.effects.Move;
private var floatBG:UIComponent = new UIComponent();
private function addDP(event:TimerEvent):void{
var dY:Number = 5+Math.ceil(Math.random()*60);
var dSize:Number = Math.ceil(Math.random()*12);
var dAlpha:Number = Math.random()*0.5 + 0.2
var dDuration:Number = Math.ceil(Math.random()*5000) + 1000;
var d:UIComponent = new UIComponent();
d.graphics.beginFill(0x1C75BC,dAlpha);
d.graphics.drawRect(78, dY, dSize,dSize);
d.graphics.endFill();
floatBG.addChild(d);
var dMove:Move = new Move(d);
dMove.xBy = 300;
dMove.duration = dDuration;
dMove.play();
var dFade:Fade = new Fade(d);
dFade.alphaFrom = 1;
dFade.alphaTo = 0;
dFade.duration = dDuration;
dFade.play();
this.addElement(floatBG);
}
private function onClick():void{
var t:Timer = new Timer(100, 10);
t.start();
t.addEventListener(TimerEvent.TIMER, addDP);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button click="onClick()" />
</s:Application>
