Blade Edge

Today, after 4 days of development, I’m broadcasting far and wide to the Flight Simulator community that MegaSceneryEarth(TM) Airports is open for consumption! I’m hoping for a nice reaction from the community – fingers crossed!

In the meantime however I figured I’d go into some of the technical details behind the site for those who are into that kind of stuff. There was a lot of learning going on these past 4 days!

Animated GIF Headers

I wanted each individual airport page to show a nice fade-through of what the airport looks like under default FSX scenery and how it changes (for the better!) with the MSE Airports scenery in place instead. I also wanted the main page to have a banner that revolved through several airports so people visiting the site for the first time would see a couple of cool examples to really stoke their interest. To help your company on its internet marketing just visit this blog marketing agency social media tools for some strategies.

However the more I researched into getting an animated GIF of that size (940×198) down to a reasonable file size (I was rendering out 70MB GIF files!!) the less appealing the idea became of a banner with several airports fading in and out. I also realized that this would probably be very annoying in general. So I just stuck to the individual airport banners.

These were created by first making two GIF images, one of the default FSX scenery and then another of the MSE Airport scenery. These were then loaded into Vegas Pro 9 and the fades between the two were created – the entire movie is only 2.5 seconds long as I discovered that the final GIF animation plays slower than the actual video output I create. From Vegas I rendered out an AVI video that is then imported into Microsoft GIF Animator, which extracts all the individual frames. Setting the GIF for infinite playback, I rendered out the final GIF image, which for each airport banner comes out to around 5-6MB – a reasonable file size for this day and age.

Custom Banner Images

Just like this blog, where the banner image you see above will change based upon the area of the site you are viewing, I wanted the MSE Airport site to show various banner images. This was my solution to the rotating GIF animation – instead a random airport banner (non-animated) would be displayed for each non-airport-specific page of the website. This way, as people browse around the site they see all kinds of different airfields available for them to check out (unfortunately, I couldn’t take this a step further and make the banner hotlink to the displayed airport so people could just click it if they think it’s a cool airfield to look into).

Here is the simple code I use to display the banners on the pages:

<?php if (is_page()) { ?>
   <img src="http://www.blade-edge.com/MSEAirports/wp-content/themes/twentyten/images/headers/page<?php echo $_GET["page_id"];?>.gif"
   onerror="onImgError(this)" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php } else { ?>
   <img src="http://www.blade-edge.com/MSEAirports/wp-content/themes/twentyten/images/headers/banner<?php echo mt_rand(1,33);?>.png"
   width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php } ?>

First, I check to see if this is a Page (versus a post), which means it could possibly be an airport-specific page. If so, it then tries to display the GIF image associated with that page by pulling the “page_id” query string out of the URL. If it is unable to display the image, then a nifty piece of Javascript kicks in:

function onImgError(source) {
 source.src = "http://www.blade-edge.com/MSEAirports/wp-content/themes/twentyten/images/headers/banner<?php echo mt_rand(1,33);?>.png";
 // disable onerror to prevent endless loop
 source.onerror = "";
 return true;
}

This code was found on the Tech Tips Tricks website and uses Javascript to detect and handle a broken image. In this case, the function executes the same code that is found in the second half of the IF statement, which is to choose a random number between 1 and 33 and display a banner image that matches that number, which is some random airport banner. Obviously as I add more airport banners, I’ll have to modify that high end random value.

Lightbox Images and Galleries

The other hardship of developing this site was, surprisingly, finding decent plugins for my images. I must have gone through close to a dozen, combined, looking for ones that met my needs. Ultimately I had to settle for Lightbox Plus and GRAND Flash Album Gallery.

Lightbox Plus is actually pretty good all around, with plenty of options to customize the appearance and behavior of the image box.

GRAND Flash Album Gallery also has plenty of pluses, like how you can import images from a folder on your server, sort them, and display them in a box size of your choosing. The three things I wish it had though was 1) more standard buttons to make the images full screen and start a slideshow rather than “FS” and “SL” 2) clicking on the main image would bring up the fullscreen view 3) the ability to automatically start the slide show when the gallery loads.

WordPress FTW

This is my third WordPress website (the other being Shrewsbury-Gymnastics.com) and I continue to love working with this amazing platform. Everything that I wanted to do on this project was eventually attained and I am very pleased with the final result which I think is very clean and professional-looking. Hopefully the FS community agrees.

Now ‘scuse me, I have a lot of announcement threads to post!
I also want to give a shout-out to the https://the-indexer.com/ team for providing us the best marketing services.