animation simultaneity not respected

[clhona]

Hi, I was trying to create a slideshow that fades images and with the help of the forum (http://forum.openlaszlo.org/showthread.php?t=12964) I was able to do a slideshow of a serie of images.
At this moment I tried to add the fade effect and my code is:



<canvas width="100%" height="1050" >

<resource name="introslide" >
<frame src="images_intro/intro_a.png" />
<frame src="images_intro/intro_b.png" />
<frame src="images_intro/intro_c.png" />
<frame src="images_intro/intro_d.png" />
<frame src="images_intro/intro_e.png" />
</resource>




<view id="me" align="center" y="265" resource="introslide" frame="${Math.floor(this.framenum)}" opacity="${1 - (op*op)}">
<attribute name="op" value="1"/>
<attribute name="framenum" value="1" type="number" />
<animatorgroup name="ana_group" process="simultaneous">
<animator start="true" attribute="framenum" from="1" to="3" motion="linear" duration="6000" repeat="Infinity" onrepeat="parent.setAttribute('framenum', 1)" />
<animator attribute="op" from="1" to="-1" duration="3000" repeat="Infinity"/>
</animatorgroup>
</view>


<text x="100" y="20" text="${me.frame}"/>
<text x="100" text="${me.opacity}"/>

</canvas>


The code works corrctly but after a few loop the opacity animation and the slide didn't start simultaneously animore!
Is there something wrong with my code?
Thank you


Clhona

[mjessup]

Hi Chlona,
You may try moving the repeat and start attributes from the animators to the group:


<animatorgroup name="ana_group" process="simultaneous" repeat="Infinity" start="true">
<animator attribute="framenum" from="1" to="3" motion="linear" duration="6000" onrepeat="parent.setAttribute('framenum', 1)" />
<animator attribute="op" from="1" to="-1" duration="3000" />
</animatorgroup>


I am only guessing, but having repeat="Infinity" may be instructing flash to repeat each animator infinitely independently of the group, whereas putting it in the group says to repeat the group infinitely, but since it is a group make sure the subanimators are synchronized on each iteration. The only thing is you may have to adjust your individual animators since the one has twice the duration of the other (not sure of the exact effect your looking for).

[clhona]

thank you for reply but I tried ant it doesn't solve the problem!

[mjessup]

Maybe I am not understanding the effect you are trying to create. Here is a variation on your code which creates what I think might be the effect you are looking for, the pictures fades in, fades out switches resources at opacity=0 fade back in, repeat:


<view id="me" align="center" y="265" resource="introslide" frame="${Math.floor(this.framenum)}" opacity="${1-Math.abs(1-op%2)}">
<attribute name="op" value="1"/>
<attribute name="framenum" value="1" type="number" />
<animatorgroup name="ana_group" process="simultaneous" repeat="Infinity" start="true" duration="6000">
<animator start="true" attribute="framenum" from="1" to="3" motion="linear" />
<animator attribute="op" from="0" to="4" />
</animatorgroup>
</view>


At the very least I didn't notice the same synchronization problem with the above code as you described and I saw with the code you posted. Hope this helps.

[clhona]

mjessup, I think you get the effect I thought and apparently it works!

The problem is that I tried to modify the script because that I have more than 2 images in my slides, but I can't get it.

In your code if you have 4 images, it will be 1 flash per 2 images!
I tried with this code:

<view id="me" align="center" y="265" resource="introslide" frame="${Math.floor(this.framenum)}" opacity="${Math.abs(Math.sin(op))}">
<attribute name="op" value="0"/>
<attribute name="framenum" value="1" type="number" />
<animatorgroup name="ana_group" process="simultaneous" repeat="Infinity" start="true" duration="16000">
<animator start="true" attribute="framenum" from="1" to="5" motion="linear" />
<animator attribute="op" from="0" to="2*(2*Math.PI)" />
</animatorgroup>
</view>

I thought to pass 4 images while the variable "op" change as an absolute value of a sine from 0 to 4PI (4 times from 0 to 0 passing from 1), but it has a strange behavior (it flashes strange way!)

where am I wrong?

Thank you

Clhona

[mjessup]

Hi Chlona, it works, you just have to adjust the to attribute of the opacity animator so that it is twice the number of frames you are running through (also I forgot the motion="linear" attribute for the second animator in my last post) i.e. for five frames:


<view id="me" align="center" y="265" resource="introslide" frame="${Math.floor(this.framenum)}" opacity="${1-Math.abs(1-op%2)}">
<attribute name="op" value="1"/>
<attribute name="framenum" value="1" type="number" />
<animatorgroup name="ana_group" process="simultaneous" repeat="Infinity" start="true" duration="6000">
<animator name="frames" start="true" attribute="framenum" from="1" to="6" motion="linear" />
<animator attribute="op" from="0" to="10" motion="linear" />
</animatorgroup>
</view>


This is the way I wrote the opacity to animate. It is using the value mod 2 to move back and forth between opacity 0 and 1, so you need a range of two for each frame you will be showing.

${1-Math.abs(1-op%2)}

For the first frame
op = 0, op%2 = 0
Math.abs(1-0) = 1
1 - 1 = 0 (transparent)

op = 0.5, op%2 = 0.5
Math.abs(1-0.5) = 0.5
1 - 0.5 = 0.5 (semi-transparent)

op = 1, op%2 = 1
Math.abs(1-1) = 0
1 - 0 = 1 (opaque)

op = 1.5, op%2 = 1.5
Math.abs(1-1.5) = 0.5
1 - 0.5 = 0.5 (semi-transparent)

op = 1.9, op%2 = 1.9
Math.abs(1-1.9) = 0.9
1 - 0.9 = 0.1 (nearly transparent)

(next frame where the first animator switches values)
op = 2, op%2 = 0
Math.abs(1-0) = 1
1 - 1 = 0 (transparent)



For the third frame it is the same once you take the modulo into account:
op = 4, op%2 = 0
Math.abs(1-0) = 1
1 - 1 = 0 (transparent)

op = 4.5, op%2 = 0.5
Math.abs(1-0.5) = 0.5
1 - 0.5 = 0.5 (semi-transparent)

op = 5, op%2 = 1
Math.abs(1-1) = 0
1 - 0 = 1 (opaque)

op = 5.5, op%2 = 1.5
Math.abs(1-1.5) = 0.5
1 - 0.5 = 0.5 (semi-transparent)

op = 5.9, op%2 = 1.9
Math.abs(1-1.9) = 0.9
1 - 0.9 = 0.1 (nearly transparent)

(next frame where the first animator switches values)
op = 6, op%2 = 0
Math.abs(1-0) = 1
1 - 1 = 0 (transparent)


Let me know if you need it explained futher.

[clhona]

Thank you, very kind from you! I swear I tried in the way you modify it but it had a different behaviour !
I won't ask myself were I was wrong because it will be a bigger problem!!!!!!!!!!!:eek:

In any case thank you!
clhona

[mjessup]

Glad to help (I've certinaly recieved my share in these forums). The problem you may have had before was because I forgot the motion="linear" in the second animator. Without that it does act screwy once there are more frames.