Mobile phone playing animation tutorial (1)

I. Overview

Want to develop a rich and multi-cultural effect on your mobile phone? This book will introduce you to SVG elements that can be supported by Plazmic Media Engine1.0.3 (PME animation browser for Java mobile phones).

This chapter is divided into the following sections:

1. What is "Well-Formed" SVG? 2. How to create?

What is "Well-Formed" SVG?

Each language has some invalid or valid rules, which is called validity, which is related to file type. If a file claims to strictly comply with DTD (document type definition standard, you can see the syntax file of the tag language), then this file is effective. In order to make SVG have a very good form, it must comply with the following rules:

Each start tag must have a matching end tag, an example: When you write a label You have to have a label . The label cannot overlap, the XML language is a strict level, which means that you must turn off the parent element before you turn off the child element, which is called the label's complete nested. XML file can only have a root element! Element naming must follow XML name habits:

The name must begin with letters or underscore "_", can't be a number or punctuation, after the first letters, numbers and "-" "" "are allowed. The name cannot contain spaces. The name cannot contain characters ":" unless you work with namespace. Named in any occasion cannot start with XML. In the character "<", there is no space, the name of the element must keep up with "<", in ">", there is a space.

How to create?

This part includes the following areas:

Creating a cycle visualization element combination animation parameter animation effect sound 1. Create a cycle Creating a original image file For the original image file Add animation effect to the original image file to increase the sound effect Computing the calculated file generated the final animation scene, ready to configure

2. Visualization element

Note: All properties are described in different points. Plazmic's products are only supported by using imaged sizes, centimeters and inches are not supported.

Various important visual element information is listed below:

Image (GIF)

Support transparent or opaque pictures. Complex Alpha channels are not supported, so translucent is also not supported. In order to save file size, whenever you want to reduce the use of image files as much as possible. In order to save the file size, whenever you need to reduce the number of colors as possible, the number of GIF images is ideally located between 10 and 20, and some text images should be reduced between 2 and 5.

Text (Text)

Plazmic Media Engine only supports a font size. If you need other font size, you must create an image file to draw the required font. Since the fonts supported on different phones may differ, use the picture instead of the text characters to ensure consistent output effects on different machines, note: Use the image to increase file size.

Vector

Note: In the file size, use the vector map usually smaller than using pictures, however, if a polygon has a lot of vertices, then the file size is increased, so in some cases, using a picture ratio vector The diagram can reduce the file size.

Rectangle

Need to define x y coordinates, wide and high. 16 Enciprome RGB color values ​​are allowed. Can be filled or displayed. Polygon needs to define x y coordinates for all vertices. 16 Enciprome RGB color values ​​are allowed. Can be filled or displayed. Polyline needs to define the X Y coordinate to all vertices. 16 Enciprome RGB color values ​​are allowed. Can't be filled.

3. Combination

Since the visual element can be combined, the combined object can be considered as a simple object. Note: Position a combination (Group) Use: Transform: Translate (x, y).

4. Animation parameter

Plazmic Media Engine supports the following animation elements and properties:

X and Y - Describe the position of the visualization element in the scene, change the X Y coordinate value to move the visualization element in the scene. The width and high rectangle - describes the size of the rectangle, which changes the rectangle to generate the rectangle. The RGB color value of Violet (rectangular, filling polygon, polygon, and text) can cause these visualization elements to generate color change effects in RGB color values. Fill - Describe the polygon to fill, change the fill attribute of the polygon to loopically display the expected color. Note: For a combination, the element can change the X Y coordinate position to make the entire group move.

5. Animation effect

The following is a general animation process:

If you have a lot of pictures or polygons (such as like role animations), you can show them to achieve animation. Animation is controlled by the time attribute. (Sentence Example: For example, when starting an animation, when is it displayed a new picture). You cannot change the vertex position of the polygon to generate an animation, and the entire polygon must be heavy. Sentence example: You just want to change 2 top points of a polygon, then you have to create a sufficiently multilateral shape, then show them to reach the same animation effect. The following is a handling size and rotation animation: Rotation - Changing an object must be processed by multiple images or multiple polygons. Plazmic Media Engine does not directly support rotation objects. Therefore, the more pictures used, the more smooth the effect of the rotation. Size - Changing an object must be processed by multiple images or multiple polygons. Plazmic Media Engine does not directly support the change of object size. Therefore, the more pictures used, the more the size of the dimensional changes is smooth.

6. Sound

In the scene, only the sound file (.mid) in the MIDI form can be played. Most of the sound is used in the following occasions:

The start user triggered the hotspot (HotSpot) Note: By setting the loop property to true, you can repeat the sound without restrictions.