You are here: Home > Flash
Archive | Flash RSS feed for this section

Travelr – free photo gallery for Flickr

on 12 May, 2010 in Flash, Projects, Travel

 

Travelr is a free photo gallery viewer that you can put on your own site. Travelr lets you display your Flickr photos geographically on a world map. It takes the hassle out of supplying geographic coordinates by only requiring them once for each location – not for each photo. Click here to see an example of Travelr in action.

UPDATE: This project is no longer supported but you're free to modify and improve it for yourself with the Flash ActionScript 2 source code (last update: 31 Aug 08).

Download Travelr

Travelr requires version 7 of the Flash player or higher to run, you can get the latest version here.

How to use Travelr

Step 1. Get a Flickr account and upload some photos. You can get a free account on the Flickr website. Already done this? skip to step 2. Step 2. Add geotags to a few photos. Let's say you've got some photos from France, you'll need to add some tags to ONE of your photos of France – have a look at thisexample photo with tags - the tags are on the right under the photostream thumbnails. Here's an explanation of what each tag does:

  • geotagged - this tag tells Travelr to show the thumbnail of this photo on the map when Travelr first loads. It lets Travelr (and all other geotag apps) know that this photo has geographic information and can therefore be placed on a map.
  • geo:lon=-3 - this is the longitude of this location (in decimal format).
  • geo:lat=46 - this is the latitude of this location (in decimal format).
  • geotag:France - this sets the name for all photos grouped at this location. Remember to keep the 'geotag:' at the start but you could change this to anything like 'geotag:LA', or 'geotag:myroom'. If the name you're giving this location is two or more words long you'll need to wrap the whole tag in speech marks like: "geotag:Los Angeles" to preserve the spaces.
  • France - this tag should match the 'geotag:' location name you just set. It means that this photo (and any photo you add this tag to) will appear in the group of photos for this location on your Travelr map.

TIP: The easiest way I've found to add geocode information straight into Flickr is this super-handy Localize Bookmarklet - check it out! Another way to find the longitude and latitude of a location is to use Google Maps directly. Find the location you want on Google Maps and make sure it's in the centre of the map, then click 'Link to this page' at the top right of the map. In your address bar there should now be a long URL that looks something like this: http://maps.google.com/?ll=-28.921631,133.769531&spn=59.939839,85.78125. The two numbers separated by a comma (highlighted in pink here) are thelatitude and longitude for your location, you can use these numbers in the tags. The numbers Google gives are probably more exact than you need for Travelr so you can round them to the nearest decimal place if you want. If your location is a place name it might have a Wikipedia entry with geographic information, for example see this Wikipedia entry for Los Angeles. You can find the co-ordinates at the top right of the entry and also under 'Geographical characteristics' in the right hand side panel. Step 3. Add location tags to all your other photos. Simply add one tag to all the photos from the same location as the ones you've tagged in the last step. So in our above example we added geotag information to one photo of France (i.e. 'geotag:France') – simply add the 'France' tag to all photos you would like to appear grouped with this location. See this example photo with location tag. Step 4 . After you have downloaded the Travelr .zip archive, extract it to the folder you will eventually upload to your web server. Step 5 . Update the 'travelr_config.xml' file. Open it up in any text editor and see the instructions inside on how to modify this file. Note: you must change the Flickr user id in this configuration file to see your own images. TIP:An easy way of finding out your Flickr user id is by going to idGettr and entering your photostream URL. Step 6 . Upload the files to your website. Please make sure all 4 files included in the download package are uploaded to the same directory for Travelr to work successfully. Step 7 . Tell all your friends about your cool new photo gallery!

Comments and suggestions welcome

Please visit Travelr's own Flickr page to see additional comments and suggestions. Thanks.

Comments { 0 }

Reintroducing Montage-a-google

on 13 May, 2009 in Flash, Fun, Geeky

Over 5 years after it was initially launched, I’m happy to have a new version of Montage-a-google up for people to play with and enjoy. The new version has many of the features people have been asking for over the years.

 

  • Saving montages – It’s now easy to download a jpg of any montage you create.
  • Resizing – You can now make a montage as big as you like by simply resizing your browser window.
  • Bookmarkable – You can now bookmark or send a direct link to a specific montage.
  • Speed increases – I’ve been able to make many speed improvements with the port of the code to ActionScript3. Resizing and changing the tile size is now over 10x faster.
  • UI improvements – Montage-a-google is now easier to use than ever.

I hope you enjoy playing with the new version of Montage-a-google. I look forward to your feedback.

Comments { 6 }

Learn to code by playing games

on 19 Sep, 2008 in Flash, Fun, Games, Geeky

Click to view game

I’ve often thought that games are good at teaching you how to code, because they force you to identify and order game rules and rule patterns in your brain. But this fun little puzzle game called Light-bot literally gets you thinking like a programmer by requiring you to string together movements into reusable functions to complete each level. Oh and I’m stuck on the level above, can a real programmer please help me!

UPDATE: I managed to get past this level eventually, of course I was looking at it all wrong. Out of interest, this was level 10 of 12, so it’s a fairly short game and well worth putting aside half an hour or so to have a play with. I managed to get through the whole game by only using 185 moves – if you can beat that you’re bloody legend!

Comments { 2 }

The rise of 3D interfaces

on 16 Jun, 2008 in Design, Flash, UI and UX

EcoZoo is a recent addition to an increasingly long line of impressive 3D interactives appearing online. Most of these have been made possible with performance and rendering advances in the Flash Player and 3D libraries such as PaperVision3D which have popped up to take advantage of them.

What interests me is that it wasn’t that long ago that people were scoffing at the thought of 3D interfaces and mocking them for their inherent usability issues and gimmickery. While the gimmick label is still fair, it may not be in the near future. With the barrier to entry dropping by the day, building a 3D interface is no longer the realm for the coding elite. Although we’re likely to see a large amount of experimentation at first, as thoughtful designers with a care for user experience pick up this technology, solid design and interaction patterns should emerge that will raise the bar over time – just as we’ve seen with normal 2D websites in the past 10 years. Although you could argue it’s not fully 3D, ‘coverflow‘ as seen in Apple’s iTunes and iPhone could be seen as an early 3D interface pattern that’s been picked up by the masses and can now be found on a plethora of sites, webapps and widgets.

Although 3D interfaces will only be appropriate for certain types of content, I’m excited about seeing how designers will start taking advantage of this technology in their everyday work.

Comments { 0 }