Flash Video Issue: loadbar (size) vs playbar (time) usability
Author: Evan Mullins | Filed under: other, reviewThis deals with some issues I’m having with the seekbar of a player. The seekbar is the area that displays the video time as a bar that shows your current position/percentage of the video, it can also display the loaded portion of the video among other things as well. Including the video players I’ve made, most player code seems to use bytesLoded / bytesTotal to calculate the amount loaded and display in the loadbar (or whatever you call it), this load bar relates to the filesize as it reads the bytes loaded out of the total. In this same scrub bar area, I like to display the current video time in the playbar as the currentTime / totalTime, notice that this relates to the time and not the file size.

Since video is usually a variable bit rate, the loadbar (size) and the playbar (time) are not representing the same data of the video. Let’s consider an extreme example case video that consists of a first half containing live action with lots of colors and motion while the second half is a still image black and white slideshow. Understandably the first half of the video will be larger in file size than the second half, even though they each represent the same duration or half of a video… So the first half of the loadbar (size) would not correctly represent the first half of the playbar (time). So the user who watching the video load to the half point, and scrubbing to halfway through the video by clicking the load bar will see errors… The player will not be able to play the halfway (time) yet because that time is not yet loaded, even though the file is halfway loaded (size). So if we allow scrubbing through the video by clicking on the loadbar, there is a good chance that the user experience suffers because the loadbar (size) and playbar (time) are not interchangeable
Calculating display bar actionscript code:
1 2 3 4 | //bar is display bar mc //bar.bg.width is used as a constant to scale the percentage to the full bar width bar.sizebar.width = (ns.bytesLoaded / ns.bytesTotal) * bar.bg.width; bar.timebar.width = (ns.time / duration) * bar.bg.width; |
Scrub on click actionscript code:
1 2 3 | //calculate from percentage of bar width to time for seeking to jumpSeekTo = (bar.mouseX / bar.bg.width) * duration; ns.seek(jumpSeekTo); |
A possible simple solution I’ve thought of is to just display a loading graphic if they click a time which has not yet loaded, but that seems counter intuitive and backwards, since the load bar would display that time as having being loaded.
I have not seen anything in documentation or anywhere online that suggests any other way to display the amount loaded which would represent the amount of TIME loaded rather than SIZE. Is there a way to know what time has loaded in the video and display that in the loadbar rather than display the percent of kb loaded?
Can anyone see something I am missing?
P.S. I already tried a couple forums to no avail: Actionscript.org forum post and gotoandlearn forum post.
Flash Drag and Drop Tutorial | startDrag Actionscript
Author: Evan Mullins | Filed under: tutorialI find that Drag and Drop is the most intuitive form of user interaction (at least using a mouse). Actionscript has some of this functionality built in, with the interactive functions startDrag and stopDrag, these can help make our coding pretty easy. If you are transitioning from as2, the code was incredibly simple:
Actionscript2
1 2 3 4 5 6 | on (press) { startDrag (this); } on (release, releaseOutside) { stopDrag (); } |
On the movie clip action panel you’d just put that script, which is actually pretty readable even if you don’t know code. The releaseOutside is to keep from the clip missing the release event, because sometimes if a user released the mouse button but was not currently over the clip being dragged for whatever reason, it will not stop dragging.
Actionscript 3
Some things have changed with as3, other than the actual coding structure, the biggest change for me doing drag and drop in the new actionscript was that the mouse events have changed. There is no more a press or release. They were replaced with, MOUSE_DOWN and MOUSE_UP. There is no more releaseOutside either and this one is a little more complicated to find among the new MouseEvent list.
Leaving it out works, but we still have the same problem. Check out the working example below and try dragging the red ball to the green or yellow one and drop it there. Since the green is above the red in the layer sequence, the mouse is over the green and when the MouseEvent.MOUSE_UP fires, it’s not on the red ball but on the green, so we don’t get to the code that drops the red ball. So the red ball code basically has times when the dragging sticks even after we release the mouse button. Not to mention the dragging is very jumpy!
1 2 3 4 5 6 7 8 | ballRed.addEventListener(MouseEvent.MOUSE_DOWN, dragRed); ballRed.addEventListener(MouseEvent.MOUSE_UP, dropRed); function dragRed(e:MouseEvent):void{ ballRed.startDrag(); } function dropRed(e:MouseEvent):void{ ballRed.stopDrag(); } |
Using the Mouse Move event will help us to customize our behavior a bit more. Plus I wanted to get a more abstract level to it, so I could apply the event listeners to any display object and use the event properties to target the right clips. We begin the drag with the Mouse Down, and the create some other eventListeners for the stage that will watch the Mouse Move and Up events. So clicking on the green or yellow ball, fires the grabMe function which sets the me variable (which will hold any object) to the current target of the event, which should always be the object that you click. So we are using the same code for both the green and yellow ball. I’m a big fan of code consolidation and reuse, it takes a little more effort, but the code is much more clean and portable even. Then we add the event listeners for the stage on MOUSE_MOVE and MOUSE_UP. So first, mthe dragMe function, just says to update after event. This makes the animation smoother cause it only updates the display after the event completes it’s process. Then the drop me function is attached to the stage, so anywhere you release the mouse, the object will stop dragging, plus we remove the stage event listeners and add back the listener for the original object (me). Note the buttonMode property as well, this will make the cursor turn to a hand when you hover that object.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | ballYellow.addEventListener(MouseEvent.MOUSE_DOWN, grabMe); ballYellow.buttonMode = true; ballGreen.addEventListener(MouseEvent.MOUSE_DOWN, grabMe); ballGreen.buttonMode = true; var me:Object; function grabMe(e:MouseEvent):void{ me = e.currentTarget; me.removeEventListener(MouseEvent.MOUSE_DOWN, grabMe); me.startDrag(); stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMe); stage.addEventListener(MouseEvent.MOUSE_UP, dropMe); } function dropMe(e:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe); stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe); me.stopDrag(); me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe); } function dragMe(e:MouseEvent):void { e.updateAfterEvent(); } |
This functionality is much smoother and then when I want to add more code to the dragging or dropping, I have a place to do it already!
Example
Source
CreativePro Office | Helping Freelancers Be Tidy
Author: Evan Mullins | Filed under: reviewDoing freelancing it seems like half of the work is not the freelancing. It’s administration, accounting, management etc…
I got tired of spending my time doing those types of things and started looking for solutions, I quickly found the FREE CreativePro Office by Jeff Denton at UpStart Productions. It has already made my freelance life easier! Since it is free, I wanted to put out this review as a thank you to Jeff!
The site claims:
CreativePro Office is the most complete set of online office management tools you’re likely to find at any price – and it’s completely free! Manage your team, clients, projects, invoices, events and quotes (coming soon) from one web-based application.
CreativePro Office is well suited for both independent professionals and small teams of graphic designers, programmers and web developers.
I’ve been doing small freelance web design jobs on the side since I was in school, but noticed that sometimes I spent seemingly as much time with administration as I did designing. Since I was always doing small things on the side, it never seemed important to be organized, but I can assure you that being organized is much easier than getting organized
. But CreativePro Office seems to be exactly what I need, something better than email threads and spreadsheets to keep track of hours, rates, tasks, clients, projects and bills! I was up and running in minutes and already have a good understanding of how to manage myself better, I’ve even sent some invoices! It is much more professional than what I’ve been doing (keeping the tab documented on post it notes). I have learned a lot about my process through freelancing and I’m trying to incorporate that into a more transparent, organized and overall more professional process now. It can’t do anything but good for the client experience, and help me keep track of my tasks and hours without having to use my own clock and calculator. =)
I even wrote to Jeff personally to thank him for the great work he’s done and the service he is providing. He says there are many new features coming soon that he is very excited about. He says CPO 2.0 “will include features that are being requested most frequently!” Their website says CPO has amassed 15312 users, 14213 projects & $48,207,004.99 invoiced
CreativePro Office seems pretty flexible, and I can imagine a number of different business types utilizing it. So if you are wanting to focus more on actual work and not the other half, go check it out!

Portal website design for StomperNet. Created to give digital access of subscription content: including video, pdf versions of print material (journal). I was responsible for the design of the front end of the site with valid html and css. I also designed the site logo and the graphics on the site. Was able to include some small customized flash elements. Visit public my.stompernet.com site and purchase instant access to StomperNet content inside the my.stompernet.com portal.


























