Creating a simple button with ActionScript

  I'm sure we've all been intrigued with at least one video game's user interface before, whether it had to do with a start menu, pause menu or even inventory. For me one company that always fascinates me with their UI is Square Enix. I'm sure most or majority of everyone has heard of the series Final Fantasy. Throughout the years of the series Final Fantasy, the series constantly progressed, especially their UI for in game battle. Recently after taking my simulation class I got familiar with actually creating UI with ActionScript on Adobe Flash and I find it quite fascinating to actually do.
  For my current course assignment, I actually decided to create a simple Start Menu that players can interact with. Allowing players to start the level upon hitting the play button, exiting the game entirely upon hitting the exit button, as well as being able to navigate through different frames with a simple back button.
 To Start this off, I actually created a box on adobe flash and change the skew of it to give it a different look. Upon creating the box I actually converted the box into a button naming it PlayBtn. Doing so now allows some functions to actually be available to this specific shape such as "on(release)". After converting the shape into a button you can't just leave it like that...To actually allow the player to notice that hey this is a button and it's accessible to me, I actually created a differiantion to the buttons "Up", "Over" and "Down". So you may be asking yoursel, what does this mean. It's very simple, when the button isn't pressed on, nor do you have the mouse over the button, is when the button is "Up". When you hover the mouse over the Button, then its "Over" and when you actually press the button, is when it's Down. So in these frames, you can actually put different things in here
which will allow the user to know when the button is being pressed, when the mouse is over the button, and when neither of these are occuring. So what I did for my button was in the Up, I actually first created text inside the box naming it "Play" to indicate to the player that this is a Play button. After doing so I made an insert keyframe for both Over and Down (allowing to keep the same graphic we have) and then decreasing the original color a little bit for my Down and Over I increased the colors value. Doing so now allows the button to be more noticeable however, as you can the button doesn't take you anywhere. Considering how this simple menu I made was actually for a level I made, I decided to not have this Play button take me to a different frame. Usuaully when you look at a games Start menu, upon hitting Start your immedietly taken to a level. So what I did with this Play button was, click the button>F9 to open up action script and all I did was three simple lines really.
"on(release){
fscommand("Start");
}"
So basically what where saying is, on release of this button (assuming you pressed it), make an fscommand with the string "Start". So now what we can do is, in a game engine like Unreal...We can actually either go into unreal script or kismet and call this fscommand through an event. So to make this pretty simple, I actually did this through kismet where you go to Event>Gfx>fscommand. The event fscommand takes in a Movie Info and a command (being the command we made on actionscript.

So going back to Flash, to actually get this Movie info you want to do two things... One, Save the .fla file in your UDK(Year)>UDKGame>Flash and two, save an swf file in the same directory. To create an swf all you do is go to File>PublishSettings, change the target to FlashPlayer 8 and hit publish. Doing so allows you to actually place your movie in the fscommand event on unrealscript after importing the swf file.

Going back to kismet, now what we could do is use the event LevelLoaded, so upon LevelLoaded we open up a GfxMovie and play that movie. Upon the fscommand "Start" being hit, we close the Gfx movie now allowing the player to play the level. To do this we go to event>LevelLoaded and Actions>Gfx>OpenGfxMovie. In the first roll your able to put in an swf movie, which is where I place my Menu in. After doing so we can connect the UV Level Loaded into Open. To continue this I went to Events>Gfx>fscommand added the movie and command in there and went to Actions>Gfx>CloseGfxMovie and connected the UV's together. So upon playing the game, immedietly your taken to the "Menu" with the button, upon hitting the button you enter the level.

Personally I actually enjoy creating UI a lot and I find it to be the most fun when making a level or game. I guess I can say this thanks to all the Final Fantasy Games I use to play when I was little kid. As you can see with this, this was just one simple button, you can actually get way more creative than this and do a lot more such as creating a HUD.