THE SUMMER HOLIDAYS ARE HERE, SO WE SHOW YOU HOW TO
MAKE AN EXCITING TRAVEL JOURNAL USING YAHOO! MAPS API
WEB TECHNOLOGIES ARE changing at an ever impressive rate. However, this needn’t be a source of panic for web designers as many of the new technologies give access to content which would otherwise be out of reach. Take the Yahoo! developer network: here you can gain access to all sorts of goodies in the form of what is called an API (application programming interface). The API gives you access to content such as search facilities, mail, Flickr images and maps.
We’ll be taking a look this month at how to create a custom web application for tracking a journey – sort of a travel blog but with visual references to where you are visiting. This visual representation of an old favourite, the blog, is a great way to present site content in much more interesting ways. To store the data we’re going to use a MySQL database, so make sure your host has PHP and MySQL facilities; if not we’ll provide the URLs to set up a test server on your own computer.
Getting Started
To connect to the Yahoo! Maps API, we need to download the API and register for a key. Go to http://developer.yahoo.com/maps/flash/componentEULA.html and download the extension for Flash. Once downloaded, double-click this to install in the extension manager.
Register the application
To make a custom application using the Yahoo! API you’ll need to register it to get a user key. Go to https://developer.yahoo.com/wsregapp/index.php, fill in the details and you’ll be given a user key. Make a note of this and save it for later on when we add the map to Flash.
Open Flash
We’re now ready to start building our application, so open Flash and create a new document. If you are using CS3, make it an ActionScript 2.0 document. Make the document size 800 x 600 pixels in the properties palette. Open the component window and find the Yahoo! Maps API.
Add to the stage
Drag the map API to the stage and change it to 760 pixels wide, 500 pixels high. Position the map at 20 pixels on the x-axis, 80 pixels on the y-axis. Give this the instance name of ‘myMap’. Click on the parameters tab and under AppID add the key you received in Step 2. Press Ctrl+Enter to test.
Start building the interface
You should see a map of the US in the map window (later on we’ll look at how we can change the opening location). Go to View>Rulers then select the map on the screen. Click on the ruler and drag guides to the map edges, so we can see the map easily on the screen.
Rectangle top
Now use the rectangle tool to add a rectangle to the stage. Make it 760 x 60 pixels and position it at 20 pixels on both the x- and y-axis. Remove any stroked edge and in the colour palette change the fill to a linear gradient. Make a light grey to darker grey gradient and add to the rectangle.
Gradient rotate
Use the transform tool to rotate the gradient so it’s top to bottom. Open file ‘graphics.fla’ from cover CD. Return to original document and in the library change drop menu to ‘graphics.fla’. Create a new layer; drag ‘map’ and ‘spinning sphere’ symbols to stage. Position and scale as shown.
Add the text
Use the text tool too add text as shown in the screenshot. Create a new layer and drag this below all other layers. Add another guide from the ruler along the top of the gradient rectangle. Choose the rectangle tool again and give the rectangle a 15 pixel corner in the properties palette.
Add a rectangle
Lock all layers except the bottom one, then make sure your stoke and fill colour is white. Using the rectangle tool, add a rectangle from the top left guide to the bottom right guide. Double-click the stroked edge and cut it (Ctrl+X), then unlock the top layer and paste it in place.
Thick edges
With this stroke selected, change the width of the stroke to 4 pixels in the properties palette then lock this top layer again. Select the rectangle on the bottom layer and go to Modify>Convert to Symbol. Make the symbol a movie clip and name it ‘shape’. Now click on the filters tab in the properties palette.
Add a drop shadow
Click the plus icon and add a drop shadow filter. Give this a 20 pixel blur and change the strength to 80% then change the angle to 90º. Save your Flash document into a new folder ready for uploading to a web server later. Now add
a new layer which we will use for code to add functionality to our application.
Add access code
This allows access on the web to the Yahoo site and will import all the relevant controls that we need to add to the map on the screen.
Add tool
The first line finishes the XML object and then a function is set up to add the ability to alter the view of the map to satellite or hybrid view. We also add the ability to load marker locations from an XML document.
Parse the XML
This reads the XML code of our custom markers and adds them as marker graphics to the map. We will load this from an XML file in a few steps, but later we’ll read these points from a database instead so that we can easily read and write the points.
Longitude and latitude
This code takes the centre point of the map and finds the longitude and latitude. At the moment, it is set to push this information to the trace window – we can use this to set our map at the start.
Copy XML file
Copy the cover CD ‘locs.xml’ file into the same folder as your Flash file, then press Ctrl+Enter in Flash to test your movie. You can now change the map and zoom in. Double-click on it to centre on that location. We’ve centred on Bournemouth and we’ve got a marker on the map.
Click the marker
Roll over the marker and the title can be seen; click and a description pops up. In the output window, find the last two numbers (the longitude and latitude). Click on the map in Flash, copy and paste these numbers into the Parameters as shown and change the zoom level to 8.
Without a trace
Open the ActionScript window and delete lines 52 and 53 which trace longitude and latitude. Press Ctrl+Enter and it should start the map at the place you require. Now we’ll create the database necessary. If you have phpMyAdmin running on your server, open this in your browser.
Import the database
Go to the SQL tab and choose file ‘entries.sql’ from the cover CD. Click OK to set up the table and some data. If you don’t have phpMyAdmin, open ‘entries.sql’ in a text editor and cut and paste the SQL into your admin tool. With the database running, we need to connect to this using PHP.
Password and database
On the cover CD we’ve included the file ‘db.php’. Drag this into the same folder as your Flash document and open the file. Change the ‘username’, ‘password’ and ‘database’ names to those you use on your website. This file pulls the content out of the database and sorts it into an XML file.
Another PHP file
Copy file ‘write.php’ into the same folder as your Flash. Open this and change the ‘username’ , ‘password’ and ‘database’ to those matching your own. This file will write any new entries into the database. We need to go back to Flash now and those features so we can call this script.
Create a button
Press Ctrl+F8 to make a new symbol in the library, choose Button as the type and name it ‘button’. Draw a rectangle 65 x 17 pixels. Select the hit state and press F5. Return back to the main stage and add the ‘button’ symbol to the top layer, name the instance ‘add_btn’ and position as shown.
A new symbol
Use the text tool to add the word ‘Add Entry’ in white above the button. Now press Ctrl+F8 to add a new symbol. Make this a movie clip and name it ‘entry’ then press OK. Use the rectangle tool to draw a white rectangle with a 5 pixel corner radiusand a grey edge. Make it the same size as shown above.
Add text
Use the text tool to add the text as shown, but add two ‘input’ text boxes. Give the first text area the variable name ‘newTitle’ and the second ‘newDesc’. Add two ‘button’ symbols from the library and give the instance name of ‘close_btn’ and ‘submit_btn’. Add text labels for these button respectively.
Draw a cross
Return to main stage and add the ‘entry’ symbol to it. Give it the instance name of ‘entry_mc’ and position at 30 pixels (x), 280 (y). Create a new movie clip symbol, naming it ‘cross’. Press OK and draw a small cross-hair symbol. Now go back to the main stage and add this symbol to it.
Change the XML file
Position ‘cross’ symbol at 400 (x), 320 (y) in the properties palette. Select ActionScript frame and open the script. On line 26 change the XML file to load to the dynamic PHP file: markerXML.load(“db.php”), to load the database content. Position the cursor at the end of the code to add more.
Get the date
Add this code under the rest. The first two lines grab the date. Then functionality is added to the add_btn, so it toggles the visibility of the cross and entry movie clip.
Change of mind
The next code adds functionality to the close_btn inside the entry movie clip. If the user does not want to add an entry, then clicking the close button clears any text in the input text boxes and turns the visibility of the movie clips off. The last two lines set up a LoadVars object to send the data out to the database.
Final Step
This code sends the data to the database and reloads the content to refresh the markers. Now publish this with a HTML file and upload the files to the web server. You should be able to connect and add markers.
We’ll be taking a look this month at how to create a custom web application for tracking a journey – sort of a travel blog but with visual references to where you are visiting. This visual representation of an old favourite, the blog, is a great way to present site content in much more interesting ways. To store the data we’re going to use a MySQL database, so make sure your host has PHP and MySQL facilities; if not we’ll provide the URLs to set up a test server on your own computer.
Getting Started
To connect to the Yahoo! Maps API, we need to download the API and register for a key. Go to http://developer.yahoo.com/maps/flash/componentEULA.html and download the extension for Flash. Once downloaded, double-click this to install in the extension manager.
Register the application
To make a custom application using the Yahoo! API you’ll need to register it to get a user key. Go to https://developer.yahoo.com/wsregapp/index.php, fill in the details and you’ll be given a user key. Make a note of this and save it for later on when we add the map to Flash.
Open Flash
We’re now ready to start building our application, so open Flash and create a new document. If you are using CS3, make it an ActionScript 2.0 document. Make the document size 800 x 600 pixels in the properties palette. Open the component window and find the Yahoo! Maps API.
Add to the stage
Drag the map API to the stage and change it to 760 pixels wide, 500 pixels high. Position the map at 20 pixels on the x-axis, 80 pixels on the y-axis. Give this the instance name of ‘myMap’. Click on the parameters tab and under AppID add the key you received in Step 2. Press Ctrl+Enter to test.
Start building the interface
You should see a map of the US in the map window (later on we’ll look at how we can change the opening location). Go to View>Rulers then select the map on the screen. Click on the ruler and drag guides to the map edges, so we can see the map easily on the screen.
Rectangle top
Now use the rectangle tool to add a rectangle to the stage. Make it 760 x 60 pixels and position it at 20 pixels on both the x- and y-axis. Remove any stroked edge and in the colour palette change the fill to a linear gradient. Make a light grey to darker grey gradient and add to the rectangle.
Gradient rotate
Use the transform tool to rotate the gradient so it’s top to bottom. Open file ‘graphics.fla’ from cover CD. Return to original document and in the library change drop menu to ‘graphics.fla’. Create a new layer; drag ‘map’ and ‘spinning sphere’ symbols to stage. Position and scale as shown.
Add the text
Use the text tool too add text as shown in the screenshot. Create a new layer and drag this below all other layers. Add another guide from the ruler along the top of the gradient rectangle. Choose the rectangle tool again and give the rectangle a 15 pixel corner in the properties palette.
Add a rectangle
Lock all layers except the bottom one, then make sure your stoke and fill colour is white. Using the rectangle tool, add a rectangle from the top left guide to the bottom right guide. Double-click the stroked edge and cut it (Ctrl+X), then unlock the top layer and paste it in place.
Thick edges
With this stroke selected, change the width of the stroke to 4 pixels in the properties palette then lock this top layer again. Select the rectangle on the bottom layer and go to Modify>Convert to Symbol. Make the symbol a movie clip and name it ‘shape’. Now click on the filters tab in the properties palette.
Add a drop shadow
Click the plus icon and add a drop shadow filter. Give this a 20 pixel blur and change the strength to 80% then change the angle to 90º. Save your Flash document into a new folder ready for uploading to a web server later. Now add
a new layer which we will use for code to add functionality to our application.
Add access code
This allows access on the web to the Yahoo site and will import all the relevant controls that we need to add to the map on the screen.
System.security.allowDomain(“http://maps.
yahooapis.com/”);
import com.yahoo.maps.markers.
CustomPOIMarker;
import com.yahoo.maps.tools.PanTool;
import com.yahoo.maps.widgets.ZoomBarWidget;
import com.yahoo.maps.widgets.
SatelliteControlWidget;
import com.yahoo.maps.LatLon;
import com.yahoo.maps.Overlay;
cross_mc._visible=false;
entry_mc._visible=false;
myMap.addEventListener(com.yahoo.maps.api.
flash.YahooMap.EVENT_INITIALIZE,onInit);
var markerXML:XML = new XML();
Add tool
The first line finishes the XML object and then a function is set up to add the ability to alter the view of the map to satellite or hybrid view. We also add the ability to load marker locations from an XML document.
markerXML.ignoreWhite = true;
function onInit(event:Object):Void {
var panTool:PanTool = new PanTool();
myMap.addTool(panTool,true);
myMap.addWidget(new SatelliteControlWidget());
var zoom:ZoomBarWidget = new
ZoomBarWidget();
myMap.addWidget(zoom);
var points = myMap.getCenter();
convert(points);
markerXML.onLoad = function(success)
{
if (success) {
addMarkers(this);
}};
markerXML.load(“locs.xml”);
}
Parse the XML
This reads the XML code of our custom markers and adds them as marker graphics to the map. We will load this from an XML file in a few steps, but later we’ll read these points from a database instead so that we can easily read and write the points.
function addMarkers(xml:XML):Void {
var total = xml.firstChild.childNodes.length;
for (var i = 0; i< total; i++) {
var lat:Number = xml.firstChild.childNodes[i].
childNodes[0].firstChild.nodeValue;
var lan:Number = xml.firstChild.childNodes[i].
childNodes[1].firstChild.nodeValue;
var date:String = xml.firstChild.
childNodes[i].childNodes[2].firstChild.
nodeValue;
var info = xml.firstChild.childNodes[i].
childNodes[3].firstChild.nodeValue;
var desc = xml.firstChild.childNodes[i].
childNodes[4].firstChild.nodeValue;
var markerData:Object = {index:date, title:
info, description:desc, markerColor:0x000000,
strokeColor:0xFFFFFF};
myMap.addMarkerByLatLon(CustomPOIMarker,new
LatLon(lat, lan),markerData);
}
}
Longitude and latitude
This code takes the centre point of the map and finds the longitude and latitude. At the moment, it is set to push this information to the trace window – we can use this to set our map at the start.
myMap.addEventListener(com.yahoo.maps.api.
flash.YahooMap.EVENT_MOVE,onMapMove);
function onMapMove() {
var points = myMap.getCenter();
convert(points);
}
var _latlon:Object;
var newLat:Number;
var newLon:Number;
function convert(points:Object) {
_latlon = new LatLon(points.lat,
points.lon);
newLat=points.lat;
newLon=points.lon;
trace(newLat);
trace(newLon);
}
Copy XML file
Copy the cover CD ‘locs.xml’ file into the same folder as your Flash file, then press Ctrl+Enter in Flash to test your movie. You can now change the map and zoom in. Double-click on it to centre on that location. We’ve centred on Bournemouth and we’ve got a marker on the map.
Click the marker
Roll over the marker and the title can be seen; click and a description pops up. In the output window, find the last two numbers (the longitude and latitude). Click on the map in Flash, copy and paste these numbers into the Parameters as shown and change the zoom level to 8.
Without a trace
Open the ActionScript window and delete lines 52 and 53 which trace longitude and latitude. Press Ctrl+Enter and it should start the map at the place you require. Now we’ll create the database necessary. If you have phpMyAdmin running on your server, open this in your browser.
Import the database
Go to the SQL tab and choose file ‘entries.sql’ from the cover CD. Click OK to set up the table and some data. If you don’t have phpMyAdmin, open ‘entries.sql’ in a text editor and cut and paste the SQL into your admin tool. With the database running, we need to connect to this using PHP.
Password and database
On the cover CD we’ve included the file ‘db.php’. Drag this into the same folder as your Flash document and open the file. Change the ‘username’, ‘password’ and ‘database’ names to those you use on your website. This file pulls the content out of the database and sorts it into an XML file.
Another PHP file
Copy file ‘write.php’ into the same folder as your Flash. Open this and change the ‘username’ , ‘password’ and ‘database’ to those matching your own. This file will write any new entries into the database. We need to go back to Flash now and those features so we can call this script.
Create a button
Press Ctrl+F8 to make a new symbol in the library, choose Button as the type and name it ‘button’. Draw a rectangle 65 x 17 pixels. Select the hit state and press F5. Return back to the main stage and add the ‘button’ symbol to the top layer, name the instance ‘add_btn’ and position as shown.
A new symbol
Use the text tool to add the word ‘Add Entry’ in white above the button. Now press Ctrl+F8 to add a new symbol. Make this a movie clip and name it ‘entry’ then press OK. Use the rectangle tool to draw a white rectangle with a 5 pixel corner radiusand a grey edge. Make it the same size as shown above.
Add text
Use the text tool to add the text as shown, but add two ‘input’ text boxes. Give the first text area the variable name ‘newTitle’ and the second ‘newDesc’. Add two ‘button’ symbols from the library and give the instance name of ‘close_btn’ and ‘submit_btn’. Add text labels for these button respectively.
Draw a cross
Return to main stage and add the ‘entry’ symbol to it. Give it the instance name of ‘entry_mc’ and position at 30 pixels (x), 280 (y). Create a new movie clip symbol, naming it ‘cross’. Press OK and draw a small cross-hair symbol. Now go back to the main stage and add this symbol to it.
Change the XML file
Position ‘cross’ symbol at 400 (x), 320 (y) in the properties palette. Select ActionScript frame and open the script. On line 26 change the XML file to load to the dynamic PHP file: markerXML.load(“db.php”), to load the database content. Position the cursor at the end of the code to add more.
Get the date
Add this code under the rest. The first two lines grab the date. Then functionality is added to the add_btn, so it toggles the visibility of the cross and entry movie clip.
var today_date:Date = new Date();
var date_str:String = (today_date.getDate()+”/
”+(today_date.getMonth()+1)+”/”+today_date.
getFullYear());
add_btn.onPress=function(){
if(cross_mc._visible==false){
cross_mc._visible=true;
entry_mc._visible=true;
}
else{
cross_mc._visible=false;
entry_mc._visible=false;
}
};
Change of mind
The next code adds functionality to the close_btn inside the entry movie clip. If the user does not want to add an entry, then clicking the close button clears any text in the input text boxes and turns the visibility of the movie clips off. The last two lines set up a LoadVars object to send the data out to the database.
entry_mc.close_btn.onPress=function(){
entry_mc.newTitle=””;
entry_mc.newDesc=””;
cross_mc._visible=false;
entry_mc._visible=false;
};
var c = new LoadVars();
c.onLoad = reload;
Final Step
This code sends the data to the database and reloads the content to refresh the markers. Now publish this with a HTML file and upload the files to the web server. You should be able to connect and add markers.
entry_mc.submit_btn.onPress=function(){
c.inf=entry_mc.newTitle;
c.desc=entry_mc.newDesc;
c.dat=date_str;
c.lat=newLat;
c.lon=newLon;
cross_mc._visible=false;
entry_mc._visible=false;
c.sendAndLoad(“write.php”,c,”POST”);};
function reload() {
if (this.feedback==”Success”){
markerXML.load(“db.php”);
entry_mc.newTitle=””;
entry_mc.newDesc=””;}}
+android+porn+app+sex+%5B4%5D.png)
0 komentar:
Posting Komentar