I am trying to build a custom code in mootools 1.1, what am doing is when you click a button the container slideOut first and delay for few seconds let say 2sec then slideIn again, firstly the container is open...
The code:-
$('showMore').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut().delay(5000).slideIn();
e.stop();
});
The code is not working, it slides out but not the next one...
Read the documentation on the delay function - you invoke it on the function, not the object.
mySlide.slideOut().slideIn.delay(5000, mySlide);
Related
I need to get loop animation progress (and looped) information (if it will be in patch editor, it 's the outputs). But I can't find this information on documentation. How can I get needed information?
For "looped" you can use onAfterIteration event on the TimeDriver:
https://sparkar.facebook.com/ar-studio/learn/documentation/reference/classes/animationmodule.timedriver
For progress, unfortunately there isn't a progress available on the TimeDriver, but you can use a multiTrigger event listener on the animation signal. Depending on what exactly you are trying to achieve, there are a few different ways of doing it:
https://sparkar.facebook.com/ar-studio/learn/documentation/reference/classes/reactivemodule.scalarsignal
For example:
//setup your animation
const Animation = require('Animation');
let driver = Animation.timeDriver({durationMilliseconds:1000, loopCount:Infinity});
let sampler = Animation.samplers.linear(0,1);
let animation = Animation.animate(driver, sampler);
//add listener for "looped" to the driver
driver.onAfterIteration().subscribe(function(e){
//do stuff on here...
});
//add listener for progress to the animation signal
//this will trigger when the animation signal goes above .5
animation.multiTrigger(.5).subscribe(function(e){
//do stuff here...
})
I want to know that fitToView() finished completely.
Some program procedures do not work after fitToView() without setTimeout().
For example, the following code not work.
const dbid = [1141]
this.viewer.select(dbid)
this.viewer.fitToView(dbid, viewer.model)
zoom() //This will not work
//code from:
function zoom (){
var nav = viewer.navigation
var pos = nav.getPosition()
var target = nav.getTarget()
var viewdir = new THREE.Vector3()
viewdir.subVectors (pos, target).normalize()
// zooms out by 100 along the view direction
viewdir.multiplyScalar (1000)
pos.add(viewdir)
nav.setPosition(pos)
}
The following code work well.
this.viewer.fitToView(dbid, viewer.model)
setTimeout(function(){
zoom() //This will work fine
}, 2000)
However, I don't want to use the setTimeout as much as possible.
Is there a way to know that fitToView () is finished completely?
If you use version 3.2.1 of the viewer a new event Autodesk.Viewing.CAMERA_TRANSITION_COMPLETED, it will be fired while following transitions are finished:
Go Home transition
Focus / Fit to View transition
Restore State transition
Named Views transition
Any other camera transitions
// Hook the event
viewer.addEventListener(Autodesk.Viewing.CAMERA_TRANSITION_COMPLETED, function(){
console.log('camera is no longer moving');
});
// Trigger an action that will move the camera and fire the event
viewer.fitToView();
You can see more about the Viewer Version changes here.
https://developer.autodesk.com/en/docs/viewer/v2/overview/changelog/3.2.1/
I’ve made an animated mesh in Blender containing two animations clips that I named intro and idle. I’ve export it with the Blender exporter in JSON. Everything works great. I can toggle which animation I want to play. My problem is that I want to play the first animation entirely and then switch to the second animation that I’ll set to loop.
Here is the parts of the code I use for the JSON and animation part :
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('models/feuille(19fevrier).json',
function (geometry, materials) {
mesh = new THREE.SkinnedMesh(geometry,
new THREE.MeshLambertMaterial({
skinning: true
}));
mixer = new THREE.AnimationMixer(mesh);
action.intro = mixer.clipAction(geometry.animations[ 0 ]);
action.idle = mixer.clipAction(geometry.animations[ 1 ]);
action.intro.setEffectiveWeight(1);
action.idle.setEffectiveWeight(1);
action.intro.enabled = true;
action.idle.enabled = true;
action.intro.setLoop(THREE.LoopOnce, 0);
scene.add(mesh);
scene.traverse(function(children){
objects.push(children);
});
action.intro.play();
});
What I was looking for is a function that tells me that the action is complete, somethings like onComplete event when a clipAction finished playing. I found this response on the three.js GitHub :
mesh.mixer.addEventListener('finished',function(e){
// some code
});
It seems to work but I don’t really understand the addEventListener in that context and neither what function(e) means.
There is the link of the code I found on GitHub
addEventListener is part of the standard JavaScript dispatchEvent/addEventListener concept for handling events. The three.js Animation subsystem dispatches an event whenever the animation is finished. From AnimationAction.js:
this._mixer.dispatchEvent( {
type: 'finished', action: this,
direction: deltaTime < 0 ? -1 : 1
} );
As you can see, the e event argument provides you with the complete AnimationAction object (e.action), as well as an integer representing the direction of the animation (e.direction).
Do not feel discouraged by the fact that this is undocumented behavior (three.js has grown a lot faster than Mr Doob could ever properly document). Make use of the available functionality, but do keep an eye open for possible changes in feature releases.
I'm having a serious problem that is getting me nervous:
I've made a button _btn that includes ROLLOVER and ROLLOUT animations with coding (an nested movieclip instance called barra that increases to half alpha when you hover over and decreases when you hover out).
[Here it should go a descriptive image but I'm new and I need 10 reputation. I'll appreciate your help]
This works perfectly but the problem occurs when I move my cursor very quickly from one point to another, with the button in between. It seems that the ROLLOUT function is not detected, so the ROLLOVER animation keeps working (and if you look carefully, the animation stops for a few seconds and then continues).
[Here it should go another descriptive image too]
This is the code in the Actions layer:
//Funciones ROLL OVER
function _btnOver(event:MouseEvent):void {
_btn.buttonMode = true;
_btn.addEventListener(Event.ENTER_FRAME,_btnFadeIn);
}
function _btnFadeIn(event:Event):void {
_btn.barra.alpha += 0.1;
if (_btn.barra.alpha >= 0.5)
{
_btn.removeEventListener(Event.ENTER_FRAME,_btnFadeIn);
}
}
_btn.addEventListener(MouseEvent.ROLL_OVER,_btnOver);
//Funciones ROLL OUT
function _btnOut(event:MouseEvent):void {
_btn.addEventListener(Event.ENTER_FRAME,_btnFadeOut);
}
function _btnFadeOut(event:Event):void {
_btn.barra.alpha -= 0.1;
if (_btn.barra.alpha <= 0.2)
{
_btn.removeEventListener(Event.ENTER_FRAME,_btnFadeOut);
}
}
_btn.addEventListener(MouseEvent.ROLL_OUT,_btnOut);
Click here if you want to download the FLA and SWF files, so you can see the problem clearly.
I barely know how to use ActionScript 3 (my only programming knowledge is Processing) and I don't have time now to learn it from head to toe, but I've researched about the problem and it's still not clear.
With tutorials and guides, I managed to learn how to create and understand this code, and I think the problem might be in the functions of the events ROLL_OVER and ROLL_OUT, which contain the addEventListener of the ENTER_FRAME events (where the animations actually are), respectively. But I don't know exactly what I have to do to fix it, what should I add or change.
I would be really glad if someone could help with this, I'm frustrated! What do you recommend me to do?
Thanks in advance
(PD: I don't understand most of the programming language. If you can be as clear and direct as possible, I'll really appreciate it)
Apparently your troubles lay in incoherent animation sequence by using enter frame listeners. You are running two independent listeners, both altering alpha of a single object, this creates a conflict, only one will work (you can determine which if you add both at once and trigger events, the resultant alpha value will indicate which listener changes it last) and you apparently expect one to do a fade in while the other to do a fade out. Instead, you should use one listener (probably even persistent) and give your object "target alpha" property as well as delta to change alpha per frame. An example:
var bbta:Number=0.2; // btn.barra's target alpha
_btn.addEventListener(Event.ENTER_FRAME,_btnFade);
function _btnFade(e:Event):void {
var a:Number=_btn.barra.alpha;
if (Math.abs(a-bbta)<1e-8) return;
// no sense of setting alpha with minuscule difference
const delta:Number=0.1; // how fast to change per frame
if (a>bbta) {
a-=delta;
if (a<=bbta) a=bbta;
} else {
a+=delta;
if (a>=bbta) a=bbta;
}
_btn.barra.alpha=a;
}
function _btnOver(event:MouseEvent):void {
_btn.buttonMode = true; // move this elsewhere, if you don't cancel buttonMode
bbta=0.5; // set target alpha, the listener will do a fade-in
}
function _btnOut(event:MouseEvent):void {
bbta=0.2; // set target alpha, the listener will do a fade-out
}
I edited some code in here, basically i am checking hover state onLoop function, so you can change your settings on here
import flash.events.Event;
var isRolledOver:Boolean = false;
//Funciones ROLL OVER
function _btnOver(event:MouseEvent):void {
isRolledOver = true;
}
function _btnOut(event:MouseEvent):void {
isRolledOver = false;
}
_btn.addEventListener(MouseEvent.ROLL_OVER,_btnOver);
_btn.addEventListener(MouseEvent.ROLL_OUT,_btnOut);
this.addEventListener(Event.ENTER_FRAME,onLoop);
function onLoop(e){
if(this.isRolledOver){
if(_btn.barra.alpha < 0.5) _btn.barra.alpha += 0.1;
}
else{
if(_btn.barra.alpha > 0.5 || _btn.barra.alpha > 0) _btn.barra.alpha -= 0.1;
}
}
I added the sample fla in case
I'm making a website and I want to make a time delay between 16 pages, I've done this:
var myDelay:Timer = new Timer(700,1);
myDelay.addEventListener(TimerEvent.TIMER, showMessage);
myDelay.start();
function showMessage(event:TimerEvent):void{
gotoAndPlay("anim1");
}
stop();
Then In page anim1 I have:
stop();
b4.addEventListener(MouseEvent.ROLL_OVER, b4_over);
b4.addEventListener(MouseEvent.CLICK, b4_clicked);
ma.addEventListener(MouseEvent.ROLL_OVER, ma_over);
ma.addEventListener(MouseEvent.CLICK, ma_clicked);
pt1.addEventListener(MouseEvent.MOUSE_OVER, pt1_over);
en.addEventListener(MouseEvent.MOUSE_OVER, en_over);
var myDelay2:Timer = new Timer(700,1);
myDelay2.addEventListener(TimerEvent.TIMER, showMessage2);
myDelay2.start();
function showMessage2(event:TimerEvent):void{
gotoAndPlay("anim2");
}
stop();
And this continues until page "anim19". The problem is that with this my click buttons don't work very well (I click, then I go to another page and suddenly goes back to the main page) and with the ROLL_OVER effect time becomes a litle weird... Can you tell me what's wrong with my code?
I figure it out what was wrong, aparently I'm starting time and not finish it in here:
myDelay.start();
So every delay must have the stop event so i added in the functions b4_over, b4_clicked, ma_over, ma_clicked, pt1_over, en_over)
like this:
function b4_over(event:MouseEvent):void
{
this.gotoAndStop("page2");
myDelay.stop();
myDelay.stop();
myDelay2.stop();
myDelay3.stop();
myDelay4.stop();
myDelay5.stop();
myDelay6.stop();
myDelay7.stop();
myDelay9.stop();
myDelay10.stop();
myDelay11.stop();
myDelay12.stop();
myDelay13.stop();
myDelay14.stop();
myDelay15.stop();
myDelay16.stop();
myDelay17.stop();
myDelay18.stop();
myDelay19.stop();
}
And everything started to work together just fine.