Tutorial to create this App
Open the program 480interactive on your computer and click on the button “Create new App”.
- Choose the name of the project. For example “My App”.
- Choose the location of the project. By default, the program automatically chooses the workspace where all projects are saved.
- Choose the type of App. Select “App Kiosk”.
- Click on the “Create” button.
You already have the App created, but you do not have any added content yet.
This project has 6 basic videos about the parts and functions of the main organs of the human body. You can customize the project simply by replacing the contents. Here’s how we’ve created this App in a few simple steps.
First let’s add a video. To do this, we go to the “Add content” screen in the tree on the left, look for the “Video” content and click on “Add”.
A wizard will open to add the mp4 video. Click on “Select” and look for the location where we have the contents. Inside “Libraries”.
We double click on the video that we want to add or click on “Select”, for example on the video called “Brain.mp4”. In the field “Title” we write the name of the video, if we want we can edit it later.
Now, we repeat this same process to add the rest of the videos to the application: “Brain.mp4”, “Heart.mp4”, “Intestines.mp4”, “Kidney.mp4”, “Lungs.mp4” and “Stomach.mp4 “.
Add the icons to the App
There are two types of icons in this App: the main icon of the App, which is the one that will be seen when users install the App on their devices and the icons of each of the contents, which are the icons you will see in the Kiosk where are all the contents that add to the application.
The main App icon
To add this icon, click on “App Settings” in the tree on the left and click on the “General Information” tab. Once there, we will see a default image, click on it and open the file browser. Now we choose the application icon called “ico-App.png”.
The video icons
- Click on the first video in the tree on the left.
- Click on the “Publication icon”
- We chose the video icon.
- We repeat this same process with each of the remaining videos and we will have all the icons ready.
When you make a kiosk application, the first thing you see when you start the application is the “Kiosk” itself, where all the contents and categories that your app contains. At the top of the Kiosk we can place a banner, which is an image with which we can give a custom look to the App. In the following link you will be able to expand information about the Kiosk Banners.
To add the banners to the app we go to “Configuration of the app”> “Visual aspect” and we click on the “Banners” tab.
Now select “Vertical Banners” and click on “Add”
The project folder will open, enter the folder “Libraries”> “Icons & banners”, select the banners and press “Select”.
Finally, we set the display time, in seconds, between one banner and the next in the “Banner-time” field. For example, 3 seconds.
Customizing the Kiosk colors
Now we change the colors of the theme to customize the colors of our App. To do this we go to “App Settings”> “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 showing the steps to follow from your device. Follow the directions:
- The App is automatically added to 480i Viewer so you can try it out.
- In 480i Viewer, click the “Download” button in the publication. Doing so will become a “View / Open” button.
- Click on “View / Open” 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.