The GS JS Tour App

[pixeldroid]

This might be asking for too much, but in an effort to learn some advanced HTML5 I'm trying to rebuild the the very cool tour app on the GS JScript Jump Start Page

I've built the basic framework and have been trying to add one slide at a time to see how it works and also to try to keep it functional as I go along.
At this point I have the first 2 slides and the dropdown menu installed.  I'm not getting any of the code in tour.js to work.  I've uncommented all of the console comments but I'm not getting any output to the debug console (FF).  I am getting an error that 'slideshow' is not defined in the html file, and I'm assuming that it should be getting the 'slideshow' object from tour.js.  I've also tried adding breakpoints after the 'loadSlides()' function in tour.js, but in both Firebug and the FF Console, the code doesn't stop and offer the 'step in' option.
Admittedly, I'm new to this process (still a Flash refugee), but if anyone has a tip or two to move me along, I'd greatly appreciate it.
 

[pixeldroid]

Upon further investigation, I see that tour.js actually populates the divs in the tour container, so by the time I saved the code it was in its final form and bound for failure.

See if I can figure that one out (though I wouldn't turn down any hints)...

[Rodrigo]

Hi,

 

Well my best guess is that the sliders animations reside in a master timeline, and each slider has it's own timeline to show the code and sample. Also depending on the example type another timeline could be also in the mix, probably not nested.

 

As far for each individual slide things get more simple (I'm leaving the examples out just in case). Each slider is a parent element and has child elements inside, if you see with detention the samples slides have the same effect, their child element's do a staggerFrom a given left value and opacity:0 or near 0. For the text slides they share a lot of animations, paragraphs come from below and opacity:0, so again a from() instance and a staggerFrom when list elements are present.

 

As you can see is not very hard and that sample shows how deep you can go with just a single timeline and labels, the rest is just getting to know how every animation looks like.

 

Rodrigo.

[pixeldroid]

What I was referring to is that the 'tour' in the html file is a simple hierarchy of divs which are dynamically populated by code in 'tour.js'.  All the tour content is loaded from external files (the examples), the drop down menu, the code overlay and the button properties are all assigned when the tour is dynamically created.  I used to do stuff like this in Flash using AS and xml, now I want to learn how to do it in JS...