Last time I wrote about this Yahoo / Flash mashup I connected the Yahoo map’s API through Flash and PHP to a MySQL database and was able to write / read from the entries. My next goals were to integrate a user-login, adding links, implementing moderation and a Flash image uploader script.
.

Integrating a PHP uploader script

A very important aspect for both users (and our clients) is to be able to ‘take part’ and ‘be part’ of shaping the user-generated content area of a site, to leave their mark. Naturally, images and content are the weapons of choice, as such the next step was to work on an image-uploader. The task:

Develop an image uploader script through Flash that would allow users to upload an image from their desktop, store it online in a writeable folder on the server and reference to it from the SQL database and display the image for the relevant post for the relevant user.

This wasn’t such an easy task. I had a good look around how Flash tutorial websites I usually frequent handle image upload. After some working I managed to get the PHP side of things working – which also had its own issues to start with, it would not update file names properly (see image to the right, click to enlarge)! After some fiddling around I managed to get the php script to work, and if you like you can download it here:

Please download the file here: fileupload.zip (~800 bytes)

What the script does is it defines the maximum file dimensions (180×300 max in either direction) and uploads the file to a temporary directory (/tempstore/) before giving it a timestamp and name-change and putting it into the /images/ directory.

.

Connecting PHP with Flash

This was a bit (okay, a hell of a lot) more complicated: through the variables ‘FileReference‘ and ‘browseListener‘ and a couple of other event listeners I managed to tell Flash how to use the “Browse…” button and how to handle the uploaded image. At the moment the Flash file uploads the image to the database correctly, but it will break if the image does not have the correct size, so I need to work on getting the image-resizer to work. Once that works I’ll upload the source as well.

.

Sneak Peak for the image-uploader (snapshot of 9th July 2008)

The main uploader:

.

The uploaded image and adding information:

.

…and the result:

.

Conclusion and next steps

Well, so far it is looking very promising with the image-uploader! Obviously we are still some way to go with it, but I think the project is starting to take shape! Integrating browse and upload functionality in Flash took some work, but thanks to ActionScript 2.0′s event listeners it worked out reasonably well and connected to the database. Obviously we are still taking about only one user at a time, so I would need to review the php code at a later date to also make sure there is a folder structure per user present, but that should not be too much of an issue. Watch out for the next entry on this mash-up, by then I will have the uploader finished and maybe add the ability to upload multiple images to show a slideshow, we will see!

.

Lastly, if you enjoyed the article – or just the flash map – then please leave a comment, I would really appreciate it, as it gives me always another boost to write more

What we would like is some sort of members-only application that allows our users to track their journeys with us and to maybe blog about them, but it should look swish and very easy to use. We would like a similar functionality for our travel guides who would then post information about the tours.

The idea of a blog is a great tool for customer retention, if done right it allows users to post comments about their journeys, maybe with images to keep a log of what they are doing while on that trip. It would allow visitors to see what is going on on a journey with <Company Name> and what you can do or what the user(s) saw and took part in. Obviously, I wanted to offer a little bit more than just a blog. My idea was to work on a map-blog…

(Please note, if you would just like to see the map in action, just scroll down to the bottom of this page)

.

Integrating with new technologies

For (flash) designers and developers there are a number of new technologies that give a user access to content and functionality that was not possible a year or two back. Let us take Google or Yahoo for example: developers are given access to a great and increasing number of technological toys to play with: application programming interfaces (APIs) to integrate content such as Flickr images and albums, mail, rss feeds or maps.

Anyone, from an individual to a development company, has access to these API components, and more and more people are using them to give their clients (or their portfolios) a WOW-factor.

.

Travel blog + map = travel journal

Looking at the possibilities our CMS at work has (remember, its is aspx / .net) there was quite a range of possibilities we could offer our client something for the money. The obvious would have been setting up blog-facilities based on either each tour or destinations, giving registered users who have participated in a tour to blog and comment about it (we would run the user’s access against their booking history to grant write-rights). We could also set up forums and sub-forums to allow users to add comments about trips or destinations.

However, travel blogs or forum posts can be a bit text-laden, and the interaction only consists of a user posting, others reading and (if they like) commenting on posts.

Some time ago we did some Google Earth integration to one of our clients’ website which allowed the client to plot out tours on Google Earth, to give the user the ability to ‘see’ the tour and where it is going and what is going on. The idea of combining a map with a travel blog kinda became obvious.

With both Google Maps and Yahoo Maps giving excellent access to and support for their APIs I wanted to work on integrating a mapping solution with our user and blog-database. In the end I went for Yahoo Maps simply because their development network had a tremendous amount of information and code-snippets to get started with.

.

Yahoo maps and ActionScript – (API) key to success?

Once the extension was downloaded and a API key registered I went on integrating the map into the workspace. Just import / drag the component into the stage. You can edit its size simply by entering a new width and height into the properties (by default on the bottom of the stage). Your next step will need to be to check out the parameters. The screenshot on the right (click to enlarge) shows you where you can find the API in Flash CS3 and what parameters you will need to change by default, such as API key, zoom factor or starting location (by default USA map).

Now that we have a working API-integration into flash I tackled the next step: integration of a server-database to read posted points as well as add points to it. (In this example I used PHP / MySQL as this blog is based on a PHP system). You need to set up a database via PHPMyAdmin for example. Here is a sql-database for you to have a look at and use:

Please download the file here: entries.zip

So, what do we have in this database now: We have an ID (unique value for each entry), lat and long, a date (for timestamping entries), a short info and a descritption. These are the fields I will be using for now.

.

Writing to and from the Database

The next steps are to read from and enter information to the database through PHP. A simple

$sql = “INSERT INTO entries (id, lat, lon, date, info, description) VALUES (”, ‘$lat’, ‘$lon’, ‘$date’, ‘$info’, ‘$description’)”;

for entering information should do the trick. Which it did. I am not going into very much detail here, as the project is very code-heavy, but if you are interested in knowing more please do not hesitate to get in touch with me.

.

The first travel journal test

Here is now a first map-test (please note that I have disabled entering notes at this stage):

.

Closing comments and future plans for this project

Getting the API to work was a bit tricky, and it took me a couple of hours to figure out what could be done and what didn’t when it came down to connecting to a database.

• User-access: At the moment any user can access the map, as such I will need to work on a login-based system, with each login having their own database table, and maybe a selector at the start to see whose trip journal you would like to visit. This should hopefully not be too difficult *touch wood*.
• Image and video-upload: I will need to write an image upload script that saves the images on the server in the user’s folder and give each one a unique ID just in case. I’ll have to also look into resizing options and video compression if we are not using youtube etc
• Linking: Users should be able to cross-link or link to products / posts / etc
• Moderation & Administration: …and ideally all of the above should be moderated and maintained
• Plus, I want this to work in Adobe AIR later on as well, so I will need to rewrite a bit of the code later!

Lastly, if you enjoyed the article – or just the flash map – then please leave a comment, I would really appreciate it, as it gives me always another boost to write more

[UPDATE: I have updated this project's progress here]