AFComponents.com

Download source files

This tutorial uses advanced Action Script techniques. If you're not familliar with OOP, the information provided may be difficult to understand. Anyway please feel free to download the sources and use the control in your projects.

In this tutorial we are going to create a "Map Position" control using subclassing.
   
All the controls that are included in the GMap, along with custom AFC controls should extend native GControl class. It provides basic functionality which includes:

Accuiring new Movie Clip object inside the GMap component

Loading standard tuneable properties from the initizliation object (align, padding, etc)

Positioning the control inside GMap component's GUI

Methods for hiding and showing the control

Initalizing Event Dispathcer object to fire events which will be caught by GMap core

More information is provided in the GControl.as file's header which can be found in the sources package for this tutorial.

Preparation steps:

Create a folder for the project files

Place GControl.as inside this folder from the sources package

Create new Flash file and save it in the same folder

Drag GMap component on Stage and give it an instance name "gMap"

After preparation has been completed, we can start developing our custom control. First, let's create a new Action Script file. Select File -> New, then choose "ActionScript file" line and click "OK" button at the bottom of the window.
New and empty ActionScript file will be created named Script-1, click File -> Save and save the file in the same folder where you .fla file is. Name the file "customControl" (the name is case-sensitive!).
Add this AS to the file:



We have created a customControl class that extends GControl class. We have also added a class constructor function (1). The first thing to do in this function is to call super-class constructor passing it an initialization object (2).

The GControl class loads parameters from initialization object. For undefined properties it loads default values. Each control in GMap has it's own default placement, this way when you add controls to the map, they don't overlap each other. We also need to give our control a default placement. Let's align our control bottom-right corner with 10 horizontal and 10 vertical padding.



For each propery, we check if it is defined in initialization object and also we check if this object have been passed to the constructor. If not, then we set the default value. Otherwise the values will be loaded in the super-class constructor.

After a new movie clip has been created by a GUI manager, the control has been registered, the method init() will be invoked. We need to define it, to create all the control's child elements. In our case we should draw control's background and create 2 text fields, one for latitude and one for longitude.



As you have noticed we have added 3 variables: line_width, width and height. We did it, so the code will be easier to modify. For example you can change the size of the control just adjusting width and height variables.

Next, let's draw our control's background. We will draw the control in Google-style: black border, white background and a grey shading.



Now, let's hadle our text fields. We can apply formatting to the text, so that it will look nice. Please note, that we can't apply text formatting if our text field is empty. To avoid this, we set the default text.



Basically we can test our control now. First save your class file, then go to the main .fla file you have created. Open actions panel and add this AS for the first frame:

In tnis code we simple create new control object and add it to the map. Now press CTRL+Enter or choose Control -> Test Movie. You should see our control in the bottom-right corner of the map with the text LAT: 0.0000 and LNG: 0.0000.

If everything is alright, let us continue, otherwise correct the errors. You may have noticed that our control is "dead" at the moments: the text doesn't change while you drag the map. To fix that we need to catch MAP_POSITION_CHANGED event and update the text. To access main GMap object we use _owner.core reference.

We add this AS to init() function:



We also write an event handler function inside the class:



We set new text for the text fields and apply the same formatting as we did during the initialization. One function is still missing: formatNumber(). This function rounds and formats latitude and longitude to a specified number of decimal places. We are not going to explain the code for it, just add it's AS to your class:



Finally, test the movie.