PhoneBook

Date: 26.4.2007, 2:23    Total views: 66558

This tutorial will show you how to create application for searching (Phonebook),using the Action Script in flash. Using this tutorial, You will also learn how to create Input fields, how to create and use instance name, how to use action script panel and much more!







Type: Sven, Michel, Jack, Charly or Ana and click on search button to give a number!



Step 1

Create a new flash document. Set the background colour and dimension as whatever you like and click ok. After that, find if you like any appropriate image on internet or somewhere (phone, telephone booth...) and import it (Ctrl+R) into the flash becouse of better impression. You don't do this if you don't like. Your choice! ;)

Step 2

Take the Text Tool (A) and type somewhere my phonebook.

Step 3

It's time for Input field, so take the Rectangle Tool (R) and in the Colors portion of the Tool panel, block the fill color by clicking on the little paint bucket icon and then on the small square with the red diagonal line. For Stroke color choose black and draw a rectangle below about 180x20px.See the picture below.



Step 4

Then, take again the Text Tool (A) and go to the Properties Panel below the stage. After that, select a Input Text field. See the picture below.



Step 5

Then, create the input area over the rectangle that we have just created in step 3. See the picture below.



Step 6

While the Input area is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. In that field type nameField. See the picture below.



Step 7

Take again the Text Tool (A) and type over the input field number.



Step 8

Create now any button, below the input field and name it search. See the picture below.



Step 9

Take the Selection Tool (V), click once on the button to select it and go again to the Properties Panel. Then, for type searchButton.



Step 10

Create now, in an equivalent way like we have created the first input field, another input field for result, but this time for instance name type resultField. See the picture below.



Step 11

Then, type above the input field number.



Step 12

It's time for Action Script. Create a new layer and name it action. Then, click on the first frame of layer action and go to the Action Script panel (F9). Then, enter the following action script code inside the actions panel:

var directory:Array = [{name:"Sven", phone:"854-664-9652"}, {name:"Michel", phone:"459-6996-4522"}, {name:"Jack", phone:"895-659-4485"}, {name:"Charly",

phone:"956-8596-5243"}, {name:"Ana", phone:"127-25485-6695"}];

function getPhoneByName(name:String):String {
for(var i:Number = 0; i < directory.length; i++) {
if(directory[i].name.toLowerCase() == name.toLowerCase()) {
return directory[i].phone;
}
}
return "No Match";
}

searchButton.onRelease = function() {
resultField.text = getPhoneByName(nameField.text);
}

Script explanation:

This script:

var directory:Array = [{name:"Sven", phone:"854-664-9652"}, {name:"Michel", phone:"459-6996-4522"}, {name:"Jack", phone:"895-659-4485"}, {name:"Charly",

phone:"956-8596-5243"}, {name:"Ana", phone:"127-25485-6695"}];

create a directory with five objects, and every object has properties, name and phone.

This script

function getPhoneByName(name:String):String {
for(var i:Number = 0; i < directory.length; i++) {
if(directory[i].name.toLowerCase() == name.toLowerCase()) {
return directory[i].phone;
}
}
return "No Match";
}

defines a function that will be searching directory field to find the concerned phone number. This function like parameter, accept the name and returns result as string.

And this script:

searchButton.onRelease = function() {
resultField.text = getPhoneByName(nameField.text);
}

provides us, that on click on the search button we have a final result.

We're done!

Test your Movie (Ctrl+Enter).

Download source file (.fla)

  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar