CSS Sprites?

Ok, so I’m no CSS Zen master, far from it actually. The thought of creating good CSS that is cross-browser supported and all just makes me shiver. I had to look at something today concerning links with fancy image backgrounds and rollovers that tweaked this image. After some quick googling, I am a card carrying member of the Google Brain Club, I found this neat article on A List Apart on something they call CSS Sprites. Wow, what a cool deal. Basically you use a single image for all of your links and just reposition this image as a background. What does this gain? Well, for starters only one image needs to be loaded or preloaded. Sure, this one image may be bigger than a single one of the single link backgrounds, but the composite is likely to be smaller and take only one request. It might very well fall into the same number of packets as a single one too depending on image compression and such.

So, how to pull it off? I’ll go over a quick single link example. First, fire up Fireworks (can you tell I’m not a real graphics guy? :} ) and create your two link, or button, states. Here is a sample:

css_sprite_sample_image

Now, use some simple CSS magic:
#outerCont {top:0px; left:0px; background: url( images/button_states.gif ) 0 0 no-repeat;}
#outerCont a:hover { background: url( images/button_states.gif ) -200px 0 no-repeat;}

Here is a sample page showing it in action:
button_states.html

Back to our regularly scheduled Flex/Air fun!

peas
DK


Flex and Air Pre-Release tour coming to Atlanta

Mr. Ben Forta is heading to Atlanta for the tour. Please come and join us at the January 22nd Atlanta Flex and Flash User Group. Check out the link after the break for the full details and please be kind and RSVP.

http://www.affug.org

peas


New year, new mouse

gosh, I really need to blog more often, eh? Well its a new year, so maybe…nope, this ain’t gonna be one of those ‘hop on the I am posting my new years resolutions bandwagon’ posts!

Ok, so, I’m a dude in IT. Naturally I dig electronics. That said, I have a really slow acceleration on uptake :) So, I don’t have a iPod, iPhone, well nor a Mac for that matter. I did finally break down and buy a wireless mouse. After snooping around the net for months I finally went to a store to get physical as it were. The top three mice to look at on my list were all Logitech brands: MX Revolution, VX Revolution, and the Nano. When up front and in person, the Nano is too small for daily use. Sure would be great for a traveling lappy user though. The store was out of MX revolutions, so I snagged the VX. After two days I was convinced it was too small. So I hit a Fry’s and snagged the MX Revolution. Holy Mouse Traps Batman! This thing is expensive! Well, considering its the first mouse I purchased in ~8 years, I was a daily user of a 3-button Logitech forever, $99 doesn’t sounds so bad.

The mouse is totally schweeeet! Glides nice and has a good weight to it. Kind of heavy actually, but to me that’s good. It has ample buttons including a thumb button that looks like a wheel, it has three positions. Oh, and speaking of the wheel, interesting. It has a auto sensing switch that based on the speed at which you are spinning the wheel switches between freewheelin or coastin. Odd way to explain it, eh? Basically it goes from a wheel that has positions as you roll it to none. Why is this cool? In freewheelin mode you can traverse say 50 pages of a Word doc in seconds. You can set the threshold of the switch in the SetPoint tools.

The cons? Price! When you press one of the two switches on the left side used by your thumbs the mouse can literally lift up a bit. The other thing, seems the SetPoint software is conflicting with Dreamweaver, which I use minimally anyhoo.

ok….next up is a keyboard. Any suggestions? No split keyboards for me, I can’t touch type. A couple of reasons why I can’t, but that’s another post.

peas


Flex, PaperVision3D, Carousel, and a wee bit o’ hackin

So, I’ve been wanting to play around with this PaperVison3D schtuff. Why? Well, I certainly do not use 3D in my job, I just wanted to! Unfortunately time demands, new baby and all, keep me from really digging into it. Add to this, almost all the stuff so far that I have seen is Flash based…as in not Flex. There are a couple Flex based examples. One is in the PaperVision3D source called FlexFocus. Another recent great example is from that master robe wearer Doug McCune himself. He calls it CoverFlow. In either of these Flex based cases, terms like Sprite and Clipping are used, Flash terms again that I’m not all familiar with. Though I can brag about playing with Sprites on the C64 and IBM PC way back when, but those were wholly different animals. Thus I sat down and employed the all to famous design patter: Hack It Up. The result? A cross of Canvas3D and Lee Brimelow’s Carousel FLA.

Now, what the heck does the code do? I’ve commented some where I know, there is much in there I just don’t follow…yet. The short and skinny: the images are placed in planes, the planes are positioned and rotated in such a way to appear to be in a 3D carousel, this carousel is fixed, the buttons tell the camera to render the scene from a different vantage point along a circle. The math behind it is elementary, though I’m sure there is a bit more to that PaperVision3D Plane, BitMapMaterial, etc…

What does my version add to the mix? One, its Flex based…use the tag Luke! Two, I have incorporated the use of a public dataProvider to inject the URLs of the images. Yes Dorothy, you can change this dataProvider at runtime. See the example below, the test button at the bottom swaps the dataProvider.

Carousel Roundabout Exmaple
Source code is fully available via the context menu of FP.

DK


BRIA-Business Rich Internet Applications

ok, hoping to step out and coin a new term: BRIA
BRIA is Business Rich Internet Applications. Idea is a RIA and BRIA are a little different to me. Consider Finetune, Pandora, or Scrapblog in contrast to say BusinessObjects, Fidelity Mortgage Search, or Viziant. BRIA are a subset of RIA focused on pure business applications such as the Enterprise sector.

Go ahead, use it, steal it, let me sue you for it. hehe…jk

DK


Eclipse and Trac

Using Eclispe and Trac? Would you like to see your Trac issues in Eclipse? Maybe even create and update Trac issues in Eclipse? You are in luck! A co-worker just discovered this and I promptly set it up. The project is called Mylyn. Its a plugin for Eclipse that is designed to be a ‘Task-Focused UI for Eclipse’. It can interface with Trac, Jira, and Bugzilla. Besides working with issues directly inside Eclipse, it also monitors the issue base and notifies you of new issues. Really sweet. Read about it below. You can install easily via Eclipse update tool too.

http://www.eclipse.org/mylyn/

DK


Universalmind and Inc 500!

Awesome!! Universalmind has made the list of fastest growing private companies this year coming in at 290. Though my tenure has been short so far with Universalmind, it has been awesome working with the best and brightest in the industry. I am excited to be part of such a tremendous team and anticipate the times ahead as we grow. You can read about the exciting news here at Inc 500 Fastest Growing Companies in America.

Don’t know who Universalmind is? We are a team of developers whose collective mind tackles your problems and solves them. As a team, we have developed, and continue to enrich, a core knowledge base of best practices for building, troubleshooting, and optimizing complex, high-performance web applications. Check us out here: http://www.universalmind.com. Come talk to us at Adobe MAX Chicago at the Universalmind booth too!

DK

Update: Thanks to Mike at Inc.com for correcting a obvious blunder.


AIR, I don’t get it

We had a great conversation at CF_Lunch today. CF_Lunch? Well, if you are in the Atlanta area, the local CFUG promotes lunches for CF folks to get together. Check out http://www.acfug.org.

So, what’s with the title of this post? During our conversation a member posed the statement: I don’t get it. He was referring to AIR and its usefulness. Well, it got us all thinking. As developers, AIR is another kewl bread slicer, but what is AIR to say the VP of IT at ? Sure, it allows IT to leverage the skills of Flex/Flash developers to build desktop applications, but what else? What else in relation to Enterprise IT, ie inTRAnets? I could pose a few things perhaps, like cross-platform abilities, thought that is not a selling point for inTRAnets, eh? But what about you, what do you think?

The table discussed the recent AIR event. A few of us felt adding some content to address this to the event could really help the product.

DK


Adobe AIR Tour hits Hotlanta

yeehaw! At the Adobe AIR Tour now. Cool setup and a huge crowd! Word is its the largest registration of AIR events. Mike Chambers is up describing a Hello World AIR app. For Flex folks, looks so similar to writing a Flex app: use Flex Builder 3 > New > AIR Application….bamm! Looking forward to the topics following.

Peas

DK


GTalk and Vista (OT)

Ok, so for a few weeks now I’ve been hating GTalk on Vista. Every time there is a conversation going it hangs totally. I have to wait sometimes 2 or 3 minutes to reply. I just found that turning off all message even notifications does the trick. Maybe its some sort of sound card issue??? Anyhoo, happily GTalking now!

HTH

DK


Next Page »