Page 1 of 1

Flash Menu | Navigating With KeysFrames 1 A good method for in-game menus (part 1 of 4) Rate Topic: -----

#1 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 18
  • View blog
  • Posts: 381
  • Joined: 16-October 08

Posted 28 December 2008 - 08:11 AM

Introduction
This tutorial will guide you through the steps in order to create your own flash menu, navigated with the touch of selected keyboard buttons.
This form of menu and navigation would be helpful in game projects, such as RPGs (for example, Final Fantasy style menus).

Hopefully from this tutorial you will be able to develop more complex menus than what we will work with now.

This tutorial will consist of four parts , as that is the number of stages I used in order to create the menu.

This menu was created with the Trial version of Adobe Flash CS4, using Actionscript 2, and tutorialised as such.
The published and source files of each stage can be found at: http://www.slashprojects.com, although direct downloads/viewing can be found in their related stages.

If you have any queries, or relevant information, please get in touch.
If you need help with developing your menu, again feel free to get in contact; however, I would appreciate your own attempts at doing so - the D.I.C. way

The Concept
Okay, so one sure fire way to make interactive navigation within Flash is simply by using buttons. This gives the user the option to have different images for different parts of the button. For example, as with hyperlinks on the internet, when you hover over them with the mouse cursor and they are underlined/highlighted in a different colour, you can have this same effect and more with Flash, and relitively easy.
However, the only problem is that, to my knowledge, these buttons have yet to do what is desire in this tutorial.

**Now is a good time to note (that's what these sections are) that if you have any other way of doing the same result by not using this method, please get in touch.

So, in order to do what is desired, we need to create a movie clip, which will have all the options desired within. Also, what the menu will look like when each option is selected (see above).

Flash Menu 1
In this stage of development, the tutorial will hopefully guide you through successfully making one option of the menu being able to be selected by the click of a mouse on a button.
This will not be the end result, but is the starting step to (what was my) understanding.

**The source file and publishing of this stage are attached.


Step 1
Open up your Flash creation program, and start a new document.
For this example, we have titled the program as 'Menu1' with the dimensions of 400px*100px.
Posted Image
Posted Image


Step 2
Now, go to your Library (if not on screen, it can be found with the menu along the top, possibly under 'Window').
Posted Image

You may notice that the Library is empty. Right-click within the Library, and select 'New Symbol'. Name the Symbol 'Menu' and choose 'Movie Clip'.
Posted Image
Posted Image

You will then be taken to the Menu work area; this is where you will create and edit your Menu movie clip.
Posted Image

Now let's make those options.


Step 3
Okay, for the purpose of this guide, we are going to create three simple squares, each with their own colour, and each on their own layer.
In the example, I have named each layer the colour used, so: Blue, Red, and Green. On each of the layers, but the corresponding square, e.g. the blue option on the blue layer, etc.
Now, to continue with the example, create two more layers, and name them.
Posted Image

On each layer, in the first frame, make a square filled with the colour the layer is named after; these will be our menu options.
Posted Image

We will now insert a new key frame at frame 6 on the Blue layer (right-click the frame). The copy of the blue option will need to be transformed to look differently than the original; this will be the selected option (what it looks like when the mouse is over a button).
Posted Image
Posted Image

Repeat for each of the other options, Red's new key frame at 11, Green at 16, to make the selected options.
Posted Image
Posted Image

You will also need to change the option back for when it is not selected; so at frame 11, the original blue option needs to be there. Create a new key frame, and copy/paste the original blue option there. This needs to be done for the Red option at frame 16; however, the Green does not as it is the last option in this example.
On each of the layers, insert a new frame on frame 20, this will be the end of the menu.
Posted Image

Do not forget to place the menu movieclip in Scene 1 of the document (there is only one scene).
To do this, go to your Library and drag-and-drop the menu movieclip into the document/Scene 1 work area; it will automatically go to Layer 1.
Posted Image
Posted Image


Step 4
Now, when we play the entire movie, we will just see the options being selected and unselected automatically, following one another. This is good, as we know that the menu is in the right sequence/order. However, we want to control this in some way.

Create a new button, either by making a shape and then converting to a symbol/button, or as in the way I mentioned earlier, in the Library. It is the same as creating a movie clip, the option is in the drop-down box; the button has been named 'control'.
For this example, we will create a simple Black square. This button will need to go on its own layer in the menu movie clip (drag-and-drop), which has been named 'actions' (remember, it needs to go to frame 20).
Posted Image
Posted Image

**As with creating a new movie clip, when you create a new button you will be taken to its work area. Buttons are structured differently, as they are designed to be affected by mouse interaction. In a normal button, you will have the 'Over' image to be different from the others, as it will be what it looks like when the mouse is over the button; however, for this example we do not need the 'Over' image as we are controlling the menu with the keyboard and in the end, we will not see the button.


Step 5
Click the first frame of the 'actions' layer (this being your button), and right-click the same frame. Go to Actions. This can also be done by selecting the frame and pressing 'F9'.
You will be taken to the Actionscript page for this frame.
Posted Image


If you remembered that when we tested the menu before, each option just ran through automatically. Now its time to stop that.
On the first line/line 1, put in this code:
stop();
This will stop the menu from playing and looping automatically.
Now, we want to have some interactivety from the button to control the selection of the options, so starting at line 3, put in this code:
onPress = function() {
	gotoAndStop(6);
}
This will enable the button to go to frame 6 when pressed, as though selecting the first option.
Posted Image

**Note that, for some reason, the each of the options acts as a button, despite their state. This does not really matter this is not what the end product will be.


And that's it for Menu1!!!
Part 2, Coming Soon

Is This A Good Question/Topic? 0
  • +

Replies To: Flash Menu | Navigating With KeysFrames 1

#2 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1105
  • View blog
  • Posts: 6,918
  • Joined: 07-September 06

Posted 28 December 2008 - 10:09 PM

Pretty nice tutorial, I am sure that any people will find it helpful.

If anyone wants to simply create a basic hyperlink (which can be added into this tutorial pretty easily) here is a snippet:
http://www.dreaminco...snippet2839.htm

Hope you don't mind but I edited the ttle to add in "Frames" after Keys so people don't think that they can use the arrow keys to move around the menu.

Also, you can create a new symbol with the hotkey F8.
Was This Post Helpful? 0
  • +
  • -

#3 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 18
  • View blog
  • Posts: 381
  • Joined: 16-October 08

Posted 28 December 2008 - 10:22 PM

View PostBetaWar, on 28 Dec, 2008 - 09:09 PM, said:

Pretty nice tutorial, I am sure that any people will find it helpful.

If anyone wants to simply create a basic hyperlink (which can be added into this tutorial pretty easily) here is a snippet:
http://www.dreaminco...snippet2839.htm

Hope you don't mind but I edited the ttle to add in "Frames" after Keys so people don't think that they can use the arrow keys to move around the menu.

Also, you can create a new symbol with the hotkey F8.


It is supposed to be 'With Keys' as that is what the final result will be.
Although, I can understand where Keyframes come from (as that is what it is doing).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1