• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Media playbar for HTML5 animation

Participant ,
Jul 04, 2020 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

378

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
community guidelines

correct answers 1 Correct answer

Community Expert , Jul 06, 2020 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
...

Votes

Translate

Translate
Participant ,
Jul 06, 2020 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

 

Votes

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
community guidelines
Community Expert ,
Jul 06, 2020 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

 

Votes

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
community guidelines
Participant ,
Jul 06, 2020 Jul 06, 2020

Copy link to clipboard

Copied

Thanks for the reply JC!

Will check and revert asap

Votes

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
community guidelines
Participant ,
Jul 08, 2020 Jul 08, 2020

Copy link to clipboard

Copied

JC

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

Regards

Votes

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
community guidelines
Community Expert ,
Jul 08, 2020 Jul 08, 2020

Copy link to clipboard

Copied

Excellent! You're welcome!

Votes

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
community guidelines
Participant ,
Jul 08, 2020 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

Votes

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
community guidelines
Community Expert ,
Jul 08, 2020 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

Votes

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
community guidelines
Participant ,
Jul 08, 2020 Jul 08, 2020

Copy link to clipboard

Copied

LATEST

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

 

Votes

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
community guidelines