How to create moving and zooming interactive presentations in Intuiface

This new prototype was inspired by Prezi, the elegant online tool that creates moving and zooming presentations using a big canvas. I took on the challenge to recreate a similar presentation builder in Intuiface, and I’m glad to share the end results with this community.

Technical Details
This prototype leverages the following Intuiface features:

  • Scroll collection - This is where your content lives. I used a large background image to setup a big canvas that can be scrolled in all directions. All assets (text, videos, images, etc.) reside within the background boundaries
  • Helix collection - When transitioning between content elements, I leveraged the Depth property of the Helix to simulate the zooming in/out during the panning of the big canvas. This is not a property that you can set directly, so I had to resort to a trick of moving a circle along an X axes and bind that value to the Depth property. Using a converter, the horizontal movement of the circle is being translated into a correct Depth value for the Helix. I used this technique also in this demo - How to create a 3D slideshow
  • Excel Interface Asset - As you save the keyframes encapsulating your content elements, those X,Y offset coordinates of the Scroll collection are stored in an Excel sheet. A screen capture is taken for each keyframe and presented as a thumbnail asset grid

How it works
Here is how to create your own moving and zooming presentations:

  • Download the prototype (30MB) and open it in Composer
  • All the assets in the Scroll collection can be changed with your own
  • Switch to Play mode. You should be able to drag and drop the canvas in all directions
  • Tap the Edit mode button on the top right. Now you can record the sequence of your keyframes (slides)
  • Select Start Over to create a new presentation
  • Drag & drop the canvas and position your content in the center of the screen. Tap the Add Keyframe button. A thumbnail of the selected content appears below. Repeat process for all keyframes
  • You can tap the thumbnails to jump directly to each keyframe
  • Once finished, click Presentation Mode and use the Previous / Next buttons on the bottom of the screen to move between keyframes

Please note that this is just a proof of concept and not a real product. You may encounter Intuiface performance issues if you load the page with too many memory hungry assets. Also, there is no Delete keyframe feature.

While I’m releasing this demo as unsupported freeware, I always welcome your feedback.

2 Likes

Fantastic! Not the first time you’ve come up with visuals I wasn’t convinced were possible. Smart in its creation, generous in your willingness to share. You’re a mensch!

2 Likes

@geoff Thanks for the kind words! It’s always fun to explore novel ways to use Intuiface.

2 Likes

MAN! You have quite the beautiful mind. I don’t know how you imagine and then implement all of these ideas, but I sure am glad that you “share the wealth” and show us how things work behind the curtain so we can use the ideas in our XPs as well. Bravissimo my friend! :tada:

@megan thanks much! I hope you get to use any of these techniques in your own XPs :slight_smile:

1 Like

Thank you, Paolo! This is such rich stuff, and your generosity to share your hard-earned expertise is much appreciated!

1 Like