Underline Text in Adobe Illustrator

This has always baffled me. Why can't you underline text in Illustrator? Is it hidden somewhere I can't see? Maybe in the new version you can. But since I'm still behind on my updates, I'm not sure.

I found the workaround awhile ago. It is one of the strangest methods I've run across. You have to have Photoshop open. Copy and paste the text into Photoshop document, then you set the text to be underlined, and finally copy and paste the text back into Illustrator. Vi-o-la!

If there's a better way, please let me know!

No Fuss Flash Preloader

My quick and easy preloader method is not the fanciest. Nor is it the best method. It probably is considered old-school. But so far for me it's the least complex and hasn't failed me yet. Note that this method will cause the movie to not play until it's COMPLETELY loaded. It has no counter or loader bar, but it can be modified to have one.



1. Create a layer in the timeline for actionscript. I usually name it "A". This is where I put all my actionscript for that specific stage or movieclip.

2. Create a layer in the timeline for lables. I name it "L". This is where I have all my labels.

3. I add around 5 frames in my timeline, on all layers. I just like to have a little padding visually in my timeline. I make the 5th frames into blank keyframes.

4. On that keyframe (5th frame), layer L, I label it "startmovie". This name can be whatever you want it to be. It is labeled so it can be identified as the actual start frame of my movie.

5. On the first frame of Layer A, I put the following actionscript:

stop();

this._lockroot = true;

counter = this.createEmptyMovieClip("counter", 0);
counter.onEnterFrame = function () {
if ((_root.getBytesLoaded() > 0) && (_root.getBytesTotal() == _root.getBytesLoaded())) {
delete(this.onEnterFrame);

gotoAndStop("startmovie");

}
}

6. On the 5th frame of layer A, I put whatever actionscript that needs to be initially triggered for the movie. If you put a play() action on that frame, remember to make a frame down the timeline that has a stop() or if you want to loop - gotoAndStop("startmovie"). If you don't, it will loop back to the first frame which is the preloader script.

7. On the 1st frames of the layers where you are going to put your movie content, you can put a message or animation to indicate that the movie is loading. Just remember, whatever you put there, it has to load first before it can display. So there might be a flash of blank screen before you see anything.

8. Finally on the 5th frames of the content layers is where you will start your movie.

SWFObject

Don't forget to replace the default object/embed tag that places a SWF file on a web page. Currently, Internet Explorer forces you to click on a SWF object before you can interact with it. So when your client says "Why do I have to click on the Flash twice?," that's why.

The best solution I found so far is SWFObject. Here are the steps for a very basic installation:

1. Download the zip file (link) and extract it.


2. Put couple of files in your web directory: swfobject.js and expressInstall.swf


3. Add some code on the page (I like the dynamic method):
   
   
   
   • Put this in the head tag:
     
     <script type="text/javascript" src="swfobject.js"></script>
     
     (make sure the path to the js file is correct)
   
   
   • Put this also in the head tag:
     
     <script type="text/javascript">
     swfobject.embedSWF("file name", "div id", "width", "height", "version", "expressInstall.swf");
     </script>
     
     Change "file name" to your file name with correct path.
     Change "div id" to id of the div you are placing the swf.
     Specify "width" and "height".
     Specify your swf "version". For example: "9.0.0".
     Make sure the path to "expressInstall.swf" is correct.
     
   
   
   • Create a div in the body of the html that is to hold the swf. Give it an "id", same as what you specify above javascript for "div id".
     
   
   
   • Add alternate content in the div. This content will show if the user doesn't have Flash installed.
   
   

example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
var flashvars = false;
var params = { wmode: "transparent" };
var attributes = false;

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>

I usually add wmode="transparent" in case I have html dropdown navigation on top of the flash. If I don't have this, the navigation will go under the Flash.

Here's a nifty swfobject generator - link.

There are a lot more you can do with SWFObject. The zip has great examples as well. It is updated often, so always read the instructions and download latest from here - link.

Another little tip: on Firefox, if you click on a flash, an annoying dashed border appears around the swf. Put this in your CSS and it should fix it:
object { outline: none }

Windows XP Web Form Elements in Vector

I created these for wire frames I'm doing for a website project. I thought I'd share them. They can be used for design comps to represent web form elements. They are in Adobe Illustrator format, so resizing is easy. I also left in the text boxes so it's easy to change the copy. They are not perfect, but I hope they come in handy!

Download Zip

Quotes and Parenthesis Weirdness - Internet Explorer Issue

My Super Powers: Be Able to Find Bugs in Any Application

Give me any web application and I will break it or find weird issues. Let me demonstrate:

Here's an Internet Explorer issue I found recently, and this should be filed under weird. I have a table or a div with a set width. In IE, the text inside of it will wrap to the set width. If a word is too big it will resize to fit the word. But it will not wrap between quotes and parenthesis. See this oddity below (in IE):

Quotes without parenthesis:

"Hello there." Hello there.

Quotes with parenthesis (THE WEIRDNESS!):

"Hello there." (Hello there.)

Why? It does not make sense. If anyone finds the reason behind this, please let me know. It also does the same thing with the French quotes («») and other brackets ([] & {}).

But fear not, Citizens, there is a work around. The cure is a CSS tag "word-wrap". By default it is set to "normal". Change it to "word-wrap:break-word".

Fixed:

Quotes without parenthesis:

"Hello there." Hello there.

Quotes with parenthesis:

"Hello there." (Hello there.)

This one wasted an hour of my day today, trying to find the fix... Oh well, "with great power, comes great responsiblity."