Creating a simple address book using shared objects--tutorial.jcwcn.com

If you are not too sure what shared objects are or if you don't know how to use them, I suggest you have a look first at our previous tutorial using Shared Objects in Flash.

In this tutorial we are going to create a simple address book in Flash. The data will be written in a shared object and will then be pulled each time we open the SWF. This address book can be used over the web or locally on your computer, it doesn't really matter since the shared object will be residing on your local machine.

Before we start going into more detailed explanations, let's have a look at the final version of the application :

How to use it :

1. press New to create a new entry
2. be sure that the new entry is selected and populate the fields on the right.
3. press Add to add the data to the selected item of the list, you will notice that the label will change and will be represented by the firstname.
4. to delete an entry you just need to select an item in the list and to press Del

I have obviously kept the address book very simple since the main objective of the tutorial is to show you how to populate the list with data pulled from a shared object. If you feel like it, there are many features you could add to the address book : another list with letters from A to Z to just show the entries starting with a specific letter, some more details could be added too like telephone number, website address etc...

Important : The data entered is saved in a shared object on your local machine not on the server side.

Tutorial

1. Create a new FLA of 400x290

2. From the component panel, drag a list component on the left side of the stage. Change the size according to your design and in the "Instance name" field enter entries (fig1)

fig1

3. From the component panel, drag 4 text areas on the right side of the stage. These 4 text areas are associated from top to bottom with : the firstname, the name, the address and the email. Give them the respective instance name : firstnameField, nameField, addressField, emailField. Be sure that all these text fields are editable by setting the parameter to true in their respective parameter window.

4. From the component panel, drag 3 button components. Label them New, Add and Del and give them the respective instance name of : newButton, addButton, deleteButton.

Our main interface is ready, You can add as many bells and whistles as you want and when you are ready let's have a look at the code.

Let's have a look at the code below, roll over the

if you want to see the comments associated with the nearby code (be sure you have javascript enabled for this to work properly).

// We define the font family and the size for all the components

_global.style.setStyle("fontSize", 11);
_global.style.setStyle("fontFamily", "Verdana");

// We don't want the scroll bar to be visible in the list component unless it is needed.
entries.vScrollPolicy = "Auto"; , "off" or "auto". The value "auto" causes a scroll bar to appear when needed.') }" onmouseout="function anonymous() { hideTip() }" height="13" src="/d/file/2D-Graphics/Flash/Web-Design/2007-06-16/c545910eba8c5291036f22177a9601a0.gif" width="13" align="absMiddle" />

// We create or retrieve the shared object containing the data of our address book
myAddresBook= SharedObject.getLocal("myAddresBook");

download source files

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Creating a simple address book using shared objects

relation tutorial

Category

New

Hot