Adobe Flex Grundlagen - Transitions

Um die Ergebnisse der Arbeit mit States etwas ansprechender zu machen, bietet Flex die Möglichkeit, die States nicht nur umzuschalten, sondern die Übergänge zu animieren: mit den sogenannten Transitions.

Transitions werden, wie immer in Flex, über einen eigenen Tag definiert. Dieser nennt sich <mx:transitions>. Genau wie bei den States können in diesem Container zahlreiche Transitions definiert werden. Eine einzelne Transition definiert man dann mit <mx:Transition>.

Hier ein Beispiel für eine Transition:

<mx:transitions>
    <mx:Transition fromState="*" toState="*">
        <mx:Resize target="{myPanel}" duration="400" />
    </mx:Transition>
</mx:transitions>

Was passiert hier? Zuerst wird der Container <mx:transitions> definiert. Dann wird eine Transition erstellt, die für alle States gilt, egal in welche Richtung. Das passiert durch die Wildcard Operatoren * in den Eigenschaften toState und fromState. Will man eine Transition nur für eine bestimmte Situation definieren, kann man hier die Namen der States eingeben. Als nächstes wird dann ein Effekt erstellt, nämlich ein Resize. Ziel dieses Resize soll myPanel sein und die Animation soll eine Geschwindigkeit von 400ms haben.

Mehr muss nicht getan werden. Wenn man das jetzt in das Programm aus meinem letzten Artikel - zum Thema States - einbaut, bewirkt das, dass bei jedem Knopfklick die Größenänderung des Panels nicht nur passiert, sondern über 400ms animiert.

Selbstverständlich lassen sich diese Transitions auch etwas ausführlicher nutzen. Hier muss man allerdings wieder die Asynchronität von Flex beachten. Nur weil man ein paar Effekte hintereinander packt, heisst das nicht, dass die Effekte nacheinander ausgeführt werden. Will man zwei Effekte nacheinander ausführen lassen, muss man beide Effekte nacheinander in einen <mx:Sequence> Container packen. Will man mehrere Effekte gleichzeitig geschehen lassen, müssen diese in einem <mx:Parallel> Container stehen.

Über die Auto-Vervollständigung des Flex-Builders und natürlich auch die Adobe Hilfe bekommt ihr mehr Infos zu den möglichen Effekten die euch zur Verfügung stehen.

Hier nochmal das ganze Programm:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

    <mx:states>
        <mx:State name="volltext">
            <mx:SetProperty target="{anrisstext}" name="text">
                <mx:value>Im Online-Journalismus wird ein 'Anreißer', der auf der Startseite als Einstieg in den ausführlichen Beitrag auf einer nachfolgenden Webseite fungiert, auch Teaser genannt. Journalistisch ähnelt der Teaser dem ersten Satz eines längeren Beitrags, dem Leadsatz. 'Als Teaser werden die Anreißer auf der Homepage oder einer Themenüberblicksseite bezeichnet. Sie verweisen auf einen Beitrag und sollen sowohl Orientierung über den Inhalt bieten als auch zum Klicken verlocken' (Klaus Meier).</mx:value>
            </mx:SetProperty>
            <mx:RemoveChild target="{more}" />
            <mx:AddChild>
                <mx:Button id="less" label="Weniger lesen" click="currentState=''"/>
            </mx:AddChild>
        </mx:State>
    </mx:states>
   
    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Resize target="{myPanel}" duration="400" />
        </mx:Transition>
    </mx:transitions>

    <mx:Panel id="myPanel" title="Wikipedia Auszug zum Begriff 'Teaser'" width="400">
        <mx:Text id="anrisstext" text="Im Online-Journalismus wird ein 'Anreißer', der auf der Startseite als Einstieg in den ausführlichen Beitrag auf einer nachfolgenden Webseite fungiert, auch Teaser genannt." width="100%"/>
    </mx:Panel>
    <mx:Button id="more" label="Mehr lesen" click="currentState='volltext'"/>
   
</mx:Application>