Investigation of CircleCube Video Player (Day 5)

I have prune out the code, following the previous instructions. But I keep over-lay play|pause button, and still image.

Back to code. Because this code is de-compiled. I adjusted the code, replace full qualified class name with short name, and remove some useless variables.

Since we've already removed the tooltip function, each module do not need this property any more. Such as:

vcr.volumeB.tooltip = "Click to Mute";
vcr.playB.tooltip = "Play";
vcr.bar.scrub.tooltip = "Scrub";
vcr.timeCurrent.tooltip = "Show Remaining Time";

And some other lines refer to this property.

Some other variables I don't quite understand:

internal var eventCategory:String="circlecubeVideoPlayer";

internal var videoMetaDataIsLoaded:Boolean=false;

Remove all lines setting buttonMode, such as:

videofg.buttonMode = true;

I don't need the sharing function anymore, then the codes on permalink is also useless. Remove all lines about use_pl_permalink,pl_permalink and permalink.

if (arg1.settings.@permalink && !(arg1.settings.@permalink == "")) 
{
	permalink = arg1.settings.@permalink;
}

pl_permalink = new Array();

if ($vidXMLList[$i].@permalink) 
{
	pl_permalink.push($vidXMLList[$i].@permalink);
	use_pl_permalink = true;
}

I found that there are still errors within the codes, that is not programmatic error, but making no sense, in the constructor:

pl_flv = video_flv.split("|");
pl_still = video_still.split("|");
pl_title = video_title.split("|");
pl_desc = video_desc.split("|");

Because at the point, the string type variables are empty strings.

The four lines preceding are also redundant, for this is done in hanlder on complete event of loading XML:

pl_flv = new Array();
pl_still = new Array();
pl_title = new Array();
pl_desc = new Array();

Version 2

There is still so many redundant codes to clean. However, at this point, I want to remove some mouse_over|mouse_out event.

I want to remove mouse-over-highlight effect of these two buttons. And overlay play button as well:

So, remove the lines:

playOverlay.addEventListener(MouseEvent.ROLL_OVER, butOverlayOver);
playOverlay.addEventListener(MouseEvent.ROLL_OUT, butOverlayOut);

vcr.playB.addEventListener(MouseEvent.ROLL_OVER, butOver);
vcr.playB.addEventListener(MouseEvent.ROLL_OUT, butOut);

vcr.volumeB.overlay.addEventListener(MouseEvent.ROLL_OVER, volbutOver);
vcr.volumeB.overlay.addEventListener(MouseEvent.ROLL_OUT, volbutOut);

public function butOverlayOver(arg1:MouseEvent):void
{
	com.circlecube.Color_cc.setColor(arg1.target.bg, color_accent);
	return;
}
		
		
public function butOverlayOut(arg1:MouseEvent):void
{
	com.circlecube.Color_cc.setColor(arg1.target.bg, color_dark);
	return;
}	

public function butOver(arg1:MouseEvent):void
{
	com.circlecube.Color_cc.setColor(arg1.target.icon, color_accent);
	return;
}

public function butOut(arg1:MouseEvent):void
{
	com.circlecube.Color_cc.setColor(arg1.target.icon, color_light);
	return;
}

public function volbutOver(arg1:MouseEvent):void
{
	com.circlecube.Color_cc.setColor(arg1.target.parent.speaker, color_accent);
	return;
}

I have talked about vcrLayout() already in the previous blog, but not deep enough, even removed fromvideoStatus(), this function will be called twice mainly, one is in constructor, and the other is inonMetaData() handler oronXMPData(), the latter two are video loading event, dispatched when the meta data of the video is ready. So, the chain is:

We will see that, the videoLayout() is just resizing the video, and playOverlayout() is just resizing overlay, and stillLayout() is merely resizing still_c. In my case, these MCs(except video) can be resized and arranged only once at the very beginning of application run.

There is no need to run vcrLayout() in constructor. And it also involves two other functions, vcrLayout()->vcrSort()->vcrRemove(). And before that, the relevant code:

vcrArray.push(vcr.playB, vcr.timeCurrent, vcr.bar, vcr.timeTotal, vcr.volumeB);
vcr.playB.weight = 1;
vcr.timeCurrent.weight = 2;
vcr.bar.weight = 3;
vcr.timeTotal.weight = 4;
vcr.volumeB.weight = 6;

vcr.bar.visible = false;
vcr.timeTotal.visible = false;
vcr.timeCurrent.visible = false;
vcr.playB.visible = false;
vcr.volumeB.visible = false;

vcr.bar.fixed = "fluid";
vcr.timeCurrent.fixed = "variable";
vcr.timeTotal.fixed = "variable";
		   
vcr.volumeB.fixed = 20;
vcr.playB.fixed = 20;


if (arg1.settings.@vcr_vol) 
{
	vcrWeight(vcr.volumeB, arg1.settings.@vcr_vol);
}
if (arg1.settings.@vcr_play) 
{
	vcrWeight(vcr.playB, arg1.settings.@vcr_play);
}
if (arg1.settings.@vcr_tc) 
{
	vcrWeight(vcr.timeCurrent, arg1.settings.@vcr_tc);
}
if (arg1.settings.@vcr_tb) 
{
	vcrWeight(vcr.bar, arg1.settings.@vcr_tb);
}
if (arg1.settings.@vcr_tt) 
{
	vcrWeight(vcr.timeTotal, arg1.settings.@vcr_tt);
}


public function vcrWeight(arg1:MovieClip, arg2:String):void
{
	var loc1:*=parseInt(arg2);
	arg1.weight = loc1;
	return;
}

Each control element on the vcr panel has two properties: weight and fixed, and weight presents its order, whereas fixed indicates how much is its width, it has three possible values: 'fluid', 'variable' and a numeric value. These variables have initial values, and reset by xml setting, then be used in vcrSort() and vcrLayout() andvcrRemove() methods.

They are stored in vcrArray, and got sorted by weight, withinvcrSort() method. Then, withinvcrLayout(), their positions and width would be calculated.

Since we don't need this flexibility, we can replace the vcrLayout() 's body with a new one:

public function vcrLayout():void
{
	trace("vcr is layouting...");
	
	vcr.x = 0;
	vcr.y = stage.stageHeight - vcr.bg.height;
	
	vcr.bg.width = stage.stageWidth;
	vcrWidthFixed = 0;
	
	vcr.volumeB.visible = true;
	vcrWidthFixed = vcrWidthFixed + vcr.volumeB.fixed;
	vcr.volumeB.myWidth = vcr.volumeB.fixed;
	
	vcr.playB.visible = true;
	vcrWidthFixed = vcrWidthFixed + vcr.playB.fixed;
	vcr.playB.myWidth = vcr.playB.fixed;
	
	vcr.bar.visible = true;
	
	vcr.timeCurrent.visible = true;
	vcrWidthFixed = vcrWidthFixed + vcr.timeCurrent.timeDisplay.width;
	vcr.timeCurrent.myWidth = vcr.timeCurrent.timeDisplay.width;
	
	vcr.timeTotal.visible = true;
	vcrWidthFixed = vcrWidthFixed + vcr.timeTotal.timeDisplay.width;
	vcr.timeTotal.myWidth = vcr.timeTotal.timeDisplay.width;
	
	
	vcrFluidWidth = stage.stageWidth - vcrWidthFixed - vcr_padding * 2;
	
	vcr.bar.bg.width = vcrFluidWidth;
	vcr.bar.bar.width = vcrFluidWidth;
	
	vcr.playB.x = 10;
	vcr.playB.y = 0;
	vcr.timeCurrent.x = 30;
	vcr.timeCurrent.y = 0;
	vcr.bar.x = 80;
	vcr.bar.y = 0;
	
	vcr.volumeB.x = 770;
	vcr.volumeB.y = 0;
	vcr.timeTotal.x = 720;
	vcr.timeTotal.y = 0;
	
	return;
}

Well, we hard-code most of their width and positions for now. Then, we don't need vcrSort() and vcrRemove(), and vcrArray and weight property and fixed property actually. We also need vcrWeight() and resetting their weight according to XML.

Version 2.2

The next one should go to be the five status of playing. We should cut 'loading' off. Basing on the previous discussion, I should remove the case loading block:

case "loading":
{
	currentStatus = "playing";
	ns.resume();
	vcr.playB.icon.gotoAndStop("playing");
	playOverlayLayout();
	hidePlayOverlay();
	vid.setChildIndex(video, vid.numChildren - 2);
	showPlayOverlay();
	break;
}

and replace:

case "ready":
{
	videoTimer.start();
	if (autoVidLoad) 
	{
		loadStill();
		ns.play(video_flv);
	  
		if (autoVidPlay) 
		{
			currentStatus = "playing";
			vcr.playB.icon.gotoAndStop("playing");
			playOverlayLayout();
			hidePlayOverlay();
			vid.setChildIndex(video, vid.numChildren - 2);
		}
		else 
		{
			currentStatus = "loading";
			ns.pause();
			vcr.playB.icon.gotoAndStop("paused");
			playOverlayLayout();
			showPlayOverlay();
			autoVidPlay = true;
			clearVideoStatus();
			showPlayOverlay();
		}
	}
	else 
	{
		autoVidLoad = true;
		playOverlayLayout();
	}
	break;
}

with:

case "ready":
{
	videoTimer.start();
	
	loadStill();
	ns.play(video_flv);
  
	if (autoVidPlay) 
	{
		currentStatus = "playing";
		vcr.playB.icon.gotoAndStop("playing");
		playOverlayLayout();
		hidePlayOverlay();
		vid.setChildIndex(video, vid.numChildren - 2);
	}
	else 
	{
		currentStatus = "loading";
		ns.pause();
		vcr.playB.icon.gotoAndStop("paused");
		playOverlayLayout();
		showPlayOverlay();
		autoVidPlay = true;
		clearVideoStatus();
		showPlayOverlay();
	}
	
	break;
}

and, we can get rid of variable autoVidLoad, because it is alwaystrue, and that makes no difference.

internal var autoVidLoad:Boolean=true;

if (arg1.settings.@autoload) 
{
	autoVidLoad = arg1.settings.@autoload;
}

Since variable autoVidPlay is alwaystrue, the else block will never reach within ready case, so replace:

case "ready":
{
	videoTimer.start();
	
	loadStill();
	ns.play(video_flv);
  
	if (autoVidPlay) 
	{
		currentStatus = "playing";
		vcr.playB.icon.gotoAndStop("playing");
		playOverlayLayout();
		hidePlayOverlay();
		vid.setChildIndex(video, vid.numChildren - 2);
	}
	else 
	{
		currentStatus = "loading";
		ns.pause();
		vcr.playB.icon.gotoAndStop("paused");
		playOverlayLayout();
		showPlayOverlay();
		autoVidPlay = true;
		clearVideoStatus();
		showPlayOverlay();
	}
	
	break;
}

with:

case "ready":
{
	videoTimer.start();
	
	loadStill();
	ns.play(video_flv);
	
	currentStatus = "playing";
	vcr.playB.icon.gotoAndStop("playing");
	playOverlayLayout();
	hidePlayOverlay();
	vid.setChildIndex(video, vid.numChildren - 2);
	
	break;
}

and get rid of autoVidPlay.

internal var autoVidPlay:Boolean=true;

if (arg1.settings.@autostart) 
{
	autoVidPlay = arg1.settings.@autostart;
}

Version 2.3

Finally, I decide to remove still image. So follow the instructions in Day 3. And also get rid of video_still and pl_still.

Delete the lines inside videoStatus():

vcr.timeCurrent.timeDisplay.width = vcr.timeCurrent.timeDisplay.textWidth + timeDisplayPadding;

vcr.timeTotal.timeDisplay.width = vcr.timeTotal.timeDisplay.textWidth + timeDisplayPadding;