Use Flash to create a Google search program

(Source: MMDN Translation: Shen Yin)

Before constructing a Google search program, we also need Google Web APIs Developer's Kit. You can download http://vip.5d.cn/xyg/google.rarto uncompress it directly. It contains the required files and compiled files. The official address is http://www.google.com/apis. But what is actually useful to us is the GoogleSearch. wsdl file, which can be run in the same folder as the SWF file.

Construct a Flash form Screen
1. in Flash MX Professional, select File> New and select Flash Form Application. This will create an Application that contains two nested forms by default.

2. on the property panel, change the instance form1 to frmSearch .. This form will contain the main interface for searching.

3. right-click "frmSearch" and select "Insert Nested Screen". This step creates a new form Screen named form2 under "frmSearch" and changes the instance of the new form Screen to frmLoading.

4. Now you can add the UI component (components) (equivalent to the control in VB) to the form. An application form is the parent of all other forms in the application. All objects placed in the form are displayed in the child form. For this application, I put a Google image icon in the upper left corner.

5. select the "frmSearch" form. in the component panel, drag a Label, button, TextInput, and TextArea component to the stage. 3. Sort these components. (right-click and select the "Free Transform" Scaling component)

6. Use the Property inspector to name the following components: Label: lblSearchTime; Button: btnSearch; TextInput: txtQuery; TextArea: txtResults.

Create an animation
Here we will add a simple animation element to the program. For this purpose, add a "loading" element to let the user know that the search is in progress:
1. Select the "frmLoading" form screen.
2. in the lower-right corner, add an image or text element () indicating the loading process (). I made a movie clip (movie clip) and added a progress bar. you can add some text (for example, "Loading... "). Then select Modify> Timeline Effects to create an animation without any creation.

3. Select "frmLoading" in the property checker and change the visual attribute to false to hide "frmLoading ". This prevents the loaded part from being displayed by default. We can display it through ActionScript when performing a search.

Connect a data source with components
Flash MX Professional has a new component structure, including the UI components and new data components. in Flash, components do not compile the code library like DLLs. more specifically, they are equivalent to controls in VB or Delphi. flash Professional adds the XMLConnector and webserviceconnecomponents. These two notification data sources are used to automatically complete the interface.

The new component binding allows you to define input and output for data components. using the visual design Panel built by IDE, you can directly connect the XMLConnector or WebServiceConnector parameter to the UI component in your form. you can use the parameters tab of the Flash component indicator (similar to the property page in VB.

Below we use these technologies to connect your application to Google Search:

1. Drag a "WebServiceConnector" component from the component panel to the "frmSearch" form screen. This component is invisible after it is published as an application. An Instance named GoogleSearch is provided for this component.

2. Select the GoogleSearch Component and open the Component inspector ). This is where you set up the network service. Select the parameters tab and set wsdlurl to the wsdlurl address of Google's (in this example, you should write the http://api.google.com/GoogleSearch.wsdl as follows ). Flash will automatically request this service and get its valid operations. From the "operations" menu, select "doGoogleSearch "().

3. Select the Bindings tab in the component checker. This Panel allows you to bind WEB Service input and output directly to a UI component of the application. Click the "+" icon to select the parameter you want to bind. The input parameters are marked by the right arrow table, and the output parameters are marked by a left arrow (). The Google interface requires all input parameters, so they are added to the binding list one by one, because we also need to bind an output parameter and add the output parameters to the list.

4. For each binding in the list, you need to set a UI component, a variable reference, or a text variable to pass to or return from the web service. First, select "params. q "-the search request string sent To the Google service, bind it To the" TextInput "component in the" frmSearch "form, and click the" find "icon on the" Bound To "line. In Flash, open the "Bound To" dialog box, which displays a list of levels of your application, find the "txtQuery" component instance, select it, and click OK ().

5. Fill in other input parameters for the Google service. Other parameters can contain text input. Define a text input. In addition To selecting user constants in the "Bound To" dialog box and text entered in the corresponding text box, perform the same operation in step 1. The following list shows the values of each input parameter.

Params. key [product key for your Google Web API]
Params. start 0
Params. maxResults 10
Params. filter true
Params. restrict [empty string]
Params. safeSearch true
Params. lr [empty string]
Params. ie [empty string]
Params. oe [empty string]
Repeat Step 4 to enter a parameter for results. searchTime and bind it to the "lblSearchTime" component instance of the "frmSearch" form. The component system allows you to format the input or output before binding. Since the "searchTime" parameter is a floating point number, you can format the value to make it easier for users to understand. From the "Formatter" pop-up menu, select "Compose String", click the "Formatter" option, and enter the following String in the dialog box: Search time: <.> seconds ()

When a component is bound, this parameter value is replaced by a placeholder <.>.

Note: Flash Security Sandbox Settings: If a Flash application does not run on a website through a proxy, direct access to a remote WEB service is not allowed currently. However, if Flash or Flash Professional is installed on your computer, you can work on it because you have a developer version of Flash Player. This example will not work if there is no server proxy.

Additional Script Action
The new behavior (behaviors) makes it easier to control the description of UI component events than previous versions.

Here we will use an action to trigger the web service and display the result:

1. Click the "btnSearch" button on frmSearch. On the "behavior panel", click the "+" icon and select Data> Trigger Data Source. In the result dialog box, select GoogleSearch webserviceconneand click OK ().

2. When "btnSearch" is selected, open the "Action panel ). You will see that Flash automatically adds the code that triggers the web service when the user clicks the "Search" button.

3. If all web services cannot be bound in the component checker, you need to use code management. Before an event is triggered, add the following code. The event listener allows you to intercept web Service sending and result events, and complete additional operations by using ActionScript.

On (click ){
// Trigger data source Behavior
// Macromedia 2003
This. _ parent. GoogleSearch. addEventListener ("send", onGoogleSearch );
This. _ parent. GoogleSearch. addEventListener ("result", onGoogleSearchResult );
This. _ parent. GoogleSearch. trigger ();
}
4. add the ActionScript function to process these events. The following code performs some interface operations, such as allowing and disabling components when the search is in progress. More importantly, it can repeat the results returned by Google, you can use HTML to format them and display them in the "txtResults" "TextArea" instance.

On (click ){
Var onGoogleSearch = function ()
{
// Displays the progress bar chart when no search is performed.
_ Root. application. frmSearch. frmLoading. visible = true;
This._parent.txt Results. text = "";
This. _ parent. lblSearchTime. text = "";
This. enabled = false;
This._parent.txt Query. enabled = false;
}
Var onGoogleSearchResult = function ()
{
Var res = this. _ parent. GoogleSearch. results. resultElements; // shorthand
For (var I = 0; I <res. length; I ++)
{
Var s = "";
S + = "<a href = \" "+ res [I]. URL + "\"> <font size = \ "+ 1 \" color = \ "# 0000FF \"> <u> "+ res [I]. title + "</u> </font> lt;/a>
";
S + = res [I]. snippet +"
";
If (res [I]. summary! = "") {S + = "<font color = \" #999999 \ "> Description: </font>" + res [I]. summary +"
";}
S + = "<a href = \" "+ res [I]. URL + "\"> <font color = \ "#009900 \"> <u> "+ res [I]. URL + "</u> </font> </a>-" + res [I]. cachedSize;
S + ="

";
This._parent.txt Results. text + = s;
}
// Hide the progress bar when searching again
_ Root. application. frmSearch. frmLoading. visible = false;
This. enabled = true;
This._parent.txt Query. enabled = true;
}
// Trigger data source Behavior
// Macromedia 2003
This. _ parent. GoogleSearch. addEventListener ("send", onGoogleSearch );
This. _ parent. GoogleSearch. addEventListener ("result", onGoogleSearchResult );
This. _ parent. GoogleSearch. trigger ();
}
Now you are ready to release your application. Select File> Publish or press Control-Enter to Publish with the default settings.
Try your Google search now!