Step 1: Download POV Mobile Stories and Resources
Before you get started, you'll need a few things:
- A website that allows you to upload files and folders. (You don't need to install any special software on your website's server.)
- A means to connect to the website, such as an FTP application.
- The POV Mobile Stories web files (Download the Github Project)
- A copy of the POV Mobile Stories Storybuilder template ( Google Sheet). You will need a Google account if you want to use the template to build your story, which you will need unless you are an advanced user comfortable with using JavaScript.
- Optional: Download or make a copy of the Google Drawing for the POV Mobile Stories Story Overview [ PDF, Drawing] and Top Screen Storyboard files [ PDF, Drawing].
Step 2: Storyboard
Use the POV Mobile Stories storyboard templates (the Story Overview and the Top Screen Storyboard) to plan your story, tell it clearly and prepare everything you need in advance.
Once you have an idea of what story you want to tell, storyboarding will help you see your story and show you everything you'll need for your production and post-production steps.
The Story Overview
The POV Mobile Stories Storyboard Overview lets you see the structure of your whole Mobile Story as a backbone of "Top Screens" with additional content available in optional "Bottom Screens." You can make copies of the story Overview template as necessary when you have more than 4 Top Screens. (Note there is also an Intro Screen that serves as a preview to your Story while it is loading - you don't need to include it in in the Overview.)
Each box represents a Screen. For each Screen, you can enter a description or draw a sketch to visualize your idea.
Duplicate the Story Overview template (Google Drawing) or download PDF template.
Storyboarding Your Screens
INTRO SCREEN
The Intro Screen is the opening image of your mobile story. It can only be an image. Be aware that there will be a "Start" button in the middle of the image, so please design accordingly. And note that it is not a part of the Story Overview template.
TOP SCREENS & THE TOP SCREEN STORYBOARD
Top Screens can contain a video that is less than 10 seconds, an image, or an image with audio. Top Screens are loaded in advance, so it is critical to compress them for mobile viewing.
The POV Mobile Stories Top Screen Storyboard helps you treat each Top Screen like a 10-second short film. You can share the document with collaborators as a Google Doc or as a printed document.
Duplicate the Top Screen Storyboard (Google Drawing) or download PDF template.
BOTTOM SCREENS
A Bottom Screen, if you choose to have one, will be seen by the viewer after swiping up or pressing down key on keyboard. A Bottom Screen can be a Video or HTML with text, images, and videos.
Note: POV Mobile Stories comes with its own style sheet , which you can see below.
Step 3: Production: Go Make Your Story!
Collect your assets or produce video with your camera or phone.
If you are creating video with your phone or camera, remember to record vertically. Here is article with tips to shoot and edit vertical videos.
When exporting video, they should be exported for HTML5 video. Read this article to understand HTML5 video.
Step 4: Publish your story with POV Mobile Stories
Add your assets to your project, upload to the web and share.
- Extract the POV Mobile Stories zip file.
- Copy your media files to the production/assets/media folder.
- Plan where you will upload the files. For example, http://mywebsite.com/my-story/. You will need to know this URL before you enter data into the story template. Your media files will then be located in a URL something like "http://mywebsite.com/my-story/assets/media/video1.mp4" You can verify they are there by visiting the URL in a web browser.
- Fill in the POV Mobile Stories Storybuilder template spreadsheet to match your Story Overview. Each row in the template represents a pair of Top and Bottom Screens. Enter content in the appropriate cells. Note: Do not enter double quotes into the spreadsheet, and all cells should only contain one line of text (no extra spaces or extra lines).
- Copy the JSON output column and validate your code using http://json.parser.online.fr/ website. If you don't see any error then paste it into production/assets/story.json. Please delete the useless code if there is any, and double check codes. If it does not validate, then review your Google Sheet to look for errors.
- Upload all the files from production folder to "my-story" folder in your own server.
- Navigate to your story by going to http://mywebsite.com/my-story/.