Today, I was once again flabbergasted by a great little feature I accidentally discovered using Google’s Gmail.  It reminded me that as good as a user experience gets, there’s always room for improvement.

(It also made me think of the quote from TRON, which is applicable to web design and user experiences as well: “On the other side of the screen, it all looks so easy.”)

So what was this great little feature of Gmail?  I was typing a message and had every intention of attaching a PDF file.  Problem is, I totally forgot to attach the PDF file.  Luckily, Google was smart enough to know that I wanted to attach the file, and prompted me, asking if I wanted to attach anything.

“How’d they do that?” you ask?  Well, in my message, I had included the words “Attached is…”, referencing the PDF file I was going to attach and wanted the recipient to look for.  Apparently, Google thought that, like me, people would forget to attach files more than just once.  So they put in logic to search each message for certain keywords (“attached is”, in my case), and if the email has no attachments, they’ll give you a popup message that tells you they found those keywords in your message, and ask if you really want to send the email as-is, or if you want to attach a file.

Chalk one up for Google in teaching us all another lesson on a subtle but well thought-out user experience.

Until next time, happy coding!

Why, you ask?

As time goes on, I’m finding myself drawing closer and closer to sticking close to pure HTML/CSS code, with other standards-compliant languages like PHP/MySQL and JavaScript.  Not to say Flash and it’s programming language (ActionScript) isn’t compliant with anything.  I had simply found myself doing things in Flash by default because it’s what I was most comfortable with, and could do with the least amount of technical issues.

But, now that I’ve been exploring more uses for JavaScript in place of what would normally be Flash code, it’s easier and easier to pull myself away from Flash.  Plus, as I’ve been doing more and more dynamic code content with PHP, I’m finding myself a lot more excited about using PHP than I am about using Flash.  I still enjoy Flash, and don’t get me wrong — there are definitely times and places for Flash.  But for where I’m at now, I am finding that my own site doesn’t currently need to rely on Flash so much.

Outside of the programming techniques used for the most recent release of the site, I felt like it was definitely the time for a change regarding the design of the site.  The new design has a much more sophisticated simplicity and clean look than the old version. It’s focus is more on the projects and artwork, as they take a very prominent position on the Work page with only the project details to accompany them.  No fluff content just to fill in space and give users something else to read.  Only the necessities.

With that all said, I hope you enjoy the newest iteration of HesslerDesign.com.  If you haven’t already, check out the Work page, which has a few new projects listed that I’ve completed recently.  I hope you like what you see.

Until next time, happy coding!

In your CSS code, simply assign the following:

html body {margin:0px; padding:0px}

That’s it. Seriously. By default, most (I hesitate to say all) browsers have a built in 10px or so padding around the edge of the window. By setting your html and body to have no margin or padding, it effectively overwrites the browser default values and uses yours.

While you’re at it, you might also be wondering how you can center your main container in the browser window, instead of having it left-justified.  This too is easy to implement with one snippet of CSS.  Let’s go ahead and assume that your main div container has the ID “container”. Your CSS code to center the div “container” will be:

#container {margin: 0 auto; width:960px;}

Notice that in this example, you need to fix your width to a certain value so the container knows not to take up 100%. The margin setting “0 auto” tells the container to have a margin of 0 (zero) pixels on top and bottom, with auto margins on the left and right.

So there you have it. Two basic CSS rules to make your page go all the way up to the edge of the browser window, and to center your main container in the window.

Until next time, happy coding!

SEOmoz is a popular provider of SEO software.  It’s website is dedicated to all things SEO, including a blog, helpful articles and user guides, and best of all, a set of tools that webmasters can use to help their site’s SEO.  Some of the tools are only available to “Pro” members, which costs money.  But a little over half of them (at the writing of this entry) are completely free to use (some with daily restrictions on use).

One of the coolest free tools available to anyone is the SEO Toolbar for Firefox.  With the toolbar, you can access any of the SEOmoz tools right from the toolbar, without having to go to the actual site first.  It’s incredibly handy, and also includes stats like Page Authority and Domain Authority, which give real-time stats on the site you’re currently on.

So next time you get the question, “How can I improve my search rankings?”, look to SEOmoz.org as your first (and likely, only) stop for resources and tools to help guide you on your road to SEO success.

Until next time, happy coding!

Okay, truthfully the shameless plug of FindMyFold.com is quite self-serving. Between me, you, Google, the Internet, and Al Gore, I sort of created the site. I thought it high time to do my duty as a designer and developer, and offer the site as a public service to the world.

So the next time someone asks you, “Is this going to be above the ‘fold’?”, point them to FindMyFold.com. At the site, you see what your fold is in your own browser.  Plus, there’s a handy-dandy “Test Your Site’s Fold” feature that you can use to test any site to see where your fold lands on that particular page.

Oh yeah, and while you’re there, make sure to share the news with your friends, with the built-in social links.  Let’s spread the news and get everyone up to speed!

1. Use XML files to set content framework

On nearly every Flash site I work on, I use at least some XML. The great thing about XML files is they are a great way to structure blocks of your site.  For instance, if you want a slideshow on your site, you could have an XML file that contains the title, url, and other image-specific information you want to include for each image. Then, just import the XML into Flash and store the XML data in arrays to organize the information to use later.  (More on arrays below.)

Another great thing about using XML in Flash is that if you want to stream an RSS feed into a Flash site, you can, because RSS feeds are set up as XML.  (For more info on RSS feeds, see the post on Streaming RSS feeds into Your Flash Applications.)

Additionally, XML is easy to change without having to republish your site.  Say you have that slideshow I mentioned above, but want to swap out an image.  With XML, you just point to the new url, update the title, and save. Your Flash site will automatically update with the new info, and you won’t have to republish every time. Trust me, you’ll thank yourself for using XML when you build your Flash site.

2. Use arrays to organize assets used in your code

For me, using arrays is quite possibly one of the smartest and most powerful things you can do to optimize your code.  Not necessarily from a file weight perspective, but because with arrays, you can reference an object stored in an array by name, number, id, etc. For instance, say you have 20 thumbnail images you want to make clickable to open a larger image. You could attach individual event listeners to each image.  Or, you could set up a couple of arrays — one for the instance names of each image, and one for the reference to the larger image to load when clicked — and run “for” loops to set the event listeners all at once. While you’re in the “for” loop, set an ID number for each image that you can then reference in your “click” function that will fire on mouse click, and call up that ID number slot in the large image array.  With only a few lines of code, you’ll have a powerful way to batch chunks of your code with minimal effort. (For more info on arrays, see my post on Utilizing the Power of Arrays in Adobe Flash.)

3. Only import and embed absolutely necessary image files into your file.

If you’ve been on the Web at all…and judging by you reading this, I’m guessing you have…you know doubt know that a lot of people don’t like Flash sites.  The main reason seems to be they take way too long to load.  To get around this, I highly suggest importing and embedding ONLY the images you absolutely need.  If you have a lot of image assets, I suggest loading them dynamically via code, and placing them in the appropriate places.  This not only makes the file size considerably smaller, but it also opens the door to be able to update an image, replace it, and have Flash automatically read in the updated file without the need to republish the entire site.  (Sorta sounds like one of the key perks of using XML, doesn’t it?)  And trust me, users will thank you for having a site that loads (or at least shows up with a short preloader) in 5 seconds, rather than a beefy site that doesn’t show up until the entire thing loads.

4. Load assets in an orderly fashion, not all at once

Along with #3 above, when you load assets into your Flash site dynamically, it’s best to set up a structure and order in which to load them. For instance, load all of the home/landing page assets first. Once those are loaded, proceed with the next set of assets that you think will be needed/viewed by your users.  Not using a certain set of images until later in the site?  Don’t load them up front. Wait until the rest of the assets before it have been loaded first. Think about it.  Would you rather try to have 20 images load all at once?  Or load them in the order of which they’ll be seen? Loading them one at a time will speed up the individual image load time because there is only one image needing attention while it is being loaded, not all 20?

5. Cool it with the videos

Okay, this sounds harsh, but hear me out. Video is great. It’s everywhere, and it’s getting more popular by the day.  (YouTube, anyone?)  But when you’re making a Flash site, video can also be a beast to work with, specifically video that needs to stream without a playback bar.  The worst thing about video is file size. I’ll admit, video has come a long way in optimizing file weights and all, but at the end of the day, even a small video is still going to be around 1-2MB.  When you are using video, make sure you utilize the “loading assets in an orderly fashion” advice from above.  If you try to start streaming a video when 20 images are loading while it’s trying to play, you’ll no doubt get choppy playback.

6. Use TweenMax or TweenLite for code-based tweening and animating

I’m a big fan of keeping my Flash sites on one frame of the timeline, and doing as much as I possibly can with code, rather than with the timeline.  The reason for this is simply less time making changes later on down the road.  Want to make every tween of an image fading out half as long across the entire site?  Pretty laborious if you’re using the timeline.  But if you’re using code, it’s a matter of updating a couple of numbers.

This is where TweenMax and TweenLite come in.  In a nutshell, they’re the best tweening engine out there.  Using it, you can call one function that can alter many facets of an object at once (x and y position, alpha, tint, etc.).  You can also attach event listeners like onComplete, onStart, etc., that call functions to run at specific times during the tween.  In short, these tweening engines will make you wonder why you ever used timeline-based animations.  And best of all, they’re extremely light in file weight, unlike a lot of timeline-based animations.  And it’s a one-time file weight addition, not a per-tween sort of thing.

7. Simulate downloading on slower connections

Not everyone has a cable-speed connection. Believe it or not, there are still a lot of people out there using DSL or slower connections.  And as unfortunate as it may be, those are the people you need to build the site for.  Don’t ever assume that your audience is going to have the latest and greatest computers.

To simulate downloads in Flash, export your movie and select “View > Simulate Download”.  To set different connection speed settings, select “View > Download Settings”, and select your desired speed (or create your own custom speed).  Flash can be deceiving. When you test out a movie, it always runs lightning fast. But by testing it using the “Simulate Download” method, you’ll get a much better idea of how your site will behave on the Web.

8. Build buttons and other UI components as vector artwork in Flash

One of my biggest pet peeves is using raster images for buttons that could easily be made as vector art in Flash.  Not only does this make having to update the button a multi-step process, but it also beefs up the size of the file.  It may not be much, but if you get a dozen different image buttons, you could easily have just added 100+ kb to your file weight.  Might not seem by much, but as people’s attention spans are getting shorter and shorter, that added 2 seconds of load time you just added might be costly, and you may see an increase in the number of dropped users.

My motto is this: “If it can be made in Flash, make it in Flash”.  Vector art is not only easily editable, but also a huge file weight saver.  Plus, you don’t get any degradation of quality that you’d get if you used images.  All of your lines, colors, gradients, etc. are crystal clear.  Pair that with the almost non-existent file weight they carry, and what’s not to love?

9. Write custom Classes for reusable code

If you write Actionscript code, you use Classes.  You might not know it, but you do.  Every time you use a property of a MovieClip instance (i.e. myClip_mc.y to get the “y” position), you’re calling the MovieClip class.  Same with Sprites, Buttons, UI Components, etc.  Classes are a staple in object-oriented programming, and allow you to read or set properties, call functions (methods), and respond to events.  It’s a great way to reuse the same code over and over again, by simply importing the classes into your site file.

One of my personal favorite classes that I have written is for an Email Validator, which contains the logic to check whether a string is a valid email address or not.  You can check it out in my previous post on Building a Better Email Validator in Flash.  Each time I need to use this, I simply import it into my file (which is 1 line of code), make an instance of the validator (1 line of code), then call the validate function and pass in the string to validate (1 line of code).  In all, for me to validate an email address, it takes 3 lines of code.  Much better than rewriting all of the validation logic in a dozen different files, eh?

10. Use FlashVars to set important global variables

Every so often, you’ll run into an issue where you’ll want to change a variable from outside of your Flash file. An easy way to do this is to use the FlashVars parameter when embedding your Flash file in HTML.  I find that I mostly use FlashVars for variables that will change from a “staging” site to the final “production” site.  The most often used variable that I personally encounter is the account name for Omniture tracking. The bulk of sites I develop have different staging and production Omniture account names, so the metrics don’t get skewed while testing.  But if I embed that account name into the Flash file, I suddenly need 2 different versions of the Flash file — one for staging, one for production.  But if I have a FlashVar set up for this account name, I can just change the variable in the HTML code, and have Flash read it in.  Trust me, it’s a handy way to avoid having multiple versions of the same file for different environments.

In Conclusion…

So there you have it.  10 easy ways to optimize your Flash sites.  There are many more ways to optimize Flash sites, and I’m sure I’ll get into them in later posts.  But these are some of the main culprits.  And trust me, individual posts could be written about each one of these (and some already have).  If you want to see posts that dive deeper into any of these, just let me know and I’ll write it up.  Until next time, happy coding!

Step 1: Embed your Flash SWF file in your HTML page

When embedding your SWF file, give your object tags the same id and name. Your non-Internet Explorer object tag should have the id, and your IE object tag should have the name. And again, both should be set to the same value. (In this example, these attributes are set to “helloSWF”.) Additionally, you need to set the allowScriptAccess attribute of your Flash object to either “sameDomain” or “always”. Without this attribute set, you won’t be able to have Flash communicate with the HTML file. At a basic level, the object tag will need to look something like this:

Step 2: Write a JavaScript function that targets and calls to Flash

There must be a JavaScript function that acts as the mediator between HTML and your Flash SWF file. In this JS function, you need to access the SWF file. This is done by referencing the id/name (see step 1). In its simplest form, this JS function should look something like this:

function jsSayHello() {
   var mySWF;
   mySWF = document.helloSWF;
   if (!mySWF) {
      window.helloSWF;
   }
   mySWF.sayHello();
}

In this example, you’ll notice a variable that get set to document.helloSWF. If you’re using a browser that doesn’t recognize the ‘document‘ syntax, the conditional statement catches it, and uses ‘window‘ to reference the SWF file. Once the variable is set, you can simply call the function you wish to call in your Flash file by using the syntax “jsVariable.flashFunctionName()“. In our example, this is the line “mySWF.sayHello();“.

Step 3: Set functions and ExternalInterface properties in Flash

In your Flash file, you need to import the ExternalInterface Class, and add a callback that listens for the function being called from outside of the Flash file. When adding the callback, you also need to specify the function to run in your Flash file when it gets instructed to do so from the outside world. The code snippet below provides the basic structure of what you’ll need:

import flash.external.*;
ExternalInterface.addCallback('sayHello', helloWorld);
function helloWorld():void {
   // Insert actions
}

In this example, you’ll notice the addCallback accepts two parameters: (1) a String that is the function called from outside of Flash, and (2) a function inside of Flash to run.

If you want to have Flash call out to JavaScript, you can use the ExternalInterface.call method to call a JavaScript function. For example, if you wanted to call a JS function named “hiFromFlash”, the ActionScript code would look something like this:

ExternalInterface.call('hiFromFlash');

If you need to pass parameters, simply add them after the function call, separated by commas.

So there you have it. With these three items, you will be all set to have your Flash file be able to receive instructions from its parent file. Until next time, happy coding!

Download source files »

The Validation Logic

Here’s a quick rundown of what this EmailValidator class validates:

• Must contain three parts: [1] Local part, [2] @ sign, [3] Domain
• Local part must contain at least one of the following valid characters:
  • Upper and lowercase letters (A-Z, a-z)
  • Numeric Digits (0-9)
  • Other characters: ! # $ % & ‘ * + – / = ? ^ _ ` { | } ~
  • Periods (provided it is not the first or last character, and does not appear more than two times consecutively)
• Domain must contain at least one period, as well as at least one character before the period as well as a valid top-level domain (i.e. com, org, ca, uk) after the last period. Valid domain characters include:
  • Upper and lowercase English letters (A-Z, a-z)
  • Numeric Digits (0-9)
  • Hyphens
  • Periods (provided it is not the first or last character, and does not appear more than two times consecutively)

With that list of validation logic written, I must also confess that, technically speaking, quoted strings and spaces (so long as they are within quotes) are valid in the local-part of an email. However, on the Internet Engineering Task Force (IETF) website, RFC 5321 Section 4.1.2 contends that,

“…a host that expects to receive mail SHOULD avoid defining mailboxes where the Local-part requires (or uses) the Quoted-string form…”

Since the practice of using quoted strings is discouraged by RFC 5321, the logic in my EmailValidator class does NOT allow quoted strings, including the double-quote character and spaces.

An Example

I have included a small Flash email validator file below that you can test the validity of an inputted email address.  It utilizes the EmailValidator class that I have written.  Feel free to test out a range of email addresses.  Note that the validator gives useful feedback about invalid addresses, specifying what the first encountered issue is when checking whether or not the address valid.

Known Issues & Exceptions:

1. Many email providers out there will only accept letters, digits and hyphens as valid in the local part of the email. Though this is becoming more common, the EmailValidator class will still allow any of the valid characters listed above, even if it results in an invalid email address for a specific email client (i.e. */+@gmail.com). This is done to follow the direction of RFC 5322, and the list of valid atom characters listed in Section 3.2.3 that can be included in the local part of an email. Until this list is deprecated (if ever), it’s an exception I’m willing to live with.
2. Though the EmailValidator checks for a valid domain (including only alpha characters, numbers and hyphens, as well as valid top-level domain), there’s no way to tell whether the domain actually exists. (For example, me@fake.net will validate, though www.fake.net may not be a valid site/domain.)

Resources:

Internet Engineering Task Force (IETF)
Internet Assigned Numbers Authority (IANA)

Interested in getting this EmailValidator class for your own use? Contact me to request a copy.

/* --- Begin Code --- */
var firstName:String = "Anthony";

function submitForm(e:MouseEvent):void {
   var varsToSend:URLVariables = new URLVariables();
   varsToSend.firstName = firstName;
   // Insert additional values to send

   // Create URL Request, set to POST, and attach data
   var formRequest:URLRequest = new URLRequest("flash.php");
   formRequest.method = URLRequestMethod.POST;
   formRequest.data = varsToSend;

   // Create URL Loader, attach listeners, and load URL Request
   var varLoader:URLLoader = new URLLoader;
   varLoader.addEventListener(Event.COMPLETE, onLoaded);
   varLoader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
   varLoader.load(formRequest);
}

function onLoaded(e:Event):void {
   // Insert success actions here
}

function ioErrorHandler(e:IOErrorEvent):void {
   // Insert error actions here
}
/* --- End Code --- */

A few notes on the code:

• The submitForm function in this example is called on a MouseEvent.CLICK event (noted with the e:MouseEvent passed into the function).

• If you need to send via GET, change the URLRequestMethod to URLRequestMethod.GET.

• One thing I noticed about the URLRequest was that on the particular domain I was working on, using an absolute URL gave me some bugs.  If I used http://www.myfakedomain.com/flash.aspx, my tests failed on PCs but worked on Macs.  If I removed the “www”, resulting in http://myfakedomain.com/flash.aspx, my tests failed on Macs, but worked on PCs. I don’t know if this was an issue with how the domain was set up (since I only worked on the Flash portion, not setting up the domain) or if it is a Flash URLRequest bug.  Either way, I found that using a relative URL (“flash.aspx”) worked on Macs and PCs, and didn’t throw me any errors.

Hope this sheds some insight on how to send data out of Flash.  Happy coding!