calendar with tween

[Luka22]

Hello....

i am doing simple calendar with tweens.. i have decided that i will do this on simple way, but i am sure that there is even easier way to do this..

for showing and hidding one month i use code

function nap_na_feb(e:MouseEvent):void
{
   //skrijemo JANUAR    
   TweenLite.to(naprej_na_feb, 1.5,{x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(januar, 1.5,{x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(prvi, 1.5,{x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(drugi, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(tretji, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(cetrti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(peti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(sesti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(sedmi, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(osmi, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(deveti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(deseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(enajsti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(dvanajsti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(trinajsti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(stirinajsti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(petnajsti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(sestnajsti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(sedemnajsti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(osemnajsti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(devetnajsti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(dvajseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(enaindvajseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(dvaindvajseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(triindvajseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(stiriindvajseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(petindvajseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(sestindvajseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(sedemindvajseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(osemindvajseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(devetindvajseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(trideseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});
   TweenLite.to(enaintrideseti, 1.5, {x:0, ease:Elastic.easeOut, delay:0});

   //pokažemo FEBRUAR
   TweenLite.to(nazaj_na_jan, 1,{x:522, ease:Elastic.easeOut, delay:0.4});
   TweenLite.to(naprej_na_mar, 1,{x:844, ease:Elastic.easeOut, delay:0.4});
   TweenLite.to(februar, 1,{x:612, ease:Elastic.easeOut, delay:0.3});
   TweenLite.to(prvi1, 1,{x:496.51, ease:Elastic.easeOut, delay:0.4});
   TweenLite.to(drugi1, 1, {x:546.05, ease:Elastic.easeOut, delay:0.5});
   TweenLite.to(tretji1, 1, {x:595.60, ease:Elastic.easeOut, delay:0.6});
   TweenLite.to(cetrti1, 1, {x:645.15, ease:Elastic.easeOut, delay:0.7});
   TweenLite.to(peti1, 1, {x:694.70, ease:Elastic.easeOut, delay:0.8});
   TweenLite.to(sesti1, 1, {x:744.25, ease:Elastic.easeOut, delay:0.9});
   TweenLite.to(sedmi1, 1, {x:793.80, ease:Elastic.easeOut, delay:1});
   TweenLite.to(osmi1, 1, {x:843.35, ease:Elastic.easeOut, delay:1.1});
   TweenLite.to(deveti1, 1, {x:496.50, ease:Elastic.easeOut, delay:1.2});
   TweenLite.to(deseti1, 1, {x:546.05, ease:Elastic.easeOut, delay:1.3});
   TweenLite.to(enajsti1, 1, {x:595.60, ease:Elastic.easeOut, delay:1.4});
   TweenLite.to(dvanajsti1, 1, {x:645.15, ease:Elastic.easeOut, delay:1.5});
   TweenLite.to(trinajsti1, 1, {x:694.70, ease:Elastic.easeOut, delay:1.6});
   TweenLite.to(stirinajsti1, 1, {x:744.25, ease:Elastic.easeOut, delay:1.7});
   TweenLite.to(petnajsti1, 1, {x:793.80, ease:Elastic.easeOut, delay:1.8});
   TweenLite.to(sestnajsti1, 1, {x:843.35, ease:Elastic.easeOut, delay:1.9});
   TweenLite.to(sedemnajsti1, 1, {x:496.50, ease:Elastic.easeOut, delay:2.0});
   TweenLite.to(osemnajsti1, 1, {x:546.05, ease:Elastic.easeOut, delay:2.1});
   TweenLite.to(devetnajsti1, 1, {x:595.60, ease:Elastic.easeOut, delay:2.2});
   TweenLite.to(dvajseti1, 1, {x:645.15, ease:Elastic.easeOut, delay:2.3});
   TweenLite.to(enaindvajseti1, 1, {x:694.70, ease:Elastic.easeOut, delay:2.4});
   TweenLite.to(dvaindvajseti1, 1, {x:744.25, ease:Elastic.easeOut, delay:2.5});
   TweenLite.to(triindvajseti1, 1, {x:793.80, ease:Elastic.easeOut, delay:2.6});
   TweenLite.to(stiriindvajseti1, 1, {x:843.35, ease:Elastic.easeOut, delay:2.7});
   TweenLite.to(petindvajseti1, 1, {x:496.50, ease:Elastic.easeOut, delay:2.8});
   TweenLite.to(sestindvajseti1, 1, {x:546.05, ease:Elastic.easeOut, delay:2.9});
   TweenLite.to(sedemindvajseti1, 1, {x:595.60, ease:Elastic.easeOut, delay:3});
   TweenLite.to(osemindvajseti1, 1, {x:645.15, ease:Elastic.easeOut, delay:3.1});

}

 

so each day in month has own instance so this is about 370 instances just for showing days

 

i need some kind off a tip how should i do this with less code... and less copy paste

 

TNX!

[Carl]

it would help if you could post or attach a swf that shows how this is being displayed and animated.

there is a bit getting lost in translation and I'm having a hard time visualizing how all the objects have tween to an x of 0.... are they stacked vertically, or in a grid?

 

the good news is that you can make your code much smaller, by perhaps 95%.

 

I suggest you look into the TweenMax allTo() method.

 

if you put all your days into an array like

 

var daysArray:Array = new Array(prvi, drugi, tretji, cetrti, peti, sesti, sedmi)

 

you can tween them all to an x:0 like this

 

TweenMax.allTo(daysArray, 1.5,  {x:0, ease:Elastic.easeOut, delay:0})

 

to remove them from the screen one by one and move them 500 pixesl from where they are with a little delay inbetween you could do

 

TweenMax.allTo(daysArray, 1.5,  {x:"500", ease:Elastic.easeOut}, .1) //the .1 is a tenth of a second delay.

 

I just did a little video on the basics of the TweenMax allTo here:

http://www.snorkl.tv/2011/02/five-hidde ... tweenlite/ watch the last video

[Luka22]

Great tip!

 

here is my swf... it is missing mask (so only on month will be shown)

[Carl]

i looked at your swf. it seems to be working really well.

 

when you tween out all the days at once, you could probably have all the days for a month in a container movieclip and just tween the container / parent.

 

for the staggered tweens, the allTo() ar allFrom() methods of tweenMax will save you a ton of time and typing.