Way to have a zoom trigger combined with slide layers?

Hello all!

I am trying to figure out a way to have zoom areas be triggered only when the user clicks a certain area of the screen.  See below, but is it possible to have the user click a number, then zoom into the area clicked to tell them more information, and have the zoom out happen when they close the zoom area information?

31 Replies
Christine Hendrickson

Hi Molly,

As far as I know,  you cannot trigger zoom regions. However, you can create the illusion of one by using layers and triggers. 

I put together a very (very) quick example, if you'd like to take a look. I'm attaching it to the thread. 

Keep in mind, I didn't have time to add the effect to all of the buttons, but "1" and "2" should work.

I'm sure there's some fancier examples out there, just wanted to give you some quick information that may help with your project.

Molly Vidas

Christine and Donna - 

Thank you both so much for your time and response!  I really appreciate the effort put into making the demos.   

I will have to add triggering zoom regions onto my Storyline wishlist  

I did have the project initially set up using the layering/triggering method, but was hoping someone out there with a higher knowledge of Storyline's capabilities (as I am barely intermediate).  This specific project would have been highly complimented by a zoom trigger, but I will happily stick with the layers.

Thank you again - I would be lost without this community!!

Cheers, 

Molly Vidas

Bruce -

This just might do it!!  With a little tweaking, I think I will be able to get close to what I wanted.

There are going to multiple sections of the screen that the learner has to visit before given the option to advance.  The hover wouldnt work for the "change state of button" so I added the down state, and a grow animation to the images.  The next button appears after all have been visited.

Only downfall is not having associated audio to the "zoom" sections, but I can work around that!

Thank you!

Judith Blackbourn

Very elegant, all.

I recently tried to do something similar (on a much simpler scale) but gave up on it because I couldn't control the graphics in the different states.

Here's what I was trying to do:

I'm showing a horizontal row of tabs, and want to enlarge each one as the user clicks on it, then have it return to normal when the user clicks on a different one.

 I created the two different sizes for each tab, but somehow the tab graphics wouldn't stay aligned. The normal tabs were OK, but when the large ones always aligned at top with the others rather than at middle. Tried moving it manually, and using the Size and Position control, but nothing helped.

Guess I could layer a graphic for each tab, but seems like there should be a way to do it with states.

Any ideas on how this can work?

Rebecca Fleisch Cordeiro

Hi Judith,

I think I understood what you meant here, but I'm not positive. So I'm uploading a very raw story with 3 tabs.

  • Created a button set for the tabs by selecting, right-click, and choosing Button Set 1
  • Now they all have a selected state.
  • Enlarged the selected state (keeping aspect ration the same)
  • The 2nd and 3rd tabs do what you described; i.e., "when the large ones always aligned at top with the others rather than at middle"
  • I played around with the first tab's selected state to position it in the way that I think you want. I did this by:
     - Double clicking to edit the selected state
     - Dragging it so it looked like it was positioned properly; using the Ctrl key while dragging helps with finer positioning
  • That seemed to do it. Curious to know if this is what you meant.
Judith Blackbourn

Hi Becky,

Thanks, yes, this is what I was getting, except I was just using graphics instead of a button set.

Although I don't always like the button sets, I decided to try with those.

Had to mess around with dragging multiple times, but finally have them lined up the way I want. So I'm satisfied with that. The only thing I don't like is how messy the button text looks (one of the reasons I don't like button sets).  

 Yours look much neater -- is there a way to make the text on the buttons cleaner-looking?

Rebecca Fleisch Cordeiro

Hi Bruce and Molly,

Enjoying the Q and A. I just modified Bruce's hover story so the gumdrop photo actually fades in and out. LOVED this Phil Mayor tip and I use it a LOT. Perhaps you don't really want it, but I like when objects come in with a bit of a fade rather than as starkly as they do "by default."

Phil's trick was: after inserting the object in the desired state, edit the state, cut the object (in this case gumdrop photo), and paste it back in. Then add the animation. I did a fade in and out.

Rebecca Fleisch Cordeiro

Hi Judith,

Wish I could tell you I have a secret sauce for the typeface, but I didn't do anything special. It's just the default Articulate 12 point font.

As I mentioned, I did make sure when I enlarged each shape that I changed the default to lock the aspect ratio (although I type ration - oops).

  • This is done by clicking the Drawing Tools Format tab
  • then clicking the little arrow on the size group which
  • opens the Size and Position dialog box. You'll note that lock aspect ratio isn't checked, so,
  • I check it.

Not sure if that might have something to do with it.

Oh, and one other thing that seems to happen randomly, at least for me, with shapes. Sometimes text shadowing is turned on - all on its own. IMHO, the shadowing typically makes type very "uncrisp." The way to turn it off is to select the text and click the text shadowing button (Home tab >Font group).

Rebecca Fleisch Cordeiro

Glad it worked. I'd run into that quite some time back and, my years of experience trying to get Microsoft Word to listen to what  I want (and WordPerfect back in the day), I think led to that discovery. Later on, I also saw it (problem/solution) posted here, so I guess it happens to a lot of us.

Glad it's working now.

David Mark

Thanks for the zoom responses. My work around was to put my graphic into photoshop, crop the different sections I wanted to zoom, and make each of them a separate jpeg file. Then made a layer for each of the cropped files using a button with a hover state to show the "zoomed" area. It worked, but was a lot of work.

Kevin Thorn

The Hover state of the circle shape with the number one has a larger image. Open Bruce's .story file, select the green number one circle shape, and then click on the states tab in the timeline panel. You'll see the image inserted in the hover state of that shape. 

So...the neat thing is Storyline's built-in hover state automagically shows whatever is in that state. In this case a larger image of the same thing on the main slide.

Sachin Taank

Oscar I love your workaround solution and I think this is exactly what is going to work for us. We have an organisation chart of Partners in our firm, and when we click over each one, I want it to zoom in and then display details of that person. I think this is the approach we are going to use. Thank you for this.