Creating an Atomz.com Search Field

by kirupa   | filed under Flash and ActionScript

One of the greatest technologies to appear on the net was Atomz's Search engine. Unlike other search engines that forced you to configure CGI/Perl scripts to work, Atomz created a search engine that worked from a remove location on their server custom-tailored to your site. Best of all, the Atomz Personal search feature is free for sites under 500 pages.

Over the past few days, I have been working on a Flash only navigation (which can be seen on the top of all the pages). One question that I encountered was "How do I use my cool Atomz search feature from within Flash?" After unsuccessfully search google, I decided to experiment with Flash and create a custom text field for Atomz.com myself.

The following animation is an example of what you will create. Enter a word in the text field and press the Search button or press Enter:

[note: your version will NOT load search results in a new window]

Creating the Search Field

The steps will explain how to setup the animation for creating a search field:

1. Create a new document in Flash MX by going to File | New. A new, blank Flash MX movie will be displayed.
    
2. Select the Text Tool from the left. The Text Properties panel will appear. Select Input Text from the Properties panel that appears:

[ select input text ]

3. Once you have selected Input Text, click and drag in the work area to draw a text field:

[ draw the text field ]

4. Now that you have your Input text field drawn, let's modify it's properties. Select the Input text field you just drew. The Properties panel should appear with options for you to work with. From the Properties panel, ensure that the font is Verdana size 10.
   
   From the Properties panel, again, we need to give this field a variable name so data can be transferred. In the text box marked Var:, enter the word url. For the final step, click the Show Border Around Text button. Your text field Properties panel window should look like the following window:

[ the text properties panel ]

You have just finished creating the text field. The time has now arrived for you to create the button and the actions to make the search form work!

Creating the Button and Adding Actions

The following instructions will help you to create the button and add actions:

1. Now that your text field is complete, it is time to add a button to receive the mouse input. Draw a small circle next to the text field to simulate a "go" or "search" button:

[ the little green circle that will be the button ]

2. Select the circle and press F8 (Insert > Convert to Symbol). From the Convert to Symbol dialog box, select Button and press OK. You have just created your button.
    
3. Time to add actions....right click on the button and select Actions. From the Action window that appears, copy and paste the following lines of code:

                    on (release, keyPress "<Enter>") {

  id = "00040c2f-sp00000000";

  address = "http://search.atomz.com/search/?sp-advanced=1&sp-q="+url+"&B1=search&sp-a="+id+"&sp-w-control=1;";

  getURL(address);

}

4. You will have to modify the code so that it works with your Atomz.com search account. Take a look at the code you just pasted into Flash. Find the variable marked "id". After the equal sign on "id", You will see a strange char/number string. That is your unique identifier atomz uses.
   
   To find out what your id is, simply use Atomz's site to search your site with a random keyword. Look in the URL box of your browser. Find the words 'sp-a' and then the string after the equal sign is your id:

[ the url box from where you can determine your atomz search id ]

5. Once you have found your atomz.com id, replace my id in the code with that of yours. Make sure you keep the quotation marks around your id to make sure Flash doesn't give you an error message:

[ replace my id with your id; keep the quotation marks! ]

You have just completed the atomz.com search field. The following lines will briefly explain what each line of code you entered copied and pasted a few lines ago mean. As always, I have provided the source code to the animation you see above. Click the Download FLA link below to download the source file:

For information on creating a search form that plugs into google.com and searches using google's search engine, click here

Also, a special thanks goes out to Nischint Sohal who gave me the idea for this tutorial!

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇