[FLEX] Effects (Animaties) in Flex

Pagina: 1
Acties:

  • dabla
  • Registratie: Februari 2003
  • Laatst online: 19-02-2022
Ik heb namelijk volgend probleem met een Flex toepassing. Ik laad via een HttpService een XML in met items die ik omzet naar een ArrayCollection. Deze collectie geef ik door aan een Repeater die telkens een Label aanmaakt met als tekst de waarde van ieder item. Tot hier verloopt alles naar wens. Wat ik echter zou willen bereiken is dat ieder Label element dmv een fade in effect na elkaar vershijnt wanneer deze is ingeladen.

Ik heb reeds op verschillende manieren het Fade effect proberen toe te passen op de Label, maar het probleem is dat deze allemaal tergelijkertijd verschijnen en niet de een na de ander, het uiteindelijk effect die ik dus zou willen bereiken. Als ik er een delay aan toevoeg, dan verschijnen ze gewoon weg allemaal wat later, maar nog steeds tegelijk. 8)7

Hoe kan ik dit effect verkrijgen? Ik heb reed in mijn Flex boek gekeken zonder resultaat noch in de sample toepassingen van Adobe.

  • dabla
  • Registratie: Februari 2003
  • Laatst online: 19-02-2022
Heb reeds een oplossing gevonden dus dacht ik ze maar met jullie te delen :) Misschien is er een beter oplossing en dan mogen jullie mij deze altijd laten weten ;)

Hier een snippet van mijn oplossing:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<mx:Script>
<![CDATA[
private function creationCompleteHandler(event:Event):void
{
    if (event.currentTarget.parent != null)
    {
        var fade:Fade = new Fade();
        fade.target = event.target;
        fade.duration = 1000;
        fade.startDelay = event.currentTarget.parent.getChildIndex(event.currentTarget) * 100;
        fade.alphaFrom = 0.0;
        fade.alphaTo = 1.0;
        fade.play();
    }
}
]]>
</mx:Script>

<mx:HBox styleName="header" id="header" height="55" width="100%">
    <mx:Repeater id="data" dataProvider="{headers}">
        <mx:Label styleName="label" data="{data.currentItem.data}" text="{data.currentItem.label}" fontSize="20" alpha="0" creationComplete="creationCompleteHandler(event)"/>
    </mx:Repeater>
</mx:HBox>


even een code blok toegevoegd voor je :)

[ Voor 3% gewijzigd door XangadiX op 05-06-2007 19:57 ]