I have multiple Tweens in CreateJS/TweenJS:
createjs.Tween.get(elem1).to({..});
createjs.Tween.get(elem2).to({..});
In timeline, I need to stop one of Tweens.
I tried:
var tween1 = createjs.Tween.get(elem1).to({..});
var tween2 = createjs.Tween.get(elem2).to({..});
and then:
tween1.setPaused(true);
But it's returns error that: .setPaused() is not a function.
How to stop one of Tweens that I need?
You just need to remove the tween with createjs.Tween.removeTweens(elem)
See doc here: http://createjs.com/docs/tweenjs/classes/Tween.html#method_removeTweens
Are you sure you are referencing the tween correctly?
Here is a quick sample I made to start/stop tweens using setPaused: http://jsfiddle.net/lannymcnie/cm2we3wk/
It creates tweens like this:
var tween1 = createjs.Tween.get(shape, {loop:true})
.to({x:550}, 1000, createjs.Ease.quadOut)
.to({x:50}, 1000, createjs.Ease.quadIn);
And then toggles them using setPaused:
// tween1 is passed in as the tween variable.
if (tween.paused) {
tween.paused = false;
tween.setPaused(false);
} else {
tween.paused = true;
tween.setPaused(true);
}
Related
I'm trying to create a slider that will update every time a slide is altered. I've got it set to observe, observeParents, and observeChildren, and it works the first time I show or hide slides, but it's only working once. Is there a good workaround for this?
Here's a link to the page with the slider on it. Click the color swatches to see what I'm talking about. Thanks in advance!
I figured out a workaround! I added a data-element called data-slides that updates on the container when you click to make the slideshow change, like so.
thumbnails.each(function() {
var wrapper = $(this);
container = $('.swiper-container');
color = colorLabel.val();
while (wrapper.parent().children().length === 1) {
wrapper = wrapper.parent();
}
if (jQuery(this).attr('alt') === optionValue) {
wrapper.fadeIn('500').show();
container.attr('data-slides', color);
} else {
wrapper.fadeOut('500').hide();
}
});
It triggers the observe function and allows it to update as necessary.
var root = this;
function go(){
createjs.Tween
.get(root.mvpano, {override:true} )
.to({x:100}, duration: **here I want to place a variable**, createjs.Ease.cubicOut);
};
So that... is posible to use a variable to set the tween duration?
You can put a variable in as any property (see this fiddle). Note that once you create the tween, if the variable changes, the tween will not.
function go(duration, position){
createjs.Tween
.get(s, {override:true} )
.to({x:position}, duration, createjs.Ease.cubicOut);
};
I want bring to front movieclip on Press
and bring to back movieclip on Release
from movieclip in just one layer
I use
this.swapDepths (depth)
does not work
code:
this.onPress = function(){
this.swapDepths(100);enter code here
}
this.onRelease = function(){this.swapDepths(-100);}
please help me
You may want to use this:
this.onRelease = function() {
this.swapDepths(mc1);
};
this.onRelease = function() {
this.swapDepths(mc2);
};
mc1 and mc2 are the instance names of the 2 movieclips.
use "this.mc1" / "this.mc2" if those movieclips are inside the button object.
That way, they simply trade Depths with each other without you knowing what depth each on has.
Lets say you have this "char" object placed in the screen(not generated dynamically) and you have this "enemy" object attached with the following code :
var enemy = _root.attachMovie("enemyBmp","enemyBmp",1);
Now your problem is that "enemy" object appears in top of your "char" object.
What you need to do now is :
enemy.swapDepths(char);
I looked at these links
http://www.tokbox.com/opentok/api/tools/js/documentation/overview/publish.html
http://www.tokbox.com/opentok/api/tools/js/tutorials/overview
but their are no examples for publishingunpublishing manually, that is, publishing/unpublishing without using 'streamCreated'/'streamDestroyed' event handler respectively.
The reason I want to do this is that I have a button to publish/unpublish so that the user can do it at will.
Is there a way to do this?
Yes and it is very simple. Check out the prepublish source code to see how. There are 2 functions, startPublishing() and stopPublishing() which achieve this.
Primarily they use session.publish(publisher);to publish and session.unpublish(publisher); to unpublish.
Here is code I have used to work off:
// Called by a button to start publishing to the session
function startPublishing() {
if (!publisher) {
var parentDiv = document.getElementById("myCamera");
var publisherDiv = document.createElement('div'); // Create a div for the publisher to replace
publisherDiv.setAttribute('id', 'opentok_publisher');
parentDiv.appendChild(publisherDiv);
var publisherProps = {
width : VIDEO_WIDTH,
height : VIDEO_HEIGHT
};
publisher = TB.initPublisher(apiKey, publisherDiv.id, publisherProps); // Pass the replacement div id and properties
session.publish(publisher);
show('unpublishLink');
hide('publishLink');
}
}
//Called by a button to stop publishing to the session
function stopPublishing() {
if (publisher) {
session.unpublish(publisher);
}
publisher = null;
show('publishLink');
hide('unpublishLink');
}
I have a page of checkboxes, in some cases more than 100. I'm currently doing this:
$('form[name=myForm] input[name=myCheckbox]').change(function(){
var numChkd = $('input[name=myCheckbox]:checked').size();
console.log(numChkd);
};
But as you could imagine this can get wicked slow. Is there a better way to bind an event to multiple elements? This works, but I want to know if there is a better way?
You can bind an event to the parent container that will wrap all of the checkboxes and then check if the object that caused an event is a checkbox. This way you only bind one event handler. In jQuery you can use $.live event for this.
Don't recount every time a checkbox changes. Just use a global variable, like this:
var CheckboxesTicked = 0;
$(document).ready(function() {
CheckboxesTicked = $(":checkbox:checked").length;
$(":checkbox").change(function() {
if ($(this).is(":checked")) {
CheckboxesTicked += 1
} else {
CheckboxesTicked -= 1
}
});
});
Btw, the documentation states that you'd better use .length instead of .size() performance wise.
You could create a container element (like a Div with no styling) and attach the event handler to the container. That way, when the change() event happens on one of the checkboxes and percolates up the DOM, you'll catch it at the container level. That's one way to make this faster.
You should use .delegate(). One binding on a parent element can replace all the individual bindings on the child elements. It's perfect for this situation (and also solves the problem of attaching behavior to dynamically-added elements, should the need arise).
$('form[name=myForm]').delegate('input[name=myCheckbox]','change', function(){
var numChkd = $(this).siblings(':checked').length; // assuming siblings
console.log(numChkd);
});
This is how I would approach it:
$('form[name=myForm]').each(function() {
var $form = $(this),
$boxes = $form.find('input[name=myCheckbox]');
$form.delegate('input[name=myCheckbox]', 'change', function() {
var numChkd = $boxes.filter(':checked').length;
console.log(numChkd);
});
});
This takes advantage of caching the $boxes selection. It will look for all the boxes when it sets up the event. It uses .delegate() to attach an event to the form which will get fired anytime an child input[name=myCheckbox] creates a change event. In this event handler, you can easily filter the already obtained list of checkboxes by which ones are :checked and get the length of the matched elements. (The documentation for .size() basically states there is no reason to ever use it... It just returns this.length anyway...)
See this fiddle for a working demo
demo: http://jsfiddle.net/kKUdm/
$(':checkbox').change(function(){
if($(this).is(':checked')){
var name = $(this).attr('name');
var value = $(this).val();
console.log(name + ':' + value);
}
});
Var $chks = $(":checkbox");
Var ChkCount =0;
Var chktimer =0;
Function updateChkCount(){
ChkCount = $chks.filter(":checked").length;
$chks.end();
// do something witb ChkCount
}
$chks.bind("check change", function(){
clearInterval(chktimer);
chktimer = setInterval("updateChkCount()",250);
});