pixeldroid

Hi all: I need to create an interface using html5 which involves placing several 3-state buttons (base, mouseOver, and mouseDown) on a background. I'm still new to html5, so I hope you don't mind me asking here - I figure this would be a good first project to begin to learn GSAP JS. Everything has a lot of texture, so the buttons need to be placed in various exact locations over the bg. From my web research, I've seen recommendations to use the 'button' tag and also layers of canvases. Any recommendations and/or samples would be appreciated. Thanks much.

Hi all: On occasion I use Flash to create some fairly elaborate apps for client presentations. I intend to move to JScript at some point, but I'm concerned that I still can't do everything I can do in flash. One of my big questions is: can we animate vector shapes using JScript or some other HTML 5 compliant tool? Also, is there an app that can be used to lay out graphics that plays nice with GS? Thanks much.

That will also happen when you apply the filters in the UI. Try putting the tinted MC inside another MC and applying the glow.

I don't think you can nest functions ('GO' is inside 'test2'). I'm surprised it compiles.

If you want to remove it's tween: function killEm(e:MouseEvent):void { TweenLite.killTweensOf(e.currentTarget) } myObj.addEventListener(MouseEvent.CLICK, killEm); ---------------------------------------- If you want to pause its tween: // Create tween using var var myTween:TweenLite = new TweenLite..... //Assign the tween as a property of the object: myObject.tween = myTween; // Setup eventListener and function myObj.addEventListener(MouseEvent.CLICK, pauseTween); function pauseTween(e:MouseEvent):void { e.currentTarget.myTween.pause(); }

I'm a little rusty, but it looks like your not tweening anything. Lookup delayedCall: TweenLite.delayedCall(1.0, addMovieFromLibrary,[mc[0]] );

FWIW, another useful property in an application like this is .mouseEnabled, which can be used to toggle the mouse responsiveness of an object. This can be useful if you have a mouseDown state.

Yes, I see what you're saying. I had stored the fromTo in a var at the root of the MC. I also see that when you reach a certain level of complexity, there are many choices on how to handle things, the implications of which will be beneficial in some circumstances, detrimental in others. As for which way I think it should work, I'd rather have the error so I learn the correct way to kill(), pause(), stop(), rewind(), etc. If we hadn't had this discussion, I would have (understandably) assumed that kill() worked the same as pause(), because that's how it worked in my testing. If I had observed that sometimes it deletes a tween and other times it pauses it, I'd have been hard pressed to figure out which circumstances caused which behavior. I'm new to your software, so I'm just testing out how things work to learn how to use it - its very helpful to know what's going on under the hood. I keep libraries of code, notes, and test files so when I come back to this in XX months, I can pick up where I left off. I consider your recommendation a 'best practice'. Thanks much.

Well I totally missed the boat on understanding how kill works. However, in my example, I have tl with one tween, and fromTo which is a tween.fromTo of tl. When I execute: TweenLite.killTweensOf(tl); fromTo stops dead in its tracks, but if I then execute fromTo.restart(): or fromTo.seek(0); fromTo.play? those commands still work. So unless I have an error in my setup, kill() doesn't eliminate the fromTo, which is why I assumed it was a pause(). 2nd question is irrelevant as it was based on my misunderstanding of what killTweensOf() targets.

Thanks for the followup. I've been a bit uncertain about the kill function. I tested the code you suggested. I see that a 'killed' tween can be restarted, so killTweenOf() appears to be a pause() - is that correct? A couple other questions: 1) When I execute: TweenLite.killTweensOf(tl) it stops the 'tweenTo()' tweens, but not the .to() tweens. Why is that? 2) Based on the way it's declared in my example, I would've thought that tl would be a tween of fromTo...

I have another 2 cents to add to this thread. I found 'tweenTo' and 'tweenFromTo' incredibly helpful in a recent project. It took a bit to figure out how to control them for my purposes, so I'd here's what I learned. Per the manual, these methods create an instance of TweenLite. What threw me at first was that when a 'tweenFromTo' was playing, my buttons which controlled the main timeline didn't work! After realizing that it probably wasn't a bug in the code, and resisting the temptation to post for help under the pressure of a tight deadline, I discovered that to control the 'tweenFromTo', it must be assigned to a var, as Jack points out above. Example: //Create Timeline: var tl = new TimelineMax({}); tl .to (mc, 4, {x:'+=250'} ) .append('stop1') .to (mc, 1, {y:333}); //Create TweenLite to hold the fromTo: var fromTo:TweenLite; // fromTo can be assigned and reassigned just like any other var: function changeFromTo(e:MouseEvent):void { fromTo = tl.tweenFromTo(tl.duration(),1,{paused:true});// Reassign the fromTo (reverse a section) }; //However, while the fromTo playing, controlling tl does nothing: tl.pause();// Fails // We can stop fromTo via its var: fromTo.pause(); // At this point controlling either fromTo or tl will work. // To get more comprehensive control, we can pause both fromTo and tl (and the rest of our 'tweenTo' timeline segments with our pause function*: function pauseMe (e:MouseEvent) { tl.pause(); fromTo.pause(); }; However there is a caveat. If fromTo is declared with no value as above, and none has been assigned when pauseMe is invoked, Flash will throw a null object error. Declaring it with a value will get you off and running: var fromTo:TweenLite = tl.tweenFromTo('stop1',tl.duration(),{paused:true});// Could use a dummy timeline if need be.

These forums are very helpful - why don't the attachments don't stick around very long? Carl, if you have this one, could you repost it? Thanks. Edit: I see the 'tweenTo' is the answer. But it would be nice if the attachments hung around longer... Edit 2: Even better: tweenFromTo

Put it there when you are creating it, before you declare the tween: this.addChild(vShape2); vShape2.x = -20; vShape2.y = 40; var vTL:TimelineLite; ... Or you could pause the timeline when creating it (right now it plays immediately, before the location where your comments are. Or you could put the positioning code in a function and add an 'onStart' var to the tween.

I'm out of suggestions for fixing your file. FWIW, if this were my project, and it weren't much more complex than this, I'd take a different approach. The basics would be something like this, but you'd have to adapt it for your project: Instead of using the timeline to navigate everything, put your various screens into movieClips. Put all those MCs on Frame 1 and use the 'back' button to hide the MCs that you don't want to see at any given time. When you are animating your buttons, if they have the same parameters, you can share the functions by specifying the target of a Mouse Event like so: function onRolloutMain5(e:MouseEvent):void { TweenMax.to(evt.currentTarget, 0.5, {scaleY:1, scaleX:1});//evt.currentTarget (instead of the instance name of the button). } To hide the MCs, place all but the current in an array then call a function to hide all the members of the array: IE var mcsToHide:Array;// Function requires an array var mcsToShow:Array; function onClickBtnName(e.MouseEvent):void { mcsToHide = [thisMC, thatMC, theOtherMC]; mcToShow = [theMCWeWantToSee]; fadeMe (mcsToHide, 0,0,0); // Or use a gradual fade by changing the numbers. fadeMe (mcsToShow, 0,1,0); } function fadeMe(dobj:Array, duration:Number, inOut:Number, delayNum:Number):void { //TweenMax.to(dobj,duration,{autoAlpha:inOut,delay:delayNum});// Will turn off visibility, but code wouldn't see buttons! TweenMax.to(dobj,duration,{alpha:inOut,delay:delayNum});// Won't turn off visibility }//End fadeMe Study the docs to understand this code. It is skeletal and would need to be beefed up if you were doing more stuff in your animation. For example, if you had more animation, you would also need to pause/resume your tweens when hiding/showing things.

Did you give the dup a different instance name?

Try giving the dup a different instance name and hide it with mcName.visible = false;

I can't figure out why duping that MC would fix the problem, but yes, Flash does allow multiple instances of an object using the same instance name. If you tend to use code in your Flash, its a bad idea to do so (the code will only address one instance), but it won't produce a runtime error.

hmmm, I don't know what else to try.... The error indicates a problem with the gotoAndPlay command, which doesn't make sense, but it could be something before that. Again, grasping at straws... Delete the function in frame 25 and paste in some code that works from a different frame. Rename the 'back button' instance, and put the new name in the code. Add semi-colons at the end of all the lines of code.

I have a similar need for tweening a bunch of objects at constant speed, but different distances and directions. Any chance I could get the files that were attached to this thread?

I tested in CS5.5 and it works here. Grasping at straws: Do you have your 'com' directory in the same directory as your .fla? I can't read the error message in the image you posted, copy and paste it into a post or an attached text file.

You've still got me stumped - works fine here. Try this for your Frame 25 function: function onClick4(evt:MouseEvent):void{ trace("the button is being click!") trace(backbtn1) MovieClip(root).gotoAndPlay(1); }

Sorry, I can't reproduce the error. I've clicked each of the 5 buttons on the home screen, and then the back button - no errors. I'm using CS6, but that shouldn't matter. Try this: In your frame 25 script, make this change: trace(backbtn1.name) If you get the error, let me know if it traces the button name first.

http://www.greensock.com/v12/ Uppr right corner

I clicked 'Is', then 'Back', then the title drops down on the home screen. No errors: the button is being click! [object backbtn1_45] Are u using V12 of Greensock? Also, you might want to organize your Flash Library with folders

I clicked all 5 buttons on the home screen and the back button worked after each one. If you are still getting the error, tell us the steps to reproduce.