flash mx拖拽实例_在Flash MX中制作射击游戏

flash mx拖拽实例

Have you ever fancied venting your frustration virtually on targets of your choice, building your own space-invaders game, or even becoming a member of the mob and shooting it out in downtown Chicago? Well, using this simple tutorial as a basis, anything is possible!

您是否曾经幻想过在选择的目标上发泄挫败感，构建自己的太空侵略者游戏，甚至成为暴民成员并在芝加哥市中心开枪射击？ 好吧，以这个简单的教程为基础，一切皆有可能！

In this tutorial, we’re going to use Flash MX and ActionScript to build a customisable shoot-em-up (you can download the completed swf and fla files here). You will also need access to Photoshop or a similar paint package to create your graphics. You may already have something suitable, or decide to use something from the Web. If you do decide to use images other than your own, be sure to check the copyright.

在本教程中，我们将使用Flash MX和ActionScript构建可自定义的射击游戏(您可以在此处下载完整的swf和fla文件)。 您还需要访问Photoshop或类似的绘画包来创建图形。 您可能已经拥有合适的东西，或决定使用Web上的东西。 如果您决定使用非您自己的图像，请确保检查版权。

A moderate amount of programming knowledge is helpful throughout this tutorial, but is not essential. All areas of ActionScript code are explained.

适度的编程知识在整个教程中会有所帮助，但不是必需的。 解释了ActionScript代码的所有区域。

With that out of the way it’s time to get started. First things first: a pot of coffee! While this tutorial isn’t difficult, some of the concepts may take some time to fully understand if you’re a new programmer. You can, of course, just copy the code into Flash and change the relevant variables. But, if you’re going to personalise it in the future, why not take the time to understand it now?

有了它，现在该开始了。 第一件事：一壶咖啡！ 虽然本教程并不困难，但是如果您是新程序员，则其中的一些概念可能需要一些时间才能完全理解。 当然，您可以将代码复制到Flash中并更改相关变量。 但是，如果您将来要个性化它，为什么不花时间现在就了解它呢？

游戏如何运作 (How the Game Works)

While this is far from an advanced tutorial in building a Flash game, there are a few elements that put it into the intermediate category.

尽管这与构建Flash游戏的高级教程相距甚远，但仍有一些元素将其归入中级类别。

The game has 3 targets. These targets are placed in an array, and are then selected at random. With only 3 targets, I can’t guarantee you’ll never play the same sequence more than once, but the random feature helps make it interesting. Each target has 2 other graphics associated with it. The first is an ‘Active Target’ graphic — a simple red border to indicate which target to aim at; the second is a black box to cover it, indicating it’s no longer in the game. Of course, using your own imagination, you can do a lot better than these quick ideas!

游戏中有3个目标。 这些目标放置在阵列中，然后随机选择。 只有3个目标，我不能保证您永远不会玩相同的音序，但是随机功能使它变得有趣。 每个目标都有其他2个与之关联的图形。 第一个是“活动目标”图形-简单的红色边框，指示要瞄准的目标； 第二个是覆盖它的黑盒子，表明它不再存在于游戏中。 当然，利用您自己的想象力，您可以比这些快速的想法做得更好！

图形 (Graphics)

As I’ve just mentioned, a lot of the graphical side of things is down to you. You can be as creative as you like — but, at the very least, you’re going to need the following:

正如我刚刚提到的，很多图形方面的内容都取决于您。 您可以根据需要发挥自己的创造力-但至少，您需要满足以下条件：

• A target image
  目标图像
• A cross-hair to aim
  瞄准的十字准线
• An active target image
  活动目标图像
• An image to indicate the target is destroyed
  指示目标已被破坏的图像

Your target can be any image you like — and, in its simplest form, a cross-hair is just a non-filled circle with vertical and a horizontal lines intersecting in its centre. This will give you an exact co-ordinate for your bullet. As for the last two graphics in the list, well — they can be just as simple.

您的目标可以是您喜欢的任何图像-且最简单的形式是，十字准线只是一个无填充的圆，其垂直线和水平线在其中心相交。 这将为您提供精确的项目符号坐标。 至于列表中的最后两个图形，它们可以很简单。

I’ll assume you’re going to use the same image for each of the three targets we build. The active target image is a non-filled red square that can fit around the target; for the destroyed target image, you’ll just need a black square that will cover the image. In Flash, you can either create the square, then delete the centre fill, or simply create it with a transparent fill. But, as this tutorial isn’t about image creation, we shan’t dwell too much on the subject.

我假设您将为我们构建的三个目标中的每一个使用相同的图像。 活动目标图像是一个可以填充到目标周围的未填充的红色正方形。 对于被破坏的目标图像，您只需要一个黑色正方形即可覆盖图像。 在Flash中，您可以创建正方形，然后删除中心填充，也可以简单地使用透明填充创建它。 但是，由于本教程不是关于图像创建的，因此我们不会过多地讨论该主题。

Let’s assume you’ve created and saved the images described above — now we can begin building our Flash movie.

假设您已经创建并保存了上述图像-现在我们可以开始构建Flash电影了。

制作Flash电影 (Build the Flash Movie)

Launch Flash MX and, if you’ve not already done so, open a new file. Click on Save, and name your Movie (you could be original and call it shootemup.fla).

启动Flash MX，如果尚未启动，请打开一个新文件。 单击“保存”，然后命名您的电影(您可能​​是原始电影，并将其命名为shootemup.fla)。

Now, name your layer ‘Targets’, and in frame 1, import your target image to the stage.

现在，将图层命名为“目标”，然后在第1帧中将目标图像导入舞台。

File-import or (ctrl+R [pc])–[Browse for image]-Open

文件导入或(ctrl + R [pc])– [浏览图像]-打开

With your target on the main stage, make sure it is selected and make it into an individual movie clip (F8 [pc]). When the ‘Create Symbol’ dialog box appears, name the movie clip (MC) ‘target’, and make sure the ‘Movie Clip’ radio button is selected. In the ‘Property Inspector’, name the instance ‘target1’. While you’re at it, drag another two instances of the TargetMC onto the stage and give them instance names of ‘target2’ and ‘target3’ respectively. Click on frame 2 and press (F5) to copy the frame over. We’ll stick with three static targets for now – though, beyond this tutorial, how many targets you add and how they move is completely up to you.

将目标放在主舞台上，确保已选择目标并将其放入单个影片剪辑(F8 [pc])。 出现“创建符号”对话框时，将影片剪辑(MC)命名为“目标”，并确保选中“影片剪辑”单选按钮。 在“属性检查器”中，将实例命名为“ target1”。 在进行操作时，将另外两个TargetMC实例拖到舞台上，并分别给它们指定实例名称“ target2”和“ target3”。 单击第2帧，然后按(F5)复制该帧。 现在，我们将坚持使用三个静态目标-不过，在本教程之外，您可以添加多少个目标以及它们如何移动完全取决于您。

Create another layer, name it ‘Text’, and in frame 1, use the text tool, setting the option to ‘Dynamic Text’, to create 2 boxes of about 30 characters in size along the top of the screen. Font size and colour are up to you. You may also want to spend some time sizing and aligning.

创建另一个图层，将其命名为“文本”，然后在第1帧中，使用文本工具，将选项设置为“动态文本”，沿着屏幕顶部创建2个大小约为30个字符的框。 字体大小和颜色取决于您。 您可能还需要花一些时间进行大小调整和对齐。

Select the ‘single line’ and ‘border around text’ options from the Property inspector. In the properties instance field, name these ‘hits’ and ‘info’ respectively. Move to frame2 on the timeline, and create a new keyframe (F6) Then, in an appropriate bit of white space on the stage, add some text along the lines of ‘GAME OVER’.

从属性检查器中选择“单行”和“文本边框”选项。 在属性实例字段中，分别命名这些“命中”和“信息”。 在时间轴上移至第2帧，并创建一个新的关键帧(F6)，然后在舞台上适当的空白位置，沿“游戏结束”行添加一些文本。

Create another layer and name it ‘Actions’. Open up the panel (Window Menu-Actions or (F9 [PC]) and copy the following code into frame 1:

创建另一个图层并将其命名为“动作”。 打开面板(“窗口菜单”操作或“ F9 [PC]”)，然后将以下代码复制到第1帧中：

(ActionScript (AS) for frame 1)

stop();  

//Set global highScore variables  

highScore = 0;  

//Set the properties for the game elements  

_root.lastFrame = false; //Stop bullets  

         //See AS for bullet MC for details  

setProperty(_root.crosshair, _visible, true);   

SetProperty(_root.bullet, _visible, false); //  

//Individual destroyed target images hidden until needed  

setProperty(_root.target1d, _visible, false);  

setProperty(_root.target2d, _visible, false);  

setProperty(_root.target3d, _visible, false);  

//As above. Individual highlighted target images hidden until needed  

setProperty(_root.target1Image, _visible, false);  

setProperty(_root.target2Image, _visible, false);  

setProperty(_root.target3Image, _visible, false);  

mouse.hide(); //hide mouse to use cross-hairs  

//select a target to shoot at random then add that target  

//to the array of selected targets so that it isn't used  

//again in this game.  

//When the number of direct hits against the selected  

//target has been reached. Find another random target.  

//Check whether it exists in the array. If yes, select  

//again. If no, make visible.  

_root.targets = new Array(); //create array on the main  

              //timeline so that it is  

              //easily accessed by all MCs  

_root.targets[0] = "target1";  

_root.targets[1] = "target2";  

_root.targets[2] = "target3"; //3 targets we are using in   

                //tutorial  

n = _root.targets.length; //get length of array  

ran = random(n); //get random number location to select from array  

target = _root.targets[ran]; //show random array location  

_root.activeTarget = target; //create target variable  

setProperty("_root."+target+"Image", _visible, true); //show target  

_root.targets.splice(ran, 1); //remove the random element  

          //from the array. splice  

          //the random number found and  

            //to the depth of one so only  

            //one element is removed.  

//-------------------------------------------------------//

(AS for Actions frame 2)

(行动框架第2项)

Click on frame 2 in the Actions layer and create a blank keyframe (F7). Then, enter the following code into the actions panel:

单击“动作”层中的第2帧，然后创建一个空白关键帧(F7)。 然后，在操作面板中输入以下代码：

stop();

_root.lastFrame = true; //Stop bullets  

        //See AS for bullet MC for details  

mouse.show(); //reshow mouse  

setProperty(_root.crosshair, _visible, false); //Hide cross hair  

target1Hits = 0; //reset the hits for each target in case another  

         //game is played.  

target2Hits = 0;  

target3Hits = 0;  

//-------------------------------------------------------//

创建跨头发 (Create the Cross-Hair)

Create a new layer called ‘aim/fire’ above the ‘Targets’ layer. Create a new movie clip by pressing (Ctrl + F8) and name it ‘crosshair’. The symbol should have opened up for editing, so create an additional layer and name it ‘Actions’. In frame 1, add a stop action:

在“目标”层上方创建一个名为“目标/射击”的新层。 通过按(Ctrl + F8)创建一个新的影片剪辑，并将其命名为“十字线”。 该符号应已打开以进行编辑，因此请创建一个附加层并将其命名为“动作”。 在第1帧中，添加一个停止动作：

stop();

Name the original layer ‘Image’ and import your cross hair image into Frame 1, aligning it with the centre of the stage (represented by a cross). Now, copy this image over frames 2 and 3 by creating new key-frames (F6). On Frame 2, position the image a few pixels higher than the other two, as if to give the impression a bullet was fired. It is useful to note here that the cross hair would be much more realistic if you also imported a sound wave onto a new layer at frame 2. There are many sources for these on the Internet, but a good starting point would be www.flashkit.com.

将原始图层命名为“图像”，然后将您的十字线图像导入到第1帧中，使其与舞台的中心对齐(以十字线表示)。 现在，通过创建新的关键帧(F6)在第2帧和第3帧上复制此图像。 在第2帧上，将图像定位成比其他两个像素高几个像素，就好像给人留下了发射子弹的印象。 在此处需要注意的是，如果您还将声波导入到第2帧的新图层上，则十字线会更加逼真。Internet上有许多此类信号源，但最好的起点是www.flashkit .com 。

Go back to the main timeline by clicking on the ‘Scene 1’ link underneath the timeline. Now, drag an instance of your crosshairMC from the library and position it off the left hand side of the stage. Select the MC and name it ‘crosshair’ in the instance field of the property inspector. Then, open the ‘Actions’ panel and enter the following:

通过单击时间线下方的“场景1”链接返回主时间线。 现在，从库中拖动crosshairMC的一个实例，并将其放置在舞台左侧。 选择MC，然后在属性检查器的实例字段中将其命名为“ crosshair”。 然后，打开“操作”面板并输入以下内容：

(ActionScript (AS) for the cross-hair)

onClipEvent(enterFrame) { //When this frame(start)of the   

            //movie is entered place this   

           //MC wherever the mouse is.   

this._x = _root._xmouse;   

this._y = _root._ymouse;   

}   

//-------------------------------------------------------//

创建项目符号 (Creating the Bullets)

This has to be the easiest part of the whole tutorial. Follow the steps for creating a new symbol as described above. Create a new symbol and name it ‘bullet’. Then, when you edit the MC, all you have to do is create a small black bullet hole image on frame 1, using the paintbrush. It doesn’t have to be very neat. Select this, make it into a movie clip (F8), and call it ‘bullet hole’. Click on frame 30 of the timeline, and press (F5) to fill in all the frames between. Then hit (F6) to make frame 30 a key-frame. With the image on the stage in frame 30 selected, go to the property inspector and change the color to ‘Alpha’ and ‘0%’.

这必须是整个教程中最简单的部分。 按照上述步骤创建新符号。 创建一个新符号并将其命名为“ bullet”。 然后，当您编辑MC时，您要做的就是使用画笔在第1帧上创建一个小的黑色子弹Kong图像。 它不必非常整洁。 选择它，使其成为影片剪辑(F8)，并将其称为“弹Kong”。 单击时间轴的第30帧，然后按(F5)填写之间的所有帧。 然后按(F6)以使第30帧成为关键帧。 选择第30帧中的舞台上的图像后，转到属性检查器，然后将颜色更改为“ Alpha”和“ 0％”。

Now, right-click in any frame between 1 and 30 on the timeline, and select ‘Create Motion Tween’. This will tween the frames so that when the movie clip plays to frame 30, the bullet will slowly disappear. If you don’t want this to happen, simply put the bullet image in frame 1, and leave it at that.

现在，右键单击时间轴上1到30之间的任何帧，然后选择“创建补间动画”。 这将补间帧，以便当影片剪辑播放到第30帧时，项目符号将慢慢消失。 如果您不希望发生这种情况，只需将项目符号图像放在第1帧中，然后将其保留在该位置即可。

Now, create a new layer and name it ‘Actions’. Click on frame 30 in the timeline for this layer, and create a new blank key-frame (F7). Select the ‘actions’ panel and put in a stop action:

现在，创建一个新层并将其命名为“ Actions”。 在该层的时间轴上单击第30帧，然后创建一个新的空白关键帧(F7)。 选择“操作”面板，然后执行停止操作：

stop();

Go back to the main timeline by clicking on the ‘Scene 1’ link as before, then drag an instance of the bullet off the left hand side of the stage near the cross hair.

通过像以前一样单击“场景1”链接返回主时间轴，然后将子弹实例从十字形附近的舞台左侧拖出。

Select the bullet instance on the stage, name the instance ‘bullet’, then enter the following in the actions panel:

在舞台上选择项目符号实例，将实例命名为“ bullet”，然后在“动作”面板中输入以下内容：

(ActionScript (AS) for the bullets)

onClipEvent(mouseDown) {   

  if(!_root.lastFrame) { //if not in the lastFrame   

  i++; //increase the number of i each time so that the   

    //duplicateMCs have a new depth to load to.   

  this.duplicateMovieClip(\\"bulletnew\\", i); //create new   

                   //duplicate   

                   //bulletMC   

  _root.crosshair.play(); //play the crosshair movie   

  }   

}   

onClipEvent(load) { //show bullets wherever mouse is as   

        //each new mc is loaded. Initial bullet   

        //as game loads won't show as it is   

             //hidden in the actions for the    

        //first frame.   

  if(!_root.lastFrame) {   

    this._x = _root._xmouse;   

    this._y = _root._ymouse;   

  }   

}   

//-------------------------------------------------------//

目标的ActionScript (ActionScript for the Targets)

Still with me? Your movie isn’t exactly going to inspire as it is now. What we need to do is to start adding some actions to the targets.

还在我这儿？ 您的电影并不会像现在一样受到启发。 我们需要做的是开始向目标添加一些操作。

The ActionScript is pretty much the same for all targets, so you can simply cut and paste. Just be aware that, when using the code for ‘target2’ or ‘target3’, you will need to find and replace ‘target1’ with ‘target2’ or ‘target3’. This is all highlighted in the code to help you. You will also need to update the ‘activeTarget’ variable.

所有目标的ActionScript几乎相同，因此您只需剪切和粘贴即可。 请注意，将代码用于“ target2”或“ target3”时，您将需要查找“ target1”并将其替换为“ target2”或“ target3”。 这些都在代码中突出显示以帮助您。 您还需要更新“ activeTarget”变量。

Select the ‘Target1’ instance of TargetMC on the main stage by left-clicking on it, and open up the actions panel (Window Menu-Actions or (F9 [pc]). Copy the following code into it.

在主界面上单击鼠标左键，选择TargetMC的“ Target1”实例，然后打开“动作”面板(“窗口菜单-动作”或“ F9 [pc]”)，将以下代码复制到其中。

(AS for individual targets)

onClipEvent(mouseDown) {    

hitsNeeded = 5; //hits needed to destroy target - this    

      //can be any number you want    

//CHANGE target1.hitTest, target1Hits and activeTarget to read target2 //or target3 for other targets and target1 to read 2 or 3 as in the //array we set up.    

  if(_root.target1.hitTest(_root._xmouse, _root._ymouse, true) && (_root.target1Hits<hitsNeeded) && (_root.activeTarget == \\"target1\\")) {    

  //OK From the top on this one:    

      //Using the AS hitTest() method    

      //If the specified MC is clicked on and    

      //if the hits needed on this MC have not    

      //reached the maximum and    

      //*if* it is the active target (activeTarget               

//CHANGE target1Hits to read target2Hits or target3Hits for other //targets    

    _root.target1Hits++; //increase MC hits variable by 1    

    _root.directHits++; //increase direct hits variable    

    _root.hits.text = _root.directHits+\\" of \\"+hitsNeeded+\\" needed.\\";     //display current hits for target in a text    

      //field on the main stage    

  highScore = _root.highScore;    

  highScore = highScore + 10; //increase high score by                  //however many points you                  //want for a hit.    

  _root.info.text = highScore;    

  _root.highScore = highScore; //update the variable on    

                //the main stage    

//CHANGE target1Hits to target2Hits or target3Hits for other //targets    

  if(_root.target1Hits == hitsNeeded) { //if hits needed total    

                //is reached    

_root.directHits = 0; //reset direct hits counter for future           

    //targets    

  //CHANGE to target2Image or target3Image for other targets    

  setProperty(_root.target1Image, _visible, false);     

//hide target    

  //CHANGE to target2d or target3d for other targets    

     setProperty(_root.target1d, _visible, true);    

      //Show the target destroyed image    

         //Check if array is now empty    

      //If so, endgame    

  n = _root.targets.length;    

  if(n == 0) {    

    _root.gotoAndPlay(2);    

  }                    

  //If it wasn't empty...    

  //generate a random target    

  n = _root.targets.length //get the current array    

//length    

  ran = random(n); //get random number location to     

          //select from array    

  target = _root.targets[ran]; //create target variable    

  _root.activeTarget = target; //set active target    

  setProperty(\\"_root.\\"+target+\\"Image\\", _visible, true);    

                //show target    

  _root.targets.splice(ran, 1); //remove the random    

              //element from array    

                 //so that target cannot    

              //be picked again in     

              //this game    

  _root.hits.text = \\"target destroyed!\\"; //update the    

                    //text field    

    }    

}    

}    

//-------------------------------------------------------//

Only 2 more things to do before you’re ready to test the game and add your own elements! As I mentioned at the start of the tutorial, you’ll need 2 further images for each target, to show when each is active and when it is destroyed. For this tutorial, we’re just going to use simple boxes as previously described.

在准备测试游戏并添加自己的元素之前，只需再做2件事！ 正如我在本教程开始时提到的那样，每个目标还需要2张图像，以显示每个目标何时处于活动状态以及何时被销毁。 在本教程中，我们将使用如前所述的简单框。

创建活动目标图像 (Creating the Active Target Images)

This one’s nice and simple! Just create a new movie clip called ‘Active’, then create a red rectangle that’s big enough to cover the target with a transparent fill.

这个人很好，很简单！ 只需创建一个名为“活动”的新影片剪辑，然后创建一个红色矩形即可，该矩形足够大以透明填充覆盖目标。

Create above the Target layer a new layer called ‘Active Targets’, and place three instances of this movie clip over the top of your targets in frame 1. In the property inspector, name the instances, ‘target1Image’, ‘target2Image’ and ‘target3Image’, respectively.

在目标层上方创建一个称为“活动目标”的新层，并将此影片剪辑的三个实例放置在第1帧中目标的顶部。在属性检查器中，将实例命名为“ target1Image”，“ target2Image”和“ target3Image”。

Creating the Target Destroyed Images

创建目标被破坏的图像

This is much the same as the above, really. Create a new movie clip called ‘Destroyed’, then create a new layer above the last one, called ‘Destroyed Targets’. Add 3 instances, called ‘target1d’, ‘target2d’ and ‘target3d’, respectively.

确实，这与上面的相同。 创建一个名为“ Destroyed”的新影片剪辑，然后在最后一个之上创建一个名为“ Destroyed Targets”的新图层。 添加3个实例，分别称为“ target1d”，“ target2d”和“ target3d”。

而已！ 除… (That’s it! Except…)

If you’ve got this far through the tutorial, you should have all the elements in place to start playing your game. You may want to add one or two other elements, such as a “play again” button, which can be as simple as using a standard button from the common libraries bundled with Flash (Window-Common Libraries-Buttons). Put the button on frame 2, then select it and insert the following into the actions panel:

如果您已经完成了本教程的内容，那么应该已经具备了开始玩游戏的所有要素。 您可能想要添加一个或两个其他元素，例如“再次播放”按钮，它可以像使用Flash捆绑的公共库(窗口公共库-按钮)中的标准按钮一样简单。 将按钮放在第2帧上，然后选择它并将以下内容插入到“动作”面板中：

on (press) {      prevFrame();     }

on (press) { prevFrame(); }

Along the way, you’ve probably thought of things you can add to the game — what you’ve learnt here will only be the start. Happy gaming!

在此过程中，您可能已经想到了可以添加到游戏中的内容-在这里学到的只是开始。 祝您游戏愉快！

翻译自: https://www.sitepoint.com/shoot-em-up-game-flash-mx/

flash mx拖拽实例