Yes, I've been meaning to put this up for quite some time but my schedule of late has made it tough to get much blog writing done. Before Adobe MAX starts, while people are deciding on their sessions, I wanted to make a quick post with more info about my sessions and other MAX happenings. Here they are in order of occurrence:

Greg Rewis (my co-author) and his fellow CS4 Web Tools evangelists will be doing a full day session on Sunday called, Designing Across Media with Adobe Creative Suite 4. This was an extremely popular session last year. The evangelists show how to use the tools in an integrated manor and really get the most out of then to benefit your web projects. Believe me, after writing a book with one of them, I can testify that they know stuff about these tools we never even thought of. ;) You must sign up for this in advance, so act quickly.

Monday, Greg Rewis and I will be doing a book signing at noon. Yes, the CS4 version of our book won't be out till December, but you can pre-order both the book and the upcoming videos. (I've done one for Pearson/Peachpit about Structure and Presentation -- along with CSS tips and tricks. Greg's upcoming video is about Behavior -- Ajax, Spry, Jquery.) Our current CS3 flavored book will be available in real time -- and we're happy to put our scribbles on it for you (or bring it from home if you already own it). If you're sticking with CS3 for a while, that's your best bet. If you'll be upgrading quickly to CS4 (or already have), come pre-order or just meet us. It's always fun to put faces and names together.

Following the book signing, at 2pm, I'll be presenting Standards-Based Solutions to Common Web Design Challenges in Moscone West 2008. This is an intermediate to advanced session and is best for people who already understand the basics of CSS. I will not be reviewing the box model, floating or positioning. We're going to get right into the down and dirty demos. Since my job entails either coding or teaching other people to code, I'll be sharing every day CSS challenges I'm presented with and techniques I commonly use to deal with them. There are many ways to make your CSS more succinct and powerful. This session is filling up fast, so you'll want to log in to the Scheduler and reserve your place soon.

On Wednesday, also at 2pm, I'll present a session called Common Mistakes Print Designers Make on the Web in Moscone West 2011. Don't let the title of this one fool you -- it's not just for print designers. This session covers the ten most common mistakes I see when people are learning to use CSS and web design. This applies, of course, to print people making the transition -- but many of these issues are universal. I promise I did many of these things myself at the beginning. We'll take a look at the common misconception or problem and then the "best practices" way to do it. This session is appropriate for beginner to intermediate levels.

If you've been to MAX before, you know it's a huge conference. Please don't be shy. Come grab me in the hall and introduce yourself. I'm really tall and hard to miss. ;) Feel free to discuss with me the challenges your business is facing. I'm always happy to help out where I can. I look forward to meeting you there!

So there's been a pretty decent sized debate going on through the webosphere. Designers should know how to code. Developers should know how to design (or shouldn't need to design). I considered weighing in on the 37 Signals blog -- but the comments were already closed. Call me slow (yes, I've been on the road, had a birthday, and had my mom visiting with her birthday. ;). You'd be right. Oh well.

I do have one thing to say. Well, I probably have more than one, but I'll start with that. I recently did a couple sessions at the HOW design conference. One was on "Mistakes Print Designers Make on the Web." Yes, I definitely agree there are common mistakes from the print paradigm. Many times I can tell how people's brains work when they ask for help on lists. I can tell they don't understand the web or come from a print background. However, that does NOT mean I think they are useless. Do I think they should know how the web works? That the web is a fluid, not static medium? Am I willing to help them learn (if they're going to be in my "designer stable")? He77s yea. I am willing. Because I think they are very important to our industry.

Do I think that coders should not use a graphic medium. Lord no. "Designing" (or so they call it) using the constraints of "what's easy to do with code" is really a sad, and less attractive, way to work. I say bring on the tough comps -- we'll work it out, or we'll ask for a small revision. We'll come up with a way to make it work accessibly. A way you might not have thought of before -- but a way that is equally lovely. But lord knows I think you design types are valuable. I quit designing years ago. Why? I'm a tweakaholic. I make more money hiring people that are more creative, better trained and faster. My clients save money with those same people. The designers are freed to be their creative selves -- but yes, it's nice for me if they understand the web. It's nice if I don't have to lead, guide, explain. That said, because I know my craft, I'm willing to help them at the beginning. And no, I don't expect them to know how to code. Just to have an overall understanding that the web is not print. Everything will not have line breaks where they want it to. It won't be glued down. But I, with my experience, will guide them through what can and can't be done. In time, they will be one of my favorite designers. They will understand, but they will send it to me to code. Because that's what I do best.

Do you create the site with HTML? Do you create it without a graphic program? Well, gawd bless you. But I'd venture to say your designs are likely boring. I think 37 signals rawks in usability. I have no bad words to say about them. But what I'm seeing from their recent blog posts in this area is just silly. And no, I've never seen a super creative design come out of that group (at least that I KNEW was from them. I'm certainly not barring it).

Personally, I welcome the challenge of the design minds. I find that if I create the site IN HTML, I do what's easiest to do with HTML/CSS. I don't challenge my abilities. I don't push the envelope.

Yes, the site is about the content -- the message. People are generally looking for information on the web. I teach that all the time all over the world. But there's another side of it. There's the package that same content comes in. Is it readable and usable? Good. That's important. Does it work when the text size is large. Does it work with assistive technology. Excellent. Accessibility is even more important. But goodness knows that a majority of your readers are going to be influenced by what it looks like. Yes, even the colors. Study color psychology. Look at eye patterns. Immerse yourself in usability and interaction. Heck, watch your mom try to navigate things -- I just did. It's eye opening. How it looks is important. Sorry, that's just the facts. Why do you think company's spend so much on their Superbowl commercials?

And let's not leave out how you interact with the database -- how well that content dynamically appears. How much sense it makes. How usable the interface is. There are many things to think about. The root of my story and my point is -- it's the rare individual that has all the strengths needed for one web site. It's the team that matters. Should everyone have a basic understanding of the other member's jobs? How they work? What they can accomplish. Oh yes. Absolutely. Should they be able to do them? That's just ludicrous. Absolutely not. Surround yourself with people more brilliant than yourself. Always learn. Work hard. You, and those around you, will be enormously successful.

Ciao.

TODCon will be here very soon. Yep, I'm counting the days. OK that's not the secret.

It'll be great to hook up with some CMX friends and regular TODCon attendees and speakers. Well, that's no secret either.

I've written the last three CMXtraneous blog posts! That's more of a shock than a surprise, though. 

I'm pretty stoked about the Fireworks public beta. The Fireworks engineering team has done a phenominal job. It's to the point now where I don't like going back to CS3. Yeah, not really a secret there either, the way I've been blabbing all week long about it.

The secret is my second TODCon session. It will be a live demo of the new features in the Fireworks Public beta! We'll look at some of the cool features you've read about in my recent articles as well as Kim Cavanaugh's piece on the Path panel. Based on what you've read and heard this week, I hope you pull up a chair for my session.

Alan Musselman from Adobe will also be presenting a session on Fireworks. He'll no doubt have some very awesome and cool stuff to share as well.

I'm looking forward to seeing everyone. I'll be the guy with the loud shirt and - new this year - a limp (sprained my ankle and pulled a tendon a couple weeks ago YEOUCH). Feel free to have pity on me and buy me a martini or at least help me to the gift shop for a new fashion statement. ;-)

Something that had me quite frustrated for some time was a dynamic textfield in a button interfering with a mouse click. The buttons were added to the application dynamically when needed and the dynamic textfield was populated with the name for the button when added. Yes, I had the textfield's selectable property set to false but it was still a problem if the button's buttonMode and useHandCursor properties were set to true. The text field blocked any kind of mouse event through to the button. The solution was simple but poorly documented. I did not see this property in the help menu so here you go:

textfieldName.mouseEnabled = false;

Set this property before setting the selectable property to false and away you go. I hope this saves you some hair-pulling and you found this easy enough if you've been searching for a solution to this problem.

In Part 1, not quite a week ago, we looked at a relatively simple way to track the progress of an FLV file as played without the FLVPlayback Component in a SWF.  Here in Part 2, we’ll make the knob draggable, causing the video to seek to the point in time that corresponds to the knob on its track.  As it turns out, the ActionScript involved doesn’t change all that much.  It may look like a lot more code, but the mechanics should be easy enough to follow.

An answer, short and sweet

Picking up from last time, we have a Video object on the Stage with the instance name videoPlayer.  We have two movie clips, also on the main timeline, with the instance names knob and track.  Here’s the code, and I’ll step through what changed from last time.

var duration:Number = 0;
var ratio:Number = 0;
var id:Number = 0;

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
videoPlayer.attachVideo(ns);
ns.play("monovideo2.flv");

ns.onMetaData = function(evt:Object):Void {
  duration = evt.duration;
  ratio = track._width / duration;
  id = setInterval(updateKnob, 50);
};

ns.onStatus = function(evt:Object):Void {
  if (this.time > 0 && this.time >= (duration - 0.5)) {
    trace("Video complete");
    clearInterval(id);
    delete this.onStatus;
  }
};

function updateKnob():Void {
  knob._x = track._x + ns.time * ratio;
}

knob.onPress = function():Void {
  clearInterval(id);
  ns.pause(true);
  var vertical:Number = track._y + (track._height / 2);
  this.startDrag(
    true,
    track._x,
    vertical,
    track._x + track._width,
    vertical
  );
}
knob.onRelease = function():Void {
  this.stopDrag();
  ns.seek((this._x - track._x) / ratio);
  ns.pause(false);
  id = setInterval(updateKnob, 50);
}
knob.onReleaseOutside = knob.onRelease;

How it works

From line 1 (var duration:Number = 0;) through the NetStream.onStatus event handler (ns.onStatus …) only one change has occurred.  In the original, the function reference in the setInterval() loop was spelled out in over three lines, right there in the first parameter slot (before the comma and the 50):

…
id = setInterval(
  function ():Void {
    knob._x = track._x + ns.time * ratio;
  }, 50
);
…

In the updated version, the function is now a named function — the custom updateKnob() — that appears immediately below the onStatus handler.  Why move to a named function approach?  The answer is simply ease of use.  In the new version, the concept of positioning the knob repeatedly occurs twice, so rather than type out the same function literal two times, I’ve chosen to give the function its own definition and call that instead.  Using a named function here makes it easier to update this code in the future, because you’ll only have to change the code in one place.  Note that the updateKnob() function is virtually identical to its previous incarnation.

So far, then, the code is the same as last time, speaking from a practical standpoint.  Here’s where the change happens.

The knob movie clip gets three event handlers of its own:  Button.onPress, Button.onRelease, and Button.onReleaseOutside.  This is typical of a drag-and-drop approach in ActionScript 2.0.  Pressing starts a drag, and the other two stop the drag.  In this case, there’s a bit more to it, though.  The first thing the onPress handler does is to stop the setInterval() loop:  the repositioning of knob every 50 milliseconds should come to a halt, so as not interfere with the dragging.  Next, the NetStream.pause() method is invoked on the ns instance, pausing the video.  A temporary variable, vertical, is set to the position of track plus half its height, which essentially means the vertical center of the track movie clip.  Why?  Well, we’re going to use that value twice, so like the declaration of the updateKnob() function, this variable saves us a bit of typing.  Finally, the MovieClip.startDrag() method is invoked on the knob instance — here, the global this property refers to knob — and five optional parameters are passed in.  The first means that dragging will snap knob’s registration point to the mouse.  The rest indicate an arbitrary bounding box in which knob’s dragging should occur.  The left-most boundary should be track’s _x position.  The top-most should be halfway down the track’s vertical area, a value we just stored in the vertical variable.  The right-most should be track’s right edge, described the by expression track._x + track._width, and finally, the bottom-most should be the same as the top-most.

When the user lets go … that’s when the rubber hits the road.  First, dragging is stopped, by virtue of the MovieClip.stopDrag() method.  Next, the NetStream.seek() method is invoked on the ns instance, with the expression (this._x - track._x) / ratio — the reverse of the forumula used to determine where to position knob in the setInterval() loop — fed in as the parameter.  The video is again set in motion (ns.pause(false)), and finally, the setInterval() loop is reconvened.  This is where the custom adjustKnob() function comes in handy.  Note that id, again, is set to the return value of the call to setInterval(), which allows the looping to be stopped again, if need be, either by the end of the video or another drag from the user.

Because the dragging is constrained, it’s possible the user may press over knob, but release outside of it.  To cover that possibility, the Button.onReleaseOutside event is handled identically to onRelease, simply by setting its function to the same one associated with the other.

Keep in mind

FLV files downloaded progressively, as in this example, can’t be sent to video keyframes that haven’t yet loaded.  This means the scrubber doesn’t work fully until all of the FLV has been cached on the user’s hard drive.  The above example won’t break if the user drags to a position that corresponds to a location on the video that hasn’t yet loaded — the knob will simply snap back into being animated again along the track — but be aware of the limitation.  You may want to use a preloading technique to disable knob until loading is complete.

Following on the heels, at least conceptually, of “How to Control Video (FLV) without a Component” here’s a quick look at how to indicate the progression of an FLV by way of a custom made progress bar (thanks for the suggestion, Rick!).  In a follow-up article, I’ll show how to make the progress bar interactive by having the draggable knob seek to keyframes in the FLV.  It turns out that much of the code for this first part derives from “How to Determine the Completion of a Flash Video (FLV) File,” which shows how to determine video length, with and without the use of Components, in ActionScript 2.0.  In this article, we’ll be going the non-Component route, because FLVPlayback already has a progress bar.  Before we delve into the code, we need to prepare two small movie clips.

Creating the progress bar itself

The artwork can get as pretty as you like, but for illustrative purposes, all you need for the progress bar’s track is a rectangle.  Mine happens to be 12 x 180.  Draw the rectangle and convert it to a movie clip, making sure the registration point is in the upper left corner.  Give it the instance name track.  For the knob, draw a smallish circle or almond shape.  My circle is 15 x 15.  Convert it to a movie clip, making sure the registration point is in the center, and give it the instance name knob.  These can be on separate layers or the same, it doesn’t matter; just make sure the knob is above the track and the registration points are set as described.  Position the knob at the left edge of the track.

I’ve you’ve been reading the other video-related articles on this blog, you’ll already be familiar with the non-Component display of FLVs.  If not, you may want to give a quick read through the previous material.  In addition to the two movie clips that comprise the progress bar, you’ll also need a Video object on the Stage.  In this example, we’ll use the instance name videoPlayer.

An answer, short and sweet

Here’s the ActionScript, and we’ll step through it afterward.

var duration:Number = 0;
var ratio:Number = 0;
var id:Number = 0;

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
videoPlayer.attachVideo(ns);
ns.play("externalVideo.flv");

ns.onMetaData = function(evt:Object):Void {
  duration = evt.duration;
  ratio = track._width / duration;
  id = setInterval(
    function ():Void {
      knob._x = track._x + ns.time * ratio;
    }, 50
  );
};

ns.onStatus = function(evt:Object):Void {
  if (this.time > 0 && this.time >= (duration - 0.5)) {
    trace("Video complete");
    clearInterval(id);
    delete this.onStatus;
  }
};

How it works

The first three variables, duration, ratio, and id, prepare the way for three values used later in the code.  The duration value is later determined in a NetStream.onMetaData event handler as described in the article on determining video length.  The ratio value — this is the new part — is also set in the same event handler.  id is used to track a setInterval() timer loop, which is also introduced in the event handler.  The zeroes, for now, simply give these numbers a default value.

The next block (five lines beginning with var nc) prepares the Video object for play and loads an external FLV file.  This block of code was originally explained in “How to Load External Video (FLV).”

Now comes the brains of it.

ns.onMetaData = function(evt:Object):Void {
  duration = evt.duration;
  ratio = track._width / duration;
  id = setInterval(
    function ():Void {
      knob._x = track._x + ns.time * ratio;
    }, 50
  );
};

As recounted elsewhere on this blog, the onMetaData event is dispatched as an FLV file begins to play.  Depending on how a video file is converted to FLV, it may be given a handful of extra descriptive information, including the video’s duration.  In the above code, this information gets a free ride in via the arbitrarily named parameter evt.  This incoming object carries with it a duration property that is:  a) passed to the previously declared duration variable and b) used to determine a ratio between the width of the track movie clip and the length of the video.  Thanks to this ratio, the knob movie clip can be sent to any location between the left and right edges of the track movie clip in correspondence with how much of the video has been played.  Let’s see how that works.

The id variable is simply a value that keeps track of setInterval() loops.  The setInterval() function returns a value, much like the Math.round() method.  With Math.round(), you feed in a number, and the value you get back is the nearest integer.  With setInterval(), you feed in a) a function to perform and b) in interval in which to perform it.  The function gives back a number that says, “Okay, this is the identifier for the particular loop you just started.”  And what function have we fed in?  In this case, we’re setting the MovieClip._x property of the knob instance to the horizontal position of track plus the result of the video’s current location (the NetStream.time property of the ns instance) multiplied by the ratio variable.  This is performed every 50 milliseconds once the video begins.

To save on processor cycles, the looping should stop when the video ends, so the final block of code uses clearInterval(), with id as a parameter, to do just that.  This happens in response to a NetStream.onStatus event that checks if the video’s progression is both past zero and equal to or greater than a half second shy of the duration value.

At the time of this writing, Flash CS3 is still brand spankin’ new on the shelves.  For some lucky folks, whose companies presumably have volume discounts with Adobe, the latest version of Flash is already in their hands — has, in fact, already been installed without any fanfare or training.  Some of these designer/developers are finding, quite suddenly, that button symbols no longer seem to work in Flash CS3 (I’ve seen quite a few panic posts already on the Adobe forums).  What gives?  Is Flash broken?  Not a bit of it!  :)  Let’s see what’s going on.

ActionScript 3.0 is a new language

The truth of the matter is, ActionScript 3.0 is different, in many respects, from AS2 or 1.  (As it happens, it’s also the same in many respects, which can be a source of frustration for experienced users, but chin up!)  One of the most basic, familiar things people do in Flash is to assign some ActionScript to a button.  In former versions of ActionScript, this could be done in a number of ways, as explained a bit in “Museum Pieces:  on() and onClipEvent().”  In AS3, the rules have changed.  There were at least four ways to handle events in the past — on() and onClipEvent(), dot notation, addListener(), and addEventListener() — and AS3 mercifully reduces those four down to one consistent approach.  Honestly, this makes it easier.

Here’s how it goes.  Let’s say you have a button symbol on the Stage.  Select it, give it an instance name in the Property inspector.  Now that it has an instance name, it has become accessible to ActionScript, which now has a unique way of identifying it from any other objects present.  In a keyframe script (select a keyframe in line with the button, preferably a keyframe on its own layer), type the following:

myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    trace("I've been clicked!");
  }
);

And that’s it.  Why not select the button itself?  What’s wrong with good old on()?  For better or worse, direct attachment of code is a thing of the past.  ActionScript 3.0 simply doesn’t support it.  In fact, you’ll notice that the Behaviors panel is dimmed when a FLA’s Publish Settings are configured for AS3.  Why?  Because Behaviors rely on on() or onClipEvent().  Change your Publish Settings to AS2 or 1, they come back.

In the above short sample code, myButton represents whatever instance name you chose for your button symbol.  If you actually used myButton, you’re good; otherwise, change the above code to match what you chose.

The classes that define button and movie clip symbols both inherit much of their functionality from a class called EventDispatcher, which provides that addEventListener() method.  This method is what “wires up” such objects to respond to events, such as a “mouse up” occurrence, where the user has clicked, then released, the mouse.  There are two required parameters (more, if you’re interested — see the EventDispatcher class entry for details), and they are this:  a) what event to listen for, and b) what function to perform when the event occurs.

In this case, we’re listening for MouseEvent.MOUSE_UP.  To see what other events are available, look up the MouseEvent class (or the Event class itself, which has many inheritors of its base functionality).  The function inside any event handler is going to receive an object of its own (here, a MouseEvent object) that gets passed in as a parameter.  In the above sample, that parameter is the arbitrarily named evt (for “event”), and that object contains a number of useful properties, including, for example, target, which refers back to the object that dispatched it.

Change that trace() statement from "I've been clicked!" to this, for example:

trace(evt.target);

… and you’ll see a reference to the button itself.  The SimpleButton class defines button symbols in AS3, so look up that class to see what further properties are available.  You could trace the button’s instance name, for example, by using this expression:

trace(evt.target.name);

… which makes sense if you consider what the expression means.  Again, when the user clicked the button and released, a MouseEvent.MOUSE_UP event was dispatched.  When that occurred, that dispatch included a MouseEvent instance as carry-on luggage.  Because of our event handler, a function received that instance (and its luggage) by way of an evt parameter.  That evt parameter is the incoming MouseEvent instance, and according to the MouseEvent documentation — make sure to click the “Show Inherited Public Properties” hyperlink under the Public Properties heading — MouseEvent instances have a target property, which points to the object that dispatched the event.  Because that object was a button symbol (an instance of the SimpleButton class), we know that any reference to it has a name property.

This differs from the way such event handling was done in AS2.  For button symbols, it went like this:

myButton.onRelease = function():Void {
  trace("I've been clicked!");
}

Notice the lack of an incoming parameter.  To refer to the button itself, from inside that function, you could use the global this property:

myButton.onRelease = function():Void {
  trace(this._name);
}

In ActionScript 2.0, the property that points to a button’s instance name is _name (with an underscore).  Same principle, different approach.

Enjoy ’em both

If the new approach flies over your head, just go to File > Publish Settings, select the Flash tab, and change the version of ActionScript back to AS2 or 1.  But I encourage you to at least take a few stabs at the new way.  As the months go by, you’re going to see plenty of AS3 stuff on the horizon.  Fortunately, Flash CS lets you take your pick of the language desired.

ActionScript 3.0 introduces new data types galore, and two of the funniest looking are easily int and uint.  For one, they belong to an ultra-elite group whose names are fully lowercase (the third is void).  For two … well, I mean … uint.  Come on.  ;)

What are these data types, and what are they good for?  Let’s take a look.

The words and numbers

The words themselves are abbreviations of “integer” and “unsigned integer,” so that’s at least a start.  Contrasted with the familiar Number data type, which can be an integer or fractional number, like 6.26, int can only be an integer.  What about uint, then?  What does the unsigned part mean?  This gets a little interesting, actually.

Technically, the Number data type is an “IEEE-754 double-precision floating-point number” (see the ActionScript 3.0 Language and Components Reference’s Number entry for full detail).

A number typed as Number can take up as much as 53 bits of memory (over 6.5 bytes), ranging all the way from 1.79e+308 down to 5e-324.  To put this in perspective, one million — a number which, in dollar bills, would make any of us happy — is 1e+6.  That means 1.79e+308 is a 1 with 308 digits after it, most of which are zeros.  This is an insanely huge range!  It effortlessly blows away the measly six zeroes of a million.

On the other hand, int is a 32-bit number (only 4 bytes), ranging from 2,147,483,647 down to -2,147,483,648.  That’s a range of over 4 billion positive and negative integers, which seems plenty good to me.  In all my years of working with Flash, I haven’t yet asked it to count to two billion in either direction.  If you’re doing a lot of number crunching in AS3, you can save a bit of memory by using ints instead of Numbers, if integers are all you need.

So … unsigned integers.  The word “sign” in this context refers to the implied “+” in front of positive integers or the “-” in front of negative ones.  Unsigned integers don’t have a sign, and in Flash that means they’re positive — always.  uint numbers range from 0 to 4,294,967,295 — the same range as ints, just shoved completely into the positive half of the number line.  When might you use a uint in Flash?  Well, any time you want to shave bits off your number … but only for integers, and specifically only for positive integers.

A “gotcha”

A friend of mine, Rothrock, recently pointed out an interesting quality of uints that he noted on the Adobe support forums.  Here’s a quick illustration via code:

var n:uint = 0;
trace(n);

What would you expect to see in the Output panel?  Zero?  You betcha.  The variable n, typed as a uint, is set to 0, and 0 it is.  Now let’s subtract 1:

n -= 1;
trace(n);

What will the Output panel show this time?  Negative one?  No way!  uints can’t be negative.  What you get is 4294967295, which means the imaginary pointer has jumped from the left edge of the uint number line to the right edge.

Why is this good to know?  Well, if you happen to be using a uint in a for loop, and you happen to be counting down rather than up …

for (var i:uint = 0; i > -10; i--) {
  // code here
}

… that i > -10 expression will never evaluate to false.  i will always be greater than -10, so this for loop will go on looping forever.

The moral of the story?  Don’t use uints to count backwards — unless you want to be counting for a very long time.  ;)

Not long ago, I answered a forum question at Community MX where the solution arrived entirely because I used the Debugger panel to find what I needed.  The developer’s issue took all of ten seconds to pinpoint, but it solved a real need.  It couldn’t have been easier, either, so I’ll share what I did, hoping it helps someone else just as quickly.

The need was this:  the developer was using the MediaPlayback Component (a precursor to the FLVPlayback Component) and wanted to disable a tiny, built-in triangle button that toggles a zooming/fullscreen-view of the FLV.  The Component Inspector panel shows no parameter to configure this button, and it doesn’t appear anywhere in the Components Language Reference.  What to do?  Debugger panel to the rescue.

After having dragged an instance of MediaPlayback to the Stage and pointing it at an FLV, I used Debug > Debug Movie to run the SWF in the Debugger panel (the menu location in Flash 8 was Control > Debug Movie).  When a SWF opens in cahoots with the Debugger panel, you have to click the big green arrow button to get everything started — don’t worry, you can’t miss it — and then all sorts of behind-the-scenes things come to light.

In this case, I set my gaze on the left side, which showed me the dozen or so nested movie clips that comprise an instance of MediaPlayback.  One, in particular, caught my attention (yup, the highlighted one).  I clicked the triangle arrow and saw that path reference change from what it was to _level0.instance1._chrome._toggleNE._minimize.  Bingo!

I knew from experience that “instance1” is the first in a pattern of automatic instance names Flash will give objects without instance names.  I knew I could change that to any old arbitrary instance name — and that would have been visible in the Debugger panel too, by the way — so I suggested to the developer that he type the following into the Actions panel:

instanceName._chrome._toggleNE._maximize.enabled = false;

… where instanceName should be replaced by the actual instance name of the MediaPlayback Component.  And that did it.  :D  So what’s that enabled part?  That’s a property of the MovieClip class, and it disables event handling for that clip.  In fact, if desired, two lines would both disable and hade the button:

instanceName._chrome._toggleNE._maximize.enabled = false;
instanceName._chrome._toggleNE._maximize._visible = false;

Now … truth be hold, not many folks use the Media Components anymore.  This isn’t a blog entry that will help countless readers with that particular Component, but that isn’t my aim.  My aim is to show that the Debugger panel can be used to discover the inner workings of Macromedia/Adobe objects in addition to troubleshooting your own work.  Hope that comes in handy for you!  :)

One of the more popular entries of this blog describes How to Jump to a Random Frame Label.  The ActionScript 2.0 involved is very straightforward, weighing in at a mere 5 lines.  Its sole purpose is to choose a random label once at the beginning, then go to it (then stop).  In the Comments section, a visitor named Heather asked for a variation in which the movie starts at a random label, then proceeds to the remaining labels in order, looping around to the beginning, if necessary, to hit each label once.  I offered some suggested code, and eventually a number of other visitors asked for yet another variation:  how to jump randomly to a whole series of labels — without repeats.  That takes a bit more code, but it’s certainly doable.  Let’s take a look.

An answer, short and sweet

This bulk of this code goes in frame 1, then one of its functions gets called at the end of each span of frames represented by a label.  Here’s the code for frame 1:

function shuffle(arr:Array):Void {
  var len:Number = arr.length - 1;
  for (var i:Number = len; i >= 0; i--) {
    var p:Number = Math.floor(Math.random() * (i + 1));
    var t:Object = arr[i];
    arr[i] = arr[p];
    arr[p] = t;
  }
}

var labels:Array = ["a", "b", "c", "d", "e"];
shuffle(labels);

var currentLabel:Number = 0;
function gotoNextLabel():Void {
  if (currentLabel < labels.length) {
    gotoAndPlay(labels[currentLabel]);
    currentLabel++;
  } else {
    stop();
  }
}
gotoNextLabel();

Gulp!  That’s a lot of code, huh?  We’ll step through it in the “How it works” section, but for the time being, just know that the labels array holds your frame labels (here, “a”, “b”, “c”, and so on — but you’ll use meaningful labels) and that you’ll obviously need corresponding frame labels in the timeline that holds this ActionScript.  If your equivalent of label “a” spans from frames 2 through 100, you’ll put a new keyframe in your scripts layer at frame 100 with the following small function call in it:

gotoNextLabel();

If your equivalent of label “b” follows, spanning from 101 to 150, you’ll put a new keyframe in your scripts layer at frame 150 and call that gotoNextLabel() function again.  Do this at the end of each span.  The end result is that the playhead will visit each and every span at random without repeats.

How it works

The ActionScript above is visually organized into three sections, just for clarity.  The first section (the custom shuffle() function) isn’t my own code, but a time-tested algorithm made popular on the Adobe forums by long-time contributor kglad.  There are a number of variations on it, and a complete discussion would probably make a good blog entry of its own, but for the time being, let the shuffle() function be a magic stone in your pocket:  it shuffles whatever array is passed to it, and it works.

The second section is comprised of two lines:

var labels:Array = ["a", "b", "c", "d", "e"];
 shuffle(labels);

In this variation on the “jump to a random frame” theme, the labels array is declared outside of any function, which makes it available to all code in this timeline.  It’s pretty clear to see what these two lines do.  The first declares an Array instance named labels and sets it to a series of arbitrary frame labels.  The second shuffles that array.  After shuffle() is called, the array might look like any one of the following sample shufflings …

b,e,a,d,c
a,e,b,c,d
b,c,e,d,a
d,c,a,e,b
e,a,c,d,b

… which is great, because that means the final section of code is pretty easy.  First, an arbitrarily named variable, currentLabel, is declared and set to zero.

var currentLabel:Number = 0;

Why zero?  Because arrays start their counting at zero rather than one.  We’re going to be starting at the first element in the array, sending the playhead to that frame label, then stepping through the remaining array elements in turn.  This is accomplished by a custom gotoNextLabel() function.

function gotoNextLabel():Void {
  if (currentLabel < labels.length) {

So far, the currentLabel variable (currently 0) is checked against the Array.length property of the labels instance.  Have we reached the end of the array?  Not yet, so the following occurs:

    gotoAndPlay(labels[currentLabel]);
    currentLabel++;

The playhead is sent to the frame label represented by labels[0] (the first element), and currentLabel is incremented by one (the ++ operator).  This will happen every time the gotoNextLabel() function is called, and eventually, the value of currentLabel will no longer be smaller than the value of labels.length.  When that happens …

  } else {
    stop();
  }
}

The playhead stops.  All spans of the timeline will have been visited, and the movie will rest comfortable in the final frame of its final randomly chosen span.  To start the whole thing off, this last line of code calls the very function just described:

gotoNextLabel();

Have fun with it!

We've finally got the TODCon Vegas 2007 schedule and speaker list up. Check it out. Lots of excellent sessions about the new Adobe products, running your web business, usability, CSS and more. There's still time to register for the best little conference in Vegas! Come play on the strip with the rest of us geeks. You know you wanna... :)

This one came to me in a flash (ha ha … Flash!), thanks to a friendly discussion I had the other day with site visitor Michael Lokner.  He was wondering if it was possible to pan the audio portion of an FLV file in cases where the video is played in an instance of the FLVPlayback Component.  In another recent article, I explained how to use the MovieClip.attachAudio() method to control NetStream-based video, but that’s a different ball of wax.  The FLVPlayback Component has its own volume property, and even skins that feature a volume slider, but what about panning?  After bouncing ideas back and forth, Michael and I arrived at a simple answer.

An answer, short and sweet

On his own, Michael had arrived at a respectable workaround, which was to create a Sound instance associated with the main timeline (accomplished by omitting any movie clip reference when constructing the instance).  By setting up the Sound instance to control the whole movie, any panning would naturally affect the video’s audio track.  The only shortcoming is that the panning would also affect all other audio in the movie.  How to associate this panning with the FLVPlayback instance only?

The answer turned out to be effortless.  As it turns out, all ActionScript 2.0 Components, if they have a UI, are ultimately instances of the MovieClip class.  Look up any one of them in the Components Language Reference and you’ll see that it extends MovieClip.  What this means, of course, is that you can use the FLVPlayback Component itself as the parameter when creating a Sound instance.  Assuming an FLVPlayback instance name of videoPlayer:

var videoSound:Sound = new Sound(videoPlayer);
videoSound.setPan(-100) // hard left
videoSound.setPan(100) // hard right

How it works

Even though Components are very sophisticated objects, with lengthy inheritance chains, in the end, they are what they are:  movie clips.  Sound objects associated with a movie clip control that movie clip’s audio.

There's been a wide range of reaction to Adobe's new CS3 icons. Admittedly, when I first saw the single Dreamweaver icon, I was taken aback -- "Is this thing finished?" But after seeing the whole suite, especially on the color wheel, I thought they were nicely done and easy to differentiate as I got a few in my dock. There were many who thought differently though. It was a love it or hate it kind of thing.

For those of you in the hate camp, there's an option. Adam Betts, a very talented designer, has created his own set of CS3 icons -- and released them, free, to the public. He based them on the box design and they look quite lovely. He's even made a new set of document icons if the plain ones don't quite do it for you.

What they'll look like at the smaller sizes, I can't say. There are no instructions included for where to install them, and at this point I haven't a clue. (Feel free to point me in the right direction if you know. :))

There are a few other sets I've run into if Adam's aren't your favorite. Mac Themes is similar to Adam's, Louie Mantia has a set that blend the old icons with the new box look, and if you like the new ones from Adobe but would rather have them a little sexier, koregraphik.com made a set with nicer gradients and rounded corners. Check them all out.

Happy iconing!

If you’re not using the FLVPlayback Component, or one of the older Media Components, then the audio portion of video files may have you scratching your head.  The Components have their own volume sliders, which makes volume control a snap, but what about panning (left to right fading), or what if you’re not using Components for video?  In ActionScript 2.0, video sound is a bit … well, it’s a bit odd, but one you understand it, audio control isn’t hard.

An answer, short and sweet

In Understanding the Sound Constructor, I went into the usefulness of associating Sound instances with movie clips.  To control the audio portion of FLVs, it’s just a bit more of the same.  First, we’ll start with the basic “recipe” for bringing video into a Video object:

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
videoPlayer.attachVideo(ns);
ns.play("myExternalVideo.flv");

This is the block of code used in How to Load External Video (FLV) and brings the specified FLV file into a Video object with the instance name videoPlayer.  Invoking NetStream methods on the ns instance (such as NetStream.pause()) controls the visual portion, but what’s missing is sound.  Here’s how to do it.  After the opening block of code, type the following:

this.createEmptyMovieClip("videoAudioContainer", this.getNextHighestDepth());
videoAudioContainer.attachAudio(ns);

var videoVolume:Sound = new Sound(videoAudioContainer);
videoVolume.setVolume(50);

How it works

Four lines; two things going on.

First, the MovieClip.createEmptyMovieClip() method is invoked on the global this property, which refers to the main timeline if you’re typing this code into a main timeline keyframe.  This dynamically creates a new MovieClip instance at the next highest available depth, with the instance name videoAudioContainer.  The instance name doesn’t especially matter; just keep in mind, this is a movie clip “container” made just for your video’s audio portion.  If you wanted to, you could skip this step and put your own empty movie clip on the Stage.  Just make sure it has an instance name.  On this new instance, the MovieClip.attachAudio() method associates the NetStream instance ns with this movie clip.

Second, a new Sound instance, videoVolume, is instantiated and associated — this is the important part! — is associated with the videoAudioContainer clip that is associated with the NetStream instance.  All in the house that Jack built.  From there, the Sound instance affects the movie clip which, in turn, affects the audio portion of the video.  Set the volume, as shown, or pan.

Many people use Flash to play background music on their site.  It’s a good use for Flash, especially if the audio is loaded from external MP3s, which keeps the SWF file size low, and if you give your visitors a way to toggle off the sound.  But one song may not be enough.  You may want to play a list of files one after the other.  If so, the next question is, “How easy is that?”  The answer is, “Very.”  Let’s take a look.

An answer, short and sweet

The “trick” here — and it’s really no trick at all — is to use an Array instance to store your list of audio files, a variable to keep track of which song is current, and the Sound.onSoundComplete event to trigger each new sound.  Type the following ActionScript into a keyframe:

var listOfFiles:Array = new Array("frog.mp3", "loon.mp3", "horse.mp3");
var currentFile:Number = 0;

var audio:Sound = new Sound();
audio.loadSound(listOfFiles[currentFile], true);

audio.onSoundComplete = function():Void {
  currentFile++;
  if (currentFile < listOfFiles.length) {
    audio.loadSound(listOfFiles[currentFile], true);
  }
}

How it works

The first variable, listOfFiles, points to a new Array instance that holds three elements, which are the names of three MP3 files.  We could have populated this array in a series of lines, like this …

var listOfFiles:Array = new Array();
listOfFiles.push("frog.mp3");
listOfFiles.push("loon.mp3");
listOfFiles.push("horse.mp3");

… but in short sequences, the single-line approach takes less effort to type.

The second variable, currentFile, is set to zero and represents the first sound to play (arrays start counting at zero, rather than one).  Finally, a third variable, audio, is declared and set to an instance of the Sound class.

To get things started, the Sound.loadSound() method is immediately invoked on the audio instance, and two parameters are provided.  The first parameter is the expression listOfFiles[currentFile], which in this case resolves to the string "frog.mp3" (remember currentFile is zero, which retrieves the first element of the listOfFiles array).  The second parameter tells Flash to play the file by progressive download, which means the audio will start before the MP3 has fully loaded.

On its own, the code so far would play the first song and then stop when the audio was complete.  The last little bit achieves the original goal, which is to play files sequentially.  When the first song (or narration, or whatever you’re presenting) is complete, the Sound.complete event is dispatched.  Here, we’re writing a function to be performed in response to that event.  The first thing that happens is that the currentFile variable is incremented by one, thanks to the ++ operator.  So now its value is one.  Next, an if statement checks of currentFile’s value is less than the total number of elements inside the listOfFiles array, thanks to the Array.length property for that instance.  There are three elements in the array, and one is less than three, so the final line is executed.

Notice that the last line of code duplicates exactly what we’ve already discussed.  The difference is that, this time, the value if currentFile is different.  When this second song ends, the complete event will fire again, which means this function will again be triggered.  currentFile will increment to two, two is less than three, and the third MP3 will play (element 2 is in the third slot, because arrays start at zero).  When the third songs ends, currentFile increments to four, and because four is no longer less than three, the cycle ends.

Variation

Want to repeat the list of files when all three (or four, or however many) songs have completed?  Update that last block of code like this:

audio.onSoundComplete = function():Void {
  currentFile++;
  if (currentFile == listOfFiles.length) {
    currentFile = 0;
  }
  audio.loadSound(listOfFiles[currentFile], true);
}

I was helping a friend the other day with a rounding issue.  He needed to round numbers not to the nearest integer, but to the nearest hundred.  So 52.3 would round to 100.  86 would round to 100 as well.  13 would round to 0 and 101.287 would round to 100.  You get the idea.  The Math.round() method doesn’t take any parameters except the to-be-rounded value itself, so how could this be accomplished?  The answer couldn’t be simpler.

An answer, short and sweet

Basic arithmetic does it.  Let’s say the original number is 52.3.  To round to the nearest hundred, follow these steps:

• Divide by 100
• Round
• Multiply by 100

var num:Number = 52.3;
num /= 100;
num = Math.round(num);
num *= 100;
trace(num);

How it works

num = num / 100;

… but the division assignment (/=) operator reduces the required typing.  They amount to the same thing (and the same goes for the multiplication assignement (*=), as well as addition and subtraction assignment operators (+= and -=).

The division/multiplication steps move the decimal place where it needs to go.  The rounding functions as it always does.

Variation

If you need to round to the nearest hundredth — 189.5287 becomes 189.53 — just reverse the division and multiplication steps:

var num:Number = 52.3;
num *= 100;
num = Math.round(num);
num /= 100;
trace(num);

Fours years ago, on March 31st, 2003, Community MX went live with their very first tutorials. It was a crazy time, exciting and scary at the same time. Was the web ready for this type of business model? Would they accept it? Lord knows there were plenty of "naysayers" out there who were very vocal with their opinions. But we didn't listen to them...we believed in what we were doing, we truly believed that there was a market for what we were doing. And it sure looks like we were right.

2000 + articles later, we are still going strong. Each and every business day we have released two new pieces of content...it might be a tutorial, an article, a review, a JumpStart or an extension...you never know what you'll find. We've heard from several folks that it's like Christmas morning every day. And other than weekends and major holidays, we've never missed a single day. That's a lot of Christmas mornings! :-)

I am so proud to have been a part of this endeavor from the very beginning. Honored to be associated with such an amazing group of people. Experts in their fields, with so much knowledge I am in awe at times. While we have had some partners go, and new ones come, the majority of the "founding" partners are still very much a part of CMX today. Ray West, Tom Muck, Bill Horvath, Kim Cavanaugh, JoJo (Adrian) Senior, Jim Babbage, Stephanie Sullivan, Danilo Celic and myself have been here since day one. In the last four years we have welcomed many new partners on board, all of whom have helped shaped CMX into what it is today. Heidi Bautista, Arman Danesh, John Gallant, Holly Bergevin, Joseph Balderson, David Stiller, Robert Reinhardt, Chaz Chumley, Paul Davis, Kim Dudley, Chris Flick, Tom Green, Sheri German, Zoe Gillenwater, Knut Kubenz, Gordon Mackay, Steve Schelter, Rob Williams, Derrick Ypenberg and our newest partner Bevi Chagnon. Each and every one of them has so much to offer it's mind boggling at times :-). Such an amazing group.

But, all the talent in the world isn't enough...without our loyal subscribers, we wouldn't be here, it's that simple. I'd like to offer a heartfelt thank you to each and every one of them. They are the "community" in Community MX, they make it what it is today, a resource like no other.

So, here's to the last 4 years...and to the next 40!! Happy Birthday Community MX! I can't imagine being anywhere else. :-)

Representatives from Adobe announced today the launch of Adobe CS3. I know we've been hearing little bits about this for a while, but people, this is huge.

This live webcast gave the global audience an chance to see what Adobe has been working on for the past two years, "the largest software release in Adobe's history."

How large? 13 point products upgrades were announced today, including NEW products. A pretty ambitious effort indeed.

Adobe has created variety of collections geared to different types of users and price points:

• Design Suite Standard
• Design Suite Premium
• Web Suite Standard
• Web Suite Premium
• Production Premium
• Master Collection

The common theme throughout the CS3 suites is one of integration - better integration between Fireworks, Photoshop and Illustrator, better integration between Dreamweaver, Photoshop and Illustrator, between Flash, Photoshop and Illustrator and between Photoshop, Indesign and Illustrator.

Lording over it all is Adobe Bridge, which is now connected to many of the major Adobe apps, including Fireworks, Flash, Dreamweaver, Illustrator, InDesign and Photoshop. 

For more information on the new suites, keep checking back here at Community MX where we will be giving you sneak peeks into some of our favorite features over the coming days.

You can also - of course - visit Adobe's web site for more details on the new software, pricing and packages as well as tutorials.

I was just gabbing with someone about the NetStream class, which nudged my mind toward the VideoPlayer class.  According to the Components Language Reference, the FLVPlayback class “extends the MovieClip class and wraps a VideoPlayer object.”  As it turns out, the VideoPlayer class is mentioned in the Components Langauge Reference, but if you dig into it, you’ll quickly discover that none of the class members are hyperlinked.  In other words, you’ll get an overview of the properties, methods, and events defined by that class, but no actual explanation.

I find that an odd omission — but Adobe does make the full API available.

The URL is listed in the VideoPlayer class entry itself, but the page it brings up hides the PDF a bit.  (To be fair, it may have been a direct link sometime in the past.)  If you’re interested, point your browser to this whopping 112-page PDF file.

http://download.macromedia.com/pub/documentation/en/flash/fl8/VideoPlayer.pdf

It truly is the “missing manual” for this extensive API.

Depending on my mood, I may precede certain variable names with a small prefix that describes the type of object they point to.  For example, I may give a movie clip the instance name mcBall, rather than just ball.  Why?  Well, it allows me to see at a glance that I’m dealing with a MovieClip instance, which can come in handy during coding and also while I’m poking through the Debugger panel.  It doesn’t have any measurable effect on the functionality of the variable … it’s just one of those things you get used to.  I certainly don’t always adhere to this convention, but when I do, I’m practicing something called Hungarian notation, which has a decent pedigree (at least, in computer years).

Flash provides at least one naming convention that actually can make a practical difference, if you follow the suggested suffixes in the “About using suffixes to trigger code hints” section of Learning ActionScript 2.0 in Flash.  I’m not especially a fan stylistically, but, for example, if I name that ball clip ball_mc, I’ll get automatic code hinting for the MovieClip class (and so will you) in ActionScript 1.0 and 2.0.  A full list of suffixes is listed in that section.  Code hinting is definitely a useful tool, because I’m not always familiar with the class members of the object at hand.

What if you don’t like suffixes?  Or prefixes, for that matter?  Well, if you use AS2’s strong typing syntax (the :Number in something like var total:Number = 5;), it doesn’t matter what you name your variable:  you’ll get code hinting if you want it (see File > Preferences > ActionScript).  That’s fine for everything but movie clip instance names, which aren’t necessarily declared as variables.  But … see, if you declare instance names anyway — even though you don’t need to — you get the benefit of code hinting regardless of the instance name.

With a simple line like this …

var ball:MovieClip;

… even though you haven’t set that instance to anything, you’ll get MovieClip-centric code hints for subsequent references to that instance name in your code.