Scaleform Front End Menu System

[mavrik73]

I've written a tutorial that goes through the entire process from start to finish of creating a custom front end menu system using Scaleform:

http://www.mavrikgames.com/tutorials/udk-scaleform-menu

It demonstrates CLIK componets in Flash, a little ActionScript 3.0 code, and of course, bringing it all into the UDK with the Editor and Unrealscript. It's a three page system with a Main Menu, a Load Game Menu and an Options Menu. I hope it's helpful!

[Matt Doyle]

Fantastic job! I'm going to permalink this thread in the Getting Started post.

[Kenturrac]

I would love if you can upload the whole code or write it down in one part. I for example learn more if I can scroll in the whole code than in these code snippets. anyway, great work! THX!

[mavrik73]

I would love if you can upload the whole code or write it down in one part. I for example learn more if I can scroll in the whole code than in these code snippets. anyway, great work! THX!

I know what you mean Kenturrac, and all the code and content is already uploaded for all those who would rather just look through the code than read through my endless ramblings! There's a link to it in the "Introduction" section of the first page of the tutorial at the very end of the second paragraph, so go get it and enjoy!

[mavrik73]

Fantastic job! I'm going to permalink this thread in the Getting Started post.

Thanks Matt, I appreciate it!

[Kenturrac]

I know what you mean Kenturrac, and all the code and content is already uploaded for all those who would rather just look through the code than read through my endless ramblings! There's a link to it in the "Introduction" section of the first page of the tutorial at the very end of the second paragraph, so go get it and enjoy!

found it! awesome, thx!

[cargarage22]

Great tutorial. Learned quite a bit from it. Thanks!

[John J]

Great tutorial but for some reason I can't get the mouse to show up. I pretty much used the code exactly as is, but I'm a little confused how it knows what mouse image to actually use. I'm not seeing how the mouse symbol in the library ties in.

This is the first time I've tried having everything separate like this instead of all in one GotoAndPlay type setup, so I may just be overlooking something.

[mavrik73]

...I'm a little confused how it knows what mouse image to actually use. I'm not seeing how the mouse symbol in the library ties in...

The mouse symbol in the library is tied in through ActionScript. When you check the "Export for ActionScript" option in the symbol properties in Flash and assign the class to "lib.MenuCursor", Flash ties the symbol to that class. When you create a new instance of that class in ActionScript ("cursor = new MenuCursor(stage);" in SF_FrontEnd.as), Flash attaches the symbol to that instance.

If the mouse cursor isn't showing up, it's most likely an ActionScript issue. Double check the SF_FrontEnd.as class and make sure it creates a new MenuCursor object in its constructor. Also check each of the SF_*Menu.as classes to make sure they all inherit from SF_FrontEnd.as and call "super();" in their constructors. Each of the SF_*Menu.as classes should be the "Document Class" for each of the menu screens in Flash too, so make sure that's set correctly.

If the code all checks out, make sure that the source paths are set correctly for each of the Flash files. Each of the SF_*Menu.fla files should have "../as/frontend" as their source path. In Flash's global source paths there should be an entry with "../as". The MenuCursor.as class should be in the "Development/Flash/Tutorial/ScaleformMenu/as/lib" folder and each of the SF_*Menu.as classes should be in the "Development/Flash/Tutorial/ScaleformMenu/as/frontend" folder.

Does everything else work? I know you can't click the buttons without the mouse cursor, but do all the buttons get the right labels and does the background show up? If not, there could be an issue with the SF_Library.fla file or the Flash content file structure. Check that the cursor image exists in the correct package in the UDK Content Browser (it should be in the "ScaleformMenuGFx" package if you used the tutorial's names).

[John J]

This is frustrating. It appears that things are setup correctly, but when I click in the green checkmark in the fla's ActionScript settings 'Document Class' entry it says the specified document class could not be found. It is very much there though and I have "../as/frontend" in the Source Path slot. I'm moving over from a monster single fla file with no external as so this is all new to me. I am using your folder structure within my project so it should match up.

Seeing as how Flash tells me it can't find the class leads me to believe it's a simple path issue. But it's escaping me. I'm using CS4 so I wonder if there is some difference there?


UPDATE: Ok, so it now sees the as files listed in the Document Class entry, but still no cursor in game. Why does Flash have to be so archaic in it's paths setup!

[mavrik73]

Hmmm... out of curiosity, what did you have to change to get it to see the Document Classes?

I wonder if you have to check the "Export for runtime sharing" option for the cursor symbol with CS4. It works without it in CS5.5, but I have no idea if it does for CS4. Also, did you set the global path to "../as"? Without that, Flash won't know where to find the "as/lib" folder or the MenuCursor class inside it.

Just some thoughts, this one's got me scratching my head too!

[John J]

Progress... I decided to start over from a clean slate and now the cursor shows up and works. No idea what the issue was other than a pathing one. Your instructions work in Flash 4 fine.

However, the mouse isn't following to the next screen.

Sorry to be a pain.

[mavrik73]

...the mouse isn't following to the next screen.

Do you mean it's not showing up at all or it jumps back to the top left of the screen? Or does it not follow the mouse movement on the next screen? If it's the issue where it jumps back up to the top left of the screen, you have to save the mouse coords from the previous screen and assign them on the next. If not, I would guess you'd have to check your ActionScript again and make sure all the Menu Document Classes extend the SF_FrontEnd class and call "super()" in their constructors.

[John J]

I meant that it wasn't showing up at all. But I figured out why.... because it wasn't getting pulled in from the library.fla. If I put the cursor symbol in the other screens fla then it works.

So now I need to go find the disconnect between the cursor in the library.

[John J]

Library is working fine for buttons, just not mouse cursor. But if I add 'bShowHardwareMouseCursor=true;' to the *frontend.uc defaultproperties it works fine.

So either that is needed or adding that bool is doing the cursor a different way than you intended. And if that is the case what's wrong with just adding in the bool?