CMXtraneous

Right on the edge of useful

Meet Me in the Wild--Upcoming Conferences

Posted Wednesday, July 25, 2007 9:28:30 PM by Stephanie

Stephanie

Come out and meet me! There are some upcoming events in September and October where I'll be speaking and I'd love for you to come say hi.

On September 21 and 22, I'll be at Web Master Jam Session in Dallas, TX. I'm speaking on semantic HTML and CSS--the building blocks of a site. Jonathon Snook will follow my session with a "creative positioning" session. There are some great sessions including the keynote by Jared Spool. Check it out!

On September 30 - October 3, I'll be at Adobe MAX in Chicago doing a hands-on session on the new CSS layouts I created for Dreamweaver CS3. There's at least a session a day, so you should be able to get in before they fill up. Also, October 15-18, I'll be doing the same session at Adobe MAX in Barcelona, Spain.

October 22-25 takes me to San Fransico, California. There I'll be speaking at Pearson's first Voices that Matter conference on Mastering Perfect CSS Layouts. When registering, if you enter Priority code: WD-SULL -- you'll receive $100.00 off your registration fee.

So find an event near you and let's meet face to face!

Category tags: Adobe, CSS, Dreamweaver

Where is Keystone?

Posted Wednesday, July 25, 2007 4:15:42 PM by Paul Davis

This past Sunday, I peered into a world of the unknown, often unseen and clearly alien!

Where was I?

I was speaking at a conference for small boutique owners learning about web design and development.

It all started out when I exited my plane in Raleigh, North Carolina and made it to ground transportation for the shuttle to my hotel. Sparing no expense, we were staying at the Day's Inn at RDU. I saw the shuttle coming in fast heading for a lady with her bags a few dozen yards ahead of me. Not wanting to miss the shuttle, I quickly hurried to catch the shuttle before it whisked away with the lady and her bags. However, half way through hustling, I realized this was no ordinary lady. She was brightly colored, well matched and properly accessorized (watching What-Not-To-Wear has paid off!) with at least four bags, one of which was about half her size – I could go to a fast walk and she would still be getting situated. By the time I'd gotten to the shuttle, she had just finished chatting with the driver, who only managed to get one piece of luggage loaded. I plopped my bag down and climbed in. Suspecting she was here for the conference, she chatted for 10 minutes during the trip (this was her introduction – she is Penny) after which I asked “So, are you here for TJ's conference?” To which she was surprised that I guessed she was! Several minutes later, we were at Day's Inn. As I entered the lobby, I noticed a group of ladies, all brightly adorned and chatting away. There was TJ, sitting among them and she welcomed me to the fold. We were too early to check in, so we stayed in the lobby while the ladies chatted away. This was my first experience being in the midst of such lively chatters. One of the ladies commented to another that she does “Keystone”, I wondered – where is Keystone?

I hadn't eaten lunch yet and right next to the Days Inn was a Waffle House (hey, we were in the upscale part of town...) and Penny, myself and Buck went to the Waffle House for lunch. Buck was from New York and was there for his retail organization. Apparently, in NYC, soup spoons are critical to eating soup or chili, the Waffle House didn't have a soup spoon and much to the chagrin of Buck, he had to eat the chili with his regular teaspoon. Penny and Buck spoke a language I'd never heard before – talked about going Tribal and something about getting Spanx. Now, I'd thought perhaps I didn't understand these boutique shops or what went on in them – but again they talked about Keystone – and I wondered, do they get tribal in Keystone and spank? The waffles were pretty good and the Buck picked up the tab, making the lunch even better!

That evening, the planned event was a social BBQ for the boutique owners and a tour of the local boutique. We rode in cars on the way over, I called shotgun citing I was as large as the rest of the riders put together and needed the space. After the 20 minute trip, I can now honestly say I know how those who aren't ubergeeks feel around us ubergeeks (not YOU, US, as in the CMX people, you're just a normal geek) when we talk shop. The conversation went from having Tribal, again with the Spanx – on to kids, family, location and the vendors and then back to Keystone again. I wondered what was Keystone all about. One woman even said she does Keystone 2! I've not even found Keystone 1 yet or know what it is and she is talking about Keystone 2 – then, much to my surprise, Tee, the driver (whom spent more time talking to the back seat than looking forward) said she's even gotten up to Keystone 3. My mind was spinning.

We arrived a little later than the rest of the attendees, 27 ladies and 3 guys. I realized, rather quickly, I stuck out like a sore thumb – not only in gender, but in attire. I'm monochromatic gray (#666666 colored shorts and #CCCCCC shirt) – the ladies are all dressed in the fashion style they sell, all sorts of colors, patterns, design, accessories, jewelry, shoes and fully made over faces. TJ calls the group to order and the chatting stops. She introduces Terre and Buck and calls on one of the ladies for an invocation for the food. I spent the rest of the evening eavesdropping on conversations trying to learn what Keystone was all about.

On the drive back, the conversation takes off again. I'm navigating because we don't have instructions on how to return to the hotel. I'm guessing on which roads and exits to take while they continue the shop talk. This time, the chat was about the product types. They were talking about camisoles and how they worked in the stores. I learned that they are used for layering and how cheap they cost the stores. One even commented that, with camisoles, Keystone isn't even in the picture. Maybe Keystone is an a cold climate... During the trip, the Tee is talking to the back seat again, paused for a second and thoughtfully mentioned to me she can't really see that well without her glasses, which she left in the hotel. Now my attention was very focused on the other cars, exits and such ahead of us as we barreled down the road at 70 miles per hour. The reason I bring this up? During this chat, they start talking about shelf bras in the camisoles. Tee mentions she doesn't like them and proceeds demonstrates the problem with the one she is currently wearing. Pulling open her top a little to pull up the shelf bra, she laughs and apologizes for digging around “in there” and such. I can't really say if she did bear anything, I was too focused on the traffic and the turn off, plus I was still thinking about Keystone.

Back at the hotel, I modify my session for the next day, join a conference call with business partners and talk geek. I once again feel like a guy! I turn in for the evening ready for my presentation the next day.

We head out to New Horizons for the conference. I show up early and setup the computer for my needs (Firefox, bookmarks, FTP program). I give the session. A few of them have chats with each other while I'm giving my speech. We take a break and I get good feedback – but I ask about the chatting. TJ says that is just how these women are, they don't ever stop. I decide to not let it bother me and continue on. We cover the basics of the web and I pull up those stores which have sites and give a light critical review. By the end, I'm thinking I have bombed. Then the questions flood in, it appears they can both talk and listen at the same time as they ask some really good questions. My session is over, I'm thankful, and we go to lunch.

At lunch, I sat with the international group (ok, two ladies from Canada...) and we discussed the session and some questions they have. Everyone says they liked it, I'm paid and I'm off to the airport.

But, before I leave, I do ask one of the ladies what is Keystone. She laughs, the same laugh we give when someone asks us what is HTML, knowing I've asked an apparent basic question, she explains it to me. Keystone is next to tombstone – if you're not marking up your product by Keystone, you will never succeed and your store will die and go to tombstone. Ah, so it all makes sense now. Further looking to understand, I ask about “going Tribal” and “Spanx” and I'm given the full product line names. I'm also told to never cross Brighton. They sue, apparently.

Content with my gained knowledge, I'm off to Delta (which means Doesn't Ever Leave The Airport) to fly through Atlanta to get back home. I hate Atlanta, every time I fly through Atlanta, I'm delayed and my 90 minute layover turns into a 30 minute layover. I go from being at gate B34 to gate B36 for my connecting flight to gate T01 to E45 (those people who travel Atlanta are groaning now, trust me) – this time, however, everything goes as scheduled for me. A connecting flight to Atlanta is canceled and I'm flying back home with no one sitting next to me – better than I expected!

Category tags: On the Personal Side, This and That, Web Business

Interview: Geoffrey Smidgen of MoLekULr, the Latest Web 2.0 Startup

Posted Tuesday, July 17, 2007 5:37:16 PM by Kim

Kim

Reprinted from my Brain Frieze blog, just because I thought it was that good.

(Caution. Satire ahead. The products and people in this "interview" are purely drawn from the author's imagination and any resemblance to real Web 2.0 companies is merely accidentally intentional.)

*******************

I recently had the opportunity to sit down with Geoffrey Smidgen, CEO of Virtual Absurdities LLC, a company that has just received its first round of venture capital funding for its Web 2.0 startup know as MoLekULr. The service has just completed its initial round of beta testing and will be launching a wide-scale public beta in the near future. Geoffrey and his engineers have devised an entirely unique approach to the concept of social networking that he discusses in this interview

Brainfrieze: Geoffrey, welcome. This is a pretty exciting time for your company isn't it?

Geoffrey Smidgen: Boy it sure is. Lots of late nights and.......................time spent at the computer. But things have really................................come together and I believe we've really nailed the entire................................essence of Web 2.0 with our product.

BF: Right. Tell us a little about the concept behind MoLekULR and what you hope to accomplish with your service.

GS: Well, it's a pretty radical idea, but let's start with the entire definition of.........................what Web 2.0 is really all about. You see, what we've learned over the last 10 or 20 years of social networking, going all the way back to the early..................................message boards and newsgroups is that people really love staying connected to a circle of people electronically. They find others with like interests.................................and then they use their computers to communicate with each other. Some even get a little addicted.......................to staying connected.

BF: Boy, I know what you mean. I've had some serious issues with newsgroup addiction myself. You know you're in too deep when you catch yourself logging in to your favorite group when you're on vacation, just to see what's going on and who's saying what.

GS: Right, and all Web 2.0 does is take that urge..............................that we all feel and makes it even easier to consume and produce and stay in touch. So now you can spend time doing things like................................uploading photos to Flickr, making your own videos for YouTube, share a calendar on Google, and on and on. People.................................love this stuff.

BF: So tell us about MoLekULr. What does it do that's different?

GS: Well, we took that basic concept, and then we saw the explosion....................of even more immediate social tools like Twitter, and we thought, what if we could take that fundamental.......................idea of staying connected all the time to its logical conclusion? What if we could reduce the idea of social networking........................to its most basic components and then connect people in that manner? At a molecular level..............................? Hence the name.

BF: So how does this work?

GS: The first thing we need is information about you. During the registration process we provide a tool..................that will scan your computer, record the IP address, and follow your online activities. This real-time feedback allows us to build a network for you on the fly, so that we know who in our network is pursuing similar activities. But that's just.........................the first layer. We also track all of the applications..........................that you run on your computer. So for instance, we know if you're making lots of videos or listening to lots of music. We want to gain a deep understanding of everything you do on your computer.

BF: Interesting, if you can get people to surrender their privacy that way.

GS: We can reliably prove that you have no................................privacy anyway, so you might as well use it to your advantage. Right?

BF. I suppose so. Then what happens?

GS: Then a few days later a sample kit.................will arrive from our company. Our users will take a small blood...........................sample and return it to us. From that we'll gather even more information about you. Your eating habits, sex and weight, age.......you'd be amazed at what our algorithms can do.............................with that information.

BF: Wow. This is really in-depth. And then I understand that users get some kind of biometric device?

GS: Right. Our MoLekULr Feedback Device is attached to your computer's USB port and from that we can feed....................................you a steady stream of information from your social network. You'll know all sorts of things about the people that you're matched with......................where they are, what they're doing, if they're happy or mad or sad..................all through a series of micro-bursts delivered by our device. When one of those bursts warrants further attention.......................on your part you can immediately bounce over to the full web-enabled version of MoLekULr and send a note to your friend, post to your blog, respond to someone via a comment, upload a video, or crank out a podcast. When you do any of those things...................everyone on your network is immediately notified through a MoLekULr Microburst. Then they can respond......................if they choose to do so. It's a completely closed loop.

BF: Whoa. Well, it seems that someone might be a little distracted in that kind of environment where they're always connected and always consuming information. Do you.....sorry. Geoffrey?

GS: No worries. I was posting something..............what were we saying?

BF: I was saying that it might be hard to concentrate when you're connected all the time.

GS: We actually.........................don't find that to be the case. Sure, there are brief moments when the device is sending you................................................information, but it doesn't get in the way of other..............things you're doing.

BF: I've been noticing a lot of pauses in our conversation. Are you getting microbursts during those times?

GS: Sorry. What were you.........................saying?

BF: The pauses Geoff. You sort of drop away right in the middle of a sentence.

GS: Oh, well, yes, it does take a second to consume the information about everyone in my network................................and then decide how I want to respond. Sorry, pardon me, there's a bit of a dustup in my Second Life chat room. Be right back.

BF: Do you worry that this sort of communication might make people a little too superficial? They won't ever have time to focus on anything but the immediate. How do you promote social networking tools as a way to.....Geoff, are you there?

GS: Wait please........................................wait............

wait...............

wait.............

Uh oh. Sorry, I really have to run now. I've got some serious issues to deal with and only 14 seconds to do so. I better..........................run. It was great talking to you Susan.

BF: Um, I'm not Susan. Geoff? Are you there?

Category tags: Open Source

How to Build a Flash Video (FLV) Progress Bar (Part 2)

Posted Tuesday, July 10, 2007 9:20:35 AM by David Stiller

David Stiller

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.

Category tags: Flash

New Guillotine case in Internet Explorer (IE7)... Or not!

Posted Friday, July 06, 2007 8:03:38 PM by Stephanie

Stephanie

Yes, it's a fact that Internet Explorer 7 is better than Internet Explorer 6. But not all squashed bugs were completely killed. Like the little gopher game you play at the fair, sometimes when you bang one on the head and it goes underground, it simply pops back out in a different place. Enter the Guillotine Bug.

Yes, we all hoped it was dead and gone. But by finally supporting some of the previously unsupported properties, new cases have evolved. I had one on my own, freshly launched site recently. Today, I took the time to figure out what was going on. Since it was a bit odd, I thought I'd share it here in hopes of helping someone else since I found nothing in Google exactly the same.

guillotine CSS demoSince IE7 now supports the :hover pseudo class on non-anchor elements, I decided it would be nice if the whole list item in my sidebar changed background color on hover. I placed a different background color and a completely different border effect on the li:hover selector. Within this list element was a left-floated icon and static h3 and h4 elements (which are links). It worked perfectly in IE6 and earlier, Firefox, Safari, etc. But IE7 decided to hack a hairball. When you hovered over either the h3 or h4 link, the bottom half of the floated icon disappeared. If you have IE7, I put an unfixed demo page (from my site's contact page since it has two sidebar items with links and one without) up to test with. If you don't have IE7, there's an image for you to view to the right of this paragraph. Problem is, though it looked just like the guillotine bug in IE6, the usual necessary elements weren't there. And IE6 was fine.

The old Guillotine

With the old guillotine bug, as with most bugs, there was a list of ingredients needed (listed from Position is Everything):

  1. A container element (This was my list element)
  2. A float element inside the container that is not "cleared" (this was my icon)
  3. Links inside the container in non-floated content after the float (both my h3 link and h4 link followed my floated icon - check!)
  4. a:hover style rules for those links that change certain properties (ooops! This is where the recipe goes wrong. The links following the floated icon did NOT change any of the necessary items which are:
    • Background
    • Padding
    • Text Style
    • Border etc.
  5. Internet Explorer, obviously (got this one)

The initial troubling fact to me was that the old fixes for the guillotine didn't work. It didn't help at all to clear or contain the float. But then, this guillotine wasn't classic either.

The Newly Uncovered IE7 Guillotine

No doubt, other guillotine variations will be or have been uncovered--and I say uncovered, and not discovered, since this issue was probably already there--but due to IE6 and earlier not supporting hover pseudo classes, it simply wasn't revealed. In my case, it appears that creating support for hover on a pseudo class, but only fixing the currently documented guillotine bugs, let some new cases slip through the cracks (come to us IE8! :)). This bug, rather than being related to the hover on the links following the float, was related to the hover on the li element itself (parent container). I've not tested it, but it would be logical to see this happen within other parents, like div and p elements.

The fix was the usual fly swatter--hasLayout. Some of the ways I tried to fix it had untoward results--position: relative; and min-height: 0;--both caused the top border on the li to disappear--whether separately or in combinaton. I think display: inline-block; would actually have worked, only it took me a bit to realize that the margin-top: -15px on the "#sidebar1 li h3" (obviously there because hasLayout was needed) had to be removed. That done, all was well in IE7's world.

7/12 Amendment--Background Painting Bug?

I've been talking back and forth to Alan Gresley about this bug since he's been documenting new IE7 bugs. We've come to the conclusion that this isn't actually a true guillotine, but instead, is the overpainting of the float with the background on an element without layout. Specifically, the li:hover changes the background color, and when it does, it overpaints part of the floated icon. When he gets the page uploaded to his site, I'll link to his demos showing variations and odd behavior. Stay tuned...

Meanwhile, kinda makes you wanna just write an IECC with hasLayout for everything that doesn't, eh? Or wring IE7's neck (obviously that would be right below the crossbar of its e...) all while shouting, "buggy, buggy, BUGGY!" 

Category tags: CSS, Dreamweaver

How to Build a Flash Video (FLV) Progress Bar (Part 1)

Posted Thursday, July 05, 2007 7:04:55 AM by David Stiller

David Stiller

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.

Category tags: Flash