Working with Racontr


Racontr, like Klynt, has been designed and built to allow storytellers to create interactive experiences with their material. But unlike Klynt, Racontr is currently a cloud-based application. Movies can become multimedia, data can become dynamic, and audiences can be gathered and cultivated within your projects.

The advantages of a cloud-based app are self-evident: no downloads are required in order to start a project, for one. The web-based aspect also introduces a social element to Racontr, allowing other site users to comment on your work after you publish it. Having a developing project online allows for a team of makers to be highly collaborative: multiple team members can work remotely on the project at the same time. However, it’s important to note some Dropbox-style issues with the cloud’s Autosave function: if two people are working on the same page simultaneously, you can’t be sure which version was saved by the program. When developing your interactive experience, you’re also reliant on Racontr’s website being functional at all times. After completion, though, project files can be downloaded for €149 fee, to be rehosted elsewhere. As Racontr’s site is still in beta, this is a necessity for now.

Racontr, the interactive storytelling platform from Djehouti on Vimeo.

The group that developed Racontr also organises Storycode Paris. They’re French-based, obviously, and so the default language of the Racontr site is French. If you’re not a francophone, be sure to scroll down to the bottom of the Racontr home screen before you log in. There, you’ll find a British flag icon, which will translate most of Racontr’s pages into English.

A dynamic project can be created with Racontr in a few weeks, with some media assets to use as raw materials and a little design know-how. “The concept is that if you are a graphic designer, or like a graphic designer, you can make something”, says Gerald Holubowicz, our hackathon leader at Encounters Bristol and one of the Storycode Paris team. Smoking 2.0, an interactive project which mapped contemporary smoking practices, was made in three weeks at a workshop in Paris. Participants used Google Docs, embedded into Racontr, to create an input form for an audience questionnaire about their own smoking habits. Holubowicz points out that including a form can not only bring you more information about your chosen topic, but “can serve as a validator” for a project (that is, if you present it at the end of the experience, you’ll find out how many people actually made it all the way to the end). Clickable parts of the interface were indicated with a red flash, providing a tutorial for the user within the interface by showing them how to navigate within the project.

Mike Knowlton, one of the founders of the Storycode group, described Racontr at a Tow-Knight Centre talk in May: “It’s different from ‘website-in-a-box’, crank-it-out type of things. This is more like Flash, but it creates HTML5, CSS3 compliant code”. But it does have a striking capacity for coping with wide ranges of material, and our own hackathon showed that, as Gerald said, fully-fleshed projects can be made in weeks, rather than months of development. The level of compatibility with other formats is impressive: for example, you can upload your Photoshop files straight into Racontr without converting them first. It also automatically converts all of the major video formats. However, the Racontr team do recommend resizing images to your desired dimensions before uploading them, to “avoid time-consuming resizing when uploading your content in Racontr”. It might seem like a minor point, but it soon becomes major if it’s not observed: if you come to a program like Racontr with a completed project (a film, an album, a curated collection of photos), and you’re looking to add interactivity, don’t necessarily expect to be able to simply throw everything in and then modify it to specification within the program itself.

It is possible to have multiple projects in development on your account, and you can switch between them easily on your account page. Click ‘editor’ to resume working on them. In the header of the ‘scenario’ screen, you will find a navigation bar that can take you to your media library, or let you set the project’s page properties. In this pop-up screen, you can name your project, and make it compatible with ‘dinosaur’ versions of IE simply by ticking a box. If required, change the canvas size for custom display. You can choose between fixed size and full screen, and if you have a project full screen, you can modify the iframe to control and adjust it further. This is a particularly useful feature for when your projet is finished and in circulation: clients or distributors don’t have to host a project themselves, but they can embed it with the iframe code. Bear in mind that the project cannot be adjusted once it has been exported: if a project was made in 900px frame, it might get compressed when embedded elsewhere. And if you have a Google Analytics account, the page properties pop-up is where you put in the code to track statistics on usage. The fonts option, meanwhile, allows you can choose between the Racontr library or upload your own. After you’ve chosen your preferred settings, go back to ‘scenario’ to create your home page.

Editing each page, and its features, has been streamlined for ease of use. A very simple vertical toolbar is to be found on the left side of the screen. It allows you to control the content and actions of each page you edit: the embedded media, the hyperlinks, and the animations. You would usually require a jQuery library to get a similar level of creative control over animating your web pages. Here, the system becomes a combination of drag and drop, and then setting the parameters for each movement you want to create. Import your media by clicking the plus sign, and create an ‘action layer’ to make the asset dynamic in some way. Action layers can be resized manually, by grabbing the corner of the box. It’s important to rename every sequence for clarity – but also be sure to name every layer descriptively, as well as every page and piece of media. Click on the lowest icon in the vertical toolbar to see your layers listed according to their level on the page (that is, which assets and actions are on top of which. This becomes important as you add more layers). Select multiple items on the list to lock them and move them together. As well as the animation options given by action layers, there are options for simpler elements of design. You can generate basic geometric shapes to use as borders and backgrounds for text and other media. Tweaks to the shape’s opacity, its corners, its colour, can be made through the ‘element properties’ icon in the toolbar.

To animate your elements, you must create keyframes in your timeline. The timeline can be found minimised at the bottom of the screen. Keyframes can be moved at will, and deleted easily. To decide what will happen when an icon is clicked, go to ‘click action’. Tell ‘click action’ which type of action to apply – parameters such as width, scale, and opacity can be controlled. Changing the opacity to zero will cause the element to disappear when clicked, and you can time the fadeout with the delay option. By clicking ‘back’, you can reverse the action.

Racontr’s FAQ contains useful info such as a list of Racontr keyboard shortcuts. For those stuck for inspiration, or who need help assembling interactive features, there are a few templates, plugins and freebies available. It’s recommended that Racontr is used with Chrome rather than Firefox or IE, and there is currently no responsive option. Racontr is free for the first 500mb, and you can buy more space on the cloud as you develop more projects (one extra GB for €5/month, or five extra GB for €20/month), or purchase plans ranging from €290-990/month (if billed annually). These are obviously aimed as business users and large production companies; but the option remains for indies to make compelling interactive experiences even with limited time and money resources available to them.

Comments are closed.