Trigger an Animation in Storyline

Sep 29, 2012

Has anyone figured out how to trigger either a screen animation or an object animation in Storyline? This would be best on a variable value.

38 Replies
Kevin Thorn

Hi "ID"

Are you wanting to trigger these animations based on a cue point in the timeline?

One way is to set the animation you want to occur using a cue point on the timeline. Simply slide it's starting position to a point on the timeline when you want it to occur.

If there is more to your setup that I assume, here's another approach:

  1. Create a shape/object and place it off the stage.
  2. Create a new state for the object. Give it any name and maybe change the color.
  3. Set a cue point on the timeline where you want an onscreen animation to occur.
  4. Set the shape you created to start on the timeline at that same cue point
  5. Set a trigger to change the shape's state to Normal
  6. Set a trigger to Start Media (animation) when the state of the shape changes.

The above works well with media such as video and audio, but if it's animation actions using Storyline's tools, manipulating the timeline might be the best option.

Good luck.

L Keith

This is a great question as I would like to know more.  I have added a menu that appears to slide in from the bottom using a button trigger and object animation. The object is on a different layer than the button that triggers the menu layer to appear. I also created an exit button with a trigger to hide the layer when the user clicks. I would like for the layer to hide the same way it appeared, by "sliding back down versus just disappearing. Any thoughts or ideas?

Ben Mueller

I'm having the same issue (I think), but I don't think I'm seeing the answer I was hoping to find here.  Here's what I want to do:

* From the base layer, I want to click a button and have a layer animate into view

* From the layer that was animated in, I want to click a button on that layer to animate that layer out of the view

I don't see a way to do that.  What I see is the ability to animate the entrance and exit of a layer; if I set both of those, then the layer animates in the way I want, but then it does something confounding:  the layer animates *out* with no action from the user after about 5 seconds.  That's certainly not what I'm after.  I hope that I'm just missing something here, since admittedly I'm fairly new to Storyline.

El Burgaluva

Hi, Ben

Take a look at the demo slide attached, which I quickly knocked up while having a coffee. I think it's what Phil was saying.

The animation is on the [HELP] button in the top right. Let's say you wanted to reveal a tip or some extra information, you could have it slide out and when you click [X], it closes again with the same animation (in reverse).

That's what you're after, isn't it?  

Hope this helps,

Leslie 

Note: The "hide help panel" layer has a timeline of 1second and is set to hide on timeline end. If you're new to SL, you can find those settings by clicking the gear icon on the layer.

Ben Mueller

Hi Leslie,

First of all, thank you for the demo.  It's very gracious of you.

But I'm not sure I fully understand what I'm seeing.  It looks like, in order to get the "slide in/slide out" effect that you are literally duplicating a layer, and one layer has the "slide in" effect, and the other layer has the "slide out" effect.  So, when the red "X" button is clicked, what's really going on is the "show" layer is being hidden immediately, the "hide" layer is being shown, and then the "hide" layer is immediately being animated out.  Do I understand that correctly?  Is that really the only way to do this?  That seems kind of crazy, no?  That's a duplication of work, which means more time to develop and (worse) more time to maintain (e.g. if I have to make a content change, I have to remember to make it on two layers instead of one).

Is there really no way to have a single layer have both an entry and exit animation, where each are triggered by user action?

Thanks,

Ben

Ben Mueller

Hi Phil,

Thanks for the reply.  Sorry if I'm using the wrong terminology.  This just seems like a glaring, glaring oversight to me.  It seems logical that if you're going to animate a layer in, that you'd want that layer to exit with the same effect, no?  What's the rationale behind Storyline being designed this way?

Ben

Phil Mayor

I don't know.  You can add it as a feauture request.  I have been using it for over 18 months now and really dont have an issue with it.

There is ongoing work on adding extra animations and this may be part of the new animations, again I don't know.

Not justifying the whys, really that is for Articulate to do. it can be achieved but at the moment you need to do extra work

Kevin Thorn

Hey Ben,

Storyline is an amazing piece of software as is. In retrospect, the first version of Flash had a lot to be desired, but over the years with a lot of use and feedback it evolved into a powerful application development tool. Storyline's first version in comparison out ranks all before it. I'd encourage submitting feature requests when you come across something you want to be able to do, but currently can't. It's that kind of feedback that helps the engineers how to prioritize what goes in the next build. The more requests for the same feature I'm guessing will bump up it's priority level.

That all said, perhaps this will help in the meantime. It's actually fairly simple to set up.

1. Two layers: Open and Close

2. HELP button trigger: Show "Open" layer when clicked

3. Open layer: Set the animation on the object(s) to Fly In from right when Timeline starts.

4. Open layer HELP button trigger: Show "Close" layer when clicked 

5. Close layer: Duplicate objects from 'Open' layer. Set animation to Fly Out (exit)

6. Add Layer trigger to Close Layer when Timeline ends. Set Timeline to 1 second or less depending on speed of animation.

The trick here is to combine the objects Fly Out animation in combination with closing the layer at end of its timeline set to the same approximate animated time - approx. 1 second or less.

DEMO

.story file attached

Hope that helps at least get your creativity flowing.

Ben Mueller

Kevin,

Thanks for the reply.  Your solution functions more or less like Leslie's.  The show-stopper for me is the duplication of layers.  Across one slide, that's not so bad, but across an entire project, that duplication would make course maintenance a headache I'm not willing to deal with.  But you're right; it's a new product and so perhaps this will be a feature they add down the line.

Tom Reitz

In a similar fashion, I have had success in revealing multiple objects to the stage, per the users discretion. My goal is to create a "build your own" routine. Each object has a motion entrance and exit transition, as suggested above. There is no issue as long as one object is visible on the stage at a time, or you swap between objects reveals/exits. The problem comes in when attempting to initiate the second exit action on any object, and objects begin to cut off. It appears as if a hide function is overriding the exit transitions. I have attempted a variety of button methods, as the sample file shows. I have also messed endlessly with the layer settings. No luck. Any ideas?

Jeremy Miles

Hi All

I was searching for some basic instructions in how to trigger a text box to animate (fly in) on the screen on a mouse click. I have read this thread but my request I think is a lot simpler - I just can't find the 'start animation on mouse click' command in the ribbon - as it is in PPT.  Am I missing something or does Storyline  require a more complex workaround. I can set up all the animations on the timeline but I want the transitions to be controlled by the user rather than by a duration setting.

Thanks

Kevin Thorn

Hi Jeremy,

It's a bit different than in Studio '09 using PPT.

Here's how I'd approach this:

  1. Place your text box on the slide where you want it to appear and fly in.
  2. Set the text box to Hidden initially.
  3. Set a trigger on your button - Change the state of > text box > When user clicks

Might have to fiddle with it a bit to get it to behave like you want but that should get you started.

Kevin Thorn

Jeremy,

If I understand what you're wanting to do, it's a bit more involved than PPT.  

Set up:

  1. Place all three text boxes on your slide in the same x,y position and apply the appropriate animation.
  2. Select each one separately and set their Initial States to Hidden.
  3. Place your custom continue button on the slide.

Variables:

You'll need two variables.

  • Text2 - True/False. Default = False
  • Text3 - True/False - Default = False  

We don't need one for the first text box because...well, it's the first to display.

Triggers:
You'll need two Slide Triggers and five Button triggers:

  • Slide Trigger: Adjust Variable > Text2 to True When the State of Text Box 1 is equal to Normal
  • Slide Trigger: Adjust Variable > Text3 to True When the State of Text Box 2 is equal to Normal
  • Button Trigger: Change the State of Text Box 1 to Normal when the user clicks
  • Button Trigger: Change the State of Text Box 1 to Hidden when the user clicks IF Text2 = True
  • Button Trigger: Change the State of Text Box 2 to Normal when the user clicks IF Text2 = True
  • Button Trigger: Change the State of Text Box 2 to Hidden when the user clicks IF Text3 = True
  • Button Trigger: Change the State of Text Box 3 to Normal when the user clicks IF Text3 = True

At first I thought it was a simple solution I could reply to, but the more I thought about it the more I figured I should build a test file to see if my theory worked. My first did not. The above is what I came up with based on how I understand what you're wanting to do. Others may have a better or more elegant approach, though. 

Story file attached.

Jeremy Miles

Hey Kevin,

I really appreciate your help on this one - that's just what I was intending, although I must admit I still struggle to get my head around the Storyline logic - I suppose I'm looking for a command to trigger the animation but the only triggers seem to be to change the state from hidden to normal.

One final challenge I'm having. The button I want to use is actually my  custom Next button. I thought I could complete the sequence by adding a final trigger to the sequence by adding a Jump to next slide when user clicks Next button on the condition that Text 3 is equal to normal.  This now seems to over-rule the trigger to display Text 3 before jumping to the next slide.

Kevin Thorn

Hey Jeremy,

Sorry for missing your request to use the same button to jump to the next slide. But don't sell yourself short. You're close in your logic. Adding another trigger to Jump to Next Slide by evaluating when Text 3 is Normal is the correct way of working through a solution like this.

However, when Text 3 is changed to Normal on the "second" click of the button when Text 2 is changed to Hidden and Text 3 is changed to Normal. There may be other ways to solve this, but I approached it by creating another variable - Number variable called "JumpTo" with initial value of 0. This variable is simply just a counter. Every time the Continue button is clicked add +1 to JumpTo. Finally, evaluate when JumpTo is equal to 4 and then Jump to the Next Slide.

  1. Click = show Text 1
  2. Click = hide Text 1 and show Text 2
  3. Click = hide Text 2 and show Text 3
  4. Click = Jump to Next Slide.

Just keep thinking the way you are. To be honest, I approach challenges like this with a pencil and a pad of grid paper. I talked it out in real language otherwise known as psuedo code. Example of your challenge would be something like this:

  1. When the user clicks the button I want the first text box to appear
  2. When the user clicks the button again, hide the first text box and show the second text box at the same time
  3. When the user clicks the button again, hide the second text box and show the third text box at the same times
  4. When the user clicks the button again, evaluate that all three text boxes have appeared and jump to the next slide.

Next, just break each one of those down independently and get it work. The first step is a simple trigger. Now add step 2 to step 1. Test. Okay, that works. Now add step 3 to the process. Test. Keep going until you work through your steps.

Updated .story file attached.

This discussion is closed. You can start a new discussion or contact Articulate Support.