Menu: OpenLaszlo
Du HTML vers le LZX
Faire défiler une image
Faire un tabelement
Faire une animation
Faire une animation séquentielle
Animation + openlaszlo
Animation avec contrainte
Animation du layout
Bordure openlaszlo
Texte avec ombre
Instances et script
Animation opacité
Découvrir XML
Découvrir AJAX
Découvrir JavaScript


Créer une Animation controlable avec OpenLaszlo

<canvas>
<view id="myThing" resource="smiley.png" onmousedown="this.dragger.apply()" onmouseup="this.dragger.remove()">
<dragstate name="dragger" />
<attribute name="oldX" value="0" type="number" />
<attribute name="oldY" value="0" type="number" />
<attribute name="oldWidth" value="0" type="number" />
<attribute name="oldHeight" value="0" type="number" />
<animatorgroup name="animateToSpecificPlace" process="simultaneous" start="false">
<animator attribute="x" to="200" duration="1000" />
<animator attribute="y" to="50" duration="1000" />
<method event="onstart">
this.parent.setAttribute( "oldX", myThing.x ); this.parent.setAttribute( "oldY", myThing.y ); </method>
</animatorgroup>
<animatorgroup name="returnToStartingState" process="simultaneous" start="false" >
<animator attribute="x" to="${this.parent.parent.oldX}" duration="1000" />
<animator attribute="y" to="${this.parent.parent.oldY}" duration="1000" />
</animatorgroup>
</view>
<view name="controls">
<simplelayout axis="x" spacing="2" />
<button onclick="myThing.animateToSpecificPlace.start()">
Go to first place </button>
<button onclick="myThing.returnToStartingState.start()">
Go back to where you started </button>
</view>
</canvas>


Ressource en anglais sur le forum OpenLaszlo ici

A bientôt pour de nouveaux tutoriels OpenLaszlo