Skip to main content
HelpHelp Index

Island & Choice Settings

By March 22, 2021September 24th, 2021No Comments

How do I make a button that links to a web page or product?

Choose External URL from the “Links To” pulldown menu in the sidebar (see picture below).

Add a link and tick the box to say whether you want the link to open in another tab. If you are embedding the video, choose this.

You can use any kind of URL to a web page, PDF document, social media account, etc.

For instance, you can just link to a regular web page like https://www.stornaway.io/examples

Other examples of URLs you could link to:

  • Social media platforms allow you to create a URL with the message pre-written (e.g. this link – see more details in the “How do I share to social media” question, below).
  • Use mailto: before an email address (eg mailto:hello@stornaway.io) to make it open a new email to that address.
  • Some e-commerce platforms (like Shopify) allow you to specify a product with an Add To Cart command in the URL. Some need you to set this up.

 

How do I create invisible clickable hotspots?

Invisible clickable hotspots can be created in the same locations as our buttons. These will let you design graphic/animated buttons in your video. You can then make that part of the frame clickable in Stornaway.

This also lets you create clickable areas, people or objects in your video – like the dog with the bone in the demo video on our home page.

Another example would be using a split screen hotspot to make each of these three people clickable. Or see the example of animated buttons at the bottom of the page.

How to make clickable video hotspots

To create a clickable hotspot in your interactive video, choose “Hide the text to create hotspot” in the sidebar of a Story Island.
Our recommendation for starting with clickable hotspots:
Most people arrange their buttons left-to-right on screen. For this, we recommend you use the Left-right Split style with Central Text and Area Overlay.
This will divide the screen left to right into as many choices as you have.
This means that if you have 2 choices, the screen will be split vertically into 2 clickable areas. The left side will be an invisible clickable area for Choice i, and the right side will be an invisible clickable area for Choice ii.
If you have 3 choices, the screen will be split vertically into thirds – Left for Choice i, Middle for Choice ii and Right for Choice iii.
And if you have 4 choices, the screen will be split vertically into quarters in the same way.
For Top-bottom choices, you can choose the Top-bottom Split style.
And to split your screen into 4 quarters, you can choose the Quadrant split screen style – the trick with this is to remember to choose a Location (eg Top-left) for each of the choices.
Below is an example video that’s been made with animated graphic buttons created in the video itself in Premiere.  Invisible clickable hotspots have been created over the top of the buttons and cassettes using Stornaway.
When a cassette is clicked, the next island’s video starts, making it seem that clicking the cassette has triggered the person in the video to select that tape.
This video is silent, but creators often use a sound at the beginning of the next island to add extra feedback to the button being clicked.

If you have any questions or suggestions about this, please let us know at support@stornaway.io

How do I start playing from any island, not just the start?

Yes! Play from here is your friend. You can find it near the top of the Sidebar for every island and tab, just under Name and Description.

When you have published your story, there’s a Public URL for every island – you can find it just next to ‘Play from here’ in the sidebar. This is a link to that specific island, so you can provide links that let viewers jump straight to an island.

This lets you share an individual island on social media, or make a list of links on a web page or create a playable visual map of your story (see our example here)

How do I make the Stornaway.io player wait until a user makes a choice instead of automatically moving on?

ChoosePause at endin the styling section in the sidebar (see picture).

This will freeze frame on the last frame of the video file you upload, and wait for the user to make a choice.

Another way to do this is to create a separate menu screen with a still or moving image:

  • To make a still image menu, create a separate island for the menu, and upload a still image as the island’s Poster Image.
  • To make a moving image menu, create a separate island for the menu, and upload a video to it. Then make one of the island’s choices to loop back to the start of the same island itself, set it as default, and hide that choice by ticking “Hide” next to its onscreen text field. The island will then loop until someone makes one of the other choices.

Pause At End

How does the Either/Or game logic work for alternative paths?

Either/or is a simple form of game logic that lets you create alternative paths for viewers, depending on what they have seen before.
So a simple use for this would be a story where the viewer makes either a good or a bad choice at the start of a story. And then at the end of the story, you show them a good ending if they chose wisely and a bad ending if they chose poorly.
Stornaway does this by checking back to see which islands the viewer has watched and then forking the viewer’s path according to your settings.
We kept it simple to begin with to maximise compatibility with different systems. Creators are using it for quite sophisticated combinations of personality tests and game logic.
You can have up to 6 islands linked from a single choice. We will be adding more variables and game logic soon.
EXAMPLE (with screenshots below)
In the above example of a good/bad choice, you might start with Island A1 linking to 2 islands: B1 (a bad choice: take the knife) and C1 (a good choice: don’t take the knife).

Then at the end, you can add an either/or condition to a button, which says:

EITHER
Link to: X1 (Bad ending – police station)

If the viewer has watched: B1 (Bad choice – take the knife)

OR 
If the viewer has more recently watched C1 (Good choice – don’t take the knife)
then Link to Y1 (Good ending – movie marathon)
The reason it’s phrased “more recently” is because viewers often watch more than once – so they might have chosen to see both B1 and C1 on different viewings, and the player checks which one they have seen on this playthrough.
If the player has seen neither B1 or C1, Stornaway would show them the first link listed here (X1) – but in this case, they will definitely have seen either one or the other.
Either Or Game Logic for Interactive Video 2

How do I make a button that shares a message to social media?

Choose External URL from the “Links To” pulldown menu in the sidebar (see picture below).

Enter a link using one of the pre-written message formats listed below for Twitter, Facebook or LinkedIn.

Tick the box to say whether you want the link to open in another tab (If you are embedding your project, set it to open in a new tab).



To create a pre-written Tweet with a custom message, use the format:

http://twitter.com/share?text=your+words+separated+by+plus&url=yoururlhere&hashtags=yourhashtag

For example this link creates a Twitter post that says, “Get started with the amazing Stornaway” and includes a link to the video with #interactivefilm as a hashtag.

(There should be no line break in the link, even if the browser is showing you one here)

Facebook and LinkedIn no longer allow the pre-writing of custom messages the way Twitter does.

 



To create a pre-written Facebook post, use the format:

https://www.facebook.com/sharer/sharer.php?u=yoururlhere

For example, this link creates a Facebook post that autofills the image and link to your story.



To create a pre-written LinkedIn post, use the format:

https://www.linkedin.com/sharing/share-offsite/?url=yoururlhere

For example, this link creates a LinkedIn post that autofills the video player.


What size should button images be?

We recommend using invisible clickable hotspots rather than button images if you’re making videos for the web. Our button image feature was designed for TV and game engine workflows. On browsers in smaller screens like mobiles, the button images don’t resize proportionally to stay in the same space.

For web video, invisible clickable hotspots will give you a much nicer experience on all screen sizes.

Hotspots let you create graphic buttons exactly where you want them in your video or image, and then in Stornaway made clickable invisible hotspots over the top of the button area. The graphics in your video or image will act like buttons – and resize proportionally on any large or small screen size.

See the “How do I create invisible clickable hotspots” section above for more details and recommended settings.

If you do want to use Button images for TV or game engine workflows.

As above, be aware that these will not resize with different screen sizes. The size of button images should be the same size that they’d be on the screen at a full 1920×1080 HD image. They will appear in the positions that our normal buttons would appear, according to whichever button style you chose.

So for example with our default ‘bottom buttons’ style, with 2 choices, button images of 450x150px will appear about the right size in place of the text buttons. That’s always a good starting point for you to test with – make them bigger or smaller. 

You can use a transparent background in a png or a gif image, and add invisible margins to nudge their positions.

Another good way to decide the right size for you is to mock them up in a 1920×1080 Photoshop image, place them where you want them to be, and use Crop to see how big they need to be as individual button files.

The “selected”  button is the image that will appear when the user clicks the button.You can upload jpg, png or gif, including animated gifs.