You are not logged in.

Animate a layer with Tween option

kealkeal

Intermediate

  • "kealkeal" started this thread

Posts: 176

  • Send private message

1

Friday, March 27th 2015, 11:18am

Animate a layer with Tween option

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

Beginner

Posts: 43

  • Send private message

2

Friday, March 27th 2015, 11:42am

what did you write so far?

kealkeal

Intermediate

  • "kealkeal" started this thread

Posts: 176

  • Send private message

3

Friday, March 27th 2015, 11:53am

Here is my code :

Source code

 
1
2
3
4
5

<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

Beginner

Posts: 43

  • Send private message

4

Friday, March 27th 2015, 12:11pm

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'):

Source code

 
1

onloaded="beat-spots();"


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

kealkeal

Intermediate

  • "kealkeal" started this thread

Posts: 176

  • Send private message

5

Friday, March 27th 2015, 12:19pm

ok here is my code now :

Source code

 
1
2
3
4
5

<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 .... *cry*

nixons

Beginner

Posts: 43

  • Send private message

6

Friday, March 27th 2015, 12:29pm

Remove ',default' from tween

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

kealkeal

Intermediate

  • "kealkeal" started this thread

Posts: 176

  • Send private message

7

Friday, March 27th 2015, 12:31pm

Done but no result .... *cry*

nixons

Beginner

Posts: 43

  • Send private message

8

Friday, March 27th 2015, 1:20pm

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

Beginner

Posts: 1

  • Send private message

9

Wednesday, April 15th 2015, 2:20pm

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

Source code

 
1
2
3
4
5
6
7

<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>

kealkeal

Intermediate

  • "kealkeal" started this thread

Posts: 176

  • Send private message

10

Thursday, April 16th 2015, 2:35pm

Hi Shura,

Thanks for example but it doesn't work.

Here is my code :

Source code

 
1
2
3
4
5
6

<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 ... *huh*

kealkeal

Intermediate

  • "kealkeal" started this thread

Posts: 176

  • Send private message

11

Thursday, April 16th 2015, 3:14pm

Ok I'v got it :

Here is my code :

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12

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>


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

Now how can I use the Loop Mode ?

kealkeal

Intermediate

  • "kealkeal" started this thread

Posts: 176

  • Send private message

12

Thursday, April 16th 2015, 4:08pm

So here is th esolution for Loop Mode :

Source code

 
1
2
3
4
5

<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 !!! *tongue*

Hope it could help some of you ! ;-)

Similar threads