[Mugeda HTML5 technical tutorial 11] Mugeda API Introduction

1. API Overview

The Mugeda API provides a simple and structured method to dynamically manage Mugeda content in real time. It provides the following methods:

• Access objects in the Mugeda content.

• Obtain and set object attributes, such as position, rotation, proportion, and opacity.

• Control the playback of the Mugeda animation (for example, playing/pausing/redirecting ).

• Add/Remove/edit objects on the stage.

• Process mouse/touch events to create an interactive experience

Mugeda API is based on the system JavaScript technology. No additional libraries are required.

Ii. Start

It is easy to start using the Mugeda API. In Mugeda IDE, you only need to click the button on the script toolbar. Enter your code in the script window.

Iii. namespaces and Classes

Most of the Mugeda APIs are based on a namespace (object) called Mugeda ).

The Mugeda API contains three main types: content, scenario, and element.

4. Access Content objects

Each Mugeda content is represented by a content object, which can be obtained as follows:

Var content = Mugeda. getMugedaObject ();

5. Content Attributes

For example, you can obtain the title, width, and height of the content.

Var content = Mugeda. getMugedaObject ();

Var title = content. title;

Var width = content. width;

Var height = content. height;

6. renderReady event

The scenario is valid until the Mugeda content is loaded and ready to be presented. After listening to the "renderReady" event, access the scenario object.

Var mugeda = Mugeda. getMugedaObject ();

Mugeda. addEventListener ('renderready', function (){

Var scene = mugeda. scene;

// Your code here.

});

7. Scenario object

Scenarios for accessing the main stage:

Var scene = mugeda. scene;

Scenario for accessing component instances:

// Obtain a component instance

Var symbolInstance = mugeda. scene. getObjectByName ('symobj ');

// Obtain the scenario object

Var symbolScene = symbolInstance. scene;

8. Playback Control

Scene. play (); // stream playback scenario

Scene. pause (); // pause scenario

Scene. gotoAndPlay (num); // jump to a specific frame and then play the scene

Scene. gotoAndPause (num); // jump to a specific frame and pause the scene

Var id = scene. currentId; // obtain the current frame number.

9. Segment of the component scenario)

In a component scenario, you can define multiple segments and reference them when running. This allows you to precisely control the playback behavior of a component scenario.

Scene. setSegment ('seg1', 0, 5, false) // name 0 ~ 5 frames are used as seg1, without repeating scene. setSegment ('seg2 ', 6, 10, true) // name 6 ~ 10 frame as seg2, loop

Scene. playSegment ('seg1') // jump to 0 frame and play until 5 Frame

Scene. playSegment ('seg2 ') // jump to 6 and play until 10 frames

// Then jump to 6 frames and play until 10 frames.

// Loop playback

10. Frame callback

After each frame is rendered, a scene object triggers the "enterFrame" event. Add this event listener in your own program.

Var callback = function (frameId)

{

Console. log ('current frame is: '+ frameId

}

Scene. addEventListener ('enterframework', callback );

11. Element Object

Each object in a scenario is represented by an element object.

An element object may represent an image, text, image, or component instance.

Access Element Object:

Var element = scene. getObjectByName ('face ');

Copy element:

Var element = scene. getObjectByName ('name ');

Var copy = element. clone ();

Create a new component instance:

Var instance = mugeda. createInstanceOfSymbol ('symbol _ name ');

Add/Remove elements:

Scene. appendChild (element );

Scene. removeChild (element );

To add an element, you should clone an existing element or create an instance from a component.

The element to be deleted should be obtained through the scene. getObjectByName function.

GET/set element attributes:

Var x = element. x // obtain the x coordinate of the element.

Element. x = 100 // set the x coordinate of the element

Similarly, we can access attributes such as name, x, y, top, bottom, left, right, scaleX, scaleY, width, height, rotateCenterX, rotateCenterY, rotate, visible, and alpha. For an image, element. src is its url. For text objects, element. text is the content of text. For component instances, obj. scene (read-only) is a component instance scenario.

12. Handling element events

Input event:

It is easy to add events to an object, just like processing the dom:

Element. addEventlistener ('click', callback );

Supported events include: mousedown, mouseup, click, dblclick, mouseover, mouseout, mousemove, touchstart, touchmove, touchend, inputstart, inputmove, and inputend.

InputStart, InputEnd, InputMove event:

The Input * event encapsulates mouse and touch events. By listening to input * events, mouse (on PC) and touch events (on smartphones and tablets) will be handled in a unified manner.

Element. addEventlistener ('inputmove ', function (event ){

Var x = event. inputX;

Var y = event. inputY; // get the cursor or finger position

});

13. Load Resources

By default, after the Mugeda player loads all resources (images, audios, etc.), it starts to play the idea. Sometimes you may want to manually control resource loading. For example, you may want to cache some header frames, which can reduce the buffer time and start playing the animation faster. To do this, you can set the Mugeda. zoneCache attribute or call the Mugeda. cacheZone () function. Mugeda. zoneCache can be added to the end of the loader. js file:

Mugeda. zoneCache = [startFrame, endFrame];

The Mugeda. cacheZone () function is called before the renderReady event is activated:

Mugeda. cacheZone (startFrame, endFrame, null, function (percent) {console. log (percent );

})

14. Overview of Mugeda objects

15. Encoding framework

16. Routine

In the demo, we create a clock to display the current time.

 

Https://cn.mugeda.com/client/preview_css3.html? Id = 58df45ca

Step 1: Create a clock model in Mugeda IDE.

In the 0 layer, 1 frame to import the four pictures, the hour hand, the minute hand and the second hand.

 

Step 2: Move the rotation center of the clock table needle.

Select each table needle, right-click it, and select "group-> combination ". Select the scale button () and press Ctrl to drag the center to the center of the clock.

Step 3: name each image

Select an image in IDE and provide a name for it.

In the demonstration, we named the Minutes, hour hands, minute hands, and second hands as "face", "hour_hand", "minute_hand", and "second_hand" respectively ".

 

Step 4: Encoding

In the IDE toolbar, click the script button to open the Script Editor.

 

Step 4.1: Obtain the mugeda object

Var mugeda = Mugeda. getMugedaObject ();

Step 4.2: wait until everything is ready

Var mugeda = Mugeda. getMugedaObject ();

Mugeda. addEventListener ('renderready', function (){

});

Step 4.3: Obtain the scenario object

Var mugeda = Mugeda. getMugedaObject ();

Mugeda. addEventListener ('renderready', function (){

Var scene = mugeda. scene;

});

Step 4.4: Get the table needle

Var mugeda = Mugeda. getMugedaObject ();

Mugeda. addEventListener ('renderready', function (){

Var scene = mugeda. scene;

Var hourHand = scene. getObjectByName ('hour _ hand '),

MinuteHand = scene. getObjectByName ('minute _ hand '),

SecondHand = scene. getObjectByName ('second _ hand ');

});

Step 4.5: update the Rotation Angle of the table needle

Var now = new Date (),

Sec = now. getHours () x 3600 + now. getMinutes () * 60 + now. getSeconds () + now. getMilliseconds ()/1000;

HourHand. rotate = sec/(6*3600) * Math. PI;

MinuteHand. rotate = sec/1800 * Math. PI;

SecondHand. rotate = sec/30 * Math. PI;

Step 5: update the table needle at each frame

To make the clock run, you must update the position of the table needle at each frame. A convenient method is to call the updateTime () function whenever a frame enters.

Scene. addEventListener ('enterframework', function (){

UpdateTime ();

});

Click Preview to run the program.

All code

Var mugeda = Mugeda. getMugedaObject ();

Mugeda. addEventListener ('renderready', function (){

Var scene = mugeda. scene;

Var hourHand = scene. getObjectByName ('hour _ hand '),

MinuteHand = scene. getObjectByName ('minute _ hand '),

SecondHand = scene. getObjectByName ('second _ hand ');

Var updateTime = function (){

Var now = new Date (),

Sec = now. getHours () x 3600 + now. getMinutes () * 60

+ Now. getSeconds () + now. getMilliseconds ()/1000;

HourHand. rotate = sec/(6*3600) * Math. PI;

MinuteHand. rotate = sec/1800 * Math. PI;

SecondHand. rotate = sec/30 * Math. PI;

}

Scene. addEventListener ('enterframework', function (){

UpdateTime ();

});

});

To sum up, you can write script code to control animations through the mugtings API to implement complex animations, such as mini games. In the next section, we will describe how to create a cross-screen interactive application.