Fade in AND out

Hello Adam,

You can do this by creating another layer for your fade out animation. It's not quite perfect but have a look at the example I made. I used hotspots to trigger the animation.

Hopefully this helps,

Donna

Adam,

As of now, there's not a method to get the objects to do a smooth fade out using the hover trigger.   However, if you change your method to having the user click objects, there is a little trick to getting objects to fade in and out by using hidden objects, state changes, a tricking the timeline.  I've attached a sample file.

• What you do is add a selected state to your object that you wish to fade in and out.
• Start the object in the hidden state
• Add two triggers to (1) change the state of the object to normal when it's selected and (2) to change the state to hidden when it's not selected.
• Now, on the timeline, alter the object so that it's only present for the minimum amount of time.

Ultimately, if you could add your voice, I think it would make a great feature request to be able to apply a fade out to layers (especially on the restore on mouse leave option.  http://www.articulate.com/support/contact/submit.php?form=feature

I hope this helps!

Donna,

Cool work around.  It might get tricky with multiple objects on the screen, but I like the idea!

I would add one tweak...

On the large hotspot, I'd add a condition to the trigger to show the layer if the state of the image is normal.  This will remove the initial firing of that layer when you are moving your mouse to the object.

Thanks for sharing your idea!

Mike

Thank you Donna - its definately an idea I could use. I can't see it working in this case, as I have multiple triggers on the slide.

If my attachment worked (I'm not sure!) - you'll see the slide in question. Yes, Mike, thanks, I've put in a request!

Regards;

Adam

Yep.. i figured it can get crazy when you have a lot of triggers.

You could also possibly add (copy/paste) the hover material as states of the text boxes, rather than slide layers. That (generally) allows for animation in/out.

It's not as convenient, but if the transitions are important, it may be a way to go. It may require a bit of reorganizing layers so as not to overlap on-screen.

Building on Adam's trickonclick example, you can use mouse hover with two hotspots to animate an object's entrance and exit.

Oops, I meant to say "Building on Mike's" trickonclick example..."

Where can I find a tutorial on how to hover over objects and have them appear in color while the rest of the photo is in the

background in black and white.  I have a photo that has 12 people in it.  I would like the photo to start out in color, then fade

to black and white in the background as I am hovering over each person in the photo (and each person would be in color as I hover over them.)

I thought I saw a video on this and cannot find it now.

Thanks!

Michele

Hi, Michele: Welcome to the forum. Not sure what video you are referring to, but are you working in Studio or Storyline?

Couple of ways to do this, depending on the tool you are using.

Hi Michele, 

I want to echo Daniel's welcome and you're in capable hands with his assistance.

Here is how I solved this issue in a couple of my projects:

I have captions appear and disappear as a person hovers their mouse over a button. The caption is set to hidden so when the mouse over occurs it is set to it's normal state. 

Created a caption and set its Initial State to hidden and set the following trigger on the caption.

Set a new trigger on the button

By ticking the restore on mouse leave everything disappears when the mouse moves away.

Hope this helps

Regards Graeme

Thanks Graeme for sharing that here!

I am using Storyline.  I am going to try and use the suggestion that Graeme posted.  But I welcome all suggestions.

I saw a tutorial on how do accomplish what I am asking, and now I cannot find it.  I think Mike posted it.

Hi Michele,

I'm not sure if this is the one you're referring to, but there is this template by Nicole that allows you to hover and see the colored image instead of the black and white. 

Michele,

Are you thinking of David's My Little Pony example?  

Mike

I know this is an OLD thread :) - but I also realize folks may be finding it (as I did) while searching for tips for animating menus. I wanted to add a "sources" layer on each of my slides to gently fade in and fade out - and to avoid states and complicated triggers so my client can easily update text in the .story file.

My solution:

• Add a layer called "sources" - (or menu, etc.)
• Create a "show sources" button on the base layer (or any other layer).
• Create a "hide sources" button on the "sources" layer.
• Create a trigger on the "show sources" button to show layer "sources".
• Create entrance and exit animations for items on your "sources" layer - I chose a .5 second duration for the entrance and exit animations on this project.
• Set the length of the layer timeline to 1.5 seconds
• Set the length of the items on the "sources" layer to 1 second.

• Set the "sources" layer to "Reset to initial state"
• Create these triggers on the "sources" layer:

Here are the base and source layers, respectively:

The transition is smooth between layers and makes for a nice effect. I've tested in HTML5 in Chrome, IE and Firefox. I hope this helps!

-Jim

Old or not, always good to have the updated examples and steps here! Thanks for sharing Jim.