FLASH中的移動方法教程和實例集錦_Flash教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      推薦:Flash繪中秋賀卡:快樂月餅大游行
      這是一張用CorelDraw、Photoshop、Flash繪制的中秋節(jié)賀卡,畫面是月色中的月餅大游行,草圖中依上而下的是路邊的花墻、路燈、駕車的小兔、載月餅的車和兔子樂

        歡迎轉(zhuǎn)載,敬請注明來源--閃吧和作者---sxl001---QQ:285510591
      在此只探討用AS語句去控制移動的方法。FLASH中能夠移動的物體一般是舞臺上的電影實例(為節(jié)省篇幅以下簡稱為MC,并且其實例名為my_mc)。FLASH中物體的移動是在X軸(即水平)方向或Y軸(垂直)方向的運動。因此,通過控制mc屬性中的_x與_y的值就可以達到使其運動的目的。
      一、勻速運動
      1、水平方向上的向右勻速運動

      方法一:
      主場景第1幀:var mx=5;//設(shè)定初始速度為5
      主場景第2幀:my_mc._x =mx;//名稱為my_mc的電影實例以步幅5的速度向右移動,
      主場景第3幀:gotoAndPlay(2);// 跳轉(zhuǎn)到第二幀,再次激發(fā)my_mc電影實例以步幅5的速度向右移動后又會跳轉(zhuǎn)到此幀,并再次激發(fā)運動,如此周而得始地激發(fā),就達到了不斷向右運動的目的.
      (見實例勻速運動1_1_1)

      勻速運動1_1_1.swf
      (2006-09-30 04:10:19 PM, Size: 2.06 kB, Downloads: 0)


      勻速運動1_1_1.fla
      (2006-09-30 04:10:19 PM, Size: 13.5 kB, Downloads: 0)



      方法二:
      主場景第1幀:
      var mx = 5;//設(shè)定初始速度為5
      this.onEnterFrame = function() {
      my_mc._x = mx;//不斷刷新my_mc的向右運動
      };//方法一需要3幀才能運動,而此方法二只需要一幀就可以使其運動,這是主要區(qū)別
      (見實例勻速運動1_1_2_1)

      勻速運動1_1_2_1.swf
      (2006-09-30 04:11:23 PM, Size: 2.17 kB, Downloads: 0)


      勻速運動1_1_2_1.fla
      (2006-09-30 04:11:23 PM, Size: 15.5 kB, Downloads: 0)


      或者:
      var mx = 5;//初始速度值為5
      onEnterFrame = function () {
      my_mc._x = mx;
      };//此方法三與方法二的區(qū)別在于,方法二中this.onEnterFrame中的this是指當(dāng)前時間軸;而在此方法三中直接用onEnterFrame,并未用this時,就表示暗指當(dāng)前時間軸
      (見實例勻速運動1_1_2_2)

      勻速運動1_1_2_2.swf
      (2006-09-30 04:12:23 PM, Size: 2.27 kB, Downloads: 0)


      勻速運動1_1_2_2.fla
      (2006-09-30 04:12:23 PM, Size: 15.5 kB, Downloads: 0)


      或者:
      var mx = 5;//初始速度值5
      my_mc.onEnterFrame = function() {
      this._x = mx;
      };//此處的my_mc.onEnterFrame指方法是加在my_mc上的.
      (見實例勻速運動1_1_2_3)

      勻速運動1_1_2_3.swf
      (2006-09-30 04:13:13 PM, Size: 2.25 kB, Downloads: 0)


      勻速運動1_1_2_3.fla
      (2006-09-30 04:13:13 PM, Size: 11 kB, Downloads: 0)



      方法三:
      主場景my_mc上:
      onClipEvent (load) {
      var mx = 5;//初始速度值5
      }
      onClipEvent (enterFrame) {
      _x = mx;//觸發(fā)my_mc實例定義的動作是x軸坐標(biāo)不斷增值5。
      }//(見實例勻速運動1_1_3_1)

      勻速運動1_1_3_1.swf
      (2006-09-30 04:16:26 PM, Size: 2.14 kB, Downloads: 0)


      勻速運動1_1_3_1.fla
      (2006-09-30 04:16:26 PM, Size: 15 kB, Downloads: 0)



      方法四:
      主場景第1幀:
      function moveToRight(Object, xVar) {//定義函數(shù)的方法
      var mx = xVar;
      onEnterFrame = function () {
      Object._x = mx;
      };
      }
      moveToRight(my_mc, 5);
      //(見實例勻速運動1_1_4_1)

      勻速運動1_1_4_1.swf
      (2006-09-30 04:16:26 PM, Size: 2.13 kB, Downloads: 0)


      勻速運動1_1_4_1.fla
      (2006-09-30 04:16:26 PM, Size: 10.5 kB, Downloads: 0)



      方法五:
      MovieClip.prototype.mcmove = function(Object, x) {
      var mx = x;
      onEnterFrame = function () {
      Object._x = mx;
      };
      };
      mcmove(my_mc, 5);//(見實例勻速運動1_1_5_1)

      勻速運動1_1_5_1.swf
      (2006-09-30 04:16:26 PM, Size: 2.19 kB, Downloads: 0)


      勻速運動1_1_5_1.fla
      (2006-09-30 04:16:26 PM, Size: 10.5 kB, Downloads: 0)



      1、垂直方向上的向下勻速運動
      以上實例的運動方向都是水平從左向右勻速運動,假如需要垂直方向上的向下勻速運動只需要把MC的_x屬性改為_y。
      如:
      var my = 5;
      this.onEnterFrame = function() {
      my_mc._y = my;
      };//(見實例勻速運動1_2_01)

      勻速運動1_2_01.swf
      (2006-09-30 04:16:26 PM, Size: 2.16 kB, Downloads: 0)


      勻速運動1_2_01.fla
      (2006-09-30 04:16:26 PM, Size: 12.5 kB, Downloads: 0)



      MovieClip.prototype.mcmove = function(Object, y) {
      var my = y;
      onEnterFrame = function () {
      Object._y = my;
      };
      };
      mcmove(my_mc, 5);
      //(見實例勻速運動1_2_02)

      勻速運動1_2_02.swf
      (2006-09-30 04:16:26 PM, Size: 2.21 kB, Downloads: 0)


      勻速運動1_2_02.fla
      (2006-09-30 04:16:26 PM, Size: 15 kB, Downloads: 0)



      2、水平方向上的向左勻速運動
      水平方向上的向左勻速運動,只需要將上述實例1_系列中的變量var mx=5;更改為var mx=-5;或者,將my_mc._x = mx;更改為my_mc._x -= mx;
      如:
      var mx = -5;
      my_mc._x = 524;//初始my_mc的x坐標(biāo)。
      this.onEnterFrame = function() {
      my_mc._x = mx;
      };//(見實例勻速運動1_3_01)

      勻速運動1_3_01.swf
      (2006-09-30 04:20:11 PM, Size: 2.29 kB, Downloads: 0)


      勻速運動1_3_01.fla
      (2006-09-30 04:20:11 PM, Size: 15.5 kB, Downloads: 0)



      或者:
      var mx = 5;
      my_mc._x = 524;//初始my_mc的x坐標(biāo)。
      this.onEnterFrame = function() {
      my_mc._x -= mx;
      };//(見實例勻速運動1_3_02)

      勻速運動1_3_02.swf
      (2006-09-30 04:20:11 PM, Size: 2.34 kB, Downloads: 0)


      勻速運動1_3_02.fla
      (2006-09-30 04:20:11 PM, Size: 18.5 kB, Downloads: 0)



      3、垂直方向上的向上勻速運動
      垂直方向上的向下勻速運動更改為向上的勻速運動時,方法同“3、水平方向上的向左勻速運動。”
      如:
      var my = 5;
      my_mc._y = 370;
      this.onEnterFrame = function() {
      my_mc._y -= my;
      };//(見實例勻速運動1_4_01)

      勻速運動1_4_01.swf
      (2006-09-30 04:20:11 PM, Size: 2.12 kB, Downloads: 0)


      勻速運動1_4_01.fla
      (2006-09-30 04:20:11 PM, Size: 10 kB, Downloads: 0)



      4、斜方向上的勻速運動
      如:
      var mx = 5, my = 3;
      my_mc._x = 0;
      my_mc._y = 370;
      this.onEnterFrame = function() {
      my_mc._x = mx;
      my_mc._y -= my;
      };//(見實例勻速運動1_5_01)

      勻速運動1_5_01.swf
      (2006-09-30 04:20:11 PM, Size: 2.05 kB, Downloads: 0)


      勻速運動1_5_01.fla
      (2006-09-30 04:20:11 PM, Size: 15 kB, Downloads: 0)



      精確起終點代碼版:
      var k = 200;
      //速率
      var startx = my_mc._x=0, starty = my_mc._y=400;
      //起點坐標(biāo)
      var endx = 550, endy = 0;
      //終點坐標(biāo)
      onEnterFrame = function () {
      my_mc._x = (endx-startx)/k;
      my_mc._y = (endy-starty)/k;
      };//(見實例勻速運動1_5_02)

      勻速運動1_5_02.swf
      (2006-09-30 04:20:11 PM, Size: 2.2 kB, Downloads: 0)


      勻速運動1_5_02.fla
      (2006-09-30 04:20:11 PM, Size: 15 kB, Downloads: 0)



      5、在一定范圍內(nèi)的往返勻速運動
      ⑴水平往返:
      var startx = my_mc._x=50;
      //startx起點位置
      var endx = 450;
      //endx結(jié)束位置
      var dis = 100;
      //dis速率
      var disx = (endx-startx)/dis;
      var disy = (endy-starty)/dis;
      var k0 = k=1;
      //k方向系數(shù)
      onEnterFrame = function () {
      if (my_mc._x>=endx) {
      k = -k;
      }
      if (my_mc._x<=startx) {
      k = k0;
      }
      my_mc._x = disx*k;
      my_mc._y = disy*k;
      };//(見實例勻速運動1_6_01)注:垂直往返方法相似

      勻速運動1_6_01.swf
      (2006-09-30 04:21:51 PM, Size: 2.44 kB, Downloads: 0)


      勻速運動1_6_01.fla
      (2006-09-30 04:21:51 PM, Size: 15.5 kB, Downloads: 0)



      ⑵斜向往返:
      var k0 = k=1;
      var dis = 200;
      //dis速率
      var startx = my_mc._x=50, starty = my_mc._y=300;
      //起點坐標(biāo)
      var endx = 450, endy = 50;
      //終點坐標(biāo)
      var disx = (endx-startx)/dis;
      var disy = (endy-starty)/dis;
      onEnterFrame = function () {
      if (my_mc._x<=startx) {
      k = k0;
      }
      if (my_mc._x>=endx) {
      k = -k;
      }
      my_mc._x = disx*k;
      my_mc._y = disy*k;
      };//(見實例勻速運動1_6_02)

      勻速運動1_6_02.swf
      (2006-09-30 04:21:51 PM, Size: 2.4 kB, Downloads: 0)


      勻速運動1_6_02.fla
      (2006-09-30 04:21:51 PM, Size: 15.5 kB, Downloads: 0)



      二、變速運動
      1、水平方向上的變速運動
      ⑴減速運動
      方法一:
      主場景第1幀:
      var endPosition = 500;
      var k = 12;
      my_mc._x = 50;
      my_mc._y = 200;
      主場景第2幀:my_mc._x = (endPosition-my_mc._x)/k;
      主場景第3幀:
      gotoAndPlay(2);
      if (my_mc._x>=(endPosition-0.6)) {
      my_mc._x = endPosition;
      stop();
      }
      //(見實例減速運動2_1_1_01)

      減速運動2_1_1_01.swf
      (2006-09-30 04:39:46 PM, Size: 2.29 kB, Downloads: 0)


      減速運動2_1_1_01.fla
      (2006-09-30 04:39:46 PM, Size: 15 kB, Downloads: 0)



      方法二:
      var endPosition = 475;
      var k = 12;
      my_mc._x = 50;
      my_mc._y = 200;
      onEnterFrame = function () {
      my_mc._x = (endPosition-my_mc._x)/k;
      if (my_mc._x>(endPosition-1)) {
      my_mc._x = endPosition;
      delete onEnterFrame;
      }
      };//(見實例減速運動2_1_1_02)

      減速運動2_1_1_02.swf
      (2006-09-30 04:39:46 PM, Size: 2.27 kB, Downloads: 0)


      減速運動2_1_1_02.fla
      (2006-09-30 04:39:46 PM, Size: 12.5 kB, Downloads: 0)



      假如要實現(xiàn)從右向左運動時,只需要稍改上述的實例減速運動2_1_1_02
      var endPosition = 50;
      var k = 12;
      my_mc._x = 550;
      my_mc._y = 200;
      onEnterFrame = function () {
      trace(my_mc._x);
      my_mc._x = (endPosition-my_mc._x)/k;
      if (my_mc._x<=endPosition) {
      my_mc._x = endPosition;
      delete onEnterFrame;
      }
      };(見實例減速運動2_1_1_03)

      減速運動2_1_1_03.swf
      (2006-09-30 04:39:46 PM, Size: 2.38 kB, Downloads: 0)


      減速運動2_1_1_03.fla
      (2006-09-30 04:39:46 PM, Size: 12.5 kB, Downloads: 0)



      非凡說明:上述的減速運動代碼可廣泛運用于實際中,它不僅可用于向上、下、左、右、斜向各個方向上的運動,產(chǎn)生緩沖效果。也可以運用于透明度和縮放等方面。如下面的兩個例子。
      另一個減速緩沖效果:
      var endPosition = 500;
      var k = 0.7;
      var c = 0.2;
      my_mc._x = 10;
      my_mc._y = 200;
      onEnterFrame = function () {
      temp = temp*k (endPosition-my_mc._x)*c;//此公式常用
      my_mc._x = Math.round(temp);
      if (Math.round(temp) == 0) {
      my_mc._x = endPosition;
      delete onEnterFrame;
      }
      };
      (見實例減速運動2_1_1_04)

      減速運動2_1_1_04.swf
      (2006-09-30 04:39:46 PM, Size: 2.37 kB, Downloads: 0)


      減速運動2_1_1_04.fla
      (2006-09-30 04:39:46 PM, Size: 12.5 kB, Downloads: 0)



      透明度上的運用:
      var endAlpha = 10;
      var k = 5;
      my_mc._alpha = 100;
      onEnterFrame = function () {
      my_mc._alpha = (endAlpha-my_mc._alpha)/k;
      if (my_mc._alpha<=endAlpha) {
      my_mc._alpha = endAlpha;
      delete onEnterFrame;
      }
      };(見實例透明度上的緩沖運用2_1_1_05)

      透明度上的緩沖運用2_1_1_05.swf
      (2006-09-30 04:43:25 PM, Size: 3.09 kB, Downloads: 0)


      透明度上的緩沖運用2_1_1_05.fla
      (2006-09-30 04:43:25 PM, Size: 10.5 kB, Downloads: 0)



      縮放上的運用:
      var endscale = 600;
      var k = 6;
      my_mc._xscale = my_mc._yscale=1;
      onEnterFrame = function () {
      trace(my_mc._yscale);
      my_mc._xscale = my_mc._yscale = (endscale-my_mc._yscale)/k;
      if (my_mc._yscale>=(endscale-0.1)) {
      my_mc._yscale = endscale;
      delete onEnterFrame;
      }
      };(見實例縮放上的緩沖運用2_1_1_06)

      縮放上的緩沖運用2_1_1_06.swf
      (2006-09-30 04:43:25 PM, Size: 3.04 kB, Downloads: 0)


      縮放上的緩沖運用2_1_1_06.fla
      (2006-09-30 04:43:25 PM, Size: 12.5 kB, Downloads: 0)

      分享:Flash技巧:談動態(tài)滾動文本框制作方法
      再看代碼之前,請先看看下面的說明,這會對理解代碼有很大的幫助:http://www.huoshan.org/shiyan/gundongtiao/gundongtiao.htm下面是滾動條中所有的代碼:/

      /所屬分類:Flash教程/更新時間:2008-03-05
      相關(guān)Flash教程