Over the last few weeks I have been working on SatomiDance.net when I’ve had time in the evenings.
I did my best to incorporate as much technology as possible. There’s lots of DOM manipulation (I ♥ Prototype, AJAX calls, XML parsing, Flash/Javascript interaction, integration with external services such as Youtube and Flickr, and the whole thing uses WordPress as a CMS.
I had been wanting to do some software project (a game or website) that’s mostly hand-drawn, but I really don’t have the talent to actually draw and colour everything. I could finally do it though..! All drawings by Satomi herself 
Flash (main page)
It was quite fun to work with Flash again. The main page has a Flash video (made in iMovie, converted to FLV with ffmpeg) being played from underneath a transparent PNG. I used fixpng.js to get all this work on IE6. The mute button is at the bottom of the screen, and uses Flash’s ExternalInterface library to send a “mute” command through Javascript. CSS’s z-index makes sure everything’s drawn in the right order. I was scared that IE6 wouldn’t support that attribute.. but it does. Whew.
IE6 doesn’t pass mouse events down to the Flash video when there’s a PNG over it. Safari seems to pass down mousemove but not clicks. I was about to use ExternalInterface to pass clicks and mousemove events from Javascript into Flash, but eventually decided not to use video controls at all as a design decision so I didn’t proceed with that plan.
Scriptaculous
Scriptaculous is also used to make a bunny slide in from the left side of the screen after 5 seconds. It is not used for the bunny at the top of the screen… that’s just me playing around with mousemove callbacks and CSS.
Youtube
The videos page is entirely Javascript. I spent a few hours one night (or one early morning, technically) writing a script to connect to Youtube’s XML API, pull down a playlist from Satomi’s account, and grab all the information from that. It displays all the thumbnail images, and when clicked on, the full video is displayed with some meta info. The video size is determined by the API call results, so it dynamically choses what size to make the Flash object. Scriptaculous is used to clear out the previous video content and display new content.
Flickr
Flickr’s pro accounts are awesome: unlimited space, unlimited bandwidth, and great tools for organising photos. Satomi can use Flickr to organise her photos and they are displayed by a version of FAlbum (which I localised into Japanese myself).
WordPress
WordPress powers the whole site. All hacks (except for some wp-mail.php modifications to add better UTF-8 support) are contained in a custom theme, so it can be upgraded safely without worrying about the upgrade over-writing any of the code.
Conclusion
By integrating as closely as possible with WordPress, Youtube and Flickr I’m trying to see how much control I can pass on to Satomi. When she takes new photos or videos, she should be able to put them up right away without waiting until I have time to do so. WordPress not only controls the blog section, but many sections of the site (performance information, classes/workshops page, profile) are just WordPress pages with just as much control as the blog.
Some design decisions are definitely not ones I would have made by myself, but in the context of a website targetted at Japanese people, I had to change the way I thought about web design to meet the their expectations. A lot could be written about that, but I’ll have to leave it for a day when I have more time.
