[Mugeda HTML5 technical tutorial 9] using components

A component is a pre-generated independent animation that can be instantiated and reused on the stage. A component has its own timeline (layers, units, etc.), which can be independently displayed in an animation. The component improves the reusability and flexibility of the animation. A component can be used to create complex animation effects. All components are managed in the component library. You can create, edit, or delete components or classify them into different folders. Components can be dragged directly to the stage to generate instances. You can also use the Mugeda API code to dynamically generate instances in a script. A single component can generate multiple instances and dynamically delete them at any time, it is very convenient to use complex animations, such as mini games. A special chapter will be introduced later in the use of Mugeda APIs.

 

Create a new component: in the lower left corner of the component library bar, click Create component, and click Copy component. Click Create component to create a new component.

After the component is created, you can edit it. The editing component is the same as editing the animation on the main stage. Each component has its own timeline and stage. Therefore, you can edit it on an independent stage. The created component is displayed in the component library. Double-click its icon or click Edit component to edit it.

After editing the component, you can click the main stage to exit the component editing and return to the main stage.

In this example, a rolling wheel component is created.

After the component is edited, you can use the component on the main stage. First, make sure that you have returned to the main stage. In the lower-right corner of the component bar, you can add a button to the stage, or drag it directly from the component library to the main stage to generate an instance of the corresponding component.

The parameters for editing a component instance are the same as those for editing other elements (for example, text, etc ).

In the element of the Rolling Wheel, from the first frame to the last frame, the wheel will be rolled from the left to the right.

After adding the component instance, you can click the preview button on the toolbar to see the scroll effect of the wheel on the screen.

In summary, the editing of components is the same as editing on the main stage, so that you can put some relatively independent animations on the main stage into the components, A complex animation can be divided into several independent components, and then organized in the main stage. This can greatly reduce the complexity of the animation on the main stage and be more suitable for complex animations. The components can be used with the Mugeda API to achieve dynamic and reusable animation element instances. You only need to create one component to dynamically produce multiple instances at any time through code, you can also control the playback segments of the component instance at any time as needed (I .e., Segment. A component can be divided into several segments based on the frame to compare the components of an alcohol lamp, it can be divided into the section where the alcohol lamp is lit, the normal burning section, and the section where the alcohol lamp is extinguished. In this way, the code can dynamically control the playing of the Section, and each section can be played cyclically as needed, it can also be played only once), greatly improving the flexibility of animation production. For this part, we will introduce it in detail later in the Mugeda API chapter.

In the next section, we will describe how to publish the animated file to the place where you want it. Stay tuned. If you like it, click like.