Insert image with enlarge icon + animation positioning question

Jackie Chu
By Jackie Chu

Hi everyone,

I have a couple of questions, I would like to have an image on a page and then when you click on the image have it enlarge for more detail - like how it is on the quiz interactions - for the life of me I can't find where to do this?

Also, on a simple click and reveal interaction I would like to have it so if you click on the button a panel appears to animation from the button? like a scroll but not that fancy, just a fluid transition rather then have it just appear; when i select from the animation options it only gives me options for the entire panel to fly from offscreen onto the page which is not what I want.

Many thanks, I am looking forward to discovering more ways to make some good lookin interactions

Jackie

4 Replies
Ashley Terwilliger
7 years ago12/17/13 at 10:47 am (UTC)

Hi Jackie,

For the image, have you looked into inserting a Zoom region?   Additionally, you could add a Zoom element to a picture as shown here:

Click this option to enable a zoom icon on your image, which learners can click to see a larger view. (The zoom will work only if you've resized the image on your slide to be smaller than the original — for example, if you've inserted a 500x500 pixel image and then resized it to be 250x250, the zoom icon will allow learners to see zoom the image to its original 500x500 size.)

In regards to your animation question, those are the only animation options, but there have been a lot of creative community ideas for working with those animations features to allow for some more functionality. There are some community examples shared in this thread. 
Jackie Chu
7 years ago12/17/13 at 3:37 pm (UTC)

Hi Ashley,

Thank-you so much for your reply, yes the  zoom picture was exactly what I was looking for! I was actually clicking it but I didn't resize the picture to smaller beforehand so it wasn't doing anything.

In the thread on animations there is an interaction a forum member posted here:

http://community.articulate.com/cfs-file.ashx/__key/CommunityServer.Components.Avatars/Move-across-screen_5F00_motionpath_5F00_timeline_5F00_masking.story

Would you be able to explain how to create the mask effect on the first slide?

Kevin Thorn
7 years ago12/17/13 at 5:36 pm (UTC)

Hi Jackie,


The masking effect is really quite simple. On that slide there are four objects:

  • The frame
  • The character
  • A shape the same size as the slide
  • A shape the same width as the frame and the height is equal to the distance from the bottom of the slide to the bottom edge of the frame.

The trick is to sandwich (layer) the objects in an order that supports the mask effect. Here's the breakdown:

  • On the bottom (object on bottom of the timeline or farthest in the back) is the big shape that's the same size as the slide. You don't really need this shape as you could change the slide background to a color of choice and get the same results. Just need to ensure it's the same color as the smaller shape
  • Next is the character.
  • On top of the character (in the timeline) is the smaller shape. It's positioned just under where the frame will go.
  • Finally, the top most object (in front) is the frame. With the frame, and the smaller shape both on top of the character, it appears the character is just inside the frame. The smaller shape and the background shape are the same color so it appears to be a seamless shape/color.
  • Last thing is to set the character to a Fly In from Bottom animation. When it flies in, you won't see it until it appears in the frame.

Does that answer your question?

Sign In to Reply