Can I call a function(one that will make another object visible/invisible) on a specific animation frame or time? I would like to have arrows describe the movement of the animation at certain times during the animation. While I can just make them visible when I start the animation and make them invisible when the animation stops, I would like to specify ranges inside the animation to do this
playPatientAnim: function (anim, callback) {
var pending = 1;
var me = this;
var finish = callback ? function () {
if (pending && !--pending) {
callback.call(me, anim);
}
} : null;
me.currentPatient.skinned.forEach(function (mesh) {
mesh.animations.forEach(function(anim){
anim.stop();
});
});
me.currentPatient.skinned.forEach(function (mesh) {
var animation = mesh.animations[anim];
animation.stop();
if (animation) {
pending++;
animation.onComplete = finish;
animation.play();
}
});
if (finish) {
finish();
}
}
You can make a mesh visible or invisible ( mesh.visible = false; //or true ). To change visibility at certain time you could use timestamp:
new Date().getTime() and calculate how you want to do the sequence of your animation.
Related
I have two objects in right and left side of window.
I want to zoom those objects individually when I hover it.
var itsLeftControls, itsRightControls;
itsRightControls = new THREE.TrackballControls(itsRightCamera);
itsLeftControls = new THREE.TrackballControls(itsLeftCamera);
document.getElementById('SubContainerLeft').onmouseover = function () {
aMouseOverActivate(itsLeftControls);
aMouseOverDeactivate(itsRightControls);
};
document.getElementById('SubContainerRight').onmouseover = function () {
aMouseOverActivate(itsRightControls);
aMouseOverDeactivate(itsLeftControls);
};
function aMouseOverActivate(theControl)
{
theControl.zoomSpeed = 0.8;
}
function aMouseOverDeactivate(theControl)
{
theControl.zoomSpeed = 0.0;
}
function animateLeft()
{
requestAnimationFrame(animateLeft);
renderLeft();
}
function renderLeft()
{
itsLeftControls.update();
itsLeftRenderer.render(itsLeftScene, itsLeftCamera);
}
function animateRight()
{
requestAnimationFrame(animateRight);
renderRight();
}
function renderRight()
{
itsRightControls.update();
itsRightRenderer.render(itsRightScene, itsRightCamera);
}
if I hover in left side and try to zoom with mouse scrolling wheel, it is working fine. after that when I hover in right side, I can see that same zooming effect in right side also without scrolling mouse.
How to fix this?
TrachballControls take a optional second argument that is the dom element onto which it will attach the mouse event listeners.
If this argument is not supplied, it will attach the event listeners to the document.
This means that both your trackball controls are listening for events on the document (rather than their respective containers which I think you want.)
So just send your scene container divs as the second arguments to TrackballControlls and you should be good to go.
var leftContainer = document.getElementById('SubContainerLeft');
var rightContainer = document.getElementById('SubContainerRight');
var itsRightControls = new THREE.TrackballControls(itsRightCamera, rightContainer);
var itsLeftControls = new THREE.TrackballControls(itsLeftCamera, leftContainer);
Is there a "MouseScroll" or "MouseDrag" Event in Actionscript, I could not find something properly.
I have this:
resultPumpVolCalcBoxQv.addEventListener(MouseEvent.CLICK, getPumpVolumenQv);
resultPumpVolCalcBoxQn.addEventListener(MouseEvent.CLICK, getPumpVolumenn);
resultPumpVolCalcBoxQvng.addEventListener(MouseEvent.CLICK, getPumpVolumenng);
function getPumpVolumenQv(e:MouseEvent):void {
pumpeVolQv = Number(pumpeVolumenstromTextFieldqv.text);
pumpeVolN = Number(pumpeVolumenstromTextFieldn.text);
pumpeVolNg = Number(pumpeVolumenstromTextFieldng.text);
if(pumpeVolumenstromTextFieldng.text != null && pumpeVolumenstromTextFieldn.text != null) {
totalqv = (pumpeVolNg * pumpeVolN)/1000
pumpeVolumenstromTextFieldqv.text = " " + totalqv;
} else {
//
}
}
Currently this works with a click event.
I want to make this calculation happen if I drag something like a scrollbar.
You have to combine the usage of MouseDown and MouseOut to create a drag outcome
obj.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
obj.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
function mouseDown($e:MouseEvent):void{
MovieClip($e.currentTarget).startDrag();
}
function mouseUp($e:MouseEvent):void{
MovieClip($.currentTarget).stopDrag();
}
If you want it to constrain to an X or Y position, add a rectangular box paraments in the startDrag() functions
You will have to use the Mouse up and Mouse down events to achieve this. However, be careful to add and then remove the event listeners when they are not needed. This way you will ensure that the event listeners are properly removed and not added multiple times causing memory issues.
private var yourObject:MovieClip;
private function addDragListeners():void
{
yourObject.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown, false, 0, true);
yourObject.addEventListener(MouseEvent.MOUSE_DOWN, onMouseUp, false, 0, true);
}
private function removeDragListeners():void
{
yourObject.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
yourObject.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseUp);
}
protected function onMouseDown(e:MouseEvent):void
{
yourObject.startDrag();
}
protected function onMouseUp(e:MouseEvent):void
{
yourObject.stopDrag();
}
You can look into the startDrag() method in case you need to add some bounds for the dragging.
my goal is detect when an element has reached a certain margin-left, and than unbind or stop the panmove from continuing if it hits that threshold.
I have a "panmove" bound to an element using hammer.js, and jquery hammer plugin.
I noticed that in the panmove, console.log(e) will fire hundreds of times as you move the elements, which is expected. If you however put an if statement in the panmove function, it only goes off of the initial state of the first panmove and not the current one.
.bind("panmove", function (e) {
var count = 0;
console.log(e);
console.log(count++);
var _this = $(e.target);
var _thisDataLeft = _this.attr("data-left");
var _thisDataMaxLeft = _this.attr("data-maxleft"); // this is derived from the width of the Delete box, which can be any width.
if (Math.abs(_thisDataLeft) < Number(_thisDataMaxLeft)) {
_this.css({ left: Number(_thisDataLeft) + e.gesture.deltaX }); // controls movement of top layer
console.log(count++);
}
I noticed that the console.log(count++) always fires 1, instead of iterating up, as if it is only reading it once in the beginning.
How can I run an if statement inside of this Pan, so that it is always the current information, and not just the first iteration?
Ended up moving away from Hammer.js, was not able to get the results I needed. It looks like the more basic jquery.event.move.js was easier to use than hammer.
here is my example in js fiddle
https://jsfiddle.net/williamhowley/o9uvo50y/
$(document).ready(function () {
// http://stephband.info/jquery.event.move/
// http://stephband.info/jquery.event.swipe/
// add swipe functionality to the rows.
// I think you will need to add the swipe left, after it is activated by a HOLD down press.
// idk, how do you always make something swipable.
var wrap = $('ul#main');
$('ul#main > li')
.on('movestart', function (e) {
console.log("move start");
// var $li = $(e.target).closest('.swipable'); // this would be normal live integration
var $li = $(e.target);
if ($li.attr("data-hasplaceholder") !== "true") { // if it does not have a placeholder, add one.
createBackgroundSpacer($li);
$li.attr("data-hasplaceholder", true); // signify that a placeholder has been created for this element already.
}
// If the movestart heads off in a upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
return;
}
// To allow the slide to keep step with the finger,
// temporarily disable transitions.
wrap.addClass('notransition'); // add this to the container wrapper.
})
.on('move', function (e) {
// event definitions
// startX : 184, where from left the mouse curser started.
// deltaX: ?
// distX: how far the mouse has moved, if negative moving left. Still need to account for double movement, currently can only handle one movement.
console.log("move");
console.log(e);
var maxLeft = $('.rightContent').width();
var marginLeftNum = Number($(this).css('margin-left').replace(/[^-\d\.]/g, ''));
if (marginLeftNum <= -maxLeft && e.deltaX < 0) { // Case when user is at outermost left threshold, and trying to move farther left.
$(this).css({ 'margin-left': -maxLeft });
}
else if (marginLeftNum == -maxLeft && e.deltaX > 0) { // When user is at threshold, and trying to move back right.
$(this).css({ 'margin-left': marginLeftNum + e.deltaX });
}
else if (e.target.offsetLeft>=0 && e.deltaX>0) { // If the offset is 0 or more, and the user is scrolling right (which is a positive delta, than limit the element. )
$(this).css({ 'margin-left': 0 });
}
// Must have a Negative offset, and e.deltaX is Negative so it is moving left.
else if (e.deltaX < 0) { // Case when element is at 0, and mouse movement is going left.
$(this).css({ 'margin-left': marginLeftNum + e.deltaX });
}
else { // Moving Right when not on 0
$(this).css({ 'margin-left': marginLeftNum + e.deltaX });
}
})
.on('swipeleft', function (e) {
console.log("swipeleft");
})
.on('activate', function (e) {
// not seeing this activate go off, i think this is custom function we can add on if swipe left hits a threshold or something.
console.log("activate");
})
.on('moveend', function (e) {
console.log("move end");
wrap.removeClass('notransition');
});
var createBackgroundSpacer = function ($shoppingListRow) {
var border = 2;
$shoppingListRow.css({ 'width': $shoppingListRow.width() + border, 'height': $shoppingListRow.height() + border }); // gives itself set width and height
$shoppingListRow.addClass('swipable');
// placeholder HTML
var leftPlaceholder = $('<div class="leftPlaceholder"></div>').css({ 'height': $shoppingListRow.height()});
var rightPlaceholder = $('<div class="rightPlaceholder"></div>')
var rightContent = $('<div class="rightContent">Delete</div>').css({ 'height': $shoppingListRow.height()});
rightPlaceholder.append(rightContent);
var placeHolder = $('<div class="swipePlaceholder clearfix"></div>'); // goes around the two floats.
placeHolder.css({ 'width': $shoppingListRow.width(), 'height': $shoppingListRow.height() });
placeHolder.append(leftPlaceholder, rightPlaceholder);
$shoppingListRow.before(placeHolder); // adds placeholder before the row.
$shoppingListRow.css({ 'marginTop': -($shoppingListRow.height() + border) });
};
});
I am working on a project for my programming class. I'd like to essentially have a canvas with a background element (say a room.jpg) and then maybe three interactive objects in the room (lamp.jpg, couch.jpg, desk.jpg). I'd like for it to be that if you hover over the lamp a small box or text pops out, giving you some information. Or maybe have it so if you click an image, the same concept happens. You know, something interactive with the objects in the canvas. Again, I'm new to canvas but we have to use it in our assignment. My current code is:
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var sources = {
room: 'room.jpg',
title: 'title.jpg'
};
loadImages(sources, function(images) {
context.drawImage(images.room, 0,0);
context.drawImage(images.title, 0,0);
});
}
But from what I understand, it makes the two jpegs a "permanent" canvas element (unable to be messed with). I had been trying to get it so that when I clicked I'd go from the title.jpg to the room.jpg but I've since given up. Essentially, all I want now is just to have the room.jpg appear when the page is first loaded, and have three other png objects on top (as objects in the room). Are these able to be interacted with, or do I have to put the images into the canvas in another way? Thanks for all your help and your patience!
// --- Image Loader ----
var images = {};
var loadedImages = 0;
var pictures = {
room: 'room.jpg',
title: 'title.jpg'
lamp1: 'lampoff.jpg'
lamp2: 'lampon.jpg'
};
function loadImages(sources, callback) {
var numImages = 0;
for(var src in sources)numImages++;
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
// --- Mouse Down Functionality ----
$('#canvas').addEventListener('mouseDown', function(e){
if(e.clientX){
var rect = this.getBoundingClientRect();
if(rect) clickCanvas(e.clientX - rect.left, e.clientY - rect.top)
else clickCanvas(e.clientX - this.offsetLeft, e.clientY - this.offsetTop);
}else if(e.offsetX) clickCanvas(e.offsetX, e.offsetY);
else if(e.layerX) clickCanvas(e.layerX, e.layerY);
else console.warn("Couldn't Determine Mouse Coordinates");
})
var lampOn;
function drawCanvas(showLamp){
lampOn = showLamp;
canvas.width = canvas.width //clears canvas
context.drawImage(images.room, 0,0);
context.drawImage(images.title, 0,0);
if(lampOn){
context.drawImage(images.lamp2, 100,100);
}else{
context.drawImage(images.lamp1, 100,100);
}
}
function clickCanvas(x,y){
console.log('clicked canvas at:',x,y)
if(clickedLamp){
drawCanvas(!lampOn)
}
}
loadImages(pictures, function(images) {
drawCanvas(false)
});
Make sure to replace "clickedLamp" and "#canvas"! The idea here is that you redraw the same canvas, using the same function. Everytime you modify any of it, you rerender ALL of it. See if you can get this example working, it will help clarify alot. If you don't understand something comment
this is what i'm trying to accomplish;
With a click on a movieclip (cannon_mc)
a shot is being fired (ball_mc)
The longer mouse is down, the speed of wich the ball is fired with should increase.
My question to you is;
What is the most efficient way to accomplish this?
With a timer or something like this;
var isMouseDown:Boolean = false;
var speed= 10;
myCannon.addEventListener(MouseEvent.MOUSE_DOWN,buttonPressed);
function buttonPressed(event:MouseEvent){
//trace("down");
isMouseDown == true;
if(isMouseDown == false)
{
speed == +1
}
}
The MOUSE_DOWN event is only fired once. To get the effect you want you need the combo of MOUSE_DOWN and MOUSE_UP Event Handlers.
You can set a variable to true in the MOUSE_DOWN event alongwith the current timestamp from flash.utils.getTimer()
Then on MOUSE_UP, if the variable you set in MOUSE_DOWN is true, you compute the time elapsed and set the power accordingly.
Example:
var isMouseDown:Boolean = false;
var mouseDownBegin:int;
var speed = 10;
var speed_inc = 2; // give it in per second
var speed_max = 100; // max speed possible
// add event handlers
myCannon.addEventListener(MouseEvent.MOUSE_DOWN, buttonPressed);
myCannon.addEventListener(MouseEvent.MOUSE_UP, buttonReleased);
function buttonPressed(event:MouseEvent){
isMouseDown = true;
mouseDownBegin = flash.utils.getTimer();
}
function buttonReleased(event:MouseEvent){
if(isMouseDown == true){
// get time between press and release
var timeElapsed = flash.utils.getTimer() - mouseDownBegin;
// reset isMouseDown
isMouseDown = false;
// compute speed
speed += int(Math.floor(speed_inc * (timeElapsed / 1000.0)));
speed = Math.min(speed, speed_max);
// code to fire ball with new speed
// .......
}
}
You can also add an ENTER_FRAME event and animate a power gauge or something for visual effect
Update
As pointed to by The_asMan, MOUSE_UP event will not fire if the mouse is dragged and released Outside the stage. To handle this case add and event listener for MOUSE_LEAVE event with the callback as the copy of buttonReleased function but which takes an Event object:
function buttonReleasedOutsideStage(event:Event){
if(isMouseDown == true){
// get time between press and release
var timeElapsed = flash.utils.getTimer() - mouseDownBegin;
// reset isMouseDown
isMouseDown = false;
// compute speed
speed += int(Math.floor(speed_inc * (timeElapsed / 1000.0)));
speed = Math.min(speed, speed_max);
// code to fire ball with new speed
// .......
}
}
stage.addEventListener(Event.MOUSE_LEAVE, buttonReleasedOutsideStage);
(in very short pseudocode)
Write some event handlers:
onMouseDown: sets flag _mouseDown, set power to zero
onFrame: if (_mouseDown) power++;
onMouseUp: clears flag _mouseDown and fires ball with accumulated power
Framerate independent version:
onMouseDown: _loadStart = getTimer(); _mouseDown = true; _power = 0;
onFrame: if (_mouseDown) delta = getTimer() - _loadStart; _power += delta;
onMouseUp: shot the ball with _power, _mouseDown = false;