On Flash – map integration with Yahoo Maps + ActionScript (part 2)

If you followed my entry about Map integration with Yahoo Maps and ActionScript you will probably be wondering what I have to report about the progress. As you may remember, this mash-up is about offering a client a new spin on travel bogging: being able to log in to the client’s website from anywhere in the world and give other users (and family and friends) the opportunity to see where you are going and what you are doing there.

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 🙂