Josh Sager Media: Creative Technologies Blog

The Problem

A few weeks ago a co-worker of mine was grading video projects and wanted a way to see the time code of the FLV. He needed a way to communicate with his students so they understood where in the video the feedback applies  I told him, hey that’s not a problem sat down to write some code thinking it would be just an easy text box thing.

After a few more conversations I thought about the problem a little further and determined there were more things to consider.

1. The video students aren’t too savvy with code or the actions panel
2. The time code should display relatively in the same place depending on the selected skin
3. They really needed something that had as few clicks, and prompts as possible

This was a perfect opportunity to mess around with JSFL.  JSFL stands for Java Script Flash and it allows a developer to create utilities that can interface with the Flash IDE and in this case I needed to place a FLVPLayback component on the stage as well as some actions in the actions panel.  I needed this to be as transparent to the intended user as possible.

I started by adding the component

fl.componentsPanel.addItemToDocument({x:0, y:0},"Video","FLVPlayback")

Then I created a test to add actions to the actions panel

fl.actionsPanel.setText("code");

Then I transformed my original time code actions so they would pass as the argument. Now I’m sure there’s an easier way to do what I did, but it totally works.

The Solution

fl.componentsPanel.addItemToDocument({x:0, y:0},"Video","FLVPlayback")

fl.componentsPanel.addItemToDocument({x:0, y:0},"Video","FLVPlayback")

var code

code ="import fl.video.VideoEvent;\n"
code +="import fl.video.FLVPlayback;\n"

code +="var bob:*\n"

code +="for (var j:int = 0; j<numChildren; j++){"
code +=	"if(getChildAt(j).toString()=='[object FLVPlayback]'){	\n"
code +=		"bob = getChildAt(j)\n"
code +=		"break;\n"
code +=	"}\n"
code += "}\n"

code += "\n"
code += "\n"
code += "var timeCodeBox:TextField = new TextField()\n"
code += "timeCodeBox.text =''\n"
code += "timeCodeBox.background=true\n"
code += "timeCodeBox.autoSize = TextFieldAutoSize.LEFT\n"
code += "addChild(timeCodeBox)\n"

code += "bob.addEventListener(VideoEvent.PLAYHEAD_UPDATE, onUpdatePlay)\n"

code += "function onUpdatePlay(e:VideoEvent){\n"
	code += "timeCodeBox.text = getTime(e.target)\n"
	code += "for(var i:int=0; i<e.target.getChildAt(1).numChildren; i++){\n"
	code += "if(e.target.getChildAt(1).getChildAt(i)=='[object SeekBarHandle]'){\n"
		code += "//trace(e.target.getChildAt(1).getChildAt(i).x)\n"
		code += "timeCodeBox.x = e.target.getChildAt(1).getChildAt(i).x+ e.target.x - (timeCodeBox.width/2)\n"
		code += "timeCodeBox.y = e.target.getChildAt(1).getChildAt(i).y + e.target.y-28\n"
		code += "}\n"
	code += "}\n"
code += "}\n"

code += "function getTime(obj:*):String{\n"
    code += "var tempS:Number = Math.floor(obj.playheadTime)\n"
	code += "var tempM:Number = Math.floor(obj.playheadTime/60)\n"
	code += "var tempH:Number = Math.floor(obj.playheadTime/3600)\n"
	code += "var seconds:String\n"
	code += "var minutes:String\n"
	code += "var hours:String\n"
	code += "tempS %= 60\n"
	code += "tempS<10?seconds = '0'+tempS:seconds=tempS.toString()\n"
	code += "tempM<10?minutes = '0'+tempM:minutes=tempM.toString()\n"
	code += "tempM<10?hours = '0'+tempH:hours=tempH.toString()\n"
	code += "//trace(hours+':'+minutes+':'+seconds)\n"
	code += "return hours+':'+minutes+':'+seconds\n"
code += "}\n"

fl.actionsPanel.setText(code);

Final Thoughts

Feel free to use this and modify it. It’s not designed to be pretty right now, just to allow our students to communicate about time code. If you have any questions let me know. Otherwise enjoy

The Problem
You have a drop down list but you want them to dynamically populate using your super cool xml. Not a problem because Javascript can help you out.

The Solution
view the xml and javascript drop down demo

There are a few people in this world that wield the power of communicate in such a way that it really just hits home and makes perfect sense. Sham Bhangal is one of those people. Although I have never met the man, and I would love to, he is pretty much responsible for the development of one of the more critical skill sets that I posses. The art, skill, and understanding of programming.

When I first got into web development I really wanted to do more than just HTML, but my mind had difficult wrapping itself around basic programming concepts like for loops. It was as if my mind blew out after conditionals. But somehow as I sat reading Foundation ActionScript all those years ago, it resonated and opened pathways in my consciousness that I never knew existed. He explained programming like a big puzzle, and the code was just a tool to help me solve the puzzle. At that point I stopped freaking out about semi colons and curly braces and I started to embrace code blocks for what they were; hammers and screwdrivers. They are just tools to help me create.

Just recently I was talking to somebody that I work with about ActionSc ipt. She asked me how I learned what I know and I started her down the path of Sham. I sent her all kinds of links to his books, which lead me to his website. So Sham Bhangal if you out there checking the blogs thank you! I LOVE programming, and I love ActionScript. You efforts have helped me dive into other things like .php, mysql, .xml, .asp, cold fusion, javascript, and a little bit of C++. So thank you!!! I couldn’t have done it with out your help.

Which got me thinking about what he might be up to. Does he have a website, or a blog, or what not. I mean when I first got into