Did We Break It?

It’s the fine little details that will get you every time. In my case, just recently, it was a difference of 10 pixels.

I have been working on a greeter screen type project at work that utilizes a Cisco Digital Media Player and a 47 inch high definition television at 1920 x 1080 and 1080p. Kind of a cool setup.

The Cisco device can handle only certain types of media. Besides HTML it can also handle Flash, mpeg, gif, png and jpg, if I remember correctly. So my task was to write the page that was going to be displayed for everyone to see as they came in. I had a basic version up and was waiting for some graphics, designed for this size screen before I went about reworking the layout.

The good news is that, by the time I got the graphics a lot of the basic coding was done. There would be some tweaks to spacing and location and even some verbiage but the really ‘hard’ stuff was done. Except that is creating the header graphic out of these images.

The idea for the header was to fade from one picture to another and loop it. I had done it using photoshop and flash a couple of times already but it is a long and tedious process when you don’t know action script. And on top of that I was concerned about what the conversion to the png format was going to do to the image quality that we worked to get. So I tried to find a better way.

This better way involved using a movie making application and dropping the images in and adding a dissolve transition between them. Then I saved it out to an mp4 file. I then swathed to Flash where I first had to convert the file to a format Flash could use and then I could import my file to the stage. I had a little problem though. The images were sized at 1920 x 1080 which meant they would fill the hole screen. So on a whim I decided to try setting the stage size in Flash to 1910 x 300. I dropped the movie onto the stage and then exported it as a swf file and tested it. Sure enough it cut it off very nicely and I didn’t have to crop everything.

I got all the layout done. Increased sizes and fonts where I had to and changed the background. I took out an animation and got bigger weather information. It was all looking good there was just the bit about getting that header right and part of that was to get it to go all the way across the screen. I tried one parameter that stretched the text and that was ugly. I tried another parameter that while it went all the way across it also cut off the top and bottom. I finally decided to try it with the width and height parameters set to the dimensions of the Flash. Ok this looked like it worked.

Except for this one small strip. I tried changing the margin and the padding and the alignment. I went back and forth and since the changes were to the index page that was loading when the device started up, I had to reboot just to see the new page. (yes, I now realize I could have put a forced refresh in the code for while I was testing. I didn’t think of it at the time.) then it occurred to me that I might have made the stage for the Flash animation too smaller. So I checked the screen specs again and then I checked the size of my stage.

Good grief! Sure enough I had made it 10 pixels smaller, horizontally than it needed to be. A quick change to the stage, a new export of the swf file, upload it to the device, reboot. Holy cow! Done! Can I go home now?

It is truly the little things that can make all the difference and double checking settings can often save some time and frustration.