Highlighted

Media playbar for HTML5 animation

Participant ,
Jul 04, 2020

Copy link to clipboard

Copied

Hi Team

I've developed an interactive animation using HTML5 canvas.

I intend to have a media playbar in the animation so that the user can move to his desired portion of the animation at any point in time.

How do I do it?

Regards

 

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

Here is a sample. I hope it helps.

 

Preview:

https://bit.ly/2VUeAwN

 

JavaScript code (just put it in the first frame of the FLA and change the player and target instance names):

	var root = this;
	var player;

	root.start = function()
	{
		document.body.style.backgroundColor = "black";
		player = new root.MovieClipPlayer( { player: root.player, target: this } ); // target is the Movie Clip instance you want to control
	};

	if (!root.frame0Started)
	{
		root.MovieClipPlayer = function(props)
		{
			this.player = props.player;
			this.target = props.target;
			this.start();
		};
		
		root.MovieClipPlayer.prototype.start = function()
		{
			if (this.isMobile())
				createjs.Touch.enable(this.player.stage);
			
			this.player.stage.mouseMoveOutside = true;
			this.mouseDown = this.player.on("mousedown", this.mouseDownHandler, this);
			this.pressUp = this.player.stage.on("pressup", this.pressUpHandler, this);
			this.tick = createjs.Ticker.on("tick", this.tickHandler, this);
		}
		
		root.MovieClipPlayer.prototype.mouseDownHandler = function(e)
		{
			if (this.player.contains(e.target))
			{
				if (e.target === this.player.bar || e.target === this.player.playHead)
				{
					this.paused = this.target.paused;
					this.dragging = true;
				}				
				else if (e.target === this.player.playPause || this.player.playPause.contains(e.target))
				{
					if (this.target.paused)
						this.target.play();
					else
						this.target.stop();
				}
			}		
		};
		
		root.MovieClipPlayer.prototype.tickHandler = function(e)
		{
			this.mousePos = this.player.globalToLocal(this.player.stage.mouseX, this.player.stage.mouseY);
			this.ratioX = this.mousePos.x / this.player.bar.nominalBounds.width;
			
			if (this.dragging)
				this.target.gotoAndStop(Math.floor(this.target.totalFrames * this.ratioX));
			
			this.player.playHead.x = (this.target.currentFrame / this.target.totalFrames) * this.player.bar.nominalBounds.width;
			this.player.playPause.gotoAndStop(this.target.paused ? 0 : 1);
		};
		
		root.MovieClipPlayer.prototype.pressUpHandler = function(e)
		{
			this.dragging = false;
			
			if (!this.paused)
				this.target.play();
		};
		
		root.MovieClipPlayer.prototype.isMobile = function()
		{
			return createjs.BrowserDetect.isWindowPhone || createjs.BrowserDetect.isIOS  || createjs.BrowserDetect.isAndroid  || createjs.BrowserDetect.isBlackberry;
		};
		
		root.start();
		root.frame0Started = true;
	}

 

Code / source / FLA:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/movie_clip_player

 

Regards,

JC

 

Views

92

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Media playbar for HTML5 animation

Participant ,
Jul 04, 2020

Copy link to clipboard

Copied

Hi Team

I've developed an interactive animation using HTML5 canvas.

I intend to have a media playbar in the animation so that the user can move to his desired portion of the animation at any point in time.

How do I do it?

Regards

 

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

Here is a sample. I hope it helps.

 

Preview:

https://bit.ly/2VUeAwN

 

JavaScript code (just put it in the first frame of the FLA and change the player and target instance names):

	var root = this;
	var player;

	root.start = function()
	{
		document.body.style.backgroundColor = "black";
		player = new root.MovieClipPlayer( { player: root.player, target: this } ); // target is the Movie Clip instance you want to control
	};

	if (!root.frame0Started)
	{
		root.MovieClipPlayer = function(props)
		{
			this.player = props.player;
			this.target = props.target;
			this.start();
		};
		
		root.MovieClipPlayer.prototype.start = function()
		{
			if (this.isMobile())
				createjs.Touch.enable(this.player.stage);
			
			this.player.stage.mouseMoveOutside = true;
			this.mouseDown = this.player.on("mousedown", this.mouseDownHandler, this);
			this.pressUp = this.player.stage.on("pressup", this.pressUpHandler, this);
			this.tick = createjs.Ticker.on("tick", this.tickHandler, this);
		}
		
		root.MovieClipPlayer.prototype.mouseDownHandler = function(e)
		{
			if (this.player.contains(e.target))
			{
				if (e.target === this.player.bar || e.target === this.player.playHead)
				{
					this.paused = this.target.paused;
					this.dragging = true;
				}				
				else if (e.target === this.player.playPause || this.player.playPause.contains(e.target))
				{
					if (this.target.paused)
						this.target.play();
					else
						this.target.stop();
				}
			}		
		};
		
		root.MovieClipPlayer.prototype.tickHandler = function(e)
		{
			this.mousePos = this.player.globalToLocal(this.player.stage.mouseX, this.player.stage.mouseY);
			this.ratioX = this.mousePos.x / this.player.bar.nominalBounds.width;
			
			if (this.dragging)
				this.target.gotoAndStop(Math.floor(this.target.totalFrames * this.ratioX));
			
			this.player.playHead.x = (this.target.currentFrame / this.target.totalFrames) * this.player.bar.nominalBounds.width;
			this.player.playPause.gotoAndStop(this.target.paused ? 0 : 1);
		};
		
		root.MovieClipPlayer.prototype.pressUpHandler = function(e)
		{
			this.dragging = false;
			
			if (!this.paused)
				this.target.play();
		};
		
		root.MovieClipPlayer.prototype.isMobile = function()
		{
			return createjs.BrowserDetect.isWindowPhone || createjs.BrowserDetect.isIOS  || createjs.BrowserDetect.isAndroid  || createjs.BrowserDetect.isBlackberry;
		};
		
		root.start();
		root.frame0Started = true;
	}

 

Code / source / FLA:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/movie_clip_player

 

Regards,

JC

 

Views

93

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 04, 2020 0
Participant ,
Jul 06, 2020

Copy link to clipboard

Copied

Hi

Anybody who can pitch in your views? I'm kinda running short of time and your advice would be really helpful.

Regards

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 06, 2020 0
Adobe Community Professional ,
Jul 06, 2020

Copy link to clipboard

Copied

Hi.

 

Here is a sample. I hope it helps.

 

Preview:

https://bit.ly/2VUeAwN

 

JavaScript code (just put it in the first frame of the FLA and change the player and target instance names):

	var root = this;
	var player;

	root.start = function()
	{
		document.body.style.backgroundColor = "black";
		player = new root.MovieClipPlayer( { player: root.player, target: this } ); // target is the Movie Clip instance you want to control
	};

	if (!root.frame0Started)
	{
		root.MovieClipPlayer = function(props)
		{
			this.player = props.player;
			this.target = props.target;
			this.start();
		};
		
		root.MovieClipPlayer.prototype.start = function()
		{
			if (this.isMobile())
				createjs.Touch.enable(this.player.stage);
			
			this.player.stage.mouseMoveOutside = true;
			this.mouseDown = this.player.on("mousedown", this.mouseDownHandler, this);
			this.pressUp = this.player.stage.on("pressup", this.pressUpHandler, this);
			this.tick = createjs.Ticker.on("tick", this.tickHandler, this);
		}
		
		root.MovieClipPlayer.prototype.mouseDownHandler = function(e)
		{
			if (this.player.contains(e.target))
			{
				if (e.target === this.player.bar || e.target === this.player.playHead)
				{
					this.paused = this.target.paused;
					this.dragging = true;
				}				
				else if (e.target === this.player.playPause || this.player.playPause.contains(e.target))
				{
					if (this.target.paused)
						this.target.play();
					else
						this.target.stop();
				}
			}		
		};
		
		root.MovieClipPlayer.prototype.tickHandler = function(e)
		{
			this.mousePos = this.player.globalToLocal(this.player.stage.mouseX, this.player.stage.mouseY);
			this.ratioX = this.mousePos.x / this.player.bar.nominalBounds.width;
			
			if (this.dragging)
				this.target.gotoAndStop(Math.floor(this.target.totalFrames * this.ratioX));
			
			this.player.playHead.x = (this.target.currentFrame / this.target.totalFrames) * this.player.bar.nominalBounds.width;
			this.player.playPause.gotoAndStop(this.target.paused ? 0 : 1);
		};
		
		root.MovieClipPlayer.prototype.pressUpHandler = function(e)
		{
			this.dragging = false;
			
			if (!this.paused)
				this.target.play();
		};
		
		root.MovieClipPlayer.prototype.isMobile = function()
		{
			return createjs.BrowserDetect.isWindowPhone || createjs.BrowserDetect.isIOS  || createjs.BrowserDetect.isAndroid  || createjs.BrowserDetect.isBlackberry;
		};
		
		root.start();
		root.frame0Started = true;
	}

 

Code / source / FLA:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/movie_clip_player

 

Regards,

JC

 

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 06, 2020 1
Participant ,
Jul 06, 2020

Copy link to clipboard

Copied

Thanks for the reply JC!

Will check and revert asap

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 06, 2020 1
Participant ,
Jul 08, 2020

Copy link to clipboard

Copied

JC

The playbar works like a charm!! Thanks a ton mate!

Regards

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2020 1
Adobe Community Professional ,
Jul 08, 2020

Copy link to clipboard

Copied

Excellent! You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2020 0
Participant ,
Jul 08, 2020

Copy link to clipboard

Copied

Hi JC

I've tried to include a sample video. At first it worked well. All of a sudden the playbar does not pause the video.

What am I missing? (the working .fla file is not able to be uploading here for some reason)

Regards

Vinod

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2020 0
Adobe Community Professional ,
Jul 08, 2020

Copy link to clipboard

Copied

Hi.

 

The sample provided is for controlling Movie Clip timelines only.

 

Videos are separate HTML elements that don't live inside of the stage or any symbol. It actually doesn't live inside of the canvas.

 

To control a video, use a Video Component (Window > Components > Video) and check the controls property.

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2020 1
Participant ,
Jul 08, 2020

Copy link to clipboard

Copied

Hi JC

I'll try to explain my project and my requirement better.

My HTML5 project has 2D animation, voices and small videos.

My requirement is, there should be a playbar which controls all (2D animation, voices and videos) together. Also the entire package should respond appropriately for the pause and play button as well.

How do I go about creating such a playbar?

Regards

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2020 0