Using Ai to create Animated SVG's

Using Ai to create Animated SVG's

Let me preface this post by saying that I love the way AI can help us accomplish many of the tasks we need to do to realise our design/development goals. Let me also say I love using SVG files in Pano2VR for their resolution independence and the flexibility they offer.

This tutorial will use Le Chat AI features to update SVG files developed in Adobe Illustrator. From there we will create Custom Hotspot Templates, add them to the skin and project and expose the colors so we can customise the SVG files.

ngrok & Live Update - Mac

ngrok & Live Update - Mac

Pano2VR recently released a new beta version, Pano2VR 7.1. In a recent webinar, What’s New in Pano2VR 7.1, Martin Hopkins showed us how to use an application called ngrok. He demonstrated how remote locations can connect their local devices to your Pano2VR application running on your localhost via a URL and automatically update using Live Update.

In this tutorial, I’ll take you step-by-step through the process described by Martin in the video.

In it, I’ll cover the following topics;

  • Requirements

  • What does ngrok do?

  • Advantages of using ngrok

  • Limitations of Tunnel

  • Signing up to ngrok

  • Installing ngrok

  • Sharing a Project

  • Using a Rebrandly URL Shortener

Intro Animation with Fading Text and a Projection Button - Part One

Intro Animation with Fading Text and a Projection Button - Part One

This two-part “Pano2VR” Intro Animation with Fading Text and a Projection Button tutorial shows you how to create an animated opener that starts as a Little Planet (Stereographic projection) and, over 10 seconds, ends as a Flat (Rectilinear projection) panorama.

During the transition, a text block fades in and out and disappears at the end of the animation, and a small button that allows you to change the projection type appears.

Intro Animation with Fading Text and a Projection Button - Part Two

Intro Animation with Fading Text and a Projection Button - Part Two

This is part two of the “Pano2VR” Intro Animation with Fading Text and a Projection Button tutorial, which shows you how to create an animated opener that starts as a little planet (stereographic) and, over 10 seconds, ends as a flat (rectilinear) panorama. During the transition, a text block fades in and out and disappears at the end of the animation, and a small button that allows you to change the projection type appears.

Creating a Split-Screen Effect in V6 or V7

Creating a Split-Screen Effect in V6 or V7

If you need to compare two 360˚ panoramas side-by-side on a screen, this tutorial will provide step-by-step instructions on creating the files required to achieve the Split-Screen effect.

Two panoramas will be displayed; the left will display a skin that will control the view of the right panorama to match that of the left one reflecting any of the functions enabled in the skin.

Category Menu with Node Popup

Category Menu with Node Popup

This “Pano2VR” tutorial shows you how to use Cloners to create a Category Menu and a Popup window in Pano2VR V7.0.1. The Category Menu will open a popup window with information and clickable node images related to the selected category. Clicking on a node image will take you to that node. Active nodes will have highlighted text and a tick to indicate they have been visited.

Hotspot Templates and iFrames - Update 4/10/21

Hotspot Templates and iFrames - Update 4/10/21

Using Point Hotspots to deliver contextual content is a great way to make your Virtual Reality tours more interactive and provide an enhanced experience for the viewer. The most convenient way to create and deliver the content is by employing .html files and iFrames within the hotspots. Rather than create and manage multiple hotspots this tutorial shows how to use a single point hotspot template and external .html files with multiple hotspots.

This update details how to add the external HTML files to the assets folder in the output project using the Output > Advanced panel. Adding them this way a Garden Gnome Package Output will correctly show the HTML files in the iFrame.

Building a Desktop App (Windows 10)

Building a Desktop App (Windows 10)

Sometimes your client and/or project requires not only an offline project but also one that doesn’t require a web browser when outputting to HTML5.

This “Pano2VR” tutorial shows you how to Create a Desktop app suitable for use on a desktop Mac and works with both Pano2VR and Object2VR projects. The tutorial is based upon the original published by Garden Gnome Software on their website at https://ggnome.com/doc/tip-desktop-app/.

Building a Desktop App (Mac)

Building a Desktop App (Mac)

Sometimes your client and/or project requires not only an offline project but also one that doesn’t require a web browser when outputting to HTML5.

This “Pano2VR” tutorial shows you how to Create a Desktop app suitable for use on a desktop Mac and works with both Pano2VR and Object2VR projects. The tutorial is based upon the original published by Garden Gnome Software on their website at https://ggnome.com/doc/tip-desktop-app/.

Trimming the Tree - Part 1

Trimming the Tree - Part 1

Once you start working in Pano2VR you quickly realise that the Skin Editor is a very powerful part of the software application. The Skin Editor allows us to create unique User Interfaces and Interactivity inside our tours.

However during the development of a project the skin can be quite complex and requires the management of a large number of skin elements, such as interactive Components, Actions and Logic Blocks.

In this tutorial I’m going to take a look at a process that I call “Trimming the Tree”. Step by step you will learn how to reduce the number of elements that have similar functionality reducing the number of elements by over 50%.

Blurred Panorama Background

Blurred Panorama Background

This “Pano2VR” tutorial will take you through the steps on creating a custom skin with the ability to blur and desaturate the current node panorama. The effect, activated by an Action in the skin, applies CSS Filters, Blur and Grayscale, to the current node panorama. A simple tint option is also available.

In this tutorial we will modify the tutorial project file by;

  • Adding Custom Node ID’s

  • Enabling Direct Node Access

    and modify the tutorial skin by:

  • Creating an iFrame that loads another instance of the node panorama

  • Apply CSS Filters

  • Add a Screentint

  • Add an Impermeable element

  • Add a Timer

  • Add Logic Blocks and Actions to control the blur and tint

Note: this tutorial assumes a basic knowledge of Pano2VR V6

Responsive Animated Lower Third Banner - Part 1

Responsive Animated Lower Third Banner - Part 1

This two part “Pano2VR” tutorial show you how to animate a multilevel Lower Third Banner that is responsive to mobile devices such as smartphones.

In the first part of this tutorial we will modify the project skin by;

  • Setting the Z-index of elements in the lower third to manage the stacking order

  • Adding Timers and configuring them to move/change elements in a sequence

Responsive Animated Lower Third Banner - Part 2

Responsive Animated Lower Third Banner - Part 2

This two part “Pano2VR” tutorial show you how to animate a multilevel Lower Third Banner that is responsive to mobile devices such as smartphones

In the second part of this tutorial we will continue to modify the project skin by;

  • Develop a break size to determine at what point we require the responsive logic to apply to the banner

  • Add logic to the Scale property of the lower third banner elements

  • Add logic to hide the Lower Third Banner when the panorama is interacted with