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

 

Views

147

Likes

Translate

Translate

Report

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

1 Correct Answer

Adobe Community Professional , Jul 06, 2020
JoãoCésar Adobe Community Professional , Jul 06, 2020
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(pr...

Likes

Translate

Translate
Jump to answer Jump to answer
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
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
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

 

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

Thanks for the reply JC!

Will check and revert asap

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
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
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jul 08, 2020

Copy link to clipboard

Copied

Excellent! You're welcome!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
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
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Vinod_India AUTHOR LATEST
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
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more