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.
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.
This brings you to the edit mode, where you can customize the project.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
Replacing the 360 photos
To help with navigating the scenes, there are key shortcuts for each scene:
J= Start screenK= BeginningL= MiddleP= 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.
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.
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.
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.
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.
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.
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.
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.
After publishing, your project can be shared anywhere by simply sharing the URL.
Idia Erharuyi (Pixelface Oy/Vizor.IO)
[email protected]
Feel free to check out our Public Chat on Slack for more conversation about Patches!