[Mugeda HTML5 technical tutorial 8] adding Behavior

In the previous section, we have added elements and animations to a new file. to interact with users, we need to add action actions to the element. Select an element to add actions on the stage, and select an action from the Action drop-down list in the attribute bar. Optional categories include links, forms, and actions. Links can be navigate to the web page. forms can be edited and submitted. Actions are more advanced actions (including playback control, transition, call phone function, callback function, and so on ). We will introduce it in detail later.

Links are commonly used in AD animation. Through the link, we can add some links in the work that we want users to browse. Select "Link" from the Action drop-down list and enter the URL in the input box. Then select the Link Opening method, including external opening, internal opening, and extended display.

If you select external open, the link will be opened in a new window/tag in the default browser, usually an independent browser (such as the iPhone Safari browser ).

If you choose to open it internally, in a container that supports MRAID (a standard in the advertising industry), the link will be expanded to display size (for example, extended to full screen view) the file is opened in the same webpage window/tag as the file. In a container that does not support MRAID (for example, a mobile device browser), it is opened in the same way as an external container.

If you select extended display, the link in the container supporting MRAID will be opened in the internal Web View container. Generally, the mraid sdk or container provides a built-in Web View. In a container that does not support MRAID (such as a mobile browser), the link is opened in the same webpage window/tag as the file.

Behavior is a more advanced form of action, including playing control, transition, calling call function, callback function, etc. You can add multiple actions to another action. Select "action" from the Action drop-down list and click Edit. The edit action dialog box is displayed,

Select and edit the action you want to add. Playback control: You can control the playing of the stage animation through the frame of the stage, including jump and play, jump and stop, pause, play, next frame, and previous frame. Transition, mainly used in environments that support the MRAID standard, can be expanded and changed. The telephone function can call the local functions of mobile phones and other mobile devices, including making phone calls, sending text messages, sending emails, saving pictures, calendar events, maps, Playing videos, and playing sounds. Other options are mainly callback functions. You can add the desired event to the script code through callback to trigger the operation. The following sections will detail how to add a script.

The added behavior needs to be further edited. Select the event trigger method, which can be clicked or displayed. The click is triggered by clicking the mouse or finger, it is triggered automatically when the animation is played to this frame (the frame of the element where the behavior is added.

You can perform organizational operations, move up, move down, and delete operations to change the order in which multiple actions appear.

Event Type

Click: triggered when an object is clicked

Appearance: The action is triggered when the object appears on the stage (even if it is invisible, transparency = 0 ). A good example of triggering an action with "appear" is to pause the animation by assigning a "Pause" action to an object within a certain period of time.

Note: Some actions (such as calling) can only be triggered by clicking.

Behavior parameters

Each behavior may have one or more parameters, depending on the nature of the behavior (for example, a phone number used to send a call ).

Each action has an optional parameter called the "event name", which is used to define semantic identifiers. The event name is displayed in the Tracking Report, which is helpful for evaluating the activities involved.

The behavior types include play control, transition, phone call, and others.

Playback control: You can control the playing of the stage animation through the frame of the stage, including jump and play, jump and stop, pause, play, next frame, and previous frame.

Transition, mainly used in environments that support the MRAID standard, can be expanded and changed.

The telephone function can call the local functions of mobile phones and other mobile devices, including making phone calls, sending text messages, sending emails, saving pictures, calendar events, maps, Playing videos, and playing sounds.

Other options are mainly callback functions. You can add the desired event to the script code through callback to trigger the operation. The following sections will detail how to add a script.

Video Playback: Case Study

Play video: set parameters

Play video

Form. You can enter some information in the form and submit it to the server to collect the desired data.

You can also use the form to touch the callback function, so that the information you enter can be passed to the callback in the form of parameters to be reflected in the animation. For example, you can make a customizable greeting card in this way, you can use the form to change the syntax and payment.

In the submission target, you can select backend submission and callback functions. If you select backend submission, enter the submission address. If you select a callback function, enter the function name. You can click Add form item to add form items.

In summary, by adding actions, we can complete various interactive functions in the work, greatly expanding the animation forms.

In the next section, we will talk about the component, which is a pre-generated independent animation that can be instantiated and reused on the stage. A component has its own timeline (layers, units, etc.) and can display animations independently. A component can be used to create complex animation effects. The reusability and flexibility of animations improved by components are powerful.