Timecode for FLVPlayback JSFL Style
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.
- The video students aren’t too savvy with code or the actions panel
- The time code should display relatively in the same place depending on the selected skin
- 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
Tags: Flash, FLVPlayback, JSFL, Timecode