Basic xflash syntax

Usage
========================================================== ========================
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
// Put your code here
</Xmp>
========================================================== ======================================
Copy the two files to the same directory on the local machine and then reference them.
Start from scratch

All the elements used in xflash are represented by xml, which is called xfml. Xfml has similar functions as html, and the event processing method is the same, but it is much simpler and provides many practical properties to facilitate the interface layout.

Box-box Elements
The box element is the basis of the xflash interface structure and has powerful performance. Besides, only the box element can contain other elements or other boxes, which indicates its significance. Compared with div in html or mc in flash, box integrates many common functions, making interface development easier.
Pos is a location attribute in the format of "x, y, width, height". Separate parameters with commas (,). This is easy to understand, A factor that makes pos Positioning easier is the addition of keywords. The key words on the x coordinate are c and r, that is, center and right. The key words on the y coordinate are m and B, that is, center (vertical) and bottom; both width and height have only one keyword f, that is, 100% is full. Pos supports computation expressions, but the expressions cannot contain parentheses. After the keyword is used, the location and size of the box will automatically change with the change of the scenario, without the need to use the location code. Below are a few simple positioning examples.
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Box pos = "0, 0, 100,100" bg = "#0d8910" bd = "# black"/>
<Box pos = "c, MB, 100,100" bg = "#0d8910" bd = "# black"/>
<Box pos = "r, B, 100,100" bg = "#0d8910" bd = "# black"/>
<Box pos = "0, B, f/2,100" bg = "#0d8910" bd = "# black"/> </xmp>
</Xmp>

The bg attribute indicates the background of the box. It is distinguished by the symbol "#". It is prefixed with "#" And filled with color. Otherwise, it is filled with images. The color is the same as that in html. It is represented in hexadecimal notation. Some colors can be defined in English. The loadFile function must be used to load background images. For remote images, cross-origin access is restricted, the criterion is to check whether the front of the url is "http ://". In addition, a multi-image background is provided, which can be 3 images or 9 images. The three images are used as the background, the left and right images remain unchanged, and are tiled in the middle. Based on these images, nine images are also commonly used as the background, the format is "_ *" in the bg parameter, which will be replaced with "_ l", "_ c", and "_ r" respectively, and three images are taken for combination, the nine images are marked. Below are some application instances of bg.
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Box pos = "0, 0, 100,100" bg = "#0d8910"/>
<Box pos = "200,200,286,110" bg = "http://www.google.cn/intl/zh-CN/images/logo_cn.gif"/>
</Xmp>

◇ Multi-image background instance
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Preload>
<File url = "photo/box_x.png"> dlg _*_*. png:, 60,; bar _*. png: 0,105,170, 9 </file>
</Preload>
<Box pos = "c-120, M-80," bg = "bar _*. png "> <label align =" center "pos =" c, m, 60, 20 "> me short </label> </box>
<Box pos = "c-120, m + 80,180, 34" bg = "bar _*. png "> <label align =" center "pos =" c, m, 60, 20 "> long </label> </box>
<Box pos = "c + 120, m-120, 120,120" bg = "dlg _*_*. png "> <label align =" center "pos =" c, m, 60, 20 "> small </label> </box>
<Box pos = "c + 120, m + 120,220,220" bg = "dlg _*_*. png "> <label align =" center "pos =" c, m, 60, 20 "> large </label> </box>
</Xmp>

The bd attribute indicates the border of the box, which can only be represented by color, which is better understood. If you add the bd2 attribute, you can make the upper-left border a color, and the lower-right border a different color. Below is a typical windows protruding panel simulation instance.
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Box pos = "c, m, 300,200" bg = "# d4d0c8" bd = "# d4d0c8" bd2 = "#404040">
<Box pos = "808080, F-2, F-2" bd = "# white" bd2 = "#"/>
</Box>
</Xmp>

Dragging a box is simple. You only need to provide the drag attribute. There are three drag values: parent, this, and edit. parent is used to drag the parent element, this is used to drag the parent element, and edit is used to locate the parent element during development, after dragging, the coordinates are copied to the clipboard and ctrl + v in the editor.
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Box pos = "50, 50, 300,200" drag = "this" bg = "# d4d0c8" bd = "#808080"/>
</Xmp>

We can also provide box with event response capabilities. Currently, four events are provided: onmouseover, onmouseout, onmousedown, and onmouseout.
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Box pos = "50, 50, 300,200" onmouseup = "alert (this)" bg = "# d4d0c8" bd = "#808080"/>
</Xmp>
Button-button
There are two types of buttons in xflash: Common buttons and pure image buttons. You only need to input text for a normal button without specifying the background. For a pure image button, you need to prepare a three-state image, which corresponds to three statuses of the mouse event. It should have been loaded in advance during the Scenario Generation.
The onclick method is used for button events. The onclick method executes the xf method, for example, alert (), that is, xf. alert (). This method has been defined by the system. Users can execute their own methods, such as "onload1 ()". Therefore, xf must be added to the program. onload1 = function () {/* code */}, you can click to call it.
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Preload> <file url = "photo/button_a.png"/> </preload>
<Button onclick = "alert ('I am a regular button')" pos = "c, m-20, 60, 21"> normal button </button>
<Button onclick = "alert ('I am a pure image button')" pos = "c, m + 20, 53, 17" bg = "button_a.png"/>
</Xmp>

For an application, there are many common buttons, and there is only one style. The default normal button style is similar to windows. How can I customize a common button? First, you need to prepare a three-state image and perform virtual cutting as button _ *. png during preload, so that the button style will automatically change. ◇ Custom common buttons-> run the following js
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Preload> <file url = "photo/button_x.png"> button _ *. png:, </file> </preload>
<Button onclick = "alert ('I am a custom normal button')" pos = "c, m-20, 90,21"> normal button </button>
</Xmp>
Label-label

The text in the label can only be one line, and is automatically vertically centered. In addition to the font-related attributes, you can also define margins and horizontal alignment. The following describes the label attributes.

Font: font type. Currently, flash only supports English fonts, which is invalid for Chinese fonts.
Size: font size, in pixels
Color: font color
Bold: bold when the value is 1
Html: whether it is in html Format
Align: horizontal alignment, which has two values: center and right.
Padding: margin at both ends of the horizontal direction
Padding1: horizontal left margin
Padding2: right margin in the horizontal direction
◇ Tag instance-> run the following js
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Label pos = "c, m-20," bd = "# black"> common label </label>
<Label pos = "c, m + 20,180, 30 "bd =" # black "font =" "size =" 16 "color =" #9b0000 "bold =" 1 "padding1 =" 12 "> added style labels </label>
</Xmp>
Input-input box
Input and label are very similar and can be viewed as editable labels.

Font: font type. Currently, flash only supports English fonts, which is invalid for Chinese fonts.
Size: font size, in pixels
Color: font color
Bold: bold when the value is 1
Html: whether it is in html Format
Align: horizontal alignment, which has two values: center and right.
Padding: margin at both ends of the horizontal direction
Padding1: horizontal left margin
Padding2: right margin in the horizontal direction
Password: When the value is 1, it is the password input box.

<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Box pos = "c, m, 200,200">
<Label pos = "20, 20, 50, 20"> User name: </label>
<Input pos = "75,20, 120,21" bd = "# black"> </input>
<Label pos = "20, 50, 50, 20"> password: </label>
<Input pos = "75,50, 120,21" bd = "# black" password = "1"> </input>
</Box>
Textarea-text area

Textarea is a multi-line text field that can be used for input or display.
Font: font type. Currently, flash only supports English fonts, which is invalid for Chinese fonts.
Size: font size, in pixels
Color: font color
Bold: bold when the value is 1
Html: whether it is in html Format
Align: horizontal alignment, which has two values: center and right.
Padding: margin at both ends of the horizontal direction
Padding1: horizontal left margin
Padding2: right margin in the horizontal direction
Padding3: vertical top margin
Padding4: vertical bottom margin
ReadOnly: When the value is 1, it cannot be edited.
Selectable: this parameter can be selected when the value is 1. It is meaningless for the Editable textarea attribute.
Movie-animation Elements

Flash does not support animated images in gif format. You need to integrate all images into a single graph. After the movie element is read, it will display the video on a progressive basis to achieve the animation effect.
The src attribute specifies the image path referenced by the animation. delay indicates the number of milliseconds that the video stays after each seek. The default value is 100.
◇ Animation demo-> run the following js
<Script src =/xflash. js> </script>
<Xmp type = "xfml">
<Preload> <file url = "photo/loading.jpg"/> </preload>
<Box pos = "c, m-100," bg = "loading.jpg"/> <movie pos = "c, m, 104,12 "delay =" 50 "src =" loading.jpg "/>
</Xmp>
</Script>