Cool Firefox Add-On

I bumped into a cool extension/add-on for the Firefox browser the other day.

If you are like me you like your favicons. You know, those icons you see next to the URL in the browser and then in your favorites or bookmarks. I love these things because I can find a link in my favorites much faster by looking for the little icon than I can by reading the text. Right now I'm looking at the orange Blogger.com "B" and I would not mistake it for anything else.

A lot of websites don't have favicons or don't have good ones, or use the same ones for the whole site when I tend to bookmark different areas of larger sites like adobe.com.

The utility I found is Favicon Picker 2 by Robert LaFont, Jr. and can be found in the firefox add-ons list at Mozilla.com or by going directly to https://addons.mozilla.org/en-US/firefox/addon/3176

Once you install this add-on and restart firefox, changing your favicons is incredibly easy. Just go to your bookmarks, right-click on the bookmark you want to change and go to properties. In properties you see a new set of controls allowing you to Erase the favicon or Browse for a new one. Simply choose a 16x16 px gif, jpg, or png file and you now have a new icon for it everywhere your bookmark appears.

Here's one example of how I have used it.

I spend a lot of time going to http://www.adobe.com/devnet which is the Adobe Developer Connection (formerly the Adobe Developer Center formerly the Macromedia Developer's Network, thus devnet). This portion of Adobe's web site has TONS of information on using Dreamweaver, Flash, Flex, ColdFusion and so on, and so on.

Rather than just bookmark the home page and navigate to the particular product or technology I'm interested in, I have bookmarks for each of the product or technology centers. While Adobe has their logo as the favicon for each portion of their site. This does nothing to speed up getting to the topics I want.

I noticed that the Adobe home page now has little icons for many of their products in a list on the left. I used Firefox's Page Info... option found in the Tools menu to grab each of these images. They were all just a little too big, so I fired up Adobe Fireworks CS3 and reduced them the appropriate 16x16px and saved them as nice little Fireworks PNG files.

Now not only can I find my topics faster, My bookmark lists are a lot prettier too. What can I say... I'm a graphics geek.

--Rich

Hyperlinking in Actionscript 3, a little more.

Oops. I looked over my last post and realized I had forgotten something. This is starting to become a habit. If you look at the last post, I had a line that went...

navigateToURL(myRequest);

This line should read...

navigateToURL(myRequest, "_self");

The extra argument, "_self" is the same as the _self target in an HTML hyperlink. It tells the browser to load the new page in the current browser window and not pop open a new one.

In Actionscript 2, the function...

getURL("http://www.adobe.com");

... did not need a target "window" argument if you wanted "_self". It was assumed.

In Actionscript 3 "_blank" is the assumed target window, so if you are like me and are running Firefox with popup windows turned off... absolutely nothing happens. No link. No warning. Nothing. Don't forget to add a target.

For even more information on navigateToURL(), here's a link to the livedocs help file at Adobe.


--Rich

Hyperlinking in Actionscript 3

When I first started working with Actionscript 3, I had a list of things I do in Actionscript 2 that I had to be able to do in the new language. Near the top of my list was creating hyperlinks.

In Actionscript 2 creating a hyperlink was one line of code.

getURL("http://www.somesite.com");

place that code somewhere when you wanted to go to a URL and it would work like a charm. If I use it in the MovieClip from my previous post about Events it would look like this...

myClip_mc.onRelease = function():Void
{
getURL("http://www.gotoandlearn.com");
}

In Actionscript 3, the process is only a little more complicated. (once you get past the Event differences)
The new code is in blue and bold.

var myURL:String = "http://www.gotoandlearn.com";
var myRequest:URLRequest = new URLRequest(myURL);

myMovieClip_mc.buttonMode = true;
myMovieClip_mc.addEventListener(MouseEvent.CLICK, doOnClick);

function doOnClick(e:MouseEvent):void
{
navigateToURL(myRequest);
}

for an explanation of the older code see this post... AS3 Event Basics

The first new line of code...
var myURL:String = "http://www.gotoandlearn.com";
..creates a named variable to store our URL address. It is not necessary to store this as a separate variable, but in the long run it is the better practice. I have found that is usually saves me typing, makes my code easier to read, and allows me to change or delete the value more easily.

The next line...
var myRequest:URLRequest = new URLRequest(myURL);
..creates a new URLRequest object in the variable myRequest and passes to the new object the myURL variable we created in the previous line. This code does not create the hyperlink itself. Think of this as just packaging the information about the hyperlink so it is ready for the next piece. There's much more to a hyperlink than just the URL. There are things like the contentType, the method, and the requestHeaders. While all we need for this example is the url, the folks who put together the URLRequest want to give advanced developers more tools to work with.

The last new line...
navigateToURL(myRequest);
...tells the browser to go to the URL (and send along any extra information packaged in the myRequest variable).

That's all we need to have a button or a MovieClip link to a location in the browser. While the basic code may be more than in Actionscript 2, it is set up so advanced developers have more options and the same URLRequest class (object type) can be used in various ways throughout Actionscript.

Speaking of which... I think that will be the topic of an upcoming post. I'll show the basics of using the new Loader class to load external images or swf files.

'till then,
--Rich

[Shameless plug]
Oh, by the way... this is one of the many topics covered in the introductory level Adobe Flash CS3 class at Ascend Training in Deerfield, Illinois and Chicago, Illinois. For the current schedule, go to http://www.ascendtraining.com/schedule.php and click on the name of the class to see it's outline.

AS3 Events continued...

I realized after re-reading my last post on basic Events in Actionscript 3 , I forgot something important.

In Actionscript 2, the moment you added a mouse event handler like onRelease or OnRollOver, you got the hand cursor, indicating a clickable item.

In Actionscript 3 the hand cursor does not automatically appear when you add a mouse event handler to a movieclip. This will come in handy when you do not want to have your users think of the symbol or MovieClip as being a hyperlink. For example, a dragable item should not look like a hyperlink or a button. Short of changing the appearance of the cursor yourself, you can just leave it as an arrow.

Here's how to add the hand cursor back in.

If you remember how we left our previous code...

myClip_mc.addEventListener(MouseEvent.CLICK, doOnClick);

function doOnClick(e:MouseEvent):void
{
trace(e.currentTarget.name);
}

If you want to make your pointer into a hand cursor, just add this code before the first line.

myClip_mc.buttonMode = true;

You can place this under the first line or at the end of the code, but good practice would dictate placing it at the top.

Our code should now look like this... and we should see that beautiful hand cursor again.

myClip_mc.buttonMode = true;
myClip_mc.addEventListener(MouseEvent.CLICK, doOnClick);

function doOnClick(e:MouseEvent):void
{
trace(e.currentTarget.name);
}

In my next entry I'll show how to link this to a web page.

--Rich

Nose News

So here's the word (or words) about my nose. Inverted Papilloma.

My ENT doctor describes the Inverted Papilloma as an aggressively growing, benign tumor. It needs to be removed or I will never be free of this blasted sinus infection. If left in place it has the potential of turning into cancerous lesions. No fun there. I got to look at my CT scan when I was in the ENT's office Even specialists have experts they turn to. My ENT, it turns out, is a specialist on the throat. He is sending me to a specialist on the sinuses and endoscopic sinus surgery.

Turns out this new doctor is the chairperson of the Otolaryngology department at a well known teaching hospital in the area. I hope this means I'll be getting the kind of treatment it sounds like I would be getting. My wife always ends up getting the best doctors in their fields. Maybe her luck is rubbing off on me. My appointment is on the 29th. I'm hoping to have this dealt with shortly after that.

--Rich

AS3 Event Basics

Part of the goal of my blog is to explain features and techniques using flash/flex and Actionscript 3 (as well as Dreamweaver/HTML/CSS).

I think advanced programmers have plenty of places to turn to for information about Actionscript 3.0, so I plan at this stage to just cover the basics (well slightly beyond that). As a designer who worked a bit with Actionscript 2, I plan to also point out how AS3 differs from AS2.

That being said; let's get started with Actionscript 3.0 Events.

It took me a little while to understand events handling in AS3. My main hangup was the Event object. I was used to thinking of events as verbs not as nouns. I think I get it for the most part at this point. There are a few things I've seen that got a little weird, but that's a topic for a later post.

Event basics...

For those of you who worked with AS2, you were probably accustomed to writing...

myMovieClip_mc.onRelease = function()
{
//do some stuff
}

While this was relatively easy to write, it did not encourage reusable coding and it was just one of many ways to handle events. For example, you had to use a completely different system if you wanted to work with components.

Here's how the same idea would play out in AS3.

myClip_mc.addEventListener(MouseEvent.CLICK, doOnClick);

function doOnClick(e:MouseEvent):void
{
//do something
}

The first line says add an event listener to the myClip_mc MovieClip; which means we are telling it to wait for something to happen and then telling it (the listener) what to do when it does happen. In this case we have told the new listener to wait until the user clicks the myClip_mc MovieClip and in response run the doOnClick function (which we create later).

The next bit of code creates the doOnClick function. Here's the part that used to mess me up. After naming the function we send it (or pass to it) a value/object of the type MouseEvent? What the hell is a MouseEvent! An event is something you wait for or do. It is not an Object that can be handed over, like a baseball or a cat (or all the other examples of objects given in introductory programming classes).

Think of the Event object as a note that is passed along when the event occurs.

The MouseEvent object sends information like what object triggered the event (target or currentTarget), whether a modifier key was held down during the event (ctrlKey or altKey), or where the mouse was on the stage when the event was triggered(stageX and stageY).

While you might not think of uses for all the features of the MouseEvent object, it certainly gives us options to work with.

Imagine you had three buttons that would use basically the same code. Each would use the same function and just test to see what object triggered the event to decide what to do next.

If you want to know which object triggered the event, try adding a trace statement to the function.

trace(e.currentTarget.name);

This will tell you what was clicked that triggered the function.

There will be more about what you can do after events and more about events themselves in future posts.

--Rich