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
Hi.
Here is a sample. I hope it helps.
Preview:
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
...
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
Copy link to clipboard
Copied
Hi.
Here is a sample. I hope it helps.
Preview:
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
Copy link to clipboard
Copied
Thanks for the reply JC!
Will check and revert asap
Copy link to clipboard
Copied
JC
The playbar works like a charm!! Thanks a ton mate!
Regards
Copy link to clipboard
Copied
Excellent! You're welcome!
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
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
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