Quarterly Report

  • icon-indesignInDesign file
  • Kiosk
  • icon_iOsiOS/Android
  • 8 screens
  • Smartphone/Tablet
  • Navigation Menu

Tutorial to create this App

Open 480interactive on your computer and click on the button “Create new App“.

  1. Choose the name of the project. For example “My App“.
  2. Choose the location of the project. By default, the program automatically chooses the workspace where all projects are saved.
  3. Choose the type of App. Select “Kiosk App“.
  4. Click on the “Create” button.

You already have the App created, but you do not have any added content yet. You’ll add it after converting the Adobe InDesign template to Issue format.

To add an interactive InDesign document to your App, the first step is to convert it into “Issue” format, which is a format compatible with tablets and smartphones. In order to do so, you can install the 480interactive plugins for InDesign.

In the download you will find two files, 480i Tags and 480i Script:

  1. 480i Tags, Is a plugin that will allow you to create interactive effects with InDesign.
  2. 480i Script, Is a plugin that will allow you to convert an InDesign document into Issue format that you can add as interactive content to your App.

 

 

To install these plugins, open Adobe InDesign and follow these steps:

Install 480i Script

  1. In the files you have downloaded you will find a file called “480i Script.jsx”. Select that file, right click and choose “Copy”.
  2. In Adobe InDesign, select the “Script” panel. (If you have it hidden, you can see it in: Window ⇒ Utilities ⇒ Script)
  3. Right click on the “Application” folder and choose “Show in finder” on Mac or “Show in Explorer” in Windows.
  4. The InDesign Scripts Panel folder will open automatically.
  5. Paste the file “480i Script.jsx” that you copied previously.

 

You already have “480i Script” installed in InDesign.

 

 

Install 480i Tags

  1. In Adobe InDesign, open the “Tags” panel. (If you have it hidden, you can see it in: Window ⇒ Utilities ⇒ Tags)
  2. Display the panel menu by pressing the button at the upper right and choose the “Load labels” option.
  3. The file explorer will open to choose a file. The file you should choose is «480i Tags.xml».

You already have the tags installed. Now you have installed the 480interactive plugins for Adobe InDesign.

 

Convert the InDesign document to Issue format

Once you have installed the 480interactive plugins for Adobe InDesign you can now convert the Adobe InDesign document to Issue format so that you can add it to the App. To do this, follow these steps:

  1. Open the InDesign document for the template you downloaded (you can use the * .indd file or the * .idml file)
  2. In Adobe InDesign, go to the “Scripts” panel and double-click “480i Script.jsx”.
  3. Choose the name of the Issue. For example “My App”.
  4. Under “Destination”, select the project you created with 480interactive.
  5. Click on “Convert to Issue”.
  6. When finished exporting, click “OK”.

 

In the next step we will see how to add the Issue format of Adobe InDesign to 480interactive

  1. Return to 480interactive.
  2. Select “InDesign Issue” in the Add content section and click “Add”.
  3. Select “One Orientation”.
  4. Choose the InDesign export you made in the previous step.
  5. Select the application icon from the “App Settings” menu. You will find it in the download folder of the template.

 

Customization of kiosk colors

Now we will change the colors of the theme to customize the colors of our App. To do this we go to “Settings of the App”> “Visual aspect”> “Colors”. Here we can customize the colors of the kiosk and the top menu bar to suit our needs.

First of all, you must have the free “480i Viewer” app installed on your tablet or smartphone. This App is necessary to be able to preview your App projects on your own tablet or smartphone. To do this, access from your smartphone or tablet to the App Store or Google Play and search for «480i Viewer».

Now, at 480interactive, click on “Export App” on the left side of the top menu bar and then open the App 480i Viewer on your device.

Once the export process is finished a window will open that shows the steps to follow from your device. Follow the directions:

  1. The App is automatically added to 480i Viewer so you can try it out.
  2. In 480i Viewer, click the “Download” button in the publication. Doing so will become a “View / Open” button.
  3. Click on “View / Open” to open your application and access its contents.

 

Congratulations! You already have the app on your device. In the following steps we will see how to edit the InDesign template and add interactivity to the App.

Tutorial to edit the InDesign template and add interactivity

This template you downloaded has an InDesign multi-device design, which consists of a single design that is suitable for all smartphones and tablets.

The pages have a vertical screen format of 1000x1334px. It is a document format that can be viewed on devices with aspect ratio 4: 3 or 16: 9.

This page size will allow us to make a unique design compatible with any screen resolution (iPhone, iPad, Android Smartphone and Android Tablet).

The guides in the document mark the area you see on all mobile devices. The space that is left out of the guides will only be seen on some specific devices, like iPad and some Android tablets. Therefore, it is advisable to include within those guides all the content that we want to be seen safely in any device.

Only parts of the elements that can be neglected at the visual level will be left out of the guides and will not conflict with the interactivity and understanding of the application, such as the sides of a photograph that acts as a page background or parts of graphics Present in the layout that have no significance.

In the following image, the yellow shaded area is the area within the guides. That area is the one that looks perfectly in any device.

If you want more information on how to layout using these guides. Here you have a specific tutorial

In this section you will learn how the interactivities of the InDesign document have been configured to work correctly in the application created with 480interactive.

Interactive Index / Navigation Menu (Page 1 and 2)

Go to page

Both page 1 and 2 act as general contents index and must contain 4 buttons that take us to the different screens of the application.

The difference between page 1 and page 2 is that on page 1 we have an animated image as background in which, through a sequence of images, the screen is formed with the contents of the index. Simply added this page to give you a greater visual appeal that we will only see each time we open the application, once we start browsing the App we use index page 2.

To configure the interactivities of these two pages, in the configuration of each button we indicate the page to which we want to send the user, putting the page number in the ““Page”” field::

  1. Above the first icon, we have created a rectangular frame with a size that occupies the area that can be pressed in the design
  2. With the rectangular frame selected, we have converted it to the button from the “Buttons and Forms” panel
  3. We add the action “Go to page” and in the page field, we assign page “3”
  4. We repeat this same process in the rest of icons to go to page 4, 5, 6 and 8 respectively.

 

 

 

Go to URL

At the bottom we add a button to access the web page with a browser external to the application. For that:

  1. Select the frame from the text box.
  2. With the rectangular frame selected, we convert it to a button from the ““Buttons and Forms””panel.
  3. We’ve added the action “Go to URL”.
  4. In the URL field we write the web address to which we want to carry when the button is pressed, preceded by the prefix “external”, so that it will be with a browser external to our application. For example, if we want to go to “https://www.480interactive.com” we will write ““externalhttp: //www.480interactive.com”” in the URL field.

 

 

 

If you need information abput this interactivity you can consult these links: What are InDesign buttons? 

 

Animated Picture

Page 1 contains an animated background image in full screen. For that:

  1. We create a rectangular frame delimiting the zone in which the sequence of images of the “Animated image” will be shown. The frame should have the same size as the pictures or a proportional size, in this case 1000x1334px. This frame will be the container of the Extra Element “Animated Image” that we will add to 480interactive when we configure the project.
  2. We name the rectangular frame we created from the “Layers” panel, trying not to repeat the same name for different containers in the same InDesign document. For example, “Animation P1”.

 

 

When we add this Extra Element to the App, we should look for a container with the name “Animation P1”.

 

Our lastest numbers (Página 3)

This page contains an animated image. For that:

  1. We create a rectangular frame delimiting the zone in which the sequence of images of the “Animated image” will be shown. The frame should have the same size as the pictures or a proportional size. This frame will be the container of the Extra Element “Animated Image”” that we will add to 480interactive when we configure the project.
  2. We name the rectangular frame we created from the “Layers” panel, trying not to repeat the same name for different containers in the same InDesign document. For example,”88“.

 

 

When we add this Extra Element to the App, we should look for a container with the name “88“.

 

Now the button at the bottom to go to page 2, where the index is:

  1. We have selected the icon
  2. We have converted it to button from the “Buttons and forms” panel.
  3. We add the action “Go to page” and in the page field, we assign page “2”.

 

If you need more information about this interactivity you can consult these links: What are InDesign interactive buttons?

 

Overview (Page 4)

Configuramos el botón de la parte inferior para ir a la página 2, donde se encuentra el índice:

  1. We have selected the icon
  2. We have converted it to button from the “Buttons and forms” panel.
  3. We add the action “Go to page” and in the page field, we assign page “2”.

Repeat the same process for the bottom right button that will take us to the next page, for that we assign page “5“.

If you need more information about this interactivity you can consult these links: What are InDesign interactive buttons?

 

2019 (Página 5)

We set the button at the bottom to go to the previous page, page 4:

  1. We have selected the icon
  2. We have converted it to button from the “Buttons and forms” panel.
  3. We add the action “Go to page” and in the page field, we assign page “4”.

 

If you need more information about this interactivity you can consult these links: What are InDesign interactive buttons?

 

This page also contains an animated image. For that:

  1. We create a rectangular frame by delimiting the area where the “Animated Image” sequence of images will be displayed. The frame should have the same size as the pictures or a proportional size. This frame will be the animated image” container that we’ll add to strong>480interactive when we setting up the project.
  2. We put a name in the rectangular frame that we have created from the Layers” panel, trying not to repeat the same name for different containers in the same InDesign document. For example,”Animation P5“.

 

 

When we add this Extra element to the App, we should look for a container with the name “Animation P5“.

 

Engage your people (Page 6)

Configuramos el botón de la parte inferior para ir a la página 2, donde se encuentra el índice:

  1. We have selected the icon
  2. We have converted it to button from the “Buttons and forms” panel.
  3. We add the action “Go to page” and in the page field, we assign page “2”.

We repeat the same process for the bottom right button that will take us to the next page, for that we assign the page “7“.

If you need more information about this interactivity you can consult these links: What are InDesign interactive buttons?

 

Page 7

This page also contains two animated images. For that:

  1. We create a rectangular frame by delimiting the area where the “Animated Image” sequence of images will be displayed. The frame should have the same size as the pictures or a proportional size. This frame will be the animated image” container that we’ll add to strong>480interactive when we setting up the project.
  2. We put a name in the rectangular frame that we have created from the Layers” panel, trying not to repeat the same name for different containers in the same InDesign document. For example,”35“.

 

 

When we add this Extra element to the App, we should look for a container with the name “35“.

We repeat the process for the animated image of “88“. This time, we can assign the same name to the container, as it will contain the same image sequence as the animated image on page 3..

 

We also set the button at the bottom to go to the previous page, page 6:

  1. We have selected the icon
  2. We have converted it to button from the “Buttons and forms” panel.
  3. We add the action “Go to page” and in the page field, we assign page “6”.

 

Finally, this page also contains buttons to show and hide items. When we click on the buttons, they will hide themselves independently and will display other buttons that consist of text boxes. For that:

  1. Select the grouped object”+” and convert it to a button from the panel of “ Buttons and Forms
  2. We do the same with the text box
  3. Assign the action “ Show / Hide buttons and forms“to both buttons
  4. At “Visibility“, we set each button to hide itself and, at the same time, show us the button that complements it

 

 

We repeat the same process for the other button (+).

If you need more information about this interactivity you can consult these links: What are InDesign interactive buttons?

 

What´s next (Page 8)

Page 8 contains an animated background image in full screen. For that:

  1. We create arectangular frame by delimiting the area where will be displayed the “Animated Image” sequence of images.he frame should have the same size as the pictures or a proportional size, in this case 1000x1334px. This frame will be the Extra element that we’ll add to 480interactive when we setting up the project.
  2. We put a name in the rectangular frame we created from the “Layers” panel, trying not to repeat the same name for different containers in the same InDesign document. For example,Animation Galery P8“.

 

 

When we add this Extra element to the App, we should look for a container with the name “Animation Galery P8“.

 

Finally, we configure the button at the bottom to go to page 2, where the index is:

  1. We have selected the icon
  2. We have converted it to button from the “Buttons and forms” panel.
  3. We add the action “Go to page” and in the page field, we assign page “2”.

 

 

 

If you need more information about this interactivity you can check this links: What are InDesign Interactive Buttons? / Show and hide InDesign buttons

Extra Elements are plugins that you can include in InDesign to take the interactivity of your App to the next level. These elements allow you to add features that would not only be possible with InDesign and that you can add from 480interactive , such as: Image Galleries, Animated Images, WebZip, … You can get more information about Add Extra elements in InDesign.

To add an extra element, you must first have the InDesign content added to the App. In order to add an Extra Element, first of all create a rectangular frame in InDesign c with the size you need, which Will act as a container for items that we’ll add later from 480interactive. Once created, name it from the Layers tab.

In this template we have the Extra element “Animated image”. Here’s how to add it to the App from 480interactive:

Add animated image

Right-click over “Extra elements” and choose “Add Extra Element“. In the next dialog select “Animated Image“.

Within “Extra Elements” sa new entry has been created. Select it to display the configuration options and follow these instructions:

    1. Choose the container“Animation P1”. The container name matches the InDesign rectangular frame name.
    2. Click on “Añadir” and select all images in the sequence.
    3. Click on “Seleccionar” to add the images in the sequence.
    4. In the field “ Step (seconds) ” assign a time. For example, 4.0

Repeat the same process to add the remaining four animated images with the following settings:

  • Animation P5“, with a time of “ Step (Seconds) ” of 1.5 seconds.
  • Animation Galery P8“, with a time of “Step (Seconds)” de 6 seconds and check the box “Bucle“, to repeat the image sequence indefinitely.
  • 35“, with a time of “Step (Seconds)” de 1 seconds.
  • 88“, with a time of “Step (Seconds)” de 1.5 seconds.

 

You already have the App finished. Just send it to your tablet or smartphone to try it out.

    1. At 480interactive, click on “Export App” on the left side of the top menu bar and then open the App 480i Viewer on your device.
    2. When finished the export will open a window with the devices that you have added to be able to send the App to any one of them.
    3. Select the device to which you are going to send the App and press the “Send” button or scan the QR code from the 480i Viewer application on your device.
    4. In 480i Viewer, click the “Update” button in the publication. When you do this, it will become a “View” button.
    5. Click on “View” to open your application and access its contents.

     

    Congratulations! You already have the app on your device, now you can see what’s left on your smartphone or tablet.