Today I find myself implementing one almost from scratch for my very first ever, all-Flash website! (Oh no, run for it.) And with it, scrollbars.

And with that, I’m discovering that scrollbars are surprisingly complex critters, made even more complex by the fact that Adobe hasn’t given us a decent scrollbar/scrolling class to work with. Which means, in the Flash world, if you want any sort of semi-awesome custom scrollbar, you pretty much have to do it from scratch or work off of other people’s preexisting examples (this is where the “almost” comes in for me).

I continue to find this a little silly because scrollbars are such a common thing and they all have the same basic functionality save for some variables that a user would want to customize. It’s, like, a prime ripe opportunity for class-ifying.

(Actually, turns out, Adobe did make this UI component scrollbar class but it only works with the weird xml layouting scheme for Flex that I know nothing about. Yikes. So what they really need to get a move on is a class that can be instantiated in AS…)

For the seasoned Googler, there are a lot of attempts, sprinkled all over the internets, by various coders of authoring a good scrollbar class. However I still find it a pain that we have to Google for it and spend all this time figuring out if any particular code we’ve found is any good before borrowing it and running with it.

To save some time later, here are a couple that I found that look pretty decent:

• http://as3.kylebrekke.com/2008/advanced-customizable-as3-scrollbar-class-for-adobe-flash-cs3/
• http://www.emstris.com/2009/01/final-scrollbar-class-v-20/
• http://www.kirupa.com/forum/showthread.php?t=245468

The last one is the one I ran with because it was the most abstract one I found. I managed to customize it to dynamically resize to the stage height and width to accomodate liquid layouts. That was the major thing that I needed for this layout that I couldn’t find anywhere else. Also, I made the arrow buttons scroll continuously on press, rather than making the user flick repeatedly.

(That’s another thing I think Adobe seriously shouldn’t have forgotten about… why can’t we just have a continuously firing MouseEvent rather than having to tie an ENTER_FRAME to the MOUSE_DOWN?)

So it seems like there are a lot of existing classes out there, and I’m really just a small fry novice, but I wonder if I should try to find the time to write one of my own. It would be good practice, and other than iffy arithmetic (details, details…), I think I could do it pretty easily using my elementary coding skillz.

Mine at least would have the option of dynamically resizing to stage size, which I think would be really useful for some…

Anyway, back to work.

Doing tween animations in Flash using code rather than via the timeline sometimes comes in handy. While it may be harder to visualize, it is a great deal more flexible than timeline animation.

In the project I’m working on now, there is a drop-down menu that requires opening and closing animation upon rollover/rollout. Before, I’d do this with timeline animation combined with the old-school “gotoAndPlay()” to jump to different parts that animate opening and closing. However I’ve found that this makes the animation appear jerky if you hover your mouse over and then really quickly move it away. A better way is using tweens:

import fl.transitions.Tween;
import fl.transitions.easing.*;

var slideMenuOut:Tween = new Tween(galleryMenu, "y", Regular.easeOut, header.galleryMenu.galleryBg.y, 0, 9);

The constructor takes a heck of a lot of arguments that I always have trouble remembering:

• object to tween
• property to tween (don’t forget the quotes)
• the easing method to use (refer to the fl.transitions package for all the possibilities)
• starting value (set this to whatever the current value may be, so there is no jerkiness)
• ending value
• length, in frames (or seconds, if last parameter is true)
• whether the length unit is seconds (optional)

Note to self: when loading a SWF into another Flash movie, the SWF can’t access any properties of the parent stage until Event.ADDED_TO_STAGE has been triggered. It doesn’t automatically recognize when it has been added to a stage. So remember to put the following at the top of the movie being loaded:

MovieClip(root).addEventListener(Event.ADDED_TO_STAGE, initClip);

…where initClip is a function that will be executed once the movie has been added. This can contain any code that makes use of stage properties, including adding event listeners that require access to stage properties.

The MovieClip(root) part of the code means grab the root of the movie being loaded and cast it as a MovieClip. (I think.)

Further note to self: the stage of the loaded movie no longer exists once it’s loaded; it becomes the stage of the container movie.

This post here basically summarizes it.

EDIT: This also applies to custom-written AS classes that require access to stage properties. If an instance of that class doesn’t exist on stage yet, any code in the class that calls on stage properties will be confused and yell at you.

A quick blogpost from work to document something useful to remember…

Flash Player 7+ has a security restriction that requires XML files loaded into a Flash movie to reside on the same domain as the Flash movie. This I already knew, but what I didn’t know was that Flash Player counts “www.domain.com” and “domain.com” as two separate domains.

This wreaked havoc on my brain for about 15 minutes as I couldn’t figure out why my Flash movie would load images on some computers and not others at the office. Turns out some people were in the habit of typing “www” and some (me included) weren’t.

Then I noticed that Safari was looking for some file called “crossdomain.xml” in its Activity window. I googled it and found this article on Adobe that explains it all. Turns out this file was needed when the Flash player wasn’t sure whether an external file was on the same domain or not. Inside you can put instructions to allow Flash Player access to the domains you need, like so:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="www.company.com" />
   <allow-access-from domain="company.com" />
</cross-domain-policy>

Uploading these few lines of XML into the root folder quickly solved everything. Another crisis averted. =)

Something surprisingly easy that I learned just now: to get a special character, like an en dash or an em dash (it is very important), into a string in Actionscript, look it up in the Unicode index on this amazing site, slap a backslash and a lowercase “u” onto the beginning of the Unicode hex value, and stick it into your string.

I know, this doesn’t make for much of an entry but… this was a complete OH DUH, angels descending, rays of enlightenment kind of moment, so I figured it was worth documenting. Also, this is exactly the kind of thing I’m gonna forget in 12 minutes and then bug Yang about. =)