Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to simulate a zoom & pan effect on an image


Learn how to simulate zoom and pan functionality using drag and drop in your interactive prototypes in this tutorial.

You can download the example below here

interactive-prototypes-zoom-pan-animation

 

1. In a new iPhone 6 mobile prototype, drag a dynamic panel onto the canvas, resize it so that it covers the whole screen, and double click on it to edit its contents.

 

interactive-prototypes-dynamic-panel

 

2. Insert an image and resize it so that it’s wider than the dynamic panel (make sure that it is at least 700 x 480) and place it inside the dynamic panel, by moving it within the dynamic panel in the Outline palette.

interactive-prototypes-image-pan

3. To simulate the ‘pan’ functionality, select the image, go to the events tab, add an ‘On Drag‘ + ‘Move‘ event, selecting the image as the component to be moved. In the options below (Left and Top), select ‘With cursor’ in both instances. 

4. Now, click on the event you have just created and select the ‘Add action after selected’ option. Add an ‘On Drag‘ + ‘Insert Into‘ action and select the image from the Outline panel on the right as the component that you want to ‘insert into another’. When the option to ‘select the component you want to insert it into’ appears, select Panel 1. Click OK.

 

interactive-prototypes-pan-event

5. To simulate the ‘zoom’ functionality, drag a button to the canvas, place it at the bottom of the screen (ensure that it is placed outside of the dynamic panel), and rename its ‘Value’ in the Properties panel as ‘zoom +’. Select the button and add an ‘On Toggle‘ + ‘Resize‘ event, selecting the image as the component to be resized. In the options below, change the ‘Easing’ option to ‘linear’. Click OK.

 

interactive-prototypes-zoom-button-settings

6. Now, add the following action: ‘On Toggle‘ + ‘Set Value‘, selecting the button as the value. In the options below, type ‘zoom -‘ into the text field and click OK.

interactive-prototypes-zoom-event

And that’s it! Click ‘Simulate’ and enjoy!


One of our fellow Justinminders has come up with an even easier way to perform Zoom & Pan on mobile app prototypes – note that this won’t work for web prototypes :) Thanks, Stephen! Let’s take a look!

1. In a new iPhone 6 mobile prototype, drag an image and resize it as we have in the above example (at least 700 x 480 px). Place it in the center of the canvas.

2. Drag a button to the canvas, place it at the bottom of the screen and rename its ‘Value’ in the Properties panel as ‘zoom +’.

To simulate the Zoom function:

1. Go to the events tab and add an ‘On Toggle’ + ‘Resize’ event, selecting the image as the component to be resized.

2. Below, change the Width to Calculated and click on the ‘Add Expression’ option. Create the following expression:

3. Drag the image to the expression builder and choose the ‘Width’ option in the drop down below, then drag the ‘X’ function to the expression builder and finally write ‘2’ in the following text box. Click OK. This expression will ensure that the image zooms in horizontally x2 upon simulation. 

interactive-prototypes-simple-resize-event

4. Change the Height to Calculated and create the same expression, changing ‘Width’ to ‘Height’. Click OK. This expression will ensure that the image zooms in vertically x2 upon simulation.

5. Finally, create a ‘linear’ easing effect at 500ms.

To simulate the Pan function:

As in our example above, select the image, go to the events tab, add an ‘On Drag‘ + ‘Move‘ event, selecting the image as the component to be moved. Below, select ‘With cursor’ in both the Left and Top instances.

Tip: Ensure that the image that you want to perform Zoom & Pan on is placed behind all other elements, otherwise these elements won’t function properly upon simulation and may become hidden whilst simulating the pan effect. To avoid this, make sure that all elements apart from the pan image have the ‘Always on top’ option selected in the Properties tab. Keep the element order as you would have in a regular prototype (i.e. ensure that elements are placed in the correct hierarchy by right clicking on them and rearranging the ‘Order’ where necessary).

interactive-prototypes-always-on-top-ui-elements

And that’s it! Click ‘Simulate’ and enjoy!

 

Next tutorial > Create a contact list in your interactive mobile app prototypes

3 Comments

  1. Stephen

    May 5, 2016 at 2:37 am

    A quicker way & less resource hungry (no need for Panel) to zoom in & out is to use the Resize as follows:

    To Zoom-in On Tap
    Width = Calculated –> select Add Expression –> selected object (Width) x magnification factor required e.g. 2X

    Height = Calculated –> select Add Expression –> selected object (Height) x magnification factor required e.g. 1.5X

    To Zoom-out On Toggle
    Width = Calculated –> select Add Expression –> selected object (Width) x magnification factor required e.g. -2X or set to current Width

    Height = Calculated –> select Add Expression –> selected object (Height) x magnification factor required e.g. -1.5X or set to current Height

    Stephen

    • admin

      May 10, 2016 at 10:08 am

      Thanks, Stephen!

    • admin

      May 26, 2016 at 9:36 am

      Hi Stephen! We’ve added your suggestion above in the tutorial so that all of our users can benefit from these steps :) Thanks for your help!