How to detect end of a wallaby converted flash animation?

Question

Hi let's say i want to put an alert box in the end of the animation in this html:
http://staging.comwerks.net/terrence/html-cover/animation-cover.html
where should i put the alert("end")??
i tried at serveral places many places they are failed. i need a single entry point when the entire animation is completed. help!: D

Answer 1

Great question.
The first step to figuring out the answer is understanding both the Wallaby HTML structure and CSS3. I highly suggest taking a look at the various tutorials we have at http://labs.adobe.com/wiki/index.php/Wallaby:Technical_Tips.
What you really want here is to add an event listener for the 'webkitAnimationEnd' event.
If you look at the Wallaby structure of your output, you'll notice that each of the Ponds tubes are contained in a
with the wlby_1 class attached. Looking at the CSS file you see that wlby_1 defines a -webkit-animation-duration of 2.04167s. This is the total length of your animation. You should also notice that for each
associated with a tube there is a
with the display style of 'none' (i.e. the ones with wlby_5, wlby_9, wlby_11, and wlby_13). These are used to get the delays before the various tubes come onto the stage.
You might think to add a listener on 'wlby_1' but that would end up getting called at the end of the animation of each tube. What you really want in this case is to get a hit only on your last tube. From looking at your animation this is obviously the blue tube which is animated by the wlby_14 class.
So, what you want is to add a listener in the  section of your HTML like this:
$('.wlby_14').each(function()
{ this.addEventListener('webkitAnimationEnd', function(evt) { alert('end'); }) });
Alternatively you could modify the wlby_14 div to have an identifier (i.e. id="last") and then do:
last.addEventListener('webkitAnimationEnd', function(evt) { alert('end'); });
I've tested out both of these locally with your output and they worked as expected.