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.
Note
You must have an
Atomz.com search account to complete this tutorial.
You can get a free Atomz.com search account for your
own site by visiting the following URL:
http://www.atomz.com/search/trial_account.htm
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:
Create a new document in Flash MX
by going to File | New. A new, blank Flash MX movie will be
displayed.
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 ]
Once you have selected Input
Text, click and drag in the work area to draw a text field:
[ draw the
text field ]
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:
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 ]
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.
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:
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 ]
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. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
Creating
an Atomz.com Search Field
