Animate a layer with Tween option

kealkeal1 · March 27, 2015 at 11:18 AM

Hi,

I'd like to add a little animation to a layer. The animation will be very simple, just a scale and scale.

I'd liket o use Tween option, but is doesn't work.

Someone can help me to add the Tween option to a layer ?

Thanks.

nixons · March 27, 2015 at 11:42 AM

what did you write so far?

kealkeal1 · March 27, 2015 at 11:53 AM

Here is my code :

Code

<layer name="glaceannou" url="images/glaceannou.png" align="topleft" x="10" y="10" style="tooltip" tooltip="Intégrez votre Mascotte" keep="true" onclick="flyin(zoom-mascotte);"  onlaoded="execute(beat-spots)"  />	
		
<action name="beat-spots">
tween(layer[glaceannou].scale,1.0,0.5,default);
</action>

I'd like to scale and unscale the layer with a delay and in loop mode ....

nixons · March 27, 2015 at 12:11 PM

i think that you are not calling action correct:

First you have 'onlaoded' instead 'onloaded'

Second:
If action name is 'beat-spots', the correct way to call that is (without 'execute'):

Code

onloaded="beat-spots();"

BTW, i would avoid character like '-' in the name of action

kealkeal1 · March 27, 2015 at 12:19 PM

ok here is my code now :

Code

<layer name="glaceannou" url="images/glaceannou.png" align="topleft" x="10" y="10" onclick="flyin(zoom-mascotte);" onloaded="beatspots();"  />	
		
<action name="beatspots">
tween(layer[glaceannou].scale,1.0,0.5,default);
</action>

But nothing change ....

nixons · March 27, 2015 at 12:29 PM

Remove ',default' from tween

And you are tweening scale to 1.0 wich is default, try chane that to e.g. 0.8

kealkeal1 · March 27, 2015 at 12:31 PM

Done but no result ....

nixons · March 27, 2015 at 1:20 PM

the tween should now work but it's possible that you don't see the transition but diffrence in size must be noticeable.

This action only happens once, when loaded.

shura · April 15, 2015 at 2:20 PM

tween(variable, value, time*, tweentype*, donecall*, updatecall*)

Code

<layer name="glaceannou" url="images/glaceannou.png" align="topleft" 
x="10" y="10" scale="1.0" onclick="flyin(zoom-mascotte);" onloaded="beatspots();" 
/>	


<action name="beatspots">
tween(layer[glaceannou].scale,0.5,2);<!-- 0.5 - target scale, 2 - time -->
</action>

kealkeal1 · April 16, 2015 at 2:35 PM

Hi Shura,

Thanks for example but it doesn't work.

Here is my code :

Code

<layer name="glaceannou2" url="images/glaceannou.png" align="middle" x="10" y="10" scale="1.0" onclick="flyin(zoom-mascotte);" onloaded="beatspots();"  onover="tween(alpha,0.5);" onout="tween(alpha,1.0);"
/>	


		<action name="beatspots">
		tween(layer[glaceannou2].alpha,0.5,1.0);<!-- 0.5 - target scale, 2 - time -->
		</action>

Here the OnOver and OnOut effect are working fine. No probleme.

But the OnLaod action don't work ...

kealkeal1 · April 16, 2015 at 3:14 PM

Ok I'v got it :

Here is my code :

Code

onstart="beatspotsOn()"


<layer name="glaceannou2" url="images/glaceannou.png" align="middle" x="10" y="10" scale="1.0" onclick="flyin(zoom-mascotte);" onover="tween(alpha,0.5);" onout="tween(alpha,1.0);" />	


<action name="beatspotsOn">
	tween(layer[glaceannou2].scale,2,1,true);<!-- 0.5 - target scale, 2 - time -->
	delayedcall(1.0, beatspotsOff() );
</action>
		
<action name="beatspotsOff">
	tween(layer[glaceannou2].scale,1,1,true);<!-- 0.5 - target scale, 2 - time -->
</action>

Display More

The onstart was missing that's why the animation couldn't work.

Now how can I use the Loop Mode ?

kealkeal1 · April 16, 2015 at 4:08 PM

So here is th esolution for Loop Mode :

Code

<action name="beatspotsOn">
delayedcall(5.0,tween(layer[glaceannou].scale, 1.2, 0.5, default, tween(layer[glaceannou].scale, 1, 0.5, default, beatspotsOn() ) ));
</action>
		
<layer name="glaceannou" url="images/glaceannou.png" align="topleft" x="10" y="10"  tooltip="Intégrez votre Mascotte" keep="true" onclick="flyin(zoom-mascotte);" onover="tween(alpha,0.5);" onout="tween(alpha,1.0);"  />

The layer animation will start after 5 secondes.

The layer is scalling from 100% to 120% for 1seconde, then the layer is scalling down from 120% to 100% for 1seconde.

The animation is looping !!!

Hope it could help some of you !

Participate now!