How to convert your PDFs into interactive brochures using FlowPaper Elements
Share your brochures online as interactive online publications using FlowPaper Elements
This tutorial will explain how the Elements template works and it will go through features such as:
How to animate headers
How to animate text
How to add a video, an image and a link
How to make an interactive online brochure using just a PDF
Moving from a static PDF file to a dynamic HTML5 publication
1. Choosing the right template
As always, start by importing your publication, select the 'Elements' template
2. Pick your page turning style
Then select one of the Elements templates. This tutorial uses the sliding pages template.
3. Select font conversion mode
To keep the original PDF fonts, select the first option in the pop-up window, then click continue to finish the import.
How to edit your PDF and add animations
Because FlowPaper has converted your PDF into editable HTML5, all elements are now accessible and can be edited.
1. Entering edit mode
The main difference between Zine templates and Elements templates is that Elements import each element within your PDF as individual objects.
2. Manipulating an element
You can view this by switching to the edit mode, where you can select each individual element. Here you can also see that FlowPaper has identified the different types of elements, such as headers and body text. Select the header and hover your cursor above the object to see this. For a header, you will see H1 appear in the top right corner of the selected element.
Modifying publication animations
1. Applying animatinos to your headers
To add an animation to the header, go back to the design mode and click the style-setting icon that is visible next to the H1 marker. On the right-hand menu, you can see the H1 text style. The animation drop-down menu is set on none as default. Click on it to see all the different options. For this tutorial, we have selected the 3D rotation option. When you have selected your style settings, click the apply settings button to save the selection.
2. Applying animatinos to your body text
The same method is used to change the body text, just make sure you do the changes under the “body text style” section in the menu.
Adding interactive elements to the PDF
1. Adding links, videos or images
To add a video, image or link to your publication just go to the page/section in the publication that you want the element to appear. Double click the area to switch to edit section. For this tutorial, we have decided to add a video.
2. Accessing the interactivity tools and adding a video
Select the add video option on the menu.
3. Entering video source
A pop-up window will appear with the option to choose either to embed the video or to use a self-hosted video. We will select the embed video for the tutorial.
Make sure you have the correct URL and paste into the text field. A preview of your video will appear to make sure you have pasted the correct video.
If you wish the video to display at maximum size when playing, just tick the box under the preview button. Click the ok button and you will get back to the edit screen.
4. Adding the video to the publication
With your cursor, draw the area where you want to video to appear. You don’t need to worry about not getting the area perfect, FlowPaper will adjust this as you will see in the preview mode.
If you selected the maximise option, you will see this take effect if you click the video play button.
To add an image or link, just switch back to the edit mode and redo the steps you did to add a video.