 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUI Tutorial 17 - The FX Engine
written by vegu on 23 Dec, 2006 01:25:53
A live example of this tutorial can be found here.The vegUI FX engine is a pretty recent addition and hardly done. I even contemplated adding it to the release package, but i figure why not. It only sports two effects right now, fade out and fade in, but those work solidly enough. My goal with the FX engine was the ability to easily hook any effect to any vegUI element.
The target of our effect testing will be a simple vegUI node element. We will be using the same manager element we have used in the previous tutorials so i will skip posting that code here.
Code: JavascriptmyNode = Manager.get_new(VUI_NODE);
myNode.set('div', 100, 100, 50, 50);
myNode.T.Css.backgroundColor = '#838383';
Manager.build_element(myNode);
Lets start by having our node fade out slowly when the page is loaded. Before we can use the fx engine of vegUI we need to initialize it, we do that by calling the init_fx() method of the manager.
Code: JavascriptManager.init_fx(30);
The argument we pass to the function is the interval of the FX timer. Its worth to note that every vegUI effect uses this timer. I wouldnt recommend going much lower than 30 ms though as that can be load heavy on weaker computers, 30 ms allows a smooth animation while not forcing the computer to its knees. If you want to be save you can even set it to 50 ms :).
Okay, as i said one of the main goals of the fx engine was simplicity, so hooking an effect to an element can be done in one line.
Code: JavascriptManager.FX.effect_add(
myNode, new VegUIFXFadeOut(1000)
);
Definition: VegUIFXManager.effect_add()
Load the page and test it :)
There is no built in way to loop an effect right now, but you can rest assured that this feature will be added in future versions of vegUI. However it is rather simple to write a function that does just that. The effect_add() method has a third optional argument, which if passed a function will be the function that is executed when the effect is done.
Lets make a loop that fades our node out and back in and out again and so forth. To do that we define a function called loop which is called when the initial effect is done, it then checks what type of effect has ended. If the effect that has ended was fade in then it will hook the fade out effect on the node and vice versa.
Code: Javascriptfunction loop(Effect) {
var newEffect = (Effect.type == VUI_FX_FADEOUT) ?
VegUIFXFadeIn :
VegUIFXFadeOut;
Manager.FX.effect_add(
Effect.Element,
new newEffect(1000),
function() { loop(this); }
);
}In order for this to work we also need to modify our initial effect hooking :D
Code: JavascriptManager.FX.effect_add(
myNode, new VegUIFXFadeOut(1000), function() { loop(this); }
);
Related Posts
Your Comment
Comments
No comments yet.
