[Mugeda HTML5 technical tutorial 3] Hello World: The first Mugeda Animation

Today, we start our first Mugeda animation and use it to see some general procedures for making Mugeda animations. Make sure that you have an account for the Mugeda website before you start creating the website. If you do not have one, you can log on to www.mugeda.com to register one for free.

To put it simply, the following steps are involved in making an Mugeda Animation:

1. Add elements (images, text, etc.) to the stage;

2. Define an animation for the added element;

3. Define interaction with users (for example, click to jump );

4. Export or publish content;

In this example, we make a simple animation to make a paragraph "Hello, world !" The text appears in the center of the screen. Click the text to go to a specified page. The animation demo URL is as follows:

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

Next we will explain how to implement the above animation step by step. After logging on to the website, click "Create File" on the left and select "create from Mugeda Studio" from the list that appears ".

The online integrated development environment (IDE) of Mugeda Studio is opened in the browser window. Select an animation size. In this example, we choose 300x250, which is a typical size suitable for mobile device animation. After selecting the dimension, press "OK" to continue.

Mugeda will prepare a stage with a size of X. At this time, we can start to make the animation content.

First, add a background image for the stage. Select "image" from the toolbar on the left of IDE to open the select image dialog box.

Because the size of the added image (370x280) is larger than that of the stage, the image is reduced and displayed in the center of the stage.

To enable full screen display, you can click to select an image and edit its position and size in the attribute dialog box at the lower part of the IDE to display it in full screen.

Next, we will add a text section for the stage. First, on the time line above the IDE, click "New Layer" in the lower left corner of the timeline to add a new layer.

The newly added layer is automatically named "layer 1" and added to layer 0.

Next we will add text. Select "text" from the toolbar on the left side of the IDE, and click "Add text" on the stage.

This is the form of text just added to the stage. We need to adjust its attributes.

Click the selection tool on the left-side toolbar and select the added text. Text attributes appear in the lower property panel.

On the property panel, adjust its parameters to a satisfactory appearance. The following is a well-adjusted look.

So far, we have completed the first step: adding elements to the stage. Next, we will define a simple animation for the added text. Before proceeding, save the work, click "save" on the toolbar at the top of the IDE, or select "file/Save" from the File menu ". When saving a file for the first time, you must provide a file name. The saved stage will exist as a thumbnail of the work. You do not need to provide a file name when saving the file again, but the thumbnail of the file will be updated based on the latest stage.

To make an animation, we need to first extend the number of frames in the content to a suitable data. By default, the animation content has only one frame, which can be viewed on the timeline panel:

Now we adjust the number of animation frames to 20 to make the animation. On the timeline, click layer 0, select 20th frames, right-click, and select "insert frame (F5)" from the menu that appears )", you can extend the number of frames of layer 0 to 20th frames. You can also select 20th frames and press the F5 key on the keyboard to achieve the same effect.

At this time, the timeline is shown as follows. Note that layer 0 contains 20 frames, while Layer 1 still has only one frame.

Note that the elements defined in the layer (images, text, etc.) are visible only within the scope of the layer. To understand this, you can click the play button on the toolbar to preview the file on the stage.

Observe the changes of the current frame of the timeline and the visibility of text and background images on the stage. Since we want to define an animation in the text, select Layer 1 in the same way as above, and then extend it to 20 frames.

Now you can start adding animations. On the timeline, right-click any frame from 1 to 20 frames in Layer 1, and select Insert key frame animation from the menu that appears ".

At this time, Layer 1 becomes light green, and a red dot appears at the last frame (20th frames) within the layer range. This indicates that the animation has been added successfully. The 1st and 20th frames in Layer 1 Define the start and end frames of the animation. The intermediate frame can be automatically generated by the system through interpolation. We can define different attributes (positions, sizes, and so on) for the (text) elements contained in Layer 1 in the animation's start and end frames to produce the animation effect.

On the time line, select the 1st frame of Layer 1, select the "deformation" tool on the left side of the IDE, and select a text on the stage to scale and rotate the text. You can also adjust its attributes directly on the property panel. In this example, we set the initial transparency of the text to 10, the rotation to 180 degrees, the size is reduced a little, and placed in the center of the stage. Shows the adjusted attributes.

Save the work. Click "play" in the toolbar to preview the animation effect on the stage. You can also click "preview" on the toolbar to preview the animation effect in a separate window. You can also click "QR code" on the toolbar to obtain a QR code and preview the generated animation on your mobile phone.

By default, the generated animation keeps repeating. If you do not want to loop, you can use the menu item "animation/loop" to switch the loop state.

So far, we have completed adding elements and defining animations. This can already meet the needs of a considerable number of webpage animations. Next we will add a simple jump action to the animation. When you click the text, you can jump to a target webpage.

Pause the animation on the stage, select the background image, and then add a "Link" behavior to it on its property panel. The address points to Baidu, and select "external open" as the opening method ".

View the animation again in the preview window (not playing on the stage. Click the background image to navigate to the http://www.baidu.com. Mugeda supports a large number of behavior methods, from simple links to form submission, animation control, calling mobile phone functions (such as phone calls), and even calling JavaScript callback functions. We will introduce it to you in future tutorials.

Congratulations! The first animation has been successfully completed!

To use the animation content on your website, the simplest way is to export the complete animation package and embed it into your website. Remember to save your work before export. Select the export button in the toolbar or select "file/export/animation" in the menu ". This operation will package and download the animation content to your hard disk.

The exported animation package contains the script, style, page, and image required for playing the animation. Double-hitting index.html files can directly watch the animation content in the browser or embed the animation using iframe. In addition, Mugeda provides a complete set of content, such as script insertion and Mugeda CDN Publishing. We will introduce it in future tutorials.

The preview address of the animation used in this tutorial is:

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

You can also use the following link to view its source code in IDE after logging on:

Https://cn.mugeda.com/animation/edit/bbbdd815

In this tutorial, we learned some basic operations for using Mugeda to create an animation:

1. Add images and text elements to the stage;

2. Define an animation for the element;

3. Define behavior for elements;

4. Define element attributes;

5. Basic timeline operations;

These operations are easy to understand and master, and their functions are very powerful. On this basis, you can create very professional animation effects and interactive applications. We will give a step-by-step introduction in other tutorials.