Animated Navigation... Is there a smarter way?

Wow Jeff - that looks fantastic! Nice work on the design, it's really beautiful. I think what you've done works just fine! One thing I would probably do differently is place the animated items on a separate layer, just so that you don't have to deal with the overlap when you're authoring the slides. To me it feels easier to keep them on their own layer rather than turn their visibility on/off on the timeline whenever you want to get them out of the way so you can work on the other content of the slide. 

See the attached - I created a new layer on each of the 2 content slides, and a trigger causes the layer to appear as soon as the slide timeline starts. When the layer timeline finishes, another trigger hides the layer.

Oh, and one more recommendation would be to move the header objects to a slide master so that they could all be managed in one place.

Really great work!!

Tnx, Jeanette that is really helpful. I cant take full credit for the design though. I bought a Wordpress template that used the animated panes but could not take out the stuff I didn't like and put in the stuff I did want (the social icons, my logo in the proper size) so I thought it would be a cool Storyline project  

I also completely set the SL player to transparent so visitors won't even see the slim line of the player that you get when turn off all buttons and menu items. Now it completely blends into the background of my html page.

I surely intend to put all the recurring stuff (header and footer) in a master slide but was just playing around with the animations. Otherwise I'd have all those triggers on every page... and to much triggers make me nervous

Tnx again!

Voila, I perfected it with a subtle next button... What do you think?

That looks really snazzy Jeff! I like it!

My preference would be to increase the size of the arrow a bit.

I totally agree...

just tried the html5 output and it does not seem to be working right. the layers arent hiding :-(

ah well. thats something for another day

Wow!  Jeff, that looks fantastic  Thanks for sharing the file so I can learn how you did it.  

That is awesome! Simple, clean, and effective. 

Thanks for sharing.

♥ it, Jeff! Thanks!

Tnx all! Unfortunately the HTML5 output doesn't seem to hide the layers at all :( 

Can anyone see what's happening or is it just me?

Jeff,

By adding animated objects to the "Panes Off" layer, I found that although the layer was showing, the timeline wasn't running.

Adding audio to the base layer and the Panes Off layer.  I found that the audio timeline on the base layer played, which is correct, but not on the Panes Off layer which is showing.

Oddly, clicking the object to proceed to the next slide THEN played the Panes Off layer, before proceeding to the next slide.  Very strange.

Deleted all the objects on the base layer ... the timeline then plays correctly on the Panes Off layer.

Something is clearly wrong, you should submit a bug report.

A possible workaround that I haven't tried might be to remove all objects on the base layer and perform all displays on layers...

Tested all this in IE 9 and Firefox.  Same results.

tnx sam. i tried a complete rebuild.  html 5 worked seamlessly even though everything seemed identical to the first build. after a few minor tweeks to the order of objects in base and additional layers now the animation glitches in between pane on an off .... I officially hate this erratic behavior :'(

I've had to do the same (rebuild) with some slides in my own course.  I try to test everything I do in HTML5, not flash.  Things seem to work in Flash if they work in HTML5, but not the other way around.

Would be nice if the Preview button had an option to view story_html5.html.

Sam

That would be a blessing indeed. As a matter of fact I'll submit a feature request

Wow Jeff. Knap gedaan.

Thanx

alphonso

Silly question, Jeff. How does the png image sort of "light up" when I hover over it? I tried adding a jpg to the slide but it did'nt get highlighted on hover.

Hi Sij!

First, love the avatar. I'm a big GOT fan Can't wait til next month!

I believe the effect you're asking about is the hover state that Jeff added to the images. If you look at the file, select the image and click on "States" you'll see that glow effect (which is awesome, by the way) that he used.

Thanks Christine! The Hover state did make sense though I couldn't figure out how Jeff got that exact glow.
I had a look at the glow options under Format > Picture effects > Glow but the presets couldn't recreate what Jeff made.

Being picky, I know. Apologies. Imps are like that, I hear Can't wait for Season 3 but going at the book furiously!

Hi Sij!

No problem! I'm afraid I can't help with the exact effect he used, though. I'd have to let him share that with you.

Re-watching seasons 1 and 2 like crazy, here. The other show on that network with fangs is my back up :)

Have a great day!

Jeff...help us out quick,bud. Winter is coming!

Very elegant design Jeff!

Hi Sij, it was part of a wordpress template I bought. But its fairly easy to recreate. Use a radial blur in a square shape and put it over the big colored panel