Apr 23, 2011
Posted on Apr 23, 2011 in Hints and Tips | 3 comments
In this Quick Tip we will create a custom crosshair along with a gunshot sound. This could be the basis for a shoot-’em-up game. In this example, we place bullet holes on the stage at the point where you click.
Note: In spite of the new Native Cursor feature introduced in FP10.2 this old-school method is still a valid way of creating a custom cursor. It has the advantage of allowing you to use bigger graphics, plus it’ll work with older versions of Flash Player. We’ll take a look at Native Cursor’s in FP10.2 tomorrow
Brief Overview
In the SWF you’ll see a Start button. When you click this button, your mouse becomes a crosshair ready to do some damage. As you click around on the stage, a gunshot sound plays and a bullet hole graphic gets added to the stage at the point where you clicked with the mouse.
Step 1: Setting Up the Document
Open a new Flash Document and set the following properties
- Document Size: 500x400px
- Background Color:#FFFFFF
Step 2: Setting up the Game Elements
For the Start Button, I drew a rounded rectangle and placed some text with the word Start on it. I then converted the Button and Text to a MovieClip by drawing a selection around them and pressing F8. I gave the button the name startGame, and also used startGame as the Instance Name in the Properties panel. If the Properties panel is not showing for you, go to Menu->Window->Properties or just press CTRL+F3.
Included in the exercise files are two images: one is the crosshair graphic, and the other is the bullethole graphic. I imported these one at a time to the stage and converted them to a MovieClip by clicking on them and pressing F8. I gave them the instance names “BulletHole” and “CrossHair”, made sure the registration points were set to the center in both cases, and used the same name for the Class in the Linkage of each symbol. Below is an image of how I set up the BulletHole; it is the same for the CrossHair.
For the sound, I imported it to the Library then right-clicked it and selected Properties. I then gave it the name GunShot and set the Linkage Class as GunShot as well.
Now that we have all our game elements ready we can dive into the code.
Step 3: Set up the Package and Main Class
Here we set up our package and the Main Class for our game
First we import some classes we will need, then we set up our document class. This main class must extend either MovieClip or Sprite; here we extend MovieClip. We then declare some variables we will be using, and code our constructor function. The constructor function adds an Event Listener to the button, which is where we set up the rest of the game.
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.ui.Mouse;
import flash.media.Sound;
import flash.media.SoundChannel;
public class Main extends MovieClip {
//The movie clips and Sound in the Library
var crosshair:CrossHair = new CrossHair();
var bullethole:BulletHole;
var gunshot:GunShot = new GunShot();
//Needed for the gunshot sound
var soundChannel:SoundChannel = new SoundChannel;
//Whether or not the user has clicked 1 time
var firstShot = true;
}
public function Main() {
//Show hand cursor when user mouses over the button
startGame.buttonMode=true;
startGame.addEventListener(MouseEvent.CLICK,startTheGame);
}
}
Step 4: Coding the startTheGame() Function
The startTheGame() function is called when the user clicks on the button. This function removes the button from the stage, hides the Mouse,and adds the crosshair to the stage. We then add two Event Listeners to the stage.
private function startTheGame(e:MouseEvent):void{
//Remove the button from the stage
removeChild(startGame);
//Hides the mouse
Mouse.hide();
//Adds the crosshair and sets its x and y properties
//to the mouse's x and y coordinates
addChild(crosshair);
crosshair.x = mouseX;
crosshair.y = mouseY;
stage.addEventListener(MouseEvent.MOUSE_MOVE,moveCursor);
stage.addEventListener(MouseEvent.CLICK,fireShot);
}
Step 5: Coding moveCursor() and fireShot()
The moveCursor() function is called whenever the user moves the mouse, due to the MOUSE_MOVE event listener we added to the stage. In this function we simply make sure the crosshair is at the same position as the Mouse by using mouseX and MouseY.
private function moveCursor(e:MouseEvent):void{
//Makes sure the crosshair x and y is always
//where the mouse's x and y is
crosshair.x = mouseX;
crosshair.y = mouseY;
}
The fireShot() function is called whenever the user clicks on the stage. We first check to see if this is the first time the user clicked; if it is not, then we play the gunshot sound and add the bulletHole to the same position on stage where the user clicked by using e.stageX ande.stageY. The event holds information about itself — you can see what it contains by using trace(e.toString()).
If we did not check if this was the first time, then when the user first clicked on the Start button it would add a crosshair and play the gunshot sound (we don’t want that).
private function fireShot(e:MouseEvent):void{
//If they have clicked once then we do this
if(firstShot == false){
//Plays the sound
soundChannel = gunshot.play();
//Creates a new bullethole and adds it to the
//stage at the place where the user clicked
bullethole = new BulletHole();
addChild(bullethole);
bullethole.x = e.stageX;
bullethole.y = e.stageY;
//We always want the crosshair on top so we swap the "Depths"
//of the crosshair and bullet
swapChildren(bullethole,crosshair);
}
firstShot = false;
}
}//Close the class
}//Close the package
Conclusion
This could be the basis for many shoot-’em-up type games.It would be very easy to spawn some enemies and then do a hitTestPoint() check with the mouse’s X an Y against the enemy’s display object.
I hope you have enjoyed this tutorial. Thanks for reading!
View full post on Activetuts+
Nov 19, 2010
Posted on Nov 19, 2010 in Hints and Tips | 0 comments
During this Basix tutorial we’ll learn how to add the final features to our existing Flash Catalyst project. We’ll look at smooth interaction between pages, additional hover actions, sounds and video. As with the previous tutorial no code is required!
Note: you can save your Flash Catalyst Project at any time and then continue when it is comfortable for you. In order to do this go to File > Save As… give the project a name and save it to an appropriate directory.
Final Result Preview
Check out the final result we’re aiming to achieve. By covering Catalyst basics we’ll learn how to create smooth page transitions, apply 3D animation, add sound to our buttons and also add some video.
Step 1: Source File
Open Adobe Flash Catalyst. At the starting window select Open Project > Downloaded file. Select Galaxy2.fxp, which you can get from the Source download at the top of the page.
Step 2: Explore Timelines Panel Search
Open up the Timelines Panel by double-clicking on its name. We’re presented with all possible interactions between the pages:
If you want to see interactions that deal with a certain page, write its name in the search window:
You can also do this with the drop-down menu:
Step 3: Explore Timelines Panel Timeline
Now let’s cover some things regarding the timeline itself. Here we have 5 important points:
- "Play" button This is needed to preview the animation which we’ve applied to the object(s)
- The timeline itself Here we can see such things as 0s, 1s, 2s (zero seconds, one second, two seconds). It will help us to adjust the duration of the animation.
- Allows us to add animation to our objects and adjust some necessary parameters, at which we’ll have a look later.
- A scrollbar Try to scroll it and draw your attention to the timeline – it lets us make the timeline more precise or, conversely, longer. (e.g., if we drag it to the right, we’ll see more segments in the timeline). It’s useful if we want to make a long animation or want to have better control when the animation is too short.
- Target objects Here it depends on the difference between the pages. Since we have rectangles hidden on the main and revealed on the corresponding pages, Flash Catalyst see these changes and offers us interactivity for the objects.
Step 4: Add interaction Fade In Effect
Ok, now you are familiar with the timeline so we can add some animation to our pages. Let’s start with the Transition between the Main page and the Photoshop page. In the Timelines Panel with the Photoshop Layer selected (if its selected, you’ll see the blue fill), click the arrow near the Smooth Transition button:
Here we see the menu that allows us to set certain parameters. “Duration” is the duration of the animation; I’ve decided to set it to 1 sec and for Timing I’ve used the “Smart Smoothing” option. We don’t need “Simultaneous” as we only apply animation to one layer. And of course we don’t need to Overwrite anything so leave the checkmark field blank.
Step 5: Add Interaction Preview Effect
We’ve applied a Smooth Transition to one of the pages. Let’s look at the picture and see what’s changed:
First of all you can preview the effect we’ve set by using Play button. Here you can see that now we have a blue solid line with the words “Fade In” inside. This means that we’ve applied the animation to our Photoshop Layer. Click on that blue solid line and examine the Properties Panel:
We see that it says Fade at the top; this indicates the applied effect’s name. We have some additional options: Opacity is set to Auto, but if you want to adjust it yourself simply uncheck the checkmark and set your own parameters in “From” and “To”. You can also see that we can change the Duration and even set the Delay time for the effect. Easing is another important option, especially if you are familiar with Flash Professional. I’ll leave it to default, but feel free to experiment with it.
Step 6: Exit Button Apply Animation
The next thing we should do is to apply the animation to the Exit button. Select “Button” layer on the Timelines Panel (remember – the Main > Photoshop transition must be selected in the left bottom window of the Timelines Panel) and again click the arrow near Smooth Transition button. In the Dialog Box set the Duration to 0.5sec:
Step 7: Exit Button Set the Delay
Let’s separate the time of animation. Select the “Exit button” layer. We have two methods for doing this.
Go to the Properties Panel and set the Delay for the Exit button layer to 1 sec:
Alternatively, you can select the green line on the Exit button layer so it becomes solid blue, then click and drag it to the segment on the timeline that suits us (in our case this is 1 sec):
Step 8: One Other Way
There’s one more way to adjust the length of animation. It’s very important and very easy to use. In order to change the animation duration simply with the layer selected, mouse over the little arrow at the end of the animation segment, hold the left mouse button and drag in the direction you want (right – extend, left – shorten):
Step 9: The Fl Page Animation
Let’s move to another page; the Flash Page. In the “Timelines” Panel select Main > Flash transition. Again, set up the same Fade In effect for both layers as we had in Steps 5-7:
Step 10: The Fl Page More Interactivity
Let’s add some more interaction. In the “Timelines” Panel with the “Flash” Layer selected, click on the center-bottom on the “+ Add Action” button. From the drop-down menu select Rotate:
Step 11: The Fl Page Adjust Rotation
Now we have three elements from our Flash Layer selected and you can see that all of them have the Rotate effect applied:
Ok, choose one of the Rotate effects (the Rotate effect that you’ve clicked on becomes solid blue) on the Timelines Panel and go to the Properties window. Once there set the first option to a Specific Angle and the Angle itself set to 360° – this will complete the rotation. Duration 0.5 sec should be OK, but you are free to experiment – my aim is only to show you what you can do
After you’ve applied it to one of the elements, set the same settings to the two remaining, so all three will have 360° rotation and the same duration. Afterwards you can preview the animation. We now have Rotation and Fade In effects for this Flash Page.
Step 12: The Dw Page More Interactivity
Let’s move on and add effects to the Dreamweaver Page. In the Timelines Panel select Main > Dreamweaver transition. Again repeat Steps 5-7 to the Page so there will be Fade In Effect:
Step 13: The Dw Page Rotate 3D Effect
With the Dreamweaver Layer selected, click on the “+ Add Action” button and select “Rotate 3D” from the drop-down menu.
Step 14: The Dw Page Adjust Rotate 3D Effect
You should now be looking at something similar to this (Rotate 3D effect is applied to all three elements on the timeline):
Let’s customize them. Select one of the Rotate 3D animations and go to the Properties Panel. There we have a couple of options. Besides Duration, Delay and Easing we have three kinds of Rotation. So from left to the right: First – rotates the object around X axis, Second – rotates the object around Y axis, and the third – it’s a simple rotation that we had in the Flash Page. And for each kind of rotation we can set up the start up Angle and its final value.
For DreamweaverRect I use the rotation from 0 to 360° around the Y axis:
For DreamweaverIcon and Text I use the rotation from 0 to 360° around the X axis with 0.5 Delay:
So, you should have the following picture and can test your animation with the Play button:
Step 15: Video Import
The next thing we should accomplish is to set video. We will add video to the Flash Page as the video itself is about Flash Catalyst and Flash Player. In order to do this choose our Flash Page. Then go to File > Import > Video/Sound File. Choose the downloaded Adobe.flv file from the Source zip linked at the top of the tutorial.
Step 16: Video Move File
The next thing we need is to assign the file to the Flash group. Simply select the Video Player from the Layers Panel, hold the left mouse button and drag that Video Player to the Flash group layer till it expands and insert it into it. Having done this you should see the following:
Step 17: Video Hide Layers and Set Size
Now let’s hide the Flash Icon and Text so there will be only video. To do this, click the eye icons on these layers so they will disappear(you can also delete these layers, it’s up to you – simply select these layers and click on the Trash Icon in the bottom-right of the Layers Panel).
The next thing to do is to resize our video so it will fit inside the rectangle. Select the “Video Player” layer and mouse over the top-left corner of the video so you can see two arrows facing different directions (the mouse should be over the white square). Hold the left mouse button and start dragging. You’ll also notice that there are other white squares and the blue square in the center. In the same way drag them so you position video centrally (if you want to drag video itself, not its corners, point the mouse in the center of the Video and drag).
Step 18: Video Player Properties
Let’s go to the Properties Panel and explore what’s on offer.
First of all we see the Video’s position on stage, its width and height. If you want to adjust them as I did set the following options: X – 179, Y – 89, Width (W) – 281, Height (H) – 154. Then you’ll notice that we already have the video controls – the Properties Panel offers us two pre-made Video Controls (Wireframe and Standard) but we will add our own buttons to control the video, so set it to None.
For scale mode I’ve also opted to set “None”. Besides None we can set Scale Mode to Stretch, Letterbox or Zoom – here you can experiment and set the best that suits you. If you want to preview how it will look check the “Auto Play” option (remember that when you’ve finished experimenting, uncheck the Auto Play option).
Besides Auto Play we have the “Loop” option and “Muted”. We don’t need to Loop Video so leave it unchecked and we also want to hear sound so the Muted option must be also unchecked.
Now let’s go to the Component and Appearance submenus. Be sure that the “Accepts Mouse Event” option is checked (if it’s not checked, we won’t be able to set our own buttons to the Video). The “Tooltip” option allows us to write the description of the Video and when the user mouses over it, he or she will see the description.
“Volume”, I think, is clear.,/
In the Appearance option you can set a certain “Blend Mode” and you can also check the “Hand Cursor” option so that when user hovers over the video the mouse arrow will turn into the hand cursor.
Step 19: Video Import, Position & Buttons
Now it’s time to set the control buttons to our video. With the Flash layer group selected go to the File > Import > Image and import Play.png. Do the same for Stop.png. Convert them into buttons and place under the video (its always a good practice to rename them). You can also apply some effects to them but it’s not necessary – I’ve set the Opacity in the Up state for them to 75 (if you don’t know how to do this be sure to see my first tutorial on Flash Catalyst where we discuss such things).
..and the situation in the Layers Panel should be like this:
Step 20: Video Play and Stop
Now for the easiest part so far – go to Interactions Panel, select the Play button and in the Interactions Panel choose the following options: First – On Click, second – Play Video, third – select our “Adobe1.flv” Video, fourth – only When in Flash Page:
Do the same for the Stop button, but instead of “Play Video” set it to “Stop Video”.
Now that we’ve set the controls to our Video let’s test it – press Ctrl + Enter or go to the File > Run Project.
Step 21: Sound Import
The last thing we need to do is to apply sound to our buttons. First of all let’s import the sound. Go to File > Import > Video/Sound File and navigate to your installed Flash Catalyst root folder. There, select “Sound Effects/Flash Beep.mp3″. Of course we can use our own sounds but I wanted to show you that Flash Catalyst has a pre-installed package of sounds. Choose any that suits you. Once it’s imported you can preview it – go to the Library Panel and there in the bottom navigate to the Media subfolder and select “Flash Beep.mp3″ – you’ll notice that in the top window the Play button has appeared. If you click on it you’ll hear the button’s sound:
Note: Here you’ll also find all our graphic files, media and components.
Step 22: Sound Final Step
Let’s finalize our project and add sound to the buttons during their over states. To do this select one of the Buttons in the “Layers” Panel, go to its over state. In the “Timelines” Panel with the Icon on the Stage selected, click the “+ Add Action” button and select Sound Effect:
From the Dialog Box select “Flash Beep” and click OK:
The situation on the timeline should be as follows:
Repeat this Step to the Flash and Photoshop Icons and you’re done. Run the Project!
Congratulations!
Now you know not only how to convert your artwork into components, but how to add smooth interaction between Pages, apply different variants of animation, use video and sound in your projects and control them. Flash Catalyst is an amazing application and now you can easily without writing a single line of code bring your artwork to life.
I hope you’ve enjoyed following this project and learning how to use Flash Catalyst. Practice and you’ll attain great results! Thanks also for reading my tutorial
View full post on Activetuts+
