Well, yes :-)
There are no mouse driven fx events ... My "Storyboard" is just a
small Class to control a stack of functions using .delay() to build up
a timeline.
----------------------
Classfile:
----------------------
var Storyboard = new Class({
keyframes: {},
initialize: function()
{
},
addFrame: function(n, t, p, c)
{
this.keyframes[n] = { 'startat': t, 'ex': c, 'period' :
p };
return this;
},
execFrame: function(key)
{
this.keyframes[key].ex();
if( this.keyframes[key].period )
this.execFrame.delay(
this.keyframes[key].period, this, key);
},
run: function()
{
for( key in this.keyframes )
{
this.execFrame.delay(
this.keyframes[key].startat, this, key);
}
}
});
----------------------
Then you push in the Events to be executed, eg. my Testpage Script:
----------------------
var DEF = {
'unit' : 'px',
'link' : 'wait',
'fps' : 100
};
SB = new Storyboard();
SB.addFrame('logoComeIn',500,false,function(){
LT = new Fx.Tween(document.id('pLogo'),
Object.merge(DEF,{
'duration' : 1250,
'transition' : 'back:out'
})
).start('margin-left',[-182,15]);
}).addFrame('gearComeIn',1250,false,function(){
new Fx.Tween(document.id('rays'),
Object.merge(DEF,{
'duration' : 2000,
'transition' : 'back:out',
'onStart' : function(){
document.id('rays').setStyle('display','block');
css3_rotator(document.id('rays'), 0.10,
25)
}
})
).start('margin-left', -200);
}).addFrame('gearComeIn2',2400,false,function(){
new Fx.Tween(document.id('rays2'),
Object.merge(DEF,{
'duration' : 1250,
'transition' : 'quad:out',
'onStart' : function(){
document.id('rays2').setStyle('display','block');
css3_rotator(document.id('rays2'),
0.20, 25)
}
})
).start('margin-left', -120);
}).run();
The run() will start all the Functions with its configured delay() and
by that automaticly executes them at their given times.
Also the FPS Problem you mentioned is not a real problem (i hope)
because the delay will wait for a time, not an FPS.
There is no magic in it, yet :-) I have some ideas like to set no
execution time but define after which other keyframe it should be run
or automaticaly determine the actual maximum execution time and put it
at the end of the "movie" (or the begining,, shifting all other times
up or run in parallel ...) - everything may be possible but we will
see if it is worth the effort or just some bunch of senseless JS :-)
Will keep you informed
On 21 Mrz., 20:44, Rolf -nl <plentyofr...@gmail.com> wrote:
> kinda cool.. checked out the code briefly. but there are no mouse move
> fx changes are there? (briefly checked code == 10 sec)
>
> one thing that bugs me about animations is that the "frame rate" or
> speed is not the same across browsers; firefox is a lot slower than
> chrome or safari for example.
>
> will check the code once more soon, but then for 10 minutes :)
>
> On Mar 20, 4:17 pm, Fli7e <ultrakr...@googlemail.com> wrote:
>
> > Ok i gave myself a try and came up with some code that might be worth
> > a look ...
>
> > Same website as mentioned in my initial post. Very small code, no big
> > deal
>
> > On 20 Mrz., 15:31, Fli7e <ultrakr...@googlemail.com> wrote:
>
> > > Thank you for your answer an point to this nice tool.
>
> > > Maybe i described my intention wrong. I do not want to convert an
> > > existing SWF to Moo but i would create something "like" flash we often
> > > see on "Page enter" scenarios (incoming / building up elements).
>
> > > My hope is / was someone already developed or has knowledge of an
> > > existing keyframe like Class for Mootools.
>
> > > Say: StoryBoard.addKeyFrame(time,{options}).addKeyFrame(time,
> > > {options}).addKeyFrame(time,{options}).play();
>
> > > Hope you understand my idea.
>
> > > On 20 Mrz., 14:47, André Fiedler <fiedler.an...@googlemail.com> wrote:
>
> > > > There's a new Flash SWF to HTML5 conversation tool, developed by
> > > > adobe. Maybe this helps a bit. (only converts animations to
> > > > HTML/JS/CSS by now) downloadable for free at adobe labs.
>
> > > > Am 20.03.2011 um 13:39 schrieb Fli7e <ultrakr...@googlemail.com>:
>
> > > > > Hi Mootoolers,
>
> > > > > today i played around with my new minimalistic webpage and i had the
> > > > > idea to add, flash like, some small intro opener to it.
>
> > > > > I like what i cam up with but i asked myself: could this be done more
> > > > > elegant or even easier?
>
> > > > > You will find the demonstration (moving logo and incoming css3 rotated
> > > > > gear) online at
>
> > > > > http://www.artness.de/new_web/
>
> > > > > along with the used Tween-Code to the left.
>
> > > > > Any hints welcome
