Blog

You want to turn a button into a sprite, but you also want to have the text there for accessibility!

What do you do? You use the text indent property:

text-indent:-6000px; overflow:hidden; cursor:pointer;

Have you checked IE7? If the text is still there, try this:

color: transparent; text-transform: capitalize;

Yes, it is a hack, but it works great. And yes, you do have to have the capitalize transform or else it won’t work.

Here is everything you need to get your super awesome usable sprites working across all browsers:

.mybutton{background:transparent url(”mybackground.png”) 0 0 no-repeat; border:none;  text-indent:-6000px; overflow:hidden; cursor:pointer; color: transparent; text-transform: capitalize;}
have fun!

Just before the New Year, Cowie and Fox launched Lili Blossom, an online beauty retail boutique. You can find the most amazing gifts for others and a little indugence for yourself too! Lili Blossom features a unique variety of products with beautiful scents as well as unscented for sensitive skin. You’ll be able to find something perfect to suit almost anyone you’re shopping for.

One of my favorite lotions is Malie. When you open the bottle it’s like a mini tropical vacation inside, it’s fragrant, but not too strong (i’m one of those people that doesn’t like perfumed products). I was also impressed with how it softens the skin. Definately a must have product!

I’ve worked on Semperviva newsletters for a while, pretty much since the initial few, and it has gone through a few design refinements. The first change was inspired by a new Semperviva website and the other times is was just a push for bigger imagery and massaging in the top banner area. After doing so many, it’s interesting to go back and look at some of them. Semperviva is a great client and they allow great creative freedom.

Check out the newsletter archive

With Apple’s announcement of the new Magic Mouse, it’s clear that the new frontier for UI design is multi-touch. When you get over the wow factor of the Magic Mouse, you can move on 10/GUI by C. Miller. This is the first demo I’ve seen that has convinced me that touch screens can take us away from the mouse.

Check out our latest touch screen technology website for 2010 Legacies Now, www.2010andbeyond.ca

This is a Flash website built with Action Script 3 coding and it features a backend api that integrates the site with a content management system built upon the PHP Symphony framework. It’s Flash, but it’s search engine friendly because it utilizes deep linking and mirrored HTML SEO/Usability content.

Technology still manages to blow my mind each and everyday. Picture researcher Rachel Young of Ossett, England, took just 15 hours on Google Earth, to find images representing all 26 letters of the alphabet.

Click to see full size image:

By now everyone is tired of going to some website and NOT being able to play the video there because of a missing plugin, incompatibility, browser issues, etc.

The next major release of HTML (version 5, the language that gives structures to a webpage) will be released (eventually). As you would expect there will be a number of improvements to many areas. One part in particular has cause some debate as of late and that has to with a new tag, the <video> tag.

This new tag would allow for defining video, such as a movie clip or other video streams, without having to use any plugins or extra JavaScript files to make it play, so kind of like the <img> tag. Since this is supposed to become a standard, some of the debates around it have to do with what kind of codecs should be used and other format related tech things.

One thing is for sure, if there is an agreement to use one single defined set of standards, then everyone will benefit from this new user-enhancing feature.

Read more about this topic

One of our programers here just asked me about this, so I thought this would be a good candidate for ActionScript 3 tip #2: How to access a variable in the Flash embed code.

In AS 2 it was easy:

_root.variableName

Now, you need to use the loaderInfo class. The loaderInfo class provides information about a loaded SWF or image. You can use it to access things like the file size, dimensions and url of the loaded content. Using the parameters property, you can access those variables that you pass to the SWF in your embed code:

root.loaderInfo.parameters.variableName 

Here’s a fleshed-out example of how to load an xml file who’s path you define in your embed code, from within a class:

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;

    public class Test extends Sprite
    {
        public function Test()
        {
            var loader:URLLoader = new URLLoader();
            loader.addEventListener(Event.COMPLETE,
initXML);

            var request:URLRequest = new URLRequest(
root.loaderInfo.parameters.xmlPath);

            try {
                loader.load(request);
            } catch (error:Error) {
                trace("Unable to load document.");
            }
        }

        private function initXML(event:Event):void
        {
            var loader:URLLoader = event.target
as URLLoader;
            if (loader != null) {
                var data:XML = new XML(loader.data);

                trace(data);
            }
        }
    }
}

I’m just starting the build of a small Flash application, and I thought I would attempt to share a few ActionScript 3 tips along the way. So here’s the first one:

Tip #1: A lightweight and simple way to loop through an array.

To begin with, you should understand that a good way to speed up your code when it comes to loops is to save the length of your array in a variable. So rather than doing this:

for (var i:uint = 0; i < my_array.length; i++) {
    trace(my_array[i]);
}

You should do this:

var len:uint = my_array.length;
for (var i:uint = 0; i < len; i++) {
    trace(my_array[i]);
}

That way, Flash doesn’t have to calculate the length of my_array each time it iterates through the loop. Well, building on that… lately I’ve been using this nifty, quick-to-type method:

var i:uint = my_array.length;
while (i--) {
    trace(my_array[i]);
}

Note that this will loop through your array in reverse, so you wouldn’t want to use this method if order is important. Where it works great is when you’re just looking to match a value. For example:

var object_array:Array = new Array(
    {slug: "one", content: "This is the first item."},
    {slug: "two", content: "This is the second item."},
    {slug: "three", content: "This is the third item."}
);

function getObjectBySlug(slug:String):Object
{
    var i:uint = object_array.length;
    while (i--) {
        if (object_array[i].slug == slug) {
            return object_array[i];
        }
    }
    return null;
}

trace(getObjectBySlug("one").content);

Cactus Club Cafe is now on Facebook. With overnight success, gaining over 100 fans, they were able to get their vanity URL.

Become a fan today!
http://www.facebook.com/cactusclubcafe