Popup requiring a rollover on an object
We place on our stage any objects we want to use.
We will use the schema of a group of employees - we will create 3 popups containing information about each employee.
In the case of a popup that is triggered by hovering over an object, we do not need to create any additional buttons so no additional
elements will appear on the stage. On the other hand, what is on the stage must be placed so that we can put up our popup without problems.
The "staff photos" added by us are essentially a button to launch our popup. Let us put a simple instruction on the material - "Move the mouse
over the picture to find out more"
We can also use icons suggesting specific actions, for example:
The next step will be separation of layers - so it will be easier for us to work with the content of our popups. At the bottom of the screen there is a "Timeline"
for our example there are a number of objects on it - if we describe them and divide them into layers we will be more comfortable working.
The time line looks as follows, each group of elements is described which will greatly facilitate our work. Remember that the popup layers are on the timeline itself,
otherwise they may be overlapped by other elements on the scene.
The next step is to hide layers that are our popup. To do this, select our layers marked as popup 1,2,3 click on each one with the right mouse button and in the visible
menu choose "hide"
The next step will be to add "triggers" in our pictures so that when you hover over the mouse, we will see our popup.
- Click one of the images and enter the trigger settings.
- When you click on the picture in the trigger menu, we choose:
- Action: hover over the mouse
- Effect: show the layer, in our case to each of the pictures we have assigned another popup, also photo 1 opens popup1, photo2 popup2,
This operation is repeated three times until each photo is assigned the appropriate popup.
If everything has been done according to the directions after hovering over the cursor. An illustration will show us a business card of the employee. We have not added
a trigger that will be necessary for our presentation to function properly.
The last missing element is the trigger that hides the popup when the mouse cursor. is dropped from the object, adding it as follows: We mark an interesting illustration
and we go to the triggers In the action list we add an interaction:
- event - leaving the mouse cursor
- effect - hide layers,
- mark the layer appropriate for our illustration
8. After adding the triggers and checking if the project works properly, we can consider
it completed. The expected effect is to display information only when it hover over
a particular object and hide the popup when the cursor is outside the object.
