BrainFuel

Well, the Brainfuel master, Chris, has been gone to Brazil for almost a week now. As such, it is my privilege to give you today’s caption photo:

Ok, everyone. I finally broke down and did it. Yes. I made my first AJAX app.

Check out this AJAX page that will let you search brainfuel by merely typing in a form field!

It’s still somewhat buggy so don’t try too hard to crash it, now!

This weekend my fiancée was looking for some comfortable shoes and, needless to say, I ended up getting dragged into the resulting whirlwind of shoe stores. Somehow, not one single store in the mall seemed to have what she was looking for.

In hopes of saving myself from being dragged into even more stores, I went onto the internet in search of online shoe catalogs.

One of the web sites I stumbled across simply blew me away. I must say, this has to be the most innovative use of flash I have seen in a while. Instead of showcasing their products in standard catalog format, Adidas displays a panorama in the park. A wide variety of hip and trendy young people are lounging about in their comfortable Adidas outfits and you can scroll 180 degrees to the left or right by moving your mouse. Simply move your cursor over a person to view details about their outfit. You can also click on a person to view a bunch of additional photos of them posing in that outfit.

In the spirit of all the random photo posting that is going on around here,
I figured I’d post one of my favorites:

Ok I ran across this game and just had to share it…

The object of the game is to… well… do nothing.

Hilarious.

This is a tutorial that I wrote quite a while ago and then forgot about. A number of things have changed since I wrote it (such as the release of two additional versions of flash), but other than that, the general concept introduced here still stands.

This technique addresses a number of issues that have plagued web developers for a long time.

Issue #1: JPEG’s complete lack of transparency options.
Issue #2: GIF’s inflexible transparency options (no alpha channels or anti-aliasing)
Issue #3: Spotty support for PNG files (which *do* have transparency)
Issue #4 Lack of compression options for PNG files. (PNG is a “loss-less” format so a simple 300×300 PNG image could be like 250K, where a JPEG of the same thing is only 30K.)

Please Note: I *am* aware that there is a javascript work-a-round to get PNG files to display properly in internet explorer. However, the javascript method still does not allow you to compress the PNG file!

So without further ado, here’s one of my fun little PNG workarounds I have discovered and used in the past. Heck, you can even do it yourself fairly easily!

Tools needed:

1. Photoshop, the GIMP, or equivalent image editing tool
2. Macromedia Flash MX (the editor, not the plugin)
3. HTML editor of some sort

Follow these steps to create a transparent PNG file:

1. Open up photoshop and create a new 500×500 pixel (72 dpi) image with a transparent background.
2. Create a new layer and scribble, draw, or write random things all over it. Make sure that there are plenty of blurred edges and semi-transparent things showing through to the next layer.
3. Click File > Save for Web.
4. Under the Settings drop-down of presets, select “PNG-24″ and make sure “Transparency” is checked. For the image, you should see a white and gray checkerboard pattern with your scribbles and what not overlaying it.
5. Save file off as “testimage.png”

Ok. Now go right click on that file in windows explorer and view the properties. Mine was over 200K. Geez! Definitely in need of compression or something!!!

Load the PNG into Flash and save it for the web with compression:

1. Open up the Macromedia Flash MX editor.
2. Create a new document and set the size to 500×500 pixels.
3. Go up to File > Import and open the “testimage.png” file we created earlier.
4. Go to File > Save As and save the document as “testimage.fla”.
5. Go to File > Publish Settings.
6. On the Formats tab, we only need the Flash (.swf) and HTML (.html) items checked.
7. On the Flash tab, the default settings should be ok, but you may want to adjust the JPEG quality up to like 75 or something.
8. On the HTML tab, select “Flash Only” from the template drop-down, and set your window mode to “Transparent Windowless”. (**THIS IS VERY IMPORTANT!!! DO NOT LEAVE OUT THIS STEP!**)
9. Click the Publish button.

Ok. Done! Now close out of there, save the testimage.fla file, close out flash, whatever…
Go back to windows explorer and look at the folder where you saved testimage.fla.
You should see two new files: testimage.swf, and testimage.html.

Open up testimage.html in your web browser (either IE or Firefox, preferably).
Bam! There you have it! Your PNG file still has all its transparency, yet it displays perfectly in 98% of all the web browsers out there (basically anyone who has the flash plugin). And to top it off, it has JPEG compression as well. Check it out, right-click on testimage.swf and look at your properties. Wow! Only around 100K (as opposed to over 200K as a plain PNG)

Try putting a tiling background image of some sort in the testimage.html file to see how the alpha transparency works. You can also put the flash in a DIV or SPAN on it’s own layer above everything else and it’ll work great, too.

Another thing to try:
Try slapping a flash-based loader bar on each one of your PNG flash files. Your HTML page will now load completely by itself, and then all the PNG files will load separately in place with their own little loading status bars. Snazzy!

What would you do if you had a billion dollars? I don’t know about you… but I would definitely develop a method to draw a smiley face on the moon. Call me crazy, but can you think of a better legacy to leave behind? Yeah. I didn’t think so.

Think about it. Future generations of mankind would look up in the sky at night, only to see a big smiling face. Wars would cease to exist! How could people even think about fighting with a giant smile in the sky?

Or maybe we could sell the moon one pixel at a time? Like the milliondollarhomepage.com site did?

Maybe we could use a high powered laser that would burn the dust and turn it black or something… *scratched his head*. What do you think?

Seriously though, what would you do if you walked outside one night and noticed a smiley face on the moon?

Ok. So I know all of you have just been dying to see what my apartment looks like (yeah right), so I made this for you:

Here’s how it was done…

First of all I had these items:
1. Sony CyberShot 3.2 digital camera
2. El-cheapo $15 Tripod from Wal-mart
3. Autostitch (free from http://www.autostitch.net)

After setting up the camera on the tripod and making sure everything was level, I snapped a grand total of 135 photos. Basically, I would snap a photo, turn the camera a little bit to the right, and snap another one. After doing a full circle of photos on a level plane, I took a circle of photos looking upwards and then a circle looking downwards.

Three hours worth of experimentation and number crunching later, and I am now the proud owner of a panoramic image of my living room!

The final photo is 18,855 pixels wide by 4332 pixels high. In other words… almost 82 megapixels!

Uncompressed, this image is almost 250 megs.
Luckily, when compressed in jpeg format, it drops down to 10 megs.

Download/Viewing Options:
1. 180 degree viewer (click and drag mouse to change view and press – and + to zoom in and out)
2. Jpeg file (10 megs)
3. Flash (streaming image viewer that lets you zoom in – must see!)

P.S. If all you see is a blank square on the 180 degree viewer, that means your computer is missing java. To download the java add-on for your web browser, click here.

P.P.S. Here’s an assignment for you. What time does the clock display that’s on top of my entertainment center? (Hint: you’ll either have to use the flash viewer or download the 10 meg jpeg to find out)

Lemme know what you all think!