Copy link to clipboard
Copied
Hy community!
INFO: I am a video editor and not a fulltime coder.
For the production of html5 banners, which only have the whole stage as link and no other interaction I have a question about timing.
I am building the whole banner on layers which contain the different elements on a single layer.
All elements are movie clips, so i can work with them in the code.
Everything is pretty self-explaining when i work with the timeline and set keyframes for animation and make motion tweens but this is a lot of work when i set up different sizes of banners. I now try to just set it up as it should look at the end of the animation and programm every animation in code. most of it works fine. I mostly use alpha or position animations.
I think this is the best way to deal with easy animation banners - or do you still set up everything with tweens in the timeline?
My question: (maybe it´s a stupid one or really easy to explain for a programmer)
Can I code everything in the first frame and say there "at frame 50" or "after 2 seconds" do this: ...
So i don´t need to make keyframes at the exact frame times and change it there.
It will be a lot easier later on to just change the time of the lenght or start of an animation for 1 sujet for every banner-size.
so at frame 1 i have an action:
var logo1_FadeInCbk = fl_FadeSymbolIn.bind(this);
this.addEventListener('tick', logo1_FadeInCbk);
this.logo1.alpha = 0;
function fl_FadeSymbolIn()
{
this.logo1.alpha += 0.05;
if(this.logo1.alpha >= 1)
{
this.removeEventListener('tick', logo1_FadeInCbk);
}
}
and at frame 180 i have another to fade it back.
Is it possible to code fade in and fade out at the same frame, using frame numbers or a timecode?
This would help a lot.
This would also help me with stopping the "rotate continuously" after a time period. Right now I have no sollution for this one also.
thank you!
FRAME BASED
createjs.Ticker.setFPS(30);
this.timeline.addTween(cjs.Tween.get(this.object1).wait(60).to({alpha:0},15));
TIME BASED
createjs.Tween.get(this.object1).wait(2000).to({alpha:0},500);
object1 is movie clip with instance name object1
Copy link to clipboard
Copied
Yes you can use CreateJS or GSAP.
Copy link to clipboard
Copied
thank you for your answer. as I am no real coder, would it be possible for you to show it to me as an example.
maybe just let the alpha of an object fade away after 2 seconds?
If i get it once as an example, I will know it for every other animation coming afterwards.
if i need to import a lot of files to it, there could be one problem. the whole banner must be under 150kb of data including all files as a zip.
So it could be a little problematic if I need to get a lot of files extra for including this code.
Copy link to clipboard
Copied
FRAME BASED
createjs.Ticker.setFPS(30);
this.timeline.addTween(cjs.Tween.get(this.object1).wait(60).to({alpha:0},15));
TIME BASED
createjs.Tween.get(this.object1).wait(2000).to({alpha:0},500);
object1 is movie clip with instance name object1
Copy link to clipboard
Copied
thank you very much!!!
the time based option works great and that´s what i was looking for. now i can set my positions, alpha and other stuff.
in one banner i have a rotate continuously function in it but i still don´t know how i can stop it after some time.
is there a way to delete a function after some time - for example this one?
this.addEventListener("tick",fl_RotateContinuously_3.bind(this));
function fl_RotateContinuously_3(){
this.buch1.rotation+=10;
}