Welcome to andrewchow.com (version 3.0)

General Information

This is the third incarnation of my personal website.  My previous versions all had the problem of not being very easy to update since it was all in hardcoded Flash files.  Every time an event happened and at which I or someone else took pictures, I dreaded the thought of having to manually update the site with the new content.  I'm sure many of you saw how easy it is to upload a photo gallery in Facebook.  I wanted something like that.

This setup fixes the problems of the past version of andrewchow.com by using WordPress for blogging and the Gallery web application to manage all my photos and videos.  I'm sure a lot of you have used blogging tools such as Blogger, Xanga, and Blogspot and saw how easy it is to add a new post.  This is exactly what I'm using except hosted on my own server, which offers a lot of customizability.

I'm sure you've already seen the Flash header I made at the top of this page.  There's a music player within it that's also very easy to update just by changing a certain XML (i.e. text) file.  The background also transitions through random images.  I plan on adding more images to randomize through and possibly have it set up such that "night" images would show up at night, "daytime" images show during the day, holiday images show up for certain holidays, and etc. etc.

The ease of updating new content should make my updates more frequent than before while taking up less of my time.  Anyway, navigate through the site using the links in the Flash header.  There is a "shoutbox" or a "wall" (in Facebook terms) on the right where you can leave messages.

Technical Considerations

This section will be very computer jargon heavy and also very LONG.  So if you know very little about web development, or don't care about the development process (i.e., how this site came about), I highly recommend you skip this section.  This section is really only for those interested.  Don't say I didn't warn you.

Like I said, the big problem in my previous sites was the difficulty in updating content.  I toyed around with Movably Type during my 1st year at UWO and then basically took a long hiatus from andrewchow.com due to life's many obligations.  I told myself I would work on v3.0 during the summers but that never happened.  At the end of my third year, I had rough sketches of the layout.  It consisted of a cool looking Flash header and below it, all the dynamic content such as blog posts, pages, and galleries.  I created a concept drawing in Photoshop and then never worked on v3.0 again during my 4th year at UWO.

So, this summer, I started working on the Flash header.  I Google'd for some tutorials on how to build an MP3 player within Flash.  I was completely blown away by how much Flash and Actionscript have changed.  I basically had to throw out everything I remembered knew about Actionscript 2.0 (AS2) and learn Actionscript 3.0 (AS3) from scratch since it was that different to me.  I could have coded everything in AS2 but AS3 did have a lot of new features and performance improvements.  It wasn't that bad once I got into the coding.  XML really made updating multiple MP3 playlists a lot easier and AS3 kept all my code together (e.g., no more actions on buttons or other objects on the stage and you don't have to use actions on the timeline either).

The spectrum analyzer functions built into AS3 surprised me since I was planning to use SwiftMP3 (the program I used in the past) to generate those cool music line effects you see up there.  Since the functions are built in into AS3 and the sound spectrum data is dynamically generated, I no longer have to analyze every MP3 file I want to play up there just to generate the values to have the lines move properly.  I just upload the mp3 file and the spectrum data is generated at runtime.

In the end, the music player probably required 1000-1500 lines of code altogether.  The volume control, the seeking, the spectrum analyzer, and the play controls all seem to be simple functions but require lots of coding to work together properly.  There's a lot of tutorials out there on how to build these functions.  Google ftw.

Another thing I love is caurina. transitions.Tweener (available via Google Code).  This tweening engine single-handedly made animating the entire header A LOT simpler.  You have no idea how much time this package saved me.  I highly recommend it if you are working on your own flash projects.  With one line of code, I can tween any property of a movie clip (e.g, x, y, alpha, scale, blurring) independent of the timeline and the tween doesn't have to be linear (i.e., it can accelerate/decelerate during the tween and still take the amount of time you tell it to)  There's also TweenMax, which also offers some more functionality.  I just didn't want to load two huge tweening libraries and I was already heavily invested in Tweener in my project when I discovered TweenMax.

After making the header, I searched for a good webhost and saw Geekstorage.com was having a damn good promotion so I signed up with them.  Next, I installed WordPress over Movable Type since it was a lot easier to install and the support community was a lot better with plugins and forums.  I then installed Gallery to host my pictures and present them nicely.  This took no time at all since my webhost had Fantastico Deluxe installed.

Now, here comes the problem I still face today.  How can I integrate the Flash header at the top with the dynamic content of WordPress/Gallery below it while keeping the music playing seamlessly (since navigating a link within the blog would refresh the entire page and thus, restart the Flash header animations)?  At first, I figured it'd be okay to use IFRAME to isolate and embed the WordPress blog but today's web standards generally find the IFRAME and frames in general a no-no.  So I searched around and saw that AJAX is all the rage in the web development world and something I could use.

With AJAX, I could have new content loaded in without having to reload entire pages.  I could load blog posts into a DIV tag without disturbing the Flash header while it's playing music.  But it's not that simple to do from what I've tried so far.  WordPress already features some AJAX in the form of some widgets used in the sidebar (e.g., the Wall is using AJAX.  The entire page doesn't reload when you add a new post.  And I could have it refresh itself every 5 seconds if I wanted.)

What I'm looking for now is a way to have my blog posts appear in here via AJAX requests and the links on the sidebar or in the post would load new content into this same area while the Flash header above is not disturbed.  I could give an AJAX-enabled WordPress theme a try but for now, using IFRAME provides the most simple and elegant solution.  I set the IFRAME height to 5000 (which is why you can scroll down into a lot of nothing) to account for the blog content's everchanging height.  I have tried auto-resizing scripts but they don't update the height when someone navigates within the IFRAME and there were headaches with domain security violations (www.andrewchow.com is NOT the same as andrewchow.com - how stupid is that.)

So for now, IFRAME with height 5000 is a band-aid solution but I still want to do things properly.

I also won't be doing a full-length intro to the website.  I feel it takes too much production time for something that is seen usually only once.  Instead, I will produce little shorts like the skydiving/AsianAvenue thing at the front page to ensure visitors have Flash installed.