[Mugeda HTML5 technical tutorial 19] custom greeting cards

This document uses an example to describe how to create a custom greeting card animation. The instance contains two parts:

1. animation part: This section describes how to name the acronyms and text objects that have been paid, and how to define form actions for custom buttons.

2. Code Section: describes how to compile the script logic of greeting cards.

 

Routine editing address:

Https://cn.mugeda.com/animation/edit/0326f6a1

Preview routine address:

Https://cn.mugeda.com/client/preview_css3.html? Id = 0326f6a1

Animation part

Note the following when modifying an animation:

1. Name text objects such as acronyms and payments;

2. Define form actions for custom buttons.

Name acronyms, payments, and other text objects

The following example illustrates the naming process of acronyms and payments:

Name the acronyms: select the group in which the acronyms are located, double-click the acronyms to enter the group, select the acronyms Text object, and name the Text object "greetings" in the attribute column ".

Name the selected text: double-click the group to which the text belongs, select the Text object, and name it "from" in the attribute column ".

You can name more objects in the same way.

Define form actions for custom buttons

Select the Custom button, select "form" in the Action column, and click Edit.

In the pop-up edit form dialog box, perform the following operations in sequence: Enter the form name; select the submission method as "callback function" and set the callback function name as "createCustomParameters"; the confirmation message is the information displayed in the pop-up dialog box after the customization is successful. You can write the message as needed. Form Items \ add form items to add form items.

Edit acronyms form items: in the edit form items dialog box that appears after adding a form item, perform the following operations in sequence: Enter the name greetings; Description: edit the acronyms; Type: select the text field; the value is the default value of the acronyms, which can be set as needed. After completing the preceding operations, click Save.

Edit the cashier form item: After editing the cashier form item, click Add form item again to add the cashier form item. In the pop-up dialog box, enter "from"; Description: "payer" in sequence. Select the input box for type. The value is the default value of the payer. You can enter the value as needed. Click Save.

You can enter more form items in the same way.

After the form is edited, click OK. In this way, all the modifications to the animation are completed and the animation is saved.

Code Section

Introduce external library files

We encapsulate common operations of greeting cards into the library file card_common.js, and use this library file to simplify code writing.

First, we need to introduce the public code library into our IDE: click "file", "import", and "script" to introduce the public script:

Click "add" and enter https://www.mugeda.com/third_party/general-usage/js/card_common_mini.js.

Write user code

Click the script button on the toolbar and enter the user code. Refer to the Code in the routine to apply the modification to your greeting card.

Bind form and animation Elements

Binding a form means that the content of the form is always the same as that of some elements in the animation. In the following example, the defineCustomParameters function is bound with form and animation elements. It accepts an mugeda. scene object and an array.

DefineCustomParameters (mugeda. scene ,[

{FormName: 'to', formDescription: 'recipient ', mugedaObj: [{name: 'to', attribute: 'text'}]},

{FormName: 'greetings ', formDescription: 'edit acronyms', mugedaObj: [{name: 'greetings ', attribute: 'text'}]},

{FormName: 'from', formDescription: 'payer's money', mugedaObj: [{name: 'from', attribute: 'text'}, {Name: 'from2 ', attribute: 'text'}]},

{FormName: 'url', formDescription: 'sender website ', mugedaObj: [{name: '', attribute: 'data'}]}

]);

The array indicates that formName and formDescrition correspond to the 'name' and 'description' fields in the form. mugedaObj is an array corresponding to the objects on the main stage. Name refers to the name of this object, and attribute refers to the attributes of this object (above name: 'to', attribute: 'text' refers to mugeda. scene. getObjectByName ('to '). text ). In this way, an animation element and a form element are bound together, and their values will remain the same.

However, there is a problem: what if you want to reference an object in a component instance. "/" Can be used to separate layers. For example, name: 'obj1/obj' indicates the element named obj2 In the instance named obj1.

Attribute = data is a special value that does not bind any animation elements. For example, in the last line in the preceding example, the result is that the url field in the form is bound to the global variable data. url. value, which can be set directly in the script.

Define the parameters required for forwarding and sharing

DefineWechatParameters ({

"Img_url": "https://mugeda-mobile.mugeda.com/weixin/logo_128.png ",

"Img_width": 128,

"Img_height": 128,

"Desc": "description defined by Mu Xi ",

"Title": "title defined by Mu Xi"

});

As above, img_url, img_width, and img_height define the thumbnail address, length, width, and desc and title are descriptions and titles.

Define the form submission Behavior

After a user submits a form, the user calls the user-defined callback function. You can perform the desired operations in the callback function. After you complete the custom operation, call the finalizeCustomParameters (data) method. card_common.js will complete the subsequent operations of Greeting Card customization.

For example:

Window. createCustomParameters = function (data ){

FinalizeCustomParameters (data );

}

Use

Introduce https://www.mugeda.com/third_party/general-usage/js/card_common_mini.js through the script tag in the web page, or the ability to load external scripts in the IDE

Example

Example of an action Script:

Mugeda. script. push (function (mugeda ){

Var mugeda = Mugeda. getMugedaObject ();

Mugeda. addEventListener ("renderReady", function (){

DefineCustomParameters (mugeda. scene ,[

{FormName: 'to', formDescription: 'recipient ', mugedaObj: [{name: 'to', attribute: 'text'}]},

{FormName: 'greetings ', formDescription: 'edit acronyms', mugedaObj: [{name: 'greetings ', attribute: 'text'}]},

{FormName: 'from', formDescription: 'payer's money', mugedaObj: [{name: 'from', attribute: 'text'}, {name: 'from2 ', attribute: 'text'}]},

{FormName: 'url', formDescription: 'sender website ', mugedaObj: [{name: '', attribute: 'data'}]}

]);

DefineWechatParameters ({

"Img_url": "https://mugeda-mobile.mugeda.com/weixin/logo_128.png ",

"Img_width": 128,

"Img_height": 128,

"Desc": "description defined by Mu Xi ",

"Title": "title defined by Mu Xi"

});

// Load the audio

Var audio = loadaudio('52e374dbe8ad7e2968000099 ');

// Click the screen to play the audio

Window. light = function (){

Try {

Audio. play (1 );

} Catch (e ){

Audio. play (0 );

}

};

Window. directLinks = function (){

Window. open (data ['url']. value, '_ blank ');

};

Window. createCustomParameters = function (data ){

FinalizeCustomParameters (data );

};

});

});