Components | Launcher

"Launcher" is a component that allows creating an interactive button whose status changes when placing the cursor over it.

This component is added within the screens by default (See here), but it can also be added inside other components (for example, a Row).

You will find this component in the group of "Image" components.

There are two views for this component that are configured differently:

Simple launcher
Advanced launcher

Simple Launcher Settings

To create an interactive button effect when placing the cursor over it, we will use two images (one is shown by default; the other is shown when rolling the cursor over it). We will follow these steps:

1. Select the main image and the roll over image. Go to "Resource" and "Resource (roll over)". Click on "Examine" to find and select an image from the unit Resources folder (see here).

2. Define what will happen after clicking on the button. You can use different properties for that: "Link to popup", "Link to resource" or "External link". Remember these are selective properties, which means you can only use one at once.

3. Configure the rest of properties, if you wish.

Simple Launcher properties

PROPERTY

DESCRIPTION

Alternative text

Text that describes the launcher. This text will be shown when the user places the cursor over the image. It will appear also when the image does not charge.

Resource

Image file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here ), and select the image we want to show. Supported image formats: jpeg, png, and gif.

Resource (roll over)

Image file that will be displayed when rolling over the button. We will click on "Examine" to access the unit Resources folder, and select the image we want to show. Supported image formats: jpeg, png, and gif.

Link to popup

It links the launcher to a popup (See how to create and manage popups in here). This is a selective property, which means that if a launcher is linked to a popup, we will not be able to link it to a resource at once, for instance.

Resource link

It allows linking the launcher to a PDF or ZIP file. We will click on "Examine" to access the unit Resources folder and select the file we want to link with the image. This is a selective property, which means that if a launcher is linked to a resource, we will not be able to link it to a popup at the same time, for instance.

External link

We can link the launcher to a URL. This is a selective property, which means that if a launcher is linked to a website, we will not be able to link it to a popup at once, for instance.

Screen link Allows you to link the launcher to a screen on the same page or on another page. Thus, yo can personalize navigations..

Width

This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. For some quote styles, "Full" width makes quotes lay over the central column.

Align

This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

Float

It allows inserting a component and "wrap" it with a text.

First, we should select a size percentage under 100% in "Width" property (25%, for instance).
"Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text).
We use arrows to move the component and put it on the text.

Overcome goal

It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between:

Inherited: this option aply the default value defined in the Completion Objectives Area (See here).
Non objetive: this audio will not an objetive to complete the unit.
Interact: It is necessary interact with the component to reach the objective.

Advanced Launcher Settings

The advanced launcher is designed to create an interactive button but allows you to add more elements inside, creating a more complex element. You can create a launcher that incorporates:

A title. It is a text to which we can put a background color or a background image.
A descriptive text. We can assign a background color to this text.
One or several images. We can add several images, being able to decide in each one if they all have a rollover effect or only one of them has it, leaving the rest as still images.

Therefore, we could create a launcher that has a title and an image with a rollover; or a pitcher that has a title, a description, a still image and another that performs the rollover effect; etc.

To configure this advanced launcher:

Start by configuring the properties of the launcher. Here it is mandatory to define what will happen when clicking on the launcher, so you must choose between opening a popup, link to a resource or an external link. Additionally, this component has the same properties common to the simple launcher, but it has other specific properties such as deciding the border style (with border or shadow) or the color of the border.
Add the elements that you want to make up the launcher. You can add title, texts and images.
Next, configure the properties of each added component:
- Title: You can set a background color and / or a background image.
- Text: Allows you to configure an initial indentation, the style of the numbered lists, color of the lists and a background color for the text.
- Image: Define a main image and / or a rollover image that will be displayed when the mouse is placed on the launcher. Additionally, you can configure the width of the image and its alignment.

Remember
Launcher component is very useful to create menus with interactive buttons. For instance, this image shows a group of 4 launchers organised in a row. This row has 4 columns including a launcher inside each of them. Launchers are images of light bulbs that show rollover images with lights on when the cursor is over them.

There is a preset row that helps to easily create this type of menus. Check here to learn how to create this type of rows.