I have been diving into the Google Maps API for the last couple of days. After finding the nice Google map module for WordPress I started looking for a way of geocoding the photos that I took while travelling around the world on a bicycle.

One solution is to find the geocode for a photo by manually positioning it on a map, this would be very time consuming and tedious. The other solution is to use the time-stamp of the photograph (almost all digital camera write this into the EXIF data) and a track-log( which is a log kept by a GPS unit about where it was at what time) to calculate where the photo was take.

The good news is that most of my photos are timestamped, the bad news is that I didn’t have a GPS so I don’t have a track-log of where I went. But I did always draw on a map the route that I was taking and I kept a daily journal of the places I visited. So I did a search of the web for a program which would allow me to draw a track-log by hand then I could feed my photos and this track-log into some freely available photo-llinking program which would time-stamp the photos with the geocode.

I was amazed at the amount GPS stuff that is going on, there seems to be a revolution going on in that field, nevertheless I couldn’t find exactly what I was looking for so I decided to write my own Google Map application. It has been a steep learning curve but I am slowly getting there, here is a preliminary work-in-progress application as I start to build it up.

I have been wanting to do a photo travelogue web page of the cycling tours that I have gone on for the past 5 years for a long while now. It has been on the back of my mind, bubbling away and yesterday I ran into a Gallery2 Module which makes what I wanted to do so much easier. It is based around the Google Map API and lets you enter longitude and latitude coordinates for each photo, the photo is then marked on a Google Map and clicking on it brings up a thumbnail of the image.

There is also a way of creating routes on the map, which I find very interesting I want to take all the entries from my travel diary and build up the routes that I cycled around the world. Right now I have only a couple of photos on the map and no routes but I am searching for a quick way of finding the coordinates of a town or a village for easy addition. Also it would be nice to have notes giving the date, kilometers travelled that day and the average speed.

I have added a tab called “Cycle Tours” in the header of the site or you can go to the Photo Map section from this link.

I didn’t think putting a Navigation Bar would be so hard. I have spent the better part of the last day and a half wrestling with WordPress and Gallery2 embedded to put in a tabbed navigation bar so I have a link to my Gallery. Most of the problems arise from the fact that the Gallery2 is embedded into the WordPress but WordPress doesn’t see it like that and makes the highlight on the gallery tab disappear when browsing albums.

I got very frustrated with trying to get wordpress to do the right thing for me so in the end I decided to hack it and do the highlighting myself. This method would probably not be suitable for a lot of people but it got me going, I am checking whether the URI is has “/v/” which is how URL rewrites work in Gallery2, before deciding that we are actually in the gallery embedded pages, this is very site specific so be aware.

I put the following code into my header.php and wpg2header.php

<br /> Top navigation bar for Wordpress default theme(Kubrick) by http://www.LiewCF.com/ Credit: - CSS code ripped from http://binarybonsai.com/kubrick/ - idea to use wp_list_pages() enlighten by http://www.lamateporunyogur.com/pool Apply: Copy and paste all code here into the END of /wp-content/themes/default/index.php text-transform: lowercase; - Hacked to pieces by Rumi http://rumi.studio2pi.com.au </p> <p><?php //highlight 'Blog' if not Page if (is_page()) { $highlight = "page_item"; } else { $highlight = "page_item current_page_item"; } ?></p> <div> <ul> <li class="<?php if (( (is_home() ) && !(is_paged()) && !( strstr($_SERVER['PHP_SELF'], 'wp-gallery2.php')) ) or (is_archive()) or (is_single()) or (is_paged()) or (is_search()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>“><a>href=”<?php echo get_settings('home'); ?>“>Blog</a> <li class="<?php if ( ((strpos($_SERVER['REQUEST_URI'], 'wp-gallery2.php'))!=false) or ((strpos($_SERVER['REQUEST_URI'], 'v/'))!=false) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>“><a href="http://rumi.studio2pi.com.au/wp-gallery2.php">Gallery</a> <p> >–> –><br /> </a></ul> <p><a> </div> <div id="hack"></div> <p> End - Top navigation bar for Wordpress default theme(Kubrick) - by www.LiewCF.com<br />

I added the following to my style.css and wpg2.css

<br /> /* Navigation Bar styles<br /> *<br /> *<br /> */</p> <p>#supernav {<br /> font: bold 9px/9px Trebuchet MS, Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;<br /> position: absolute;<br /> top: 143px;<br /> left: 50%;<br /> width: 864px;<br /> margin: 0 0 0 -438px;<br /> padding: 5px 16px; /* duplicate the tab size */<br /> text-align: left;<br /> display: block;<br /> }</p> <p>#supernav li {<br /> margin: 0;<br /> padding: 0;<br /> display: inline;<br /> }</p> <p>#supernav a {<br /> color: #000000;<br /> background: #f3e9cf;<br /> font-weight: bold;<br /> height: 19px;<br /> padding: 5px 16px;<br /> /* round corner tab - not for IE */<br /> -moz-border-radius-topright: 6px;<br /> -moz-border-radius-topleft: 6px;<br /> }</p> <p>#supernav a:hover {<br /> color: #111;<br /> background: #fff9e6;<br /> text-decoration: none;<br /> /* round corner tab - not for IE */<br /> -moz-border-radius-topright: 6px;<br /> -moz-border-radius-topleft: 6px;<br /> }</p> <p>#supernav .current_page_item a {<br /> color: #111;<br /> background: white;<br /> text-decoration: none;<br /> /* round corner tab - not for IE */<br /> -moz-border-radius-topright: 6px;<br /> -moz-border-radius-topleft: 6px;<br /> }</p> <p>#hack {<br /> background: white;<br /> height: 2px;<br /> width: 517px;<br /> display: inline;<br /> position: absolute;<br /> top: 163px;<br /> left: 50%;<br /> margin: 0 0 0 -422px;<br /> padding: 0;<br /> z-index: 2;<br /> }<br />
Also thanks to Pud for helping me.

I have been pretty busy the last week or so working on a couple of flash projects. The first one was a Sky Diving game for promoting “The Fray’s” new album, “How to save a life”. Studio Emotion contacted me to do some coding, debugging and testing on the game before the release, it was a good experience and I enjoyed working on the game even though the time available was very short. I will put a link here when the game gets released, the album is due 22nd of July.

The second project was a very small one regarding passing Query Strings into Flash. It is very easy, the tricky part is to make sure you add the following java code to the html so that the query string is read from the url and passed on to the flash object.

<br /> <script language="JavaScript" type="text/javascript"> <!-- // QueryString() & QueryString_Parse courtesy of http://javascript.about.com/library/scripts/blquerystring.htm function QueryString(key) { var value = null; for (var i=0;i<QueryString.keys.length;i++) { if (QueryString.keys[i]==key) { value = QueryString.values[i]; break; } } return value; } QueryString.keys = new Array(); QueryString.values = new Array();</p> <p>function QueryString_Parse() { var query = window.location.search.substring(1); var pairs = query.split("&");</p> <p> for (var i=0;i <pairs.length;i++) { var pos = pairs[i].indexOf('='); if (pos >= 0) { var argname = pairs[i].substring(0,pos); var value = pairs[i].substring(pos+1); QueryString.keys[QueryString.keys.length] = argname; QueryString.values[QueryString.values.length] = value; } }</p> <p>} QueryString_Parse();</p> <p>// write flash obj with query string function writeFlash() { // appearance vars, these can be customized to your liking var width = ‘540′ var height = ‘396′ var src = ‘test_url.swf’ // queries — type in the variables you want to send to flash here var queries = ‘?LocationID=’+QueryString(’LocationID’)</p> <p> // assemble flash obj var l1 = ‘<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="'+width+'" height="'+height+'">‘ var l2 = ‘<param name="movie" value="'+src+queries+'" />‘ var l3 = ‘<param name="quality" value="high" />‘ var l4 = ‘<embed src="'+src+queries+'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="'+width+'" height="'+height+'"></embed>‘ var l5 = ‘</object>‘</p> <p> // write all lines document.write(l1+l2+l3+l4+l5) } //–></p> <p><script language="JavaScript" type="text/javascript"> <!-- writeFlash(); --> </script><br />

Once that is done you just change the query string name in the above code and also the swf file name and then you have access to the value of the query string with the following flash code:


.....= _level0.yourQueryString;


The other project that I am working on is a little slideshow swf which reads an array of text and some images and then animates the text while revealing the images. The idea was to just have a little script which you could plug any text or image into. The following is a work in progress with only 2 images for testing. The idea was to have a wave come in and bring the text in and then reveal the image as it went out again. I need to do more work on the wave, right now it looks more like a curtain than a wave and also I want to make the text rotate a bit as it is pushed by the wave.

Here are some life drawings I did in the last 2 weeks.

I have decided to make a short flash animation from the storyboard that I did for the RMIT Preselection Test. Here is the storyboard:

I have been looking around for a good way of inserting video files into my WordPress Blog and I ran into Extreme Video Plugin which is a very nice plugin and does exactly what I was looking for. As a way of saving bandwidth this plugin will show a proxy image of the QuickTime logo and ask the user to click before the video starts loading. That's a nice feature but I really would like to see an image of the animation instead of the QuickTime logo so I had a look at the code for the plugin and found that most of the functionality for adding a user-defined image was there, all I had to do was change the code a little.

Here is the the modified version of the Extreme Video Plugin for WordPress, right click and ’save link as’:
wp-ExtremeVideo.php.zip

The installation is the same as the original plugin.

To use it add the option qt_proxy_image="path_to_your_thumbnail" to your standard Extreme Video tag (look here for examples).

I haven't played around with the Style for this plugin that much, I just disabled the borders and paddings because my site has a white background and that made it look neater, you might have to play around to make it look right for your site.

Here is an example of a QuickTime video inserted into a WordPress blog:

[gv data="http://rumi.studio2pi.com.au/gallery2/d/2286-1/ball.mov" qt_proxy_image="anims/thumbnails/ball_proxy.jpg"][/gv]

David and Kate from AIM contacted me to let me know that I have been accepted to RMIT’s Animation and Interactive Media Graduate Diploma course for 2007! I am so happy about that and looking forward to next year!

I was looking around for different animation packages and found Moho which is a very nice 2D animation program at a reasonable price. It is a vector based program designed for key-framing, it is not so good for animating frame by frame. As far as I know it is the only 2D Animation program which has bones, which is a way of inserting a skeleton into the drawing of a figure for example and then manipulating the skeleton to make the figure move. It is very much like a 3D animation program (you can even do some 3D camera moves and particle systems) but all done with 2D Vector shapes. I did the following animation as a test to see how things worked in Moho.

[gv data="gallery2/d/2279-1/cartoon_body2.mov" qt_proxy_image="anims/thumbnails/busstop_proxy.jpg"][/gv]

I found animating with Moho straight forward and the fast interface response makes it enjoyable to use and the feature for changing line-widths for the outlines is great. Only problem I had with it was that when I went to export to SWF it had this long black rectangle in the middle of the screen so I ended having to export as Quicktime instead.

Here are my drawings for Lesson 2.

ASIFA-Hollywood Animation Archive Project Blog: Meta: The $100,000 Animation Drawing Course- Lesson 1