[Mugeda HTML5 technical tutorial 4] Studio Overview

Mugeda Studio is a professional visual integrated development environment for HTML5 animation production based on the cloud platform. It allows you to install client programs without any need, high-quality HTML5 animations can be easily created through a browser. Compared with traditional Flash animations, HTML5 animation can be deployed across platforms. In addition to being displayed on PCs, it can be perfectly displayed on mobile phones, tablets, and other mobile devices. In this section, we will mainly introduce the relevant components of the Studio interface for your convenience. The specific usage of each component will be introduced in subsequent chapters.

 

The following is a working diagram of the Mugeda Studio interface.

The main components of the Studio interface include the menu bar, toolbar, timeline, toolbar, stage, Component Library, script, and attributes. As marked. Note that almost all of these components can be docked or suspended by dragging the mouse. When making complex animations, this can help design developers to layout the interface more efficiently and reasonably.

The menu bar contains all command sets: file, edit, modify, view, animation, and help. We will introduce these functions in a specific set.

At the bottom of the menu, the top Toolbar contains some of the most common operations: new, save, Image Library, copy, paste, undo, repeat, preview, bar code sharing, script, etc. These are frequently-used operations, and most of them (such as storage, deletion, cancellation, and playback) are well understood. Some commands (example Library) have been mentioned before, and will be further described in detail in the tutorial.

The toolbar on the left contains objects that can be added to the stage and common editing functions.

The stage is the core area of the entire interface and is located in the center of the interface. There is a certain editing buffer area around the stage. Objects in the area will not appear in the final content display, but it can be used to conveniently organize objects that are not on the stage for the moment.

The Properties dialog box displays the attributes and parameters used to adjust the selected objects. When any object on the stage is selected, the corresponding properties are displayed in the Properties dialog box. The displayed properties vary depending on the selected object (for example, a text object contains a font ). If no objects on the stage are selected (click the left mouse button in the blank area of the stage to cancel the selection of all objects ), at this time, the display is the attributes of the stage itself (such as frame rate ).

The component library panel contains the necessary functions for managing components, such as creating components, copying components, generating folders, deleting components, and introducing components. A component is an animated clip that contains its own independent time series. It can be used repeatedly on the stage to create complex composite animations.

The script window allows developers to develop advanced rich media content through the Mugeda API. These advanced operations include precisely manipulating objects on the stage, dynamically generating animated objects, and accessing and controlling HTML5 DOM elements. Scripts are useful for creating content like games. Mugeda API is a development interface based on Javascript scripting language. The detailed usage will be detailed in subsequent chapters.

Through the above introduction, we can have a rough understanding of Mugeda Studio and get familiar with its main interface components. We will take you through the specific usage in subsequent chapters. The next section describes how to use Studio to create a new file.