lesson3-14.htm

FLASH程序实例

      <p>这是一个纯粹用<span class="yellow">Actions</span>来实现的非常简单但也非常重要的示例，我们可以通过这一节的学习再增加一些对<span class="yellow">Actions</span>的认识，这样下一章我们讲起来就不那么费劲了。在上面的示例中，大家试着把黄色的小方块分别拖到三个圆中看一下效果，这就是我们今天要做的内容。</p>
      <p>新建一个文件，设置背景色为黑色。</p>
      <p>按<span class="yellow">Ctrl-F8</span>新建一个电影片断类图符<span class="yellow">dragmovie</span>。在这个图符编辑画面画一个黄色的不带边线的正方形。</p>
      <p>选中这个正方形，按<span class="yellow">F8</span>把它转换成按钮类图符<span class="yellow">dragbutton</span>。现在这个正方形就变成了<span class="yellow">dragbutton</span>的一个实例，我们一会儿对它设置<span class="yellow">Actions</span>，使它可以被拖动且在特定的位置执行特定的操作。 
      </p>
      <p>再按<span class="yellow">Ctrl-F8</span>新建一个电影片断类图符<span class="yellow">target</span>。 
        在图符编辑画面中画一个红色的不带边框的圆。</p>
      <p>有了这些图符就足够了，现在回到主场景，按<span class="yellow">Ctrl-L</span>打开图库窗口，从中拖<span class="yellow"><span class="unnamed1">三个</span>target</span>出来并排放好。分别双击后两个红色的圆，在弹出的实例属性对话框中把它们的颜色效果标签下的<span class="yellow">Tint</span>值改为绿色和蓝色，这样就有三种颜色不同的圆。现在我们依次双击这三个圆，把它们的实例名分别设置为<span class="yellow">target1</span>，<span class="yellow">target2</span>和<span class="yellow">target3</span>，这是为了便于判断黄色的小方块位于哪个圆中。 
      </p>
      <p><span class="yellow"><span class="unnamed1">新建一个层，</span>dragmovie</span>拖到画面中。 
        双击这个黄色的正方形，在弹出的实例属性对话框中把实例名设为<span class="yellow">dragmovie</span>。</p>
      <p>现在主场景也已经布置好了，我们再回到电影片断类图符<span class="yellow">dragmovie</span>的编辑画面来对其中的按钮类图符<span class="yellow">dragbutton</span>的实例进行<span class="yellow">Actions</span>的设置，这是这个示例最重要的部分。这里我们将接触到一些新的<span class="yellow">Actions</span>命令和参数，大家现在不需要深究，只要稍作了解就行了。</p>
      <p>双击这个黄色的正方形，在弹出的实例属性对话框中选<span class="yellow">Actions</span>标签。 点<img src="../imageforflash2/plus.gif" width="24" height="23">，选<span class="yellow">On 
        MouseEvent</span>，在右边选<span class="yellow">Press</span>。再点<img src="../imageforflash2/plus.gif" width="24" height="23">，选<span class="yellow">Drag 
        Movie Clip</span>，在右边<span class="yellow">Target</span>一栏中填上<span class="yellow">/dragmovie</span>，见下图。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="102"><img src="../imageforflash3/3-14-1step1.gif" width="250" height="98"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>上面这样设置是让鼠标可以在按住按钮不放的情况下自由拖动按钮。这一段的Actions如下面所示：<br>
        　　　　　　　On (Press)<br>
        　　　　　　　　Start Drag(&quot;/dragmovie&quot;)<br>
        　　　　　　　End On </p>
      <p>在<span class="yellow">Actions</span>窗口左面选中<span class="yellow">End On</span>，再按<img src="../imageforflash2/plus.gif" width="24" height="23">，再选<span class="yellow">On 
        MouseEvent</span>，在右边选<span class="yellow">Release</span>。现在我们将设置当按钮被释放时，根据它所处的不同位置将执行不同操作的<span class="yellow">Actions</span>命令。按<img src="../imageforflash2/plus.gif" width="24" height="23">，再选<span class="yellow">Drag 
        Movie Clip</span>，选中右边的单选框<span class="yellow">Stop drag operation</span>，表示一旦鼠标释放，就停止拖动。</p>
      <p>点<img src="../imageforflash2/plus.gif" width="24" height="23">，选<span class="yellow">If</span>。在右边的条件框中填上<span class="yellow">_droptarget 
        eq "/target1"</span>。这里我们要多说两句，<span class="yellow">_droptarget</span>是<span class="yellow">Flash4</span>中新增的参数，它的含义是：如果一个电影片断是可被拖动的，并且当其被拖动至另一个电影片断的范围里时，该属性值就设定为另一个电影片断的实例名。所以<span class="yellow">_droptarget</span>用来实现我们这个示例效果是最合适不过了。<span class="yellow">eq</span> 
        是 <span class="yellow">equal</span> 的简写，含义为表达式值相等，所以这个条件判断语句的意思是如果<span class="yellow">dragmovie</span>的<span class="yellow">_droptarget</span>属性与<span class="yellow"> 
        "/target1"</span>相等，则执行下面的语句，也就是说当<span class="yellow">dragmovie</span>即黄色的方形被拖动到<span class="yellow">/target1</span>即红色的圆上时将执行下面的操作。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-14-1step2.gif" width="251" height="132"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>点<img src="../imageforflash2/plus.gif" width="24" height="23">，我们来设置满足上面这个条件后要进行哪些步骤。选<span class="yellow">Tell　Target</span>，在右边的<span class="yellow">Target</span>栏中填上<span class="yellow">/dragmovie</span>，也就是说我们接下来的操作都是针对<span class="yellow">dragmovie</span>这个电影片断实例进行的。</p>
      <p>再点<img src="../imageforflash2/plus.gif" width="24" height="23">，选<span class="yellow">Go 
        to</span>，然后按下图设置，表示跳转到标签为<span class="yellow">red</span>的帧上并播放。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-14-1step3.gif" width="250" height="279"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>这样我们这一段<span class="yellow">If</span>条件语句就做好了，它的意思是当黄色的小方块被拖动到红色的圆上时，跳转到<span class="yellow">dragmovie</span>的标签为<span class="yellow">red</span>的帧上播放。这里需要说明的是，目前为止，我们的<span class="yellow">dragmovie</span>里只有一帧，且放的是<span class="yellow">dragbutton</span>的一个实例。我们将在全部设置好<span class="yellow">Actions</span>以后再给<span class="yellow">dragmovie</span>里相应增加一些内容。</p>
      <p>这一段条件判断的<span class="yellow">Actions</span>语句如下所示：<br>
        　　　　　　　If (_droptarget eq &quot;/target1&quot;)<br>
        　　　　　　　　Begin Tell Target(&quot;/dragmovie&quot;)<br>
        　　　　　　　　　Go to and Play(&quot;red&quot;)<br>
        　　　　　　　　End Tell Target</p>
      <p>注意这个<span class="yellow">If</span>语句还没有结束，下面我们来设置其它的条件。不用我说，接着该判断黄色的方形是否被拖动到绿色圆上的情况了。在<span class="yellow">Actions</span>窗口中选中<span class="yellow">If 
        (_droptarget eq &quot;/target1&quot;)</span>，在右边的窗口部分点一下<img src="../imageforflash3/3-14-1step4.gif" width="144" height="25"> 
        按钮。进入<span class="yellow">Else</span>语句的设置画面，在右边<span class="yellow">Else 
        If</span>前的单选框中点一下，并在条件栏里输入下面所示的判断语句，它的含义我就不多说了。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-14-1step5.gif" width="250" height="155"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>其它的语句与刚才<span class="yellow">If</span>中的基本相同，只是把<span class="yellow">red</span>标签改为<span class="yellow">green</span>标签就行了。设置好的这一段语句如下所示：<br>
        　　　　　　　Else If (_droptarget eq &quot;/target2&quot;)<br>
        　　　　　　　　Begin Tell Target(&quot;/dragmovie&quot;)<br>
        　　　　　　　　　Go to and Play(&quot;green&quot;)<br>
        　　　　　　　　End Tell Target </p>
      <p>同样，再加一段<span class="yellow">Else If</span>，设置黄色方块拖动到蓝色圆中的情况，设置好的这段语句如下所示：<br>
        　　　　　　　Else If (_droptarget eq &quot;/target3&quot;)<br>
        　　　　　　　　Begin Tell Target(&quot;/dragmovie&quot;)<br>
        　　　　　　　　　Go to and Play(&quot;blue&quot;)<br>
        　　　　　　　　End Tell Target </p>
      <p>最后，我们还需要设置当黄色小方块不在这三个圆中的任何一个之内里的情况。选中<span class="yellow">If (_droptarget 
        eq &quot;/target1&quot;)</span>，点<img src="../imageforflash3/3-14-1step4.gif" width="144" height="25">，还是设置<span class="yellow">Begin 
        Tell Target(&quot;/dragmovie&quot;)</span>，只是把<span class="yellow">Go 
        to</span>语句的内容改为<span class="yellow">Go to and Play(1)</span>。</p>
      <p>这样我们就设置好了所有的<span class="yellow">Actions</span>语句，下面列出整个<span class="yellow">Actions</span>命令行：</p>
      <p>　　　　　On (Press)<br>
        　　　　　　　　Start Drag(&quot;/dragmovie&quot;)<br>
        　　　　　　　End On <br>
        　　　　　　　On (Release)<br>
        　　　　　　　　Stop Drag<br>
        　　　　　　　　If (_droptarget eq &quot;/target1&quot;)<br>
        　　　　　　　　　Begin Tell Target(&quot;/dragmovie&quot;)<br>
        　　　　　　　　　　Go to and Play(&quot;red&quot;)<br>
        　　　　　　　　　End Tell Target<br>
        　　　　　　　　Else If (_droptarget eq &quot;/target2&quot;)<br>
        　　　　　　　　　Begin Tell Target(&quot;/dragmovie&quot;)<br>
        　　　　　　　　　　Go to and Play(&quot;green&quot;)<br>
        　　　　　　　　　End Tell Target <br>
        　　　　　　　　Else If (_droptarget eq &quot;/target3&quot;)<br>
        　　　　　　　　　Begin Tell Target(&quot;/dragmovie&quot;)<br>
        　　　　　　　　　　Go to and Play(&quot;blue&quot;)<br>
        　　　　　　　　　End Tell Target <br>
        　　　　　　　　Else<br>
        　　　　　　　　　Begin Tell Target(&quot;/dragmovie&quot;)<br>
        　　　　　　　　　　Go to and Play(1)<br>
        　　　　　　　　　End Tell Target <br>
        　　　　　　　　End If<br>
        　　　　　　　End On</p>
    </td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>接下来我们来对<span class="yellow">dragmovie</span>做一些修改。双击第1帧设置<span class="yellow">Actions</span>为<span class="yellow">Stop</span>。</p>
      <p>在第2帧，第16帧和第31帧分别按F6插入关键帧，并双击这几帧分别把它们的帧标签设为<span class="yellow">red</span>，<span class="yellow">green</span>和<span class="yellow">blue</span>。</p>
      <p>选中第2帧，双击该黄色的小方块，在弹出的实例属性对话框中把颜色效果标签下的<span class="yellow">Tint</span>值改为淡红色，再在第15帧按<span class="yellow">F6</span>插入关键帧。再次双击第2帧，设置帧属性为运动渐变，并把旋转属性设置为下图所示。双击第15帧，设置<span class="yellow">Actions</span>为<span class="yellow">Go 
        to and Play(&quot;red&quot;)</span>。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-14-1step6.gif" width="306" height="102"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>同样方法，我们分别选中第16帧和第31帧，把颜色改为淡绿色和淡蓝色，再分别在第30和第44帧按F6键，然后分别对第16和第31帧设置帧属性和上图一致，最后双击第30帧和第44帧，把<span class="yellow">Actions</span>设置为<span class="yellow">Go 
        to and Play(&quot;green&quot;)</span>和<span class="yellow">Go to and Play(&quot;Blue&quot;)</span>就行了。</p>
      <p>设置好后的这个电影片断的时间轴如下图所示：</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-14-1timeline.gif" width="540" height="45"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">这样，我们就完成了整个示例的制作。还有什么不明白的，在<a href="../imageforflash3/lesson3-14-1.fla">这里</a>下载源文件再好好看看吧。</td>
  </tr>
</table>
</body>
</html>