Search the Community
Showing results for tags 'animation'.
Found 505 results
-
Hi Jack! I'm trying to synchronize sequence of audios obj_snd.attachSound("audio"+idAudio) and obj_snd.start(currentTween.position), with animation MyTimelineLite.append(TweenLite.to(obj_mc, 2 {_x:200, onStart:playAudio, onStartParams:[idAudio]}) Not found any topic about the issue and I think the greenSock (which is great) does not have native support this. I need to detect whether a tween has audio attached, and moving the slideControl (drag slide) resynchronize the audio related to that tween. (I think it would be something like onMidProgress:myFunc). I think the logic is to detect the occurrence of an append (TweenLite. ..), his CurrentProgress and see if it passes onStart: PlayAudio, onStart: Params [idAudio] to synchronize ... Other two questions: 1 - audios that last beyond the animation are not accounted for by the progressBar. 2 - I'm losing onStart event to position the marker of progress midle progress of a Tween. Annex. simple .FLA I appreciate any help, Thanks! sinc_audio_tween.zip -
Hi greensocks, I'm creating an animation sequence for an element in a site that I'm trying to get to start once the whole div has loaded. My difficulty isn't in starting the animation but in having the entire animation play. From my understanding of TimelineMax, each animation will play in order so if the 1st animation in the timeline doesn't execute, the following animations won't either. Am I wrong in that understanding? Here's what I've got now: <script language="JavaScript" type="text/javascript"> function playBdayTimeline() { var bdaySurprise = document.getElementById("headline1"); var ourBday = document.getElementById("headline2"); var bdayPromoGift = document.getElementById("promoGift"); var bdayPromoDay = document.getElementById("promoDay1"); var timelineIntro1 = document.getElementById("timelineIntro1"); var timelineIntro2 = document.getElementById("timelineIntro2"); var timelineIntro3 = document.getElementById("timelineIntro3"); var promoDeal = new TimelineMax(); promoDeal.from(bdaySurprise, .7, {css:{autoAlpha:0, top:'-20px'}, ease:Quad.easeOut}); promoDeal.from(ourBday, .6, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.to(bdayPromoGift, .6, {css:{alpha:1, scale:2}, delay:-.4, ease:Quad.easeOut}); promoDeal.to(bdayPromoDay, .6, {css:{autoAlpha:1}, delay:-.1, ease:Quad.easeOut}); promoDeal.from(timelineIntro1, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.2, ease:Quad.easeOut}); promoDeal.from(timelineIntro2, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.from(timelineIntro3, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.from(introSlider, .6, {css:{autoAlpha:0, }, ease:Quad.easeOut}); } </script> From the above, the second half of the timeline (bottom four of the promoDeal timeline) animate in beautifully smooth sequential order. However, they do so after the first half of the timeline just "pop" in... no animation whatsoever. If I change any of the properties in the first four lines (ie.change to scale: .5), they take but they don't animate so something seems to be working there... What's going on here? Why would only part of my timeline execute? Thanks for any ideas!!
-
Hi, everyone! I want to add functionality to my photo gallery app (Air mobile) - different types of animation of the thumbs of the photos. Now I did like the code below. This is the simplest move left-right and top-bottom. But I need more different patterns of animation y- the movement as a 3D carousel, spinning in a circle, orbiting, movement of the sun's rays and back, movement along the wave path etc. I would be very grateful if you have a ready-made pieces of code for these and similar animations with help TweenLite lib. [bindable] private var stageW:int = Capabilities.screenResolutionX; [bindable] private var stageH:int = Capabilities.screenResolutionY; private var itemsVector:Vector.<Image>=new Vector.<Image>(); private var xSpeedVector:Vector.<Number>=new Vector.<Number>(); private var ySpeedVector:Vector.<Number>=new Vector.<Number>(); stage.addEventListener(Event.ENTER_FRAME, update); private function moveSetup():void { for(var i:int = 0; i < FlexGlobals.topLevelApplication.objects.length; i++){ if (FlexGlobals.topLevelApplication.objects[i] is Image){ var item:Image=FlexGlobals.topLevelApplication.objects[i] as Image; item.x=Math.random()*stageW; item.y=Math.random()*stageH; var randomDirection:Number=Math.random()*2*Math.PI; this.addElement(item); itemsVector.push(item); xSpeedVector.push(2*Math.cos(randomDirection)); ySpeedVector.push(2*Math.sin(randomDirection)); } } } protected function update(event:Event):void { for(var i:uint=0;i<itemsVector.length;i++){ itemsVector[i].x+=xSpeedVector[i]; itemsVector[i].y+=ySpeedVector[i]; if(itemsVector[i].x>stageW){ itemsVector[i].x-=stageW; } if(itemsVector[i].x<0){ itemsVector[i].x+=stageW; } if(itemsVector[i].y>stageH){ itemsVector[i].y-=stageH; } if(itemsVector[i].y<0){ itemsVector[i].y+=stageH; } } } .
-
Hi all, I need to build a flash application that requires filtering of spots. Every time the user selects another filter i reload the layout function, remove all objects that are currently in the movieclip and then re-add them and re-apply the tween with one for lus. But for some odd reason, when i change the filter before all the tweens are completed, they stop rendering at the point i changed it. Causing the tween to get stuck... and displaying only half on the results. They get added in the display list but just aren't shown due to the tween not completing. Does someone has a solution? I think i need to reset the tweens on the object or clear something... override public function layout():void { var coloms:int = Math.floor(componentWidth/116.65); var padding:Number = 5; while(this.numChildren > 0) { TweenLite.killDelayedCallsTo(getChildAt(0)); TweenLite.killTweensOf(getChildAt(0)); this.removeChildAt(0); } if(tiles.length > 0) { trace('Thera are: '+this.numChildren+' in the displaylistt'); for(var i:int = 0; i < tiles.length; i++) { var spotThumb:SpotThumb = tiles[i]; spotThumb.x = (i % coloms) * (116.65 + padding); spotThumb.y = int(i / coloms) * (116.65 + padding); trace(i); switch(appModel.currentFilter) { case 'alle': default: { addChild(spotThumb); break; } case 'like': { break; } case 'monument': case 'foodendrinks': case 'vervoer': case 'shoppen': case 'hotel': { if(spotThumb.spotCat == appModel.currentFilter) { addChild(spotThumb); } break; } } TweenLite.from(spotThumb, 0.2, {alpha:0, delay: 0.1*i}); } } } Thanks in advance! Stephen
-
Hello everybody ::- ). I have a board with many well organized objects on it. I would like to create an animation where they all start circling at various speeds. But the problem is that I want them to start on their circle paths from their current locations, swirling around the center of the screen. Any idea how I could do this? I guess I could use Pythagora's theorem to find out the radius of the Circle, but I'm unsure how I could find out the progress of the Object onto its Circle Path, so that I only start the animation from that point. Otherwise, when I add it to the Path, it'll lose its original position and I don't want that.
