Lee Bimelow's video player modyfications

programming flash
1

Hello,

I’ve been making a video player based on Lee Brimelow’s tutorials and everything works fine, but I would like to add a few things - like the ability to change the position of the scrubber with a mouse click and not only by dragging. I would also like to add volume control to the movie.

I’m not very good with AS, so I figured this would be a good place to look for help.

I have uploaded the source file for your convenience :slight_smile:

2 
menuBar.loader.loadbar.onPress = function() {
    vFrame.onEnterFrame = videoStatus;
    scrubClick = this._xmouse;
    ns.seek(Math.floor(scrubClick/280*duration));
    menuBar.loader.scrub._x = videoStatus;

};

This does the trick with the scrubber.

My next question. :slight_smile:
The controls on the player fade out if the mouse is not on them. The menu usues a simple hitTest function. However, when I move the mouse out of the stage too fast the menu will not fade out. I know there is a function in AS3 that let’s you check if the mouse left the stage, but is there a way to do something similar in AS2?

In this player http://flashden.net/item/flv-player-with-playlist/11622 a bar with a title of the video disapears regardles of how fast the mouse leaves the stage. Any ideas how it was achieved?

3

how is the hitTest called? is it onEnterFrame? or set Interval?

you can get the size of the stage, and check the position of the mouse then. if it isn’t within it, means its out :slight_smile:

4

[QUOTE=pantas;2352338]how is the hitTest called? is it onEnterFrame? or set Interval?

you can get the size of the stage, and check the position of the mouse then. if it isn’t within it, means its out :)[/QUOTE]

Interval. Here is the code:

var d = 1;
var delay = setInterval(startTracking, 30);
function startTracking() {
	if (menuBar.hitTest(_root._xmouse, _root._ymouse) && d) {
		d = 0;
		menuBar.alphaTo(100,1);
	}
	if (!menuBar.hitTest(_root._xmouse, _root._ymouse)) {
		if (!d) {
			menuBar.alphaTo(0,1);
			d = 1;
		}
		
	}
}

Could you give me an example of what you mean? Do I just define the stage size and make a if/else statement?

5

Another thing :slight_smile:

I have added a button that makes the player go into a fullscreen mode.

The problem is that when I set the Stage.scaleMode to scale the movie scales nicely, but the movieclip with controls scales with it and I can’t seem to scale it back to it’s original size.

When I set the scaleMode to noScale and scale the video itself I have the MC with controls the size I want it, but the video looses it’s original aspect ratio and is stretched either horizontally or vertically depending on it’s original aspect ratio.
So my question is, how do I scale something with “scale” scaleMode, or how do I retain the original proportions of a scaled object with “noScale”?

6

Ok, for anyone interested. With some internet resources :slight_smile: I’ve menaged to get the scaling code right. Now the video is scaled retaining it’s aspect ratio and the controls stay unscaled and always on the bottom of the video (not on the bottom of the stage).

Stage.scaleMode = "noScale";
Stage.showMenu = false;
Stage.align = "TL";

function toggleFullScreen() {
	if (Stage["displayState"] == "normal") {
		Stage["displayState"] = "fullScreen";
	} else {
		Stage["displayState"] = "normal";
	}
}

fullScreenBtn.onRelease = function() {
	toggleFullScreen();
};



var stage_listener:Object = new Object();

stage_listener.onResize = function():Void  {
	if (Stage.height/Stage.width == theVideo._height/theVideo._width) {
		img_prop = theVideo._width/theVideo._height;
		theVideo._height = Stage.height;
		theVideo._width = Stage.height*img_prop;
		theVideo._y = (Stage.height/2)-(theVideo._height/2);
		theVideo._x = (Stage.width/2)-(theVideo._width/2);

		menuBar._x = Math.round((Stage.width/2)-(menuBar._width/2));
		menuBar._y = Stage.height-menuBar._height;

		outline._height = Stage.height;
		outline._width = Stage.height*img_prop;
		outline._y = (Stage.height/2)-(theVideo._height/2);
		outline._x = (Stage.width/2)-(theVideo._width/2);

	} else {
		img_prop = theVideo._height/theVideo._width;
		theVideo._width = Stage.width;
		theVideo._height = Stage.width*img_prop;
		theVideo._y = (Stage.height/2)-(theVideo._height/2);
		theVideo._x = (Stage.width/2)-(theVideo._width/2);

		menuBar._x = Math.round((Stage.width/2)-(menuBar._width/2));
		menuBar._y = (Stage.height-theVideo._height)/2+theVideo._height-menuBar._height;
		

		outline._width = Stage.width;
		outline._height = Stage.width*img_prop;
		outline._y = (Stage.height/2)-(theVideo._height/2);
		outline._x = (Stage.width/2)-(theVideo._width/2);


	}
};

Stage.addListener(stage_listener);
onResize();

I’ve also changed the control fade out/fade in code, so now the fading is based on mouse activity. It uses an Inactivity class that you can download from here.

import org.casaframework.util.Inactivity;

///MENU ACTIVARION SCRIPT


var inactiveTime:Number = 1;

function onInactive(sender:Object):Void {
   
   menuBar.alphaTo(0,1,"easeInOutQuad");
}

function onReactive(sender:Object):Void {
   
   menuBar.alphaTo(100,1);
}

var inactivityDetect:Inactivity = new Inactivity(inactiveTime * 1000);
this.inactivityDetect.addEventObserver(this, Inactivity.EVENT_INACTIVE);
this.inactivityDetect.addEventObserver(this, Inactivity.EVENT_REACTIVE);

As you can see the code, thanks to the class, is fairly simple, but lacks one thing - I would lke the controls to stay in the most “fade in” state while the mouse is over them and not disappear. I can do that with a simple hitTest, but there are 2 problems with that.

Problem 1. If the menu was fading out and you move the mouse over it, the menu will stop in the middle of the fadeout animation and be very faint. I’m pretty sure if’s because I’m calling the alphaTo function twice for the same object.

Problem 2. Again, if I use the hitTest and move the mouse too quickly away from the stage the menu will not fade out.

Anyone got any ideas how to fix this?