My Name Is Rich

I’ve been wanting to mess around with jQuery and I finally had some time to do just that. I figured to keep it simple and try to recreate something that I usually make in good ‘ole Flash. My project turned out to be a simple menu that when you rollover an item a  small bar tweens to it. Then, when you click on an item another bar tweens over to show it’s selected state. It’s a simple concept and I realized I was able to recreate this very fast using only html, css, and jQuery.

This little project really helped me realize not only how easy this little framework makes development but how much fun it can be. There are a few things that I don’t like about javascript but that’s mainly due to the fact that it gives me nightmares of Actionscript 1 and 2.

If you want to check out the demo and source code I have pasted the link below.

Live Demo

Ok the title may be a little extreme but I wanted to post a quick and simple fix for a bug that I ran into. Hopefully, this post will help someone else or just serve as a reminder for me if I run into the same problem.

Well here is the background. I was working on a project that needed to load in the Vimeo Video Player, named Moogaloop. This was my first time using it and so far it’s not too bad. A little hiccups here and there but I was able to get the player to load with help from derhess’ helper class. That was until I ran into one problem. It seemed that every time the Moogaloop player would be loaded into my own Flash movie the entire alignment would reset to Top Left. So, after doing a bit of reading and talking to a good friend that works at Vimeo we came up with the workaround of just reverting the alignment back to it’s original value. And that was it. The bug was now “fixed” and my site didn’t have that nasty shift to the side problem.

No, I didn’t hear that from any project manager or fellow employee. I actually read that line from the great site Clients From Hell. As I’ve mentioned before this is one of my favorite sites and this little nugget is proof why.

Client: I want you to do a 3-minute animation for my website. It’s okay if it’s in Flash. How much is that?

Me: That depends, what did you have in mind exactly?

Client: Well, I don’t know. It depends on how much it costs.

Me: The price depends on how complex the designs are, if there is any level of interactivity, if I have to get licensed music, if there is voiceover, etc.

Client: I’m just asking how much 3 minutes of animation is. I don’t know what I want.

Me: Well, the most basic designs start at $3,000 and more complex designs are upwards of $20,000.

Client: WHAT? I thought it would be like $100. I told you, you can do it in Flash.

Me: That’s how much Flash animation costs.

Client: Bullshit. I know Flash does all the animation for you.

direct link.

Now, I wanted to post this because for one reason it makes me laugh and therefore you should all be lol-ing right now. Two, it’s an clear example of a client being uneducated or simply not caring to know what is or isn’t possible despite being told the truth. When a client acts this way it can be a tough time for everyone. Fingers get pointed, lawyers are involved, cats and dogs living together… mass chaos. So, how do we fix this? Do we as developers invoke our civic duty of trying to educate these clients? Yes, I believe so but sometimes it’s not enough and sometimes business is just business. In the above case, I hope the client and developer reach a fair agreement in price or they break times then and there. All we can take from this is a lesson and hope to God that this doesn’t happen to any one of us.

Debuging is a craft in it’s own and it’s always helpful to find new tips and tricks. So, I’m writing to post about a new trick for helping us Flash coders debug our sweet, buggy code. Adobe put in a new feature in Flash CS4 called Conditional Compiling and you can read more about it from InsideRIA’s article.

The basic idea is that you can use a compiler constant called CONFIG::Debug to tell the compile when to run some code. If the constant is set to true it’ll be run if it’s set to false then it won’t. Simple, right? Before you start coding you’ll want to go into your Actionscript 3 settings and click on the last tab surprisingly called “Config constants”. Here you can create the constant and set it’s value.

Now that you are all set you you can then use code such as this to see it in action.

1
2
3
4
5
6
7
8
9

var val:int = 0;
for (var i:int = 0; i < 200; i++)
{
    val += i * .5;
    CONFIG::Debug
    {
        trace(val);
    }
}

And that’s it. It’s a small tip but one that I’ll be definitely using from now on in my projects. If you want to see another simple example I’ve put up a zip file located here for your viewing pleasure.

Well, yesterday Matt and I discussing the value of insults themed around flash. This sparked us trading them back and forth and after a having a few lefts we took off to twitter. We both started posting as many insults as we could and surprisingly we found a welcoming response from a few fellow flash devs. They also started to post back their own and the result was pure flash-geek-comedy. I have to say I’m glad that so many people enjoyed it and to show my love I decided to post a few of my favorites below.

Feel free to add to the fun if you are a flash developer!

• @8dot3 Your mom is so fat she’s spread across five scenes.
• @BrendanOliver #flashinsults you”ll never be able to addChild() while(this.member().length() < 4)
• @matthewwithanm Your mom is so dumb that she tried to use tellTarget to return a vacuum. #flashinsults
• @morgenstille you’re so fat, when your rotation val is changed, the earth starts shaking #flashinsults
• @greg_dove you’re so stupid, you think flash.display.JointStyle is an option at a Californian herbal medicine dispensary #flashinsults
• @lettertwo while (person == you) trace(‘hahahahahahahaha’); #flashinsults

And that’s it. There are a ton more so if you want to check it out here. I’m loving so many people found it enjoyable!

Out of Inspiration by Roy Hoes

I think I spend too much time going through sites, threads, rss feeds, etc all for one thing… inspiration.

I love it and I think it takes over too much of my time. Ask any of my co-workers and friends. I’m sure they’ll tell you daily horror stories of me sending them links upon links that I find interesting and inspiring. I’m not really sure why I do this and why I love going through so much media. I think if you ask some people they will say “I need it to stay ahead of the curve” or “I need to think of a new idea for a website design”. They will pour through books and websites. It’s almost like getting a fix for that great work that just makes you say “I want to do that!” Suddenly, a lightbulb is lit and you’re full of ideas and your second wind has just sprung. I don’t know about you but this type of rush keeps me motivated, allowing me to go through the “real” days of work. I feel like we all need something like that. There needs to be that edge that pushes you further when you’re running on empty.

At the end the day of the day you have to ask yourself “What inspires me?” Could be your job, family & friends, religion, or something else. If you can find it… then hold onto it.

So, I recently wanted to play around with the Bit.ly API and use it in flash. I decided it would be best to write up a nice little helper class. The usage for this is pretty simple and right now it only implements two of the API methods, shorten and expand. I’ll work on the other calls but I figured these were the most widely used.

1
2
3
4
5
6
7
8
9
10
11
12

import com.imperez.apis.bitly.Bitly;
import com.imperez.apis.bitly.events.BitlyEvent;
 
var bitly:Bitly = new Bitly("bitly username", "user api_key");
bitly.addEventListener(BitlyEvent.SHORTEN, this._shorten);
bitly.shorten("http://www.google.com/");
 
function _shorten(event:BitlyEvent):void
{
	var shortURL:String = event.currentTarget.shortURL;
	trace(shortURL); //http://bit.ly/4BSxf
}

As you can see from the code above it’s pretty simple. Pass in your username and api key in the constructor and then listen for the BitlyEvent.SHORTEN event. Make your call along passing your long url and you are set to go. I wanted to keep this is as easy to use as possible. I also wanted to make it so you wouldn’t need to have to parse xml in order to get this information.

And that’s it. Nothing more to see but sweet, sweet code . If you’re interested I have it up on my repository located here. There are still some bug fixes and general clean up to on top of further implementation but I would say it’s a good start.

I was lucky to get my invite for Google Wave yesterday and quickly logged on. So far things seem smooth and I think this application has a ton of potential. It shows off my email from google mail and offers up a couple of default extensions. There’s even a section to manage your contacts on google wave. All is right but right now there’s no one to really… wave with. Hopefully once the invites keep coming I’ll be able to test it even more but for now I can just wait.

For anyone else riding the wave I hope you’re enjoying it and getting more out of it. As for those that are waiting for your invite don’t worry. I already sent out a few of mine and hopefully it won’t be too long until you get yours.

For now check out all the great previews here, here, and oh yea way over there.

Well, I was working a small project and I realized I needed to be able to copy content to the user’s clipboard. I know this is doable since I’ve seen it done in many, many flash sites and applications. So after a quick look through the Flash Help Docs I came across a little function called System.setClipboard().

Check out the example below to see it in action. All you have to do is type your own text and press copy. Simple and easy.

1
2
3
4
5
6
7
8
9
10
11
12

import flash.system.System;
import flash.events.MouseEvent;
 
this.copyButton.mouseChildren = false;
this.copyButton.buttonMode = true;
this.copyButton.addEventListener(MouseEvent.CLICK, this._click);
 
function _click(event:MouseEvent):void
{
	System.setClipboard(this.copyField.text);
	this.copyButton.labelField.text = "Copied!!";
}

The way this code works is that after you’ve typed your text and press the copy button. System.setClipboard() is called and a string is passed as a parameter. And that’s really all of the grunt work. Nothing more or less.

I’ve uploaded a zip file containing all the source files for your viewing pleasure.

Hope you found this example useful!

Ok this is a quick tip that I figured to pass along. It’s nothing revolutionary but it has helped me a lot daily.

So here’s the problem. You want to zoom into an object or multiple objects on the stage. What happens when you zoom in? Sometimes Flash will go to the area you expected and other times it’ll just go over waaaaaay to the left or right or anywhere it feels like. Now, you’re stuck looking at a blank screen.

Here’s the solution. Instead of dragging your mouse over repeatedly desperately trying to find your objects just do this…. Press control/command + A. That will select all of your objects on the stage. Second, zoom in by pressing control/command + “+”. Now you’re back in business staring at your stage objects and it’s all centered.

That’s it. Again nothing special or ground breaking but very helpful.