ActionScript 3.0 Step By Step series (1): for good work, use the Flex Builder)

"Cutting firewood requires cutting firewood first" is what elders have said to us since childhood. For me who grew up in a poor rural area, I am definitely right, before the adults go up the hill to cut firewood, they will first sharpen the firewood !! Obviously, this is the so-called principle of "Seeking for good work and making profits first.

In this series, I will use Adobe Flex Builder as the development environment to learn the technology of ActionScript3. This article mainly introduces the development environment of ActionScript, Adobe Flex Builder, and finally ends with the "Hello Wrold" example that everyone is very familiar.

1. Download/install Adobe Flex Builder

You can download the Adobe Flex Builder software from the official website or other related websites. You are all learning the software. I don't need to talk about the software here.

Ii. Start the Flex Development Environment
You don't need to talk about this step. Just start the software! The following two figures show the development environment of Flex Builder.

The following is the Flex development environment:

Friends who have used Eclipse should be familiar with the development environment interface. The working interface of Flex is very similar to that of Eclipse, and the difference in use is not great, friends familiar with Eclipse will soon be able to start the development of ActionScript In the Flex environment.

3. Create a Flex project for "Hello Wrold"
If you create a project, you don't have to make it clear. The file -- create -- ** is similar to the Microsoft Visual Studio development environment, OK, we will create a "Hello World" project, as shown in:

The detailed settings in the new project are not described here. The first half of this series is mainly about the basics of ActionScript, and there are no knowledge points related to data interaction and communication, for example, the application server is not available for the time being, but note that I will write all the articles in this series using Web applications, set the project type to "Web Application (runs in Flash Player)" during project initiation, as shown in.

4. Develop the "Hello World" program
Through the previous several images, I think most of my friends already have a rough idea about the many ActionScript. Well, let's take a look at how to develop the ActionScript program in the Flex environment.

In the development of the Flex project, there is a very important file MXML, which is equivalent to a work stage (similar to the Flash scenario/stage ), all user interaction interfaces are developed based on this file. I will introduce them later. In the Flex project we created above, an MXML file is created by default. If OK has this file, we will create a "Hello World" program based on this file, in Flex project development, another important technology is component-based development. the controls in. NET are not very different. The buttons and TextArea components will be used in this example. I will also introduce the components in detail in subsequent articles.

In this example, two buttons are placed on the interface. Click one button to display "Hello World" on the TextArea component, and the other to clear the value of the TextArea control.
Like in the VS development environment, if WinFrom or aspx is the stage of work, I think everyone knows exactly what the toolbox is. The same is true for developing ActionScript In Flex, while MXML is the stage, and the component box is equivalent to the toolbox in. Now, you may have come up with the Flex development mode. Is it the same as dragging controls to the interface to develop interactive interfaces? The answer is yes. In fact, this development mode is used to develop ActionScript in both the Flex and Flash environments. Let's take a look at the figure below:

We can clearly understand that there are two buttons (Click me, clear) and a blank text domain control on the stage. We can see from the designer on the right, click me. The displayed content is click me. A method called OnClick () is also specified for the click event ().
The above interface design will generate the corresponding mxml tag, like ASP. NET. You can view the generated MXML code through the "Source view". The code to be written next is also embedded in the MXML code. The Code is as follows:

1 <? Xml version = "1.0" encoding = "UTF-8"?>
2 <mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "absolute" borderColor = "#3B8BF9"
3 themeColor = "# FAFDFF" backgroundGradientAlphas = "[1.0, 1.0]"
4 backgroundGradientColors = "[#4D4DF6, # FFFFFF]"
5 width = "313" cornerRadius = "0" height = "172">
6 <mx: button x = "24" y = "35" label = "" id = "btnClick" height = "34" width = "63" fontSize = "14"
7 click = "OnClick ()"/>
8 <mx: TextArea x = "125.5" y = "24" height = "119" id = "txt" maxChars = "200" fontSize = "14"
9 color = "#070108" editable = "true" type = "regxph" text = "yourobjectname"/>
10 <mx: button x = "24" y = "96" label = "empty" id = "btnClear" height = "34" width = "63" fontSize = "14"
11 click = "OnClear ()"/>
12 </mx: Application>

To fully implement the "Hello World" program, we only need to encode it in the last step to define the OnClick method. In the Flex project, we have developed ActinScript programs. NET program, is writing code the same as the Development Mode in? Yes, they are exactly the same. The following is the ActionScript code embedded in MXML:

1 <mx: Script>
2 <! [CDATA [
3 internal function OnClick (): void {
4 txt. text = "Hello World! ";
5}
6
7 internal function OnClear (): void {
8 txt. text = "";
9}
10]>
11 </mx: Script>

Use the <mx: Script> </mx: Script> label to embed the ActionScript code into MXML. Mxmlgenerates A .swf Flash file at the end. You can directly open the swf file and run the program through the generated html file.Sample programs in this article (click to test online).

V. MXML Programming Model
MXML is an XML-based markup language. In Flex technology, MXML is used to design user interfaces and implement rich Flex presentation layers. In terms of function, the functions of MXML and HTML are basically the same. They both design user interfaces. However, MXML provides richer interface components than HTML and is more structured in development, more clear. The compilation of MXML is similar to HTML, which defines and describes components through tags. This can be learned from the previous sections. In the MXML programming model, there are three points to note:

1. <mx: Application> </mx: Application> MARK

2. <mx: Script> </mx: Script> MARK

3. Custom visual component tagging

This is the configuration node that every MXML application must have. Then mark it with <mx: Script> </mx: Script>. We can use <mx: script> </mx: Script> label to embed the ActionScript code (For details, refer to the data diagram in the previous section). In addition to directly embedding the ActionScript code, we can also introduce files such as external ActionScript classes/interfaces (. as). This is the same as the Java programming model. You can use the fully qualified name d of the Import class/interface to Import the corresponding interface or object. The last step is the user-defined components. This is easy to understand and you don't need to talk about here. The above <mx: Button> </mx: button> is a component defined by the user based on actual needs.

Recommended books: corner stone 3.0 authoritative guide
Flex2 development based on ActionScript 3.0
Flash/Flex ActionScript 3.0 Interactive Development details

Recommended websites: http://blog.minidx.com/

 

 

 

 

 

From: http://www.cnblogs.com/beniao/archive/2008/12/20/1358763.html