Jump to content
Search Community

Carl last won the day on December 24 2023

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,825
  • Joined

  • Last visited

  • Days Won

    546

Everything posted by Carl

  1. unfortunately i don't have any as2 sliders laying around, so I had to do this in AS3. the general concepts are the same: -create a TimlineLite instance that contains the tweens of your various movie clips fading in and out in sequence. -when the slider updates, update the timeline's currentTime value. here is an interactive example: http://snorkl.tv/dev/slider/slider.html code: import com.greensock.*; import fl.events.SliderEvent; mc2.alpha = 0; mc3.alpha = 0; var _timeline:TimelineLite = new TimelineLite({paused:true}); //fade out mc1 _timeline.append(TweenLite.to(mc1, .5, {alpha:0})); //fade in mc2 then fade out _timeline.append(TweenMax.to(mc2, .5, {alpha:1, repeat:1, yoyo:true})); //fade in mc3 _timeline.append(TweenLite.to(mc3, .5, {alpha:1})); //set up as3 slider component slider_mc.minimum = 0; slider_mc.maximum = _timeline.duration; slider_mc.snapInterval = 0.01; slider_mc.liveDragging = true; slider_mc.addEventListener(SliderEvent.CHANGE, onChangeTime); function onChangeTime(event:SliderEvent):void { //update the timeline when the slider value changes via a slider drag _timeline.currentTime = event.value; } cs4 fla attached if you have a working as2 slider, i can attempt to add the timeline control to it if you can't figure it out. the greensock part of the code is virtually identical except the properties would be slightly different. for example: alpha:1 would be _alpha:100
  2. if you want different positions, you can't use allTo. allTo requires that ALL objects are going TO the same values. yes, you could keep all the positions in an array and then loop through the array to get the values.
  3. no, my mistake. when I opened your file i compiled and the greensock stuff wasn't there so I saved it into a directory with the greensock stuff, but stupid me forgot to think of moving ButtonSequencer.as there. doh. the good news is I think its working the way you want. the 2 main problems. 1: you had commented out the activation of the plugins 2: your removeTick and removeCross functions were creating new tweens to make tick and cross invisible... but that was not rewinding the timelines. so even though the mcs appeared invisible the timelines were still completed. telling the timelines to play() again was not doing anything because the "virtual playhead" of those timelines was already at the end. the solution was to make removeTick and removeCross reverse() t and c. here is the code: import flash.events.Event; import flash.events.MouseEvent; import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.AutoAlphaPlugin; import com.greensock.plugins.VisiblePlugin; TweenPlugin.activate([AutoAlphaPlugin, VisiblePlugin]); var buttonArray:Array = [one, two]; var enforcer:ButtonSequencer = new ButtonSequencer(buttonArray); var t:TimelineLite = new TimelineLite({paused:true}); var c:TimelineLite = new TimelineLite({paused:true}); t.append( new TweenLite(tick_Mc, 1, {autoAlpha:1, onComplete:removeTick})); c.append( new TweenLite(cross_Mc, 1, {autoAlpha:1,onComplete:removeCross})); this.cross_Mc.visible = false; this.tick_Mc.visible = false; this.cross_Mc.alpha = 0; this.tick_Mc.alpha=0; enforcer.addEventListener(ButtonSequencer.CORRECT, correct_onClick); enforcer.addEventListener(ButtonSequencer.INCORRECT, incorrect_onClick); function correct_onClick(event:Event):void { trace("correct"); if(enforcer.lastClicked == one) { trace("one clicked"); } else if(enforcer.lastClicked == two) { trace("two clicked"); } t.play(); } function incorrect_onClick(event:Event):void { trace("sorry, try again"); if(enforcer.lastClicked == one) { trace("one clicked"); ; } else if(enforcer.lastClicked == two) { trace("two clicked"); } c.play(); } function removeTick():void{ t.reverse(); } function removeCross():void { c.reverse(); } just paste all that over the existing code in your fla. should work.
  4. I don't mean to de-rail this thread or step on GreenSock's toes, but I came up with a solution that was easy for me to implement (whether its bullet proof remains to be seen). using the example in the documentation with the vertical scrolling of the super long text I decided to check the yVelocity which is used to determine the speed and direction of the throw to see if a flick or click took place. if Math.abs(yVelocity) is greater than 0, i do the whole throwProps thing AND set a boolean isThrown to true. onComplete of the throw i set isThrown back to false. in my button's click handler i wrap all the actions inside a conditional so that the actions only take place if isThrown = false. in the mouse_down handler that stops the tween i also se isThrown back to false. so far it works. check the file attached (no greensock code, use your own). there is a blue shape (btn) in the scrollable area. if you do a regular click on this blue shape it traces ("clicked"), if you drag and throw it will not trace anything. here is some of the code function mouseUpHandler(event:MouseEvent):void { mc.stopDrag(); mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; var yOverlap:Number = Math.max(0, mc.height - bounds.height); if(Math.abs(yVelocity)>0){ ThrowPropsPlugin.to(mc, { throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300} }, ease:Strong.easeOut, onComplete:switchIsThrown }, 10, 0.3, 1); isThrown = true; } } function switchIsThrown():void{ trace("throwDone"); isThrown = false; } function btnClick(e:MouseEvent):void{ if(!isThrown){ trace("clicked"); } } the only bad-ish thing seems to be that if you catch the thrown clip over a button, the click will fire when you release.
  5. you did not include ButtonSequencer in your zip so the files would not compile. from your error it seems that the problem has to do with the fact that removeCross and removeTick are expecting an event passed in. you code looks like this: t.append( new TweenLite(tick_Mc, 1, {autoAlpha:1, onComplete:removeTick})); function removeTick(event:Event):void{ TweenLite.to(tick_Mc, 2, {autoAlpha:0}); } when you use onComplete callbacks in tweens, an event isn't sent to the function. so change removeCross and removeTick to look like this function removeTick():void{ TweenLite.to(tick_Mc, 2, {autoAlpha:0}); } function removeCross():void { TweenLite.to(cross_Mc, 2, {autoAlpha:0}); }
  6. oh and for your example to get the value inside of: 250.0 just do function completeHandler(event:LoaderEvent):void { trace(event.target + " is complete!"); var planetsXML:XML = LoaderMax.getContent("planets.xml"); trace(planetsXML..item[0].valuedec); }
  7. what you need to do is a bit of reading on E4X which is what AS3 uses to search and access any type of xml data. I created an xml file that looks like this: Earth 1 mars 1.03 jupiter .41 and I built a small example that illustrates the various ways of parsing that data: import com.greensock.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.XMLLoader; var myPlanets:XMLLoader = new XMLLoader("planetData.xml", {onComplete:getXML}); myPlanets.load(); function getXML(e:LoaderEvent):void{ var loadedXML:XML = myPlanets.content as XML; trace("this is all the xml"); trace(loadedXML); //create an XMLList of just the planet nodes var planetsXML:XMLList = loadedXML..planet; trace("\n\nplanets XMLList"); trace(planetsXML); trace("\n\nall the name nodes") trace(planetsXML.name); trace("\n\nthe name of the first planet") trace(planetsXML[0].name); trace("\n\nthe rotation of the second planet") trace(planetsXML[1].rotation); trace("\n\nthere are this many planets"); trace(planetsXML.length()); trace("\n\nloop through the name and rotation of all planets") for(var i:uint = 0; i trace(planetsXML[i].name + " : " + planetsXML[i].rotation); } trace("\n\nget jupiter's rotation"); trace(planetsXML.(name=="jupiter").rotation); } the above code will output the following: this is all the xml Earth 1 mars 1.03 jupiter .41 planets XMLList Earth 1 mars 1.03 jupiter .41 all the name nodes Earth mars jupiter the name of the first planet Earth the rotation of the second planet 1.03 there are this many planets 3 loop through the name and rotation of all planets Earth : 1 mars : 1.03 jupiter : .41 get jupiter's rotation .41 I strongly recommend reading this E4X Tutorial http://www.republicofcode.com/tutorials/flash/as3xml/ ...ignore the loading part as XMLLoader makes it much easier, but do read the "processing the xml" section.
  8. great to hear that. thanks for letting us know. I was actually just going through the demo files seeing what I could do to help you. i'm very happy to hear you had success.
  9. Hello Mikael, Thank you for posting your problem. Perhaps you can be more clear on what you meant by: ThrowProps was intended to simulate the user interaction of scrolling through very long lists as you would find in an address book or perhaps itunes playlist. The potential uses for this plugin go well beyond this though. Others are looking for a way to gracefully flick between numerous screens or panels like when flicking through a series of images or "menu" screens. this second panel-flick action can be achieved without using throwProps. There are examples of BOTH styles on the the throwProps page here: http://www.greensock.com/throwprops/ the "panel flick' demo can be found at the bottom of that page in the FAQ section. ------------- I would suggest starting with the code in the examples provided and experiment with adding your own artwork/assets to the demos. be sure to take a look at the docs: http://www.greensock.com/as/docs/tween/ ... lugin.html --------- unlike other TweenLite/Max plugins there is a bit more responsibility left to the developer to determine how fast they want the throw to start and also determining min and max values. the examples show very reliable methods for determining the initial throw speed and the min/max values are optional. if you are still lost after tinkering with the demo files, don't hesitate to post back with more detailed questions. Best, Carl
  10. this is just a guess, but do you have autoPlay specifically set to false? if not, it defaults to true. so perhaps the video is playing prior to playVideo() being called. if that is not the reason, could you please provide some of the code you are using to create videoLoader and cause playVideo to be fired so that someone might be able to give you better instruction? thanks Carl
  11. it may be because fillColor is a private var and TweenLite doesn't have access to it. --- also to note, once you get the fillColor to tween, at that point you are really just changing a numeric value. You will need to re-apply fillColor to your shape as its tweening in order to see it change color. take a look at the hexColors example code inside the plugin exlorer: http://www.tweenmax.com
  12. yeah the transformation point that you are moving in flash only affects how your objects scale and rotate in Flash. All transformations that happen via actionscript use the registration point. the registration point is the little cross-hair icon. what you need to do is go into symbol edit mode either by double-clicking on your symbol on the stage or in the library. once you are "inside" the symbol you need to manually shift the artwork so the that the registration point is in the upperleft.
  13. while you are "multiplying' your movie clips inside your for loop add a line of code that will push a reference to that movie clip into an array. you can then use that array in your allTo. i don't know what code you are using but it could look something like this var movieclips_arr:Array = [] for (var i:int = 0; i var newMC:MovieClip = new WhateverTheClassOfYourSymbolInTheLibraryIs(); addChild(newMC) movieclips_arr.push(newMC); } timeline.insertMultiple( TweenMax.allTo(movieclips_array, 1, {tint:0x90E500, scaleX:0.2, scaleY:0.2}), timeline.duration );
  14. Carl

    Running a function

    good question. there are probably a few ways of doing this. the way i'm using here is pretty dynamic, meaning that it doesn't matter how long the durations of any of the tweens are. what I do is use a label to mark the point in time that the appendMultiple starts. I can get the time of this label using getLabelTime and then add .2 to it for when I want the custom function to run. import com.greensock.*; var tl:TimelineMax = new TimelineMax(); tl.insert(TweenLite.to(mc, 1, {x:100})); //add a label called "insertionPoint" after all previous tweens in the timeline tl.addLabel("insertionPoint", tl.duration); tl.appendMultiple(TweenMax.allTo([mc1, mc2, mc3], .5, {y:200}, .5)); //myFunction will get called .2 seconds after the previous appendMultiple starts tl.addCallback(myFunction, tl.getLabelTime("insertionPoint") + .2); function myFunction():void{ trace("myFunction just started"); }
  15. thanks for your offer. i'm going to be tied up for a few days. I would do it for free if I had the time.
  16. to answer your original question more clearly: to change its size adjust the width via: TweenLite.to(Mask,2,{width:560, ease:Expo.easeIn}); I really don't know what you are asking. are you moving something? or making it stretch? i have to assume you are moving something as the size issue has been addressed. this will move the mask to an x value of 40 TweenLite.to(Mask,2,{x:40, ease:Expo.easeIn}); this will move the mask 40 pixels to the right of its original position TweenLite.to(Mask,2,{x:"40", ease:Expo.easeIn}); note the use of quotes around "40". that means it is a relative value if you want to repeat a tween use TweenMax TweenMax.to(Mask,2,{x:40, ease:Expo.easeIn, repeat:1, yoyo:true}); Take a look at the TweenMax page http://www.greensock.com/tweenmax/ it gives examples and descriptions of all these concepts and features.
  17. from what you describe most of this sounds like the expected behavior if you create a timeline that tweens some text and then create another timeline that tweens the same text, I would imagine that the second timeline very well should interfere with the first and overwrite it. If you could explain what the desired behavior should be when the function gets called a second time and a new timelinelite is created, that would really help. Also I don't know if I'm understanding this: For further testing I added an onUpdate listener to the TimelineLite instance, and within that function I traced out a reference to the movieclip being tweened. Now as soon as the function gets called a second time, the 1st clip being tweened seems to be destroyed as the reference no longer traces out. it appears strange that the clip would be destroyed. What is onComplete:cleanUpFunc doing? perhaps if you provided what the onUpdate and onComplete function were doing it would be more clear. ------ Is there anyway you can simplify this scenario without using dynamic data? perhaps provide an example with just a single timeline with 1 or 2 hard-coded tweens and a button to trigger startAnimation()? ------ unfortunately, I'm not Jack, but would love to help you figure this out if possible. I imagine some of these answers would help him assist you as well. Best, Carl
  18. it appears both your examples are identical. I imagine its just a copy paste error or I'm missing something. most likely this is an Overwrite issue: http://www.greensock.com/overwritemanager/ add this line of code right after your greensock import statements OverwriteManager.init(2) that will allow multiple tweens to tween multiple properties of the same object without any issues
  19. 1 way would be to create a reference to your tween like: var glowTween:TweenMax = TweenMax.to(btn.bigGlow, 1, {alpha:1, repeat:-1, yoyo:true}); and then later on you could do glowTween.pause(); or you could do TweenMax.killTweensOf(btn.bigGlow) There are lots of handy TweenMax methods explained in the documentation: http://www.greensock.com/as/docs/tween/ ... hodSummary enjoy
  20. you want to use width instead of scaleX. width is an exact pixel value scaleX is a percentage where 1 is 100% and .5 would be 50%.
  21. great demonstration of the problem and cool effect. I'm pretty certain that the problem has to do with the fact that when you blur something with flash it automatically becomes a bitmap and those bitmaps have to be placed on whole pixel values. I'm guessing that there might be some rounding going on and its jumping to the wrong pixel. what you might want to do is simplify / isolate your blur tween as much as possible (one number/one tween). put an onComplete function on the tween to trace the y value of the clip after the tween completes. ---- it almost seems that the blur doesn't fully go away. did you try putting remove:true in your deblur tween? TweenMax.to(mc, 1, {blurFilter:{blurX:20, remove:true}});
  22. i just did a quick test, this works fine: import com.greensock.*; import com.greensock.easing.*; var bez:TweenMax = TweenMax.to(mc,3,{bezierThrough:[{x:209,y:183},{x:300,y:345},{x:350,y:320}],orientToBezier:true,onComplete:playAgain,onReverseComplete:playAgain,onUpdate:flipperoo}); function playAgain() { bez.reversed = ! bez.reversed; bez.resume(); } function flipperoo() { if (bez.reversed) { mc.rotation -= 180; } }
  23. thanks. that description makes more sense. and yes when a bezier tween reverses it just plays backwards, it doesn't flip the object that is rotating. I don't have a solution, perhaps you can have an onUpdate function that inverts the scale and or rotation, not sure if that will work.
  24. sorry, i don't know what this means. can you provide an image or better description?
  25. hi swiftmend. great question. to work with your existing code you could get away with ditching the repeat:-1 and give your tween an onComplete and onReverseComplete callback functions. the onComplete callback would set the currentProgress of the tween to 0 and play it again. the onReverseComplete callback would set the currentProgress to 1 and play it again. these 2 callbacks could be simplified into 1 function that resets the currentProgress value of the tween based on the tweens reversed property and then tells the tween to resume as I do below. --- since you are using circular motion you should check out CirclePath2D. I hacked the CirclePath2D documentation and came up with this demo that toggles the direction of the tween when you click anywhere on the stage (fla and all files attached) import com.greensock.*; import com.greensock.easing.* import com.greensock.plugins.*; import com.greensock.motionPaths.*; import flash.display.Shape; import flash.events.MouseEvent; TweenPlugin.activate([CirclePath2DPlugin]); //only needed once in your swf, and only if you plan to use the CirclePath2D tweening feature for convenience var myShape:Shape = createSquare(20, 0xffcc00); //create a circle motion path at coordinates x:150, y:150 with a radius of 100 var circle:CirclePath2D = new CirclePath2D(275, 150, 100); //show the path visually by adding it to the display list (optional) this.addChild(circle); var circleTween:TweenMax = TweenMax.to(myShape, 4, {circlePath2D:{path:circle, startAngle:0, endAngle:360, direction:Direction.COUNTER_CLOCKWISE}, ease:Linear.easeNone, onReverseComplete:playAgain, onComplete:playAgain}); function playAgain(){ circleTween.currentProgress = int(circleTween.reversed); circleTween.resume(); //the 2 lines above are the same as all this /*if(circleTween.reversed){ circleTween.currentProgress = 1; }else{ circleTween.currentProgress = 0; } circleTween.resume(); */ } function createSquare(size:Number, color:uint=0xFF0000):Shape { var s:Shape = new Shape(); s.graphics.beginFill(color, 1); s.graphics.drawRect(-size / 2, -size / 2, size, size); s.graphics.endFill(); this.addChild(s); return s; } stage.addEventListener(MouseEvent.CLICK, reverseTween); function reverseTween(e:MouseEvent):void{ circleTween.reversed = !circleTween.reversed circleTween.resume(); } Even if you don't use CirclePath2D, you would apply the onComplete and onReverseComplete callbacks in the same exact way. check the attachments and give it a spin (remember to click the stage)
×
×
  • Create New...