Sam's Blog

I have been working on a flash slideshow on and off and a couple of days ago I found http://whatdoiknow.org/archives/001629.shtml which does almost everything I wanted but not quite, so I got action-scripting. To see a demo of what I have done click the play button below.
 

The original slideshow by Dominey has a nice feature of loading the image location and various fade-out and timer values from and XML file so that the user can control most things from the XML instead of going into Flash to change things. What I needed was a way of displaying a caption for each photo and then to fade-out these captions with the photos.

I have extended the XML schema for the slideshow to include the text for each caption and also the position where the text is to be displayed and its alignment in the textfield. There are also variables for controlling the font-size,font-colour and the width and height of the textfields that display the captions. Here is the XML file which controls the above slideshow:

<!-- 'timer' :: number of seconds between each image transition 'order' :: how you want your images displayed. choose either 'sequential' or 'random' 'looping' :: if the slide show is in sequential mode, this stops the show at the last image (use 'yes' for looping, 'no' for not) 'fadeTime' :: velocity of image crossfade. Increment for faster fades, decrement for slower. Approximately equal to seconds. 'xpos' :: _x position of all loaded clips (0 is default) 'ypos' :: _y position of all loaded clips (0 is default) 'fontSize' :: Font Size of the captions (16 is default) 'fontColour' :: Font Colour of the captions in hex (0xffffff is default, white) 'textfieldWidth' :: Width of textfield containing the caption (200 is default) 'textfieldHeight' :: Height of textfield containing the caption (100 is default) --> <gallery timer="3.2" order="sequential" fadetime="1" looping="yes" xpos="0" ypos="0" fontSize="16" fontColour="0xffffff" textfieldWidth="120" textfieldHeight="80"> <image path="http://rumi.studio2pi.com.au/gallery2/d/2102-2/dsc_2751.jpg" text="Organic Switzerland" text_align="left" x="20" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2088-2/DSC_1695.jpg" text="Sunflowers Spain" text_align="right" x="250" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2080-2/DSC_0983.jpg" text="Windy Holland" text_align="left" x="22" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2095-2/_dsc2428.jpg" text="Riding in Germany" text_align="right" x="250" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2152-2/DSC_4512.jpg" text="Monkey Do India" text_align="left" x="22" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2134-2/DSC_4023.JPG" text="Cycling India" text_align="right" x="250" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2143-2/DSC_4187.JPG" text="Indian Mahoot" text_align="left" x="22" y="540"/> <image path="http://rumi.studio2pi.com.au/gallery2/d/2105-2/DSC_3040.jpg" text="Indian Tailor" text_align="right" x="250" y="540"/> </gallery>

It would be nice to be able to also specify the font from the XML file but since the font has to be embedded into the swf I don’t think that can be done. It would also be nice to have a way of masking/resizing the frame to better handle different size images, right now the slideshow is assuming the images are all the same size as the stage size in the fla, it still works for different size images but it will crop images or leave unsightly blank spaces around images.

Download the source: slideshow_rumi.fla.zip

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

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 <?php //highlight 'Blog' if not Page if (is_page()) { $highlight = "page_item"; } else { $highlight = "page_item current_page_item"; } ?> <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> >--> --> </a></ul><a> </div> <div id="hack"></div> End - Top navigation bar for Wordpress default theme(Kubrick) - by www.LiewCF.com

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

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

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]

[kml_flashembed movie="/wp-content/uploads/2006/06/elephant_reveal.swf" height="250" width="400" /]
I have been going through some of the old animations that I did at VanArts when I attended the Summer camp program and posting them here. I have managed to put 3 of them up, you should be able to see them as 3 icons on the side bar. Unfortunately I couldn’t upload some of them because the free file host that I am using says they are too big (even though they are less than 10Mb).

That started me off on a whole new tangent, I need to have a little bit more space to put my stuff and expand, right now I am scrounging some space here and some space there and it doesnt feel organized and if I want to move things around then I think it would be a bit of a nightmare with all the links and stuff. So I started looking at different web hosts, the ones in Australia seem to be pretty expensive compared to the US ones. The best one in the US that I found is BlueHost but they dont do .com.au domain names. So I started learning about Domain Registeration in Australia and found that I could register a .com.au domain for $12 a year at intaServ. This way I can register a .com.au domain in Australia and then use a US based host to serve it out.

[kml_flashembed movie="/wp-content/uploads/2006/06/nerd_reveal.swf" height="400" width="400" /]
For a while now I have been thinking about getting my photos organized on the computer but it is such a daunting task that I have been putting it off and off. A couple of days ago I ran into a website which mentioned a photo library written in PHP for MySQL which could be used to catalogue photos and search through them.I did a wider search on the net and found a large number of other Open Source projects which were doing the same thing,so I sorted through them by looking for the ones which had been regularly updated and had the ability to store and search EXIF data and I ended up with the following candidates: Zoph, OSIC and LinPHA.

I started with LinPHA which looks quite good but had a lot of troubles after the installation. I am running Suse 10.1 on the Linux box and I think LinPHA was not developed under that platform, there seemed to be a problem with some of the files which needed to be included for PHP to connect to the database. Anyway after banging my head against this problem for a couple of hours I moved onto Zoph.

I had some login issues but eventually got it working only to find that the importing of the photos was very strange and not very nice to use. So I moved on to OSIC. It got this one working without too much trouble (probably because of the experience gained from the other installs) and it looks more organized than Zoph but it is still a young project and didn’t have all the EXIF features that I needed so after hours of wrestling with the Linux box I decided to get some sleep and to go back to LinPHA tomorrow and try to fix whatever it was that was breaking it.

It is amazing how some problems don’t look as daunting with a fresh mind. I did some searching on the LinPHA forum and found that someone else was having the same problem and there was a fix. Just uncommenting a line in that PHP file and commenting one in this PHP file and LinPHA was ALIVE! For a while anyway, it broke again when I tried uploading some images but this time I was better prepared, did some searching for include files and made sure they were all going from the TOPDIR of the web server and that fixed the problem.

Now I have started the huge task of going through all the photos, categorizing them and adding keywords to them, once this is done I will be a able to search through the photos by just typing a keyword and LinPHA will search the filenname, description and the EXIF data for a match. It will be great for my partner H as well, she is studying Graphic Design and they use photos all the time and it would be great to have her own searchable photo library. I want to use this database to make a travel website that I have been thinking about since we came back from India, but that will take a while…

I have spent the last couple of days working on a flash web site for an online bicycle store, specializing in touring bicycles. You can have a look here: 2Pi Cycles

I am really happy with the birds, they are a swarm using flocking algorithm. The program is not that complicated but I decided to write it in an Object Oriented form in actionscript so I ended up spending a lot of time figuring things out about new stuff in flash.

The other thing that caused a lot of headaches for me was the TextArea component of flash. This component is meant to allow you to display HTML code in a scrollable window inside flash but there seems to be a lot of bugs in it. I used this component to display the various conent pages on the web site, thinking that it would be easier to have the content in HTML instead of hard-coded in flash but the whole thing turned into a big ordeal and right now I want to spend more time preparing my application to RMIT than banging my head against Flash bugs so ended up having to fudge the html until it looked right inside flash.

For the preloader I want to animate a little cyclist going around until till the movie is fully loaded when he finally find his way out.

I went to life drawing again this week, still a bit rusty but I am slowly getting back into it. Here are some samples from the last 2 weeks.