XELF supports action functions so that users can easily implement interactions and animations without any specialized tools. To use an action, you need to understand triggers and actions.
Triggers are required for an action to take place. If the event of the trigger is satisfied, the action is executed. XELF provides a total of seven triggers (click, double click, mouse in, mouse out, hold, release, page is loaded).
Actions are saved in real time and do not need to be stored separately.
You can visually see at a glance actions created in the timeline. The changes you make in the timeline are also saved in real time.
The created action appears in the form of a list. You can modify, duplicate, or delete an action.
You can organize and manage actions by dragging and dropping the order.
| No. | Name | Description |
|---|---|---|
| 1 | Actions tab | Select the Actions tab to access the Action panel. |
| 2 | Add action | When clicked, an action is created. The panel will switch to the Edit action panel. |
| 3 | Trigger | The created actions are organized by triggers. |
| 4 | Action | The action type and action target of the created action are displayed. You can change and manage the order by drag-and-drop. |
| 5 | Action menu button | This is a button to bring the action menu. |
| 6 | Edit action | Edit the selected action. The panel will switch to the Edit action panel. |
| 7 | Duplicate action | Duplicate the selected action and add it. You can use it when you need to use several similar actions. |
| 8 | 액션 삭제 | Delete the selected action. |
_1_e.png)
_2_e.png)
Action edits are saved in real time and you do not need to press the Save button.
It is a panel where you can adjust the details of the generated action.
| No. | Name | Description |
|---|---|---|
| 1 |
Trigger and action settings area |
This is the area where you can set triggers and actions. Actions are executed when an event occurs that you set on the trigger target and the condition is met. |
| 2 | Action settings area |
This is the area where you can set the action. When the trigger is satisfied, the action is activated and you can enter the required value when the action is executed. The required value is different for each action. |
| 3 | Action detail settings area |
This is the area where you can adjust the detailed settings of the action. You can adjust the execution time, duration and easing of the action. |
_e.png)
This is the area where you can set triggers and actions.
Actions are executed when an event occurs that you set on the trigger target and the condition is met.
| No. | Name | Description |
|---|---|---|
| 1 | Back | Return to action list. |
| 2 | Event | Set the event of the trigger. If the target is satisfied with the event, the action is executed. |
| 3 | Trigger target | Set the target for the trigger. If an event occurs on the trigger target, the action is executed. |
| 4 | Action |
Select the type of action to execute. The required value is different for each action. |
| 5 | Action target |
Select the target for the action. To delete a target, click the Delete button on the right side of the target. |
| 6 | Add target |
Add a target. You can set multiple action targets for one action. |
_e.png)
If you create an action without selecting an object, the current page is recognized as an object.
Events are fixed to the 'Page is loaded' and trigger targets are fixed to the current page.
This is the area where you can enter the required value when the action is executed. The following items are required for most actions to be executed.
| No. | Name | Description |
|---|---|---|
| 1 | Input area | This is the area where you can enter the required value when the action is executed. |
| 2 | Current value button | Enter the current value of the object. |
| 3 | Easing | This is the area where you can adjust the easing of the action. |
| 4 | Duration | Enter the total time for the action to take place. |
| 5 | Delay | Enter the amount of time that is delayed before the action starts. |
_e.png)
Easing is an essential part of creating animations.
For more information, please refer to 5) Easing.
A trigger consists of an event and a target.
When an event occurs on the target, the trigger is satisfied and the action is executed.
| Icon | Name | Description |
|---|---|---|
| Page is loaded | If you create an action without selecting an object, the page is recognized as an object. Triggers are fixed as a ‘page is loaded' trigger that is satisfied when the page is loaded. | |
| Click | Actions are executed when the trigger target is clicked or touched. | |
| Double click | Actions are executed when trigger target is double-clicked or double-tapped. | |
| Mouse in | Actions are executed when the mouse enters the area of the trigger target. | |
| Mouse out | Actions are executed when the mouse is out of range of the trigger target. | |
| Hold | Actions are executed when the trigger target is clicked or tapped and lasted for more than 2 seconds. | |
| Release | Actions are executed when the trigger target is clicked or tapped and lasts for more than 2 seconds and the mouse is released or the hand is released. |
Actions are broadly classified into page action, object action, and media action.
Page action is an action that moves from the current page to another page or to an external URL.
| Icon | Name | Description | |
|---|---|---|---|
| Go to Page | If you create an action without selecting an object, the page is recognized as an object. Triggers are fixed as a 'page is loaded' trigger that is satisfied when the page is loaded. | ||
| Required target | Page to go to action | ||
| Go to URL | Go to the external URL when the trigger is satisfied. | ||
| Required target | URL to go to action | ||
| Open in new window | Open the URL in a new window upon activation. | ||
| Go Back | Go to the previous page when the trigger is satisfied. | ||
| Required target | None | ||
Actions are broadly classified into page action, object action, and media action.
Object action is an action that changes the position, size, and opacity of an object.
| Icon | Name | Description | |
|---|---|---|---|
| Move To | Move the object to its coordinates when the trigger is satisfied. | ||
| Required target | Object to move (multiple choices available) | ||
| End point | The coordinates of the X and Y at the point where the object's movement ends. | ||
| Start point | The coordinates of the X and Y at the point where the object's movement begins. When deactivated, start movement from current position. |
||
| Move by | Moves the object by the distance you entered when the trigger is satisfied. | ||
| Required target | Object to move (multiple selectable) | ||
| Distance | The distance the object will move. | ||
| Opacity | Change the opacity of the object when the trigger is satisfied. | ||
| Required target | Object to change opacity (multiple choices available) | ||
| Change opacity | Opacity of the object to change | ||
| Size |
Change the size of the object. Change the size by specifying the pixel value, which differs from the ratio (scale). |
||
| Required target | Object to change size (multiple choices available) | ||
| Change size | Enter the size of the object you want to change (unit: px) | ||
| Fix ratio | Maintain aspect ratio when activated | ||
| Scale |
Change the size of the object. Unlike the size, increases or decreases the percentage of the object. |
||
| Required target | Object to change ratio (multiple choices available) | ||
| Change ratio | Consider the current size of the object as 100% and enter the size of the object to change in %. | ||
| Color | Change the color of the object when the trigger is satisfied. | ||
| Required target | Object to change color (multiple choices available) | ||
| Change color | Enter the color you want to change as Hex code. | ||
| Rotate | Rotate the object when the trigger is satisfied. | ||
| Required target | Object to rotate (multiple choices available) | ||
| Absolute value | Change the object to the angle you entered | ||
| Relative value | Rotate the object by the angle you entered | ||
| Clockwise | Rotate the object clockwise | ||
| Counterclockwise | Rotate the object counterclockwise | ||
| Toggle |
Hide or show the object when the trigger is satisfied. Show hidden objects, and hide visible objects. |
||
| Required target | Object to toggle (multiple choices available) | ||
| Change opacity | Opacity of the object to change | ||
| Show/Hide |
Hide or show the object. Unlike toggle, you can select only one of the two functions: Show or Hide. |
||
| Required target | Object to hide or show (multiple choices available) | ||
| Show | Show hidden objects. | ||
| Hide | Hide visible objects. | ||
| Layer Order | Change the order of layers in the object when the trigger is satisfied. | ||
| Required target | Object to change the order of the layers (multiple choices available) | ||
| Foremost | Change the order of layers to the front | ||
| Backmost | Change the order of layers to the rear | ||
Actions are broadly classified into page action, object action, and media action.
Media actions is an action that controls the audio inserted in a project or page.
| Icon | Name | Description | |
|---|---|---|---|
| Play | Play the specified object when the trigger is satisfied. | ||
| Required target | Audio object to play (multiple choices available) | ||
| Fade in | Enter the amount of time the audio becomes louder when it is played. | ||
| Fade out | Enter the amount of time the audio becomes smaller audible when turned off. | ||
| Repeat | When activated, the audio is finished and played again. | ||
| Mute | Adjust the volume of all audio to zero when the trigger is satisfied. | ||
| Required target | None | ||
| Fade out | Enter the time that the sound becomes smaller when it is muted. | ||
| Volume | Change the volume of the specified audio when the trigger is satisfied. | ||
| Required target | Audio object to change volume (multiple choices available) | ||
| Change volume | Enter the volume you want to change. | ||
| Stop | Stop all audio when trigger is satisfied. | ||
| Required target | None | ||
| Fade out | Enter the time that the audio turns off | ||
Objects do not suddenly move or stop when they exercise. They don't move at the same speed, they change. Use the easing function to give an object a feeling of being faster or slower when it starts exercising.
XELF authoring tool supports the following easing functions:
.png)
Timeline is a feature that visualizes created actions over time.
You can see at a glance what actions are created on which objects, and you can also modify them freely.
The changes you make in the timeline are saved in real time and you do not need to save them separately.
You can bring the timeline by clicking the General view/Zoom in button in the Action timeline area at the bottom of the authoring tool.
_e.png)
_1_e.png)
| No. | Name | Description |
|---|---|---|
| 1 | Action number display area | Display how many actions have been created for the corresponding object. |
| 2 | Time interval adjustment scroll |
Increase or decrease the time interval of the timeline. You can use it when the scrolling is so small that you cannot do detailed work. |
| 3 |
Regular Hide Full |
Zoom the timeline across the authoring tool. When zoomed in, the button will change to Hide timeline, and click to hide the Timeline. |
| No. | Name | Description |
|---|---|---|
| 1 | Trigger list | Display a summary of the actions generated on the corresponding by trigger. |
| 2 | Action list | Display a summary of the actions generated on the corresponding by action type and trigger. You can change the order by dragging items. |
| 3 | 3-point menu | You can duplicate or delete actions in the Timeline. |
_2_e.png)
_3_e.png)
_4_e.png)
| No. | Name | Description |
|---|---|---|
| 1 | Time scale | Show the delay and run time of the timeline in seconds. When manipulating timeline scrolling, it is snapped in 0.1 seconds. |
| 2 | Timeline scroll |
Show the delay and execution time of the action visually. You can adjust the delay time by holding and moving the scroll. And you can adjust the execution time by holding and moving both ends of the scroll. |
