Animations (Medium)
( 2 Votes )
Hits smaller text tool iconmedium text tool iconlarger text tool icon

To understand this theme you must have some knowledge about TL themes coding. Attached to this tutorial you have a little example of an animation theme.

How TL handles animations is a little bit messy right now. There's not apng, mng or gif support so how it achieves it is by using different png's for each animation frame. This has some advantages and some disadvantages. The main advantage is that each frame is loaded before rendering and unloaded after rendering so using animations doesn't take any aditional memory. That bad part is that this makes animations harder to code and that randering is slower than with other animation formats... Also it will take more storage.

 


Now that we know how TL will handle the animation let's start with the XML coding. To make the animation we will use an icon (text can only be used). For each animation we will have to make a folder containg a png for each frame. We will have to call the png files in sequence (1.png, 2.png, ... N.png). Let's suppose we have the png frames at #@THEME_BASE#\anim\.

In the page we wan't to have the animations we have to include (directly inside the page tag):

1
2
3
4
5
6
7
8
9
10
11
12
13
<procedure name="Animation" 
parameters="varname,take,folder"
mode="Threaded">
<for each="steps" from="1" to="4">
<for each="value"
in="#$ListFiles,#$THEME_BASE#\#@folder##">
<action execute=":SetVariable"
parameters="#@varname#=#@value#"
take="#@take#"/>
</for>
</for>
<action execute=":SetVariable" parameters="/portal/Tutorials/ThrottleLauncher/animations_medium/AnimStep1.png"/>
</procedure>



This is what's call a procedure. There are two procedure modes:
- Inline: the event execution that called the procedure will not continue until the procedure ends.
- Threaded: the procedure will be called in a new thread and the event that calls it will continue before it ends.

Tip: you can use procedures to many things other than animations!! Use them for example if there is a secuence of actions that is repeated more than one time inside a page. YOu can even call a procedure from inside another procedure!

For animations I recomend using Threaded mode but it can cause the animations procedures to mix one with the other and cause some strange behaviours.

The procedure receives 3 parameters: the name of the variable to set, the amount of time each frame will take (to control fps) and the folder it will use to render.

 

 

Ok, now let's start withwhat the procedure does. This procedure will repeat the animation for 4 times (look the first for each statement). And then it will reset the animation to the first frame. For each animation what the procedure does is go throught the files that are inside a folder settings a varible to each file value sequentially. Note the take attribute of the action... this is the minimum amount of time the action will take before ending.

Tip: Note that big animations can become slow... if that happens try settings the take parameter to 80. It this way it's still slow, try adding a step="2" to the second foreach of the procedure (this will cause it to render only 1 frame per 2 files).

Now that we have the procedure coded we have to write the item that is going to render the animation:

1
<icon path="#$THEME_BASE#\anim\#$Variables,AnimStep#"/>

As you see this is an eassy one :). Just an icon pointing to the file setted by the procedure.

In order to make the animation start we have to assing the procedure for an actual action inside an event. We can make it start when the icon is clicked:

1
2
3
4
5
6
<icon path="#$THEME_BASE#\anim\#$Variables,AnimStep#">
<event type="Click">
<action execute=":RunProcedure"
parameters="Animation(AnimStep,80,anim)"/>
</event>
</icon>


Or even when the page is shown (place this directly inside the page tag):

1
2
3
4
<event type="PageShow">
<action execute=":RunProcedure"
parameters="Animation(AnimStep,80,anim)"/>
</event>


Now there's a little more thing to do. We have to set the initial frame in order to make the icon paing at the begining. In the page startup event we have to add the following:

1
2
3
<event type="PageLoad">
<action execute=":SetVariable" parameters="/portal/Tutorials/ThrottleLauncher/animations_medium/AnimStep1.png"/>
</event>


Please feel free to ask any questions regarding this tutorial in the Tutorials forum.


Attachments:
FileDescriptionFile size
Download this file (Anim.zip)Animation ThemeLittle animation theme example116 Kb
Comments (0)
Write comment
Your Contact Details:
Comment:
[b] [i] [u] [url] [quote] [code] [img]   
:D:angry::angry-red::evil::idea::love::x:no-comments::ooo::pirate::?::(
:sleep::););)):0
Security
Please input the anti-spam code that you can read in the image.
 
Follow us on Twitter
  • Screenshots
  • Screenshots
  • Screenshots
  • Screenshots
  • Screenshots

Login