10 Replies Latest reply on Aug 30, 2006 12:55 PM by Newsgroup_User

    Motion tween using actionscript

    BryanThomas
      I'm pretty sure there has to be a way to do this. I want an object to move to certain coordinates when certain objects are moused over. Any help?
        • 1. Re: Motion tween using actionscript
          Level 7
          BryanThomas,

          > I'm pretty sure there has to be a way to do this.

          Motion tweens with ActionScript? You bet.

          > I want an object to move to certain coordinates when
          > certain objects are moused over. Any help?

          Once you understand the concept of classes, you'll be set. Everything
          in ActionScript is an object. Movie clips, test fields, buttons, you name
          it -- they're objects. And objects are defined by classes. If you want to
          figure out how to manipulate a movie clip with ActionScript, you look up the
          "MovieClip class" entry of the ActionScript 2.0 Language Reference. That
          will give you information on the object's: properties (characteristics),
          methods (things it can do), and events (things it can react to). If you
          want to see how a movie clip can respond to mouse events, look up the
          MovieClip Event summary. Sample code galore. :) Look up the Property
          summary, and you'll find _x and _y properties, which refer to the clip's
          position.

          Animation is the result of change over time, so if you set the _x and _y
          properties of a given clip repeatedly, you'll have the movement you're
          after. You could use the MovieClip.onEnterFrame event to accomplish this.
          Give your movie clip an instance name -- say, myClip -- and type the
          following into a frame:

          myClip.onEnterFrame = function() {
          this._x++;
          }

          Here, we've assigned a function to the MovieClip.onEnterFrame even of
          the myClip instance. The instructions are to increment the MovieClip._x
          property of this clip by one (++) every time a frame is encountered --
          which, by default, ias 12 frames per second.

          You may also find interest in the Tween class, which is specifically
          catered toward tweening. That one is available in the Components Language
          Reference.

          The articles here may help you feel more comfortable understanding
          objects and using the Language References.

          http://www.quip.net/blog/first-time-here/


          David Stiller
          Adobe Community Expert
          Dev blog, http://www.quip.net/blog/
          "Luck is the residue of good design."


          • 2. Re: Motion tween using actionscript
            BryanThomas Level 1
            David,
            Thanks a lot for the help. I understand how the classes work and how you set it to move as i mouse over. But is there a way to make a movie clip move to a certain position (x,y) when it's moused over?
            • 3. Re: Motion tween using actionscript
              Level 7
              BryanThomas,

              > I understand how the classes work and how you set
              > it to move as i mouse over. But is there a way to make
              > a movie clip move to a certain position (x,y) when it's
              > moused over?

              Sure. :) Two ways I can think of: A) Set up an onEnterFrame loop that
              continually updates the _x and _y properties. Use an if() statement to
              check those properties and stop the loop when they've hit their mark. B)
              Use one instance of the Tween class for the _x property and another for the
              _y.

              Where are you getting stuck?


              David Stiller
              Adobe Community Expert
              Dev blog, http://www.quip.net/blog/
              "Luck is the residue of good design."


              • 4. Re: Motion tween using actionscript
                BryanThomas Level 1
                Dave,
                Thanks a lot. Unfortunately, I'm a beginner at actionscript. If you could write me the code real quick I'd greatly appreciate it. The instance name would be "puck", the start position would be (10,10) and the position it moves to, the end position, would be (50,10). Thanks, you're a lifesaver!
                • 5. Re: Motion tween using actionscript
                  Level 7
                  BryanThomas,

                  > Thanks a lot. Unfortunately, I'm a beginner at actionscript. If
                  > you could write me the code real quick I'd greatly appreciate
                  > it.

                  I hear ya, man. :) That's why I asked about your knowledge of
                  classes/objects in general. While I certainly can provide you with sample
                  code, I'll have no idea if a quick snippet teaches you what you need -- and
                  teaching you is definitely the kindest thing I could do.

                  If *all* you want is a sample, why not look it up in the ActionScript
                  2.0 Language Reference? I searched the phrase "Using the Tween class" and
                  found a very helpful page. It showed me this ...
                  import mx.transitions.Tween;
                  import mx.transitions.easing.*;
                  new Tween(ball_mc, "_alpha", Strong.easeIn, 100, 0, 3, true);
                  ... in which the instance name is "ball_mc", the _alpha property is being
                  changed from 100 (fully opaque) to 0 (fully transparent), and the change
                  takes place in 3 seconds.

                  > The instance name would be "puck", the start position would
                  > be (10,10) and the position it moves to, the end position, would
                  > be (50,10). Thanks, you're a lifesaver!

                  You didn't say how long the animation should take. Following the above
                  example, and assuming 5 seconds ...

                  import mx.transitions.Tween;
                  import mx.transitions.easing.*;
                  new Tween(puck, "_x", Strong.easeIn, 10, 50, 5, true);

                  ... since the _y doesn't change, you only need to animate the _x property.

                  That takes care of the Tween part. If you need to tween two
                  properties -- _x and _y -- you'd need two Tween instances. To cause the
                  above to occur when a mouse over happens, put the above new Tween() line
                  inside a function assigned to the MovieClip.onRollOver event of the same
                  instance, puck.

                  import mx.transitions.Tween;
                  import mx.transitions.easing.*;
                  puck.onRollOver = function() {
                  new Tween(this, "_x", Strong.easeIn, 10, 50, 5, true);
                  }


                  David Stiller
                  Adobe Community Expert
                  Dev blog, http://www.quip.net/blog/
                  "Luck is the residue of good design."


                  • 6. Re: Motion tween using actionscript
                    BryanThomas Level 1
                    David,
                    Thank you so muck...honestly. I hate to ask for more help, but i need to ask ONE more thing. Here is the FLA document.
                    http://mytimelesspix.com/bryanthomas/button.fla I got the movement working but the thing i need now is for the puck to stay under the button when i mouse off. Also, i'd like the puck to move from the last position when another button is moused over. I owe you big time!
                    • 7. Re: Motion tween using actionscript
                      Level 7
                      Bryan,

                      > Thank you so muck...honestly. I hate to ask for more help,
                      > but i need to ask ONE more thing.

                      's okay. :)

                      > I got the movement working but the thing i need now is for
                      > the puck to stay under the button when i mouse off.

                      Well ... okay, I looked at your code. Honestly, bro, it's a complete
                      hodge-podge of new and old style coding. I know it's because you're on
                      unfamiliar territory, and I'm not slammin' ya ... but really -- really,
                      really, really -- your life will be soooo much easier if you step back and
                      look at the big picture. Sooner or later, this will all gel for you, and it
                      suddenly becomes very easy.

                      Forget that tellTarget() business. That's old; like, Flash 3 old. In
                      fact, it was deprecated in Flash 5. If you want to path to an object, you
                      use its instance name. Of course, first, that means you need to give your
                      relevant assets instance names. You've already done with with the revolving
                      "police" lights -- but make sure you're consistent. Name them light1,
                      light2, light3, and so on (yours were a bit dissheveled).

                      An instance name is just a "handle" that lets ActionScript "talk" to a
                      given object. That light exists as a single movie clip symbol in your
                      Library, but you want to talk to each one individually, so each one gets its
                      own instance name.

                      Do the same thing with your "net" instance (the tab/button movie clips).

                      Rather than this ...

                      tellTarget(this._parent.light4) {
                      gotoandplay(this._currentframe+70);
                      }

                      ... just refer to objects by instance name.

                      light1.gotoAndPlay();

                      Much cleaner code. Now, this isn't relevant in your case, but if that
                      "light" symbol had another movie clip inside it, you could give *that*
                      symbol an instance name, too. For example, you might name the bulb "bulb".
                      If you needed to instruct that bulb movie clip, you could react it inside
                      each instance of light like this ...

                      light1.bulb.gotoAndPlay();
                      light2.bulb.gotoAndPlay();
                      // etc.

                      It's just like folders and subfolders on your hard drive.

                      Next, you've GOT to make sure you use the correct case. gotoandplay
                      doesn't exist in ActionScript, but gotoAndPlay does. Thankfully, the
                      ActionScript 2.0 Language Reference is only a click away, and besides,
                      script code changes color to indicate when you've spelled something
                      correctly.

                      Next, while it's perfectly legal to use the on() event handler, it's
                      also pretty old. It was deprecated as of Flash MX (aka Flash 6), so use the
                      approach I showed you in previous posts. Just use the clip's instance name
                      and assign a function to its event.

                      You want those instances of "net" to respond to mouse events. I gave
                      each movie clip an instance name ... mcHome, mcCalendar, mcRecord, and so
                      on.

                      This allows you to neatly put all your code into frame 1 of the main
                      timeline. No more hunting and pecking, having to click on each movie clip
                      separately, etc.

                      mcHome.onRollOver = function() {
                      // instructions here
                      };

                      That also means you don't have to keep repeating the import statements
                      for each button. It's just much cleaner and more efficient. Give yourself
                      a Scripts layer dedicated to scripts only, and put all your code there.
                      Just remove all the on() stuff.

                      Now here's the part that should make a halogen bulb go BOOM in your
                      head. I'll repeat what you were asking:

                      > I got the movement working but the thing i need now is for
                      > the puck to stay under the button when i mouse off.

                      Okay. That means you want the puck not to start from its original
                      position every time. (In your Tween instantiation, you were always starting
                      from 66.3 -- which of course means that's where the puck will start from
                      every time.) So, how are you going to know where the puck is?

                      Well, the puck is a movie clip -- so look up the MovieClip class. The
                      MovieClip class lists a bunch of properties, which refer to characteristics
                      of the object at hand. In other words, the MovieClip class TELLS YOU what
                      properties are available to any movie clip out there -- because classes
                      define objects, and this is a movie clip object.

                      So if you need to know where the puck is horizontally, look up its
                      MovieClip._x property. Badda bing.

                      mcHome.onRollOver = function() {
                      new Tween(puck, "_x", Elastic.easeOut, puck._x, 58, .5, true);
                      light1.gotoAndPlay(2);
                      };

                      That puts the current _x value of the puck instance as the fourth
                      parameter of that Tween constructor. Make sense? Here's working code for
                      your Flash banner ...

                      import mx.transitions.Tween;
                      import mx.transitions.easing.*;

                      mcHome.onRollOver = function() {
                      new Tween(puck, "_x", Elastic.easeOut, puck._x, 58, .5, true);
                      light1.gotoAndPlay(2);
                      };
                      mcHome.onRollOut = function() {
                      light1.gotoAndPlay(this._currentframe + 70);
                      };
                      mcHome.onRelease = function() {
                      getURL("site.php?page=press&links=home");
                      };

                      mcCalendar.onRollOver = function() {
                      new Tween(puck, "_x", Elastic.easeOut, puck._x, 215, .5, true);
                      light2.gotoAndPlay(2);
                      };
                      mcCalendar.onRollOut = function() {
                      light2.gotoAndPlay(this._currentframe + 70);
                      };
                      mcCalendar.onRelease = function() {
                      getURL("site.php?page=press&links=home");
                      };

                      mcRecord.onRollOver = function() {
                      new Tween(puck, "_x", Elastic.easeOut, puck._x, 373, .5, true);
                      light3.gotoAndPlay(2);
                      };
                      mcRecord.onRollOut = function() {
                      light3.gotoAndPlay(this._currentframe + 70);
                      };
                      mcRecord.onRelease = function() {
                      getURL("site.php?page=press&links=home");
                      };

                      mcTitans.onRollOver = function() {
                      new Tween(puck, "_x", Elastic.easeOut, puck._x, 533, .5, true);
                      light4.gotoAndPlay(2);
                      };
                      mcTitans.onRollOut = function() {
                      light4.gotoAndPlay(this._currentframe + 70);
                      };
                      mcTitans.onRelease = function() {
                      getURL("site.php?page=press&links=home");
                      };

                      mcPressBox.onRollOver = function() {
                      new Tween(puck, "_x", Elastic.easeOut, puck._x, 688, .5, true);
                      light5.gotoAndPlay(2);
                      };
                      mcPressBox.onRollOut = function() {
                      light5.gotoAndPlay(this._currentframe + 70);
                      };
                      mcPressBox.onRelease = function() {
                      getURL("site.php?page=press&links=home");
                      };

                      ... keeping in mind, of course, that each instance of the "net" movie clip
                      needs the relevant instance name, and that each instance of the "light"
                      movie clip should be named as shown from left to right. NO CODE exists as
                      attached to any movie clips. It's all in frame 1 of a new layer named,
                      arbitrarily, scripts. The correct case is in use -- Elastic.easeOut, rather
                      than elastic.easeOut (or easeIn, whatever you prefer). And make sure to
                      correc the getURL() parameter as needed.

                      > I owe you big time!

                      If you really feel that way, I do have an Amazon Wish List. ;) Write
                      me off line, if you're so inclined. I'll reply with your FLA. You're under
                      NO obligation to buy me anything. I mean that. If the spirit moves you, I
                      won't complain -- but write me so I know where to send you your FLA. I
                      think seeing it will help you out.


                      David Stiller
                      Adobe Community Expert
                      Dev blog, http://www.quip.net/blog/
                      "Luck is the residue of good design."


                      • 8. Re: Motion tween using actionscript
                        BryanThomas Level 1
                        David,
                        Thank you so much, you've answered all my questions completely and more! I agree in that i'd have a better understanding of proper code if i saw your FLA. If you get time, could you please email it to xbryanthomasx@gmail.com
                        Thanks a lot.
                        • 9. Re: Motion tween using actionscript
                          Level 7
                          Done. Enjoy!


                          David Stiller
                          Adobe Community Expert
                          Dev blog, http://www.quip.net/blog/
                          "Luck is the residue of good design."


                          "BryanThomas" <webforumsuser@macromedia.com> wrote in message
                          news:ed0b0o$4la$1@forums.macromedia.com...
                          > David,
                          > Thank you so much, you've answered all my questions completely and more! I
                          > agree in that i'd have a better understanding of proper code if i saw your
                          > FLA.
                          > If you get time, could you please email it to xbryanthomasx@gmail.com
                          > Thanks a lot.
                          >


                          • 10. Re: Motion tween using actionscript
                            Level 7
                            >> If you get time, could you please email it to
                            >> xbryanthomasx@gmail.com Thanks a lot.

                            Bryan, I sent it to xbryanthomasx at first, but then realized you
                            probably put the extra Xs in there to throw off spam harvesters. I sent it
                            again but haven't heard back from you, so give me a holler if the file
                            didn't make it.


                            David
                            stiller@quip.net