Patches 360 Photo Story Template Tutorial

This tutorial shows how to use the 360 Photo Story template to create a story with 360 photos, music and audio narrative. More Patches tutorials can be found from https://techstart.github.io/.

Getting started

First, go to https://patches.vizor.io/templates where you’ll find the project named 360 Photo Story.

The Start button begins the story and the Next buttons go to the next scenes. In the last scene the End button goes back to the Start screen.

The Start screen First scene with the Next button Second scene Last scene with the End button

Each scene has their own 360 photo, which can be replaced.

To edit the template, click on anywhere in the experience and it will show icons in the middle. Click on the Pencil icon, which is the Edit button.

The icons: VR Mode, Full screen, Edit, Share

This brings you to the edit mode, where you can customize the project.

Edit mode view

First, click on the Duplicate button at the top left corner on the toolbar. This will create a copy of the project for you to work on.

Duplicate

To switch between the Build and Program modes, you can either press Tab on your keyboard, or click on the Build and Program buttons on the toolbar.

Build and Program buttons

In Program mode you will see the patches that contain all the content in the project. Patches are modules, which together combine a computer program. In this case the program is our template, which switches between four scenes.

Program view showing the patches

In the middle are the patches for all the scenes. These purple patches are called nested patches, which means they have more patches inside of them. The blue “Switch Scenes” patch shows the scenes and switches between them.

To look inside the Scenes, click on the edit button on the nested patch (pencil icon).

Clicking on the Pencil icon enters the nested patch

After entering a nested patch, you can go back to the previous stage by clicking on the patch names in the Breadcrumb at the top right corner of the screen, below the toolbar.

Navigating the patches

More tutorials about Patches basics can be found at the Techstart Github.

Changing the title texts

When you enter the Scene 0: Start screen patch, you’ll see the contents of that scene.

Start screen contents When you made a duplicate of the project, the title text may have disappeared from the view. You can get them back by reconnecting the blue text boxes to their patches.

Reconnect the text patches

To change the title and description, simply type your own text into the blue text boxes.
To view your project from the VR camera view, click on the camera button at the bottom right corner of the screen, or press V to switch between the VR and editor cameras.

Camera icons at the bottom right corner of the screen. Left: Editor camera. Right: VR Camera

Switching to VR camera lets you see how the scene would look like in a VR headset. Press Tab on your keyboard to hide the patches and see your scene.

Scene in VR camera view

Go back to the program view with Tab to see the patches. When you click on the Project Title or Project Description patches, you can see arrows appear in the scene. These arrows are the move tool, and you can move the text around to a place you like. Hide the patches again to click and drag the arrows.

Moving the texts

If you cannot see the move tool in build mode, try to press H on your keyboard. This hides or shows all the tools in the view.

Changing the background color

To change the background color of the start screen, click on the edit button on the Background Sphere patch.

Changing the background color

Inside you’ll find a Color picker, where you can change the color. Above it is a Texture patch where you can also upload your own texture image.

Color changed

Replacing the 360 photos

To help with navigating the scenes, there are key shortcuts for each scene:

  • J = Start screen
  • K = Beginning
  • L = Middle
  • P = Ending

Press K to to see the Beginning scene with the blue grid and the Next button.
To change the 360 photo, go to the Scene 1: Beginning patch. There you can see the Texture patch where you can upload your own 360 photo.

Texture location

Click on the pencil icon on the texture to open the image file window. Here you can choose an image from the Vizor library, or upload your own. To upload your own 360 image make sure you are logged in to your account and click on the Upload tab. Click on Browse to look for your own 360 image on your computer, select it and click upload.

Uploading an image

Now you’ll have your own 360 image in the scene. Repeat this step for the Middle and Ending scenes. Switch between scenes with the J, K, L and P shortcuts.

Adding audio tracks

Adding audio works the same way as adding images in the previous step of the tutorial.
Go to Root in the Program view, and go inside the Audio Control patch. There are three patches for music files, and three for audio narrative files if you have recorded speech.

Music files Voice audio files

To add music to the first scene click on the Source button on the blue Music1 patch.
This brings up a similar window as the image uploader, except for this you upload a music file. The second scene music is on Music2 and the ending is Music3.

To make the audio files work on most browsers and devices, it’s recommended to use .ogg or .m4a file formats. You can convert audio files to this format with free audio editor software, like Audacity for example.

Freesound.org is a good place to find royalty free music and other audio for your project. The music in the template are from there.

Scene timer

In the Root of the Program view, there’s a patch called Timer. This will change the scenes automatically without the viewer having to press the next buttons.
To enable or disable this, click on the On/Off button.

Timer is On

Under the On/Off toggle are three patches for the scene lengths. In these you can write numbers as seconds. Those seconds tell how long the scene will show before it switches to the next one.

The seconds for each scene

For example, if you have a voice recording that is 50 seconds long, you can write that number on the timer and it will change the scene when the audio has played.

If you use the timer and want to disable the Next buttons, you can do so by disconnecting them from their scenes.

Disconnect or reconnect the button

Publishing your project

To publish your project you have to be logged in to your account.
Click on the Publish button at the top right corner of the screen, and it will ask you to give your project a name and if you want to publish it as a Public or Private project.

Publish icon

Publish window

It is good to publish your work after making major changes to the project, as it works like saving. You can then continue editing without losing any progress in case if the browser crashes for example.

Share with the address

After publishing, your project can be shared anywhere by simply sharing the URL.

Idia Erharuyi (Pixelface Oy/Vizor.IO)
idia@vizor.io

Feel free to check out our Public Chat on Slack for more conversation about Patches!