Making Scaleform Menus Video Tutorial Series

[Henrik]

I have finished the first tutorial videos in a series about making GUIs with Scaleform. First I created a full fledged menu system and implemented it as my front end in UDK and in the intro I explain how I accomplished this in just a matter of hours. Over subsequent vids I will show you how you can get a functional menu up and running in even less time, even under 30 minutes - then I will get into other things like CLIK, etc. as well as advanced topics. Read a full description on the intro video page.

Part 1: Intro http://www.youtube.com/watch?v=dtDko9ujCYM Demo of a fully functional menu system, my flash source and kismet setup.

Part 2: A Simple Menu (1of3) http://www.youtube.com/watch?v=yTVznfRW2wY Preparing the UDK map & the Flash document for a simpler version of the above menu. Discussion of work pipeline.

Part 3: A Simple Menu (2of3) http://www.youtube.com/watch?v=ZpydJDC2YFc Preparing raster images to use in your Flash/Scaleform movie. Rundown of the flash drawing tools, and ways you can implement/draw a button. Making a navover & press state for the button. Aligning elements. How to make a cursor that will show your mouse position.

Part 4: A Simple Menu (3of3) http://www.youtube.com/watch?v=pRyXG_DnF2w SWF export pipeline & best practices for raster assets, Actionscripting the cursor & button, how fscommand interacts with UDK, importing pipeline in UDK, and finally, the last pieces of the puzzle to make the play button load a specified map with Kismet.

Part 5: Improving Your Menu Game Level http://www.youtube.com/watch?v=zMR4uobMeXY In Unreal Engine 3, menus are usually put inside their own level which serves as a container, allowing you to incorporate 3D effects. A level/map must be prepared in a specific way for it to function and feel like a professional and polished looking menu - I'll show you the secrets to this.
__________________________

[CptD1s4st3r]

Nice cant wait to check them out :)

[Piranhi]

Nice tutorial you have there.

[Psilocybe]

Ah, thank you so much!

[danimal']

w00t w00t, nice!

[gegebel]

can't wait for the next few videos.
Once I know how to do a few basic things I guess I'll be able to create really cool UIs.

[ORi]

Amazing, looking forward to see the next one

[geodav]

looking good, can't wait to try this out, thanks very much

ps youtubeHD great i can read the text :)

[Henrik]

Hehe, it's the only way to fly :P

Part 2 is coming in a couple of hours.

[Henrik]

Part 2 is up, and 3 is on the way within an hour.

[gegebel]

Part 2 is up, and 3 is on the way within an hour.

YAY, thanks, this helps a lot.

[Henrik]

Part 3 online (see first post update).

So far, we have covered the preparation of a map to put your swf into, as well as a logo image, guidelines for setting up the flash document, how to create a button with navover states, aligning elements to be exactly centered with the stage and each other, the creation of a cursor, and various little tips and tricks.

In the last part of "A Simple Menu" we will hook up the actionscript, and the kismet to make all this work. The actionscript within the SWF will fire off a command to Unreal to tell it to load your game level.

From there we'll be getting into CLIK widgets, as well as more advanced topics, in game menus, HUDs, etc.

[gegebel]

I vote for STICKY.

[DannRees]

This is awesome, thanks alot dude!

[Sir. Polaris]

Thanks Henrik :)

[Aegyss]

Very nice :) Thanks for putting these up!

[Tom Shannon]

Great work. Really clear and to the point!

[rahatropa]

Awesome job! Great quality vids, instructions are direct and clear, and looks like all the basic fundamentals will be covered! Looking forward to the series, thanks again!

[Jagnot]

I just watched the first 2 parts and loved them! I don't see part 3 up yet though?

[Henrik]

Ah. When I said part 3 I meant the 3rd video in the full series not "A Simple Menu 3".. Sorry if that's confusing. The fourth vid, "A Simple Menu 3" which completes our code to make it function, should be up within 30 minutes.

[Henrik]

It's up: http://www.youtube.com/watch?v=pRyXG_DnF2w

Hope this serves as a complete starting point for those of you who weren't sure where to begin with Scaleform, from here we can go on to fix it up to look proper and also do a few things to spiff it up in Flash, but I won't dwell too much on that. BTW I could literally spend years teaching Flash, particularly design.. but I'll try to move things along to other areas too since there are plenty of Scaleform specific things yet to discuss..

[taz1004]

This is awesome. Very helpful.

[gegebel]

Thx Henrik, that's what I call, help :D

[Snufkin]

Great tutorials !!

[Blade[UG]]

It's a rather fine tutorial, although approaching it from the aspect of someone who has never even looked at Flash, i kept having to pause and rewind to follow the parts in flash. And when I did have a problem with something (which turned out to be a misclick on my part, that I didn't recognize until I got to the end, and it didn't work), since it was all video, it wasn't easy to go back through and find the spot where i potentially screwed up. :)

[eAlex79]

Test w/ pictures is a dying art isn't it? ;) One can read, read again, look at pics, read it over......... :p

Though videos show more then pics do.

[Sir. Polaris]

The last instalment is very nice "D

[Jagnot]

Awesome, thanks Henrik!

[flossyrobinson]

thanks!

that was a great intro! I wish i had more flash exp already.

I cant wait for your next one! :D

[UDKUser]

A great intro, time for me to tackle actionscript.

Thanks a bunch, looking forward to "making it fancy"

3d menus looks great :)

UDKUser

[Mschofield]

Thanks, a nice beginners guide.

I followed along with the video so it didn't take me longer than 30 minutes.

Never even touched Adobe Flash or Action script before. :)

[Henrik]

Glad to hear new users found it clear to follow. But if the M in your username stands for Michael, you must also have a photographic memory. ;)

[Sir. Polaris]

Just so everyone can follow along: Michael_Scofield (http://en.wikipedia.org/wiki/Michael_Scofield) :)

@ Henrik
I presume you have no qualms with me adding your content to the tutorial directory over at UDKC.info (http://udkc.info/index.php?title=Category:Tutorials)?

[eAlex79]

I'm so puzzled now..

[Henrik]

Just so everyone can follow along: Michael_Scofield (http://en.wikipedia.orgwiki/Michael_Scofield) :)

@ Henrik
I presume you have no qualms with me adding your content to the tutorial directory over at UDKC.info (http://udkc.info/index.php?title=Category:Tutorials)?

Hehe, no qualms. Feel free!

eAlex: Michael Schofield is the main character from the show Prison Break, and he absorbs information significantly better than most people :P

[Mschofield]

Haha, nah the M is for Mark :)

Anyway, guessing I'm adding Flash to the list of things to learn over summer.

Looking forward to your next tutorials.

[rahatropa]

Henrik, does your series plan to include any basics of SF w/ UScript in later videos? For example, how one might retrieve the input from one of those dynamic text objects in flash we saw in your menu example?

[Henrik]

I'm hoping to cover all the basics including interaction with unrealscript yes.

[Sir. Polaris]

http://udkc.info/index.php?title=Category:Scaleform

The start of hopefully much more to come :D

[Henrik]

It looks good.. but can you fix the title? :)

Should be "a Scaleform" not "an"

thanks for adding it bro!

[Sir. Polaris]

Done.

As a wiki if you ever get the urge to do more. Just crack a new page :D

I foresee a "Tutorials:Why Henrik is awesome" :)

[Exetus]

It took a little for me to follow but the results are nice for a learning test, cant wait for more to come!

[gegebel]

I tried to create my first menu, it all works well, I still have an issue though.
When I try it in-game, the menu opens, but when I move the mouse, the char view moves too.
I created a simple button opening another screen, options menu like, I can't seem to block the char view though.

I gues I have to create a "close" button to close the screen too?

[Henrik]

Eh that is actually what we're covering next :)

This is why I said "I'm going to show you what happens if you don't take certain steps". I wanted the first menu example to be as simple as possible, and from here we'll be fixing problems like that which crop up.

Here's the first step though, try adding a toggle cinematic mode node between your level loaded event and your gfx movie.

[Ghoul]

great you helped me a lot thanks!

[Blade[UG]]

i fixed that by checking "Capture Input" on the movie ... was that not good? :D

[gegebel]

Cinematic mode: check.

I created a button with:
on(release){
fscommand("quit", true);
}
but it won't work :(

[danimal']

This may be asking more than you are capable of sharing but the biggest thing that bothers me in my projects is not having the good 'ol "options" screen. I realize that passing input out to ini's via the interface may be beyond the scope of these tutorials, but hey, a guy can ask right? :) Just putting it out there! It's all very well done so far and I definitely appreciate the time you put in to making some quality tuts. Thanks!

P.S. remember screwing around on Islander and showing you some tricks I knew of back in the day? :)

[gegebel]

ok I was being stupid, I changed the on(release) to on(press) and my Kismet was messed up but it works fine now...YAY

http://img153.imageshack.us/f/closeed.jpg/

[gegebel]

;27378634']i fixed that by checking "Capture Input" on the movie ... was that not good? :D

If you check "Capture Input", you will keep moving, if you were moving when opening the Gfx and won't be able to stop...kinda stupid behavior :D

[Henrik]

This may be asking more than you are capable of sharing but the biggest thing that bothers me in my projects is not having the good 'ol "options" screen. I realize that passing input out to ini's via the interface may be beyond the scope of these tutorials, but hey, a guy can ask right? :) Just putting it out there! It's all very well done so far and I definitely appreciate the time you put in to making some quality tuts. Thanks!

P.S. remember screwing around on Islander and showing you some tricks I knew of back in the day? :)

yup I remember that. the jumping tricks stuff. wasn't "back in the day" something like.. last May? :P

The options stuff you're asking about is what CLIK widgets are meant to do, and I'll try to cover those this week. Needed to take care of some other stuff over the weekend.

[danimal']

yup I remember that. the jumping tricks stuff. wasn't "back in the day" something like.. last May? :P

The options stuff you're asking about is what CLIK widgets are meant to do, and I'll try to cover those this week. Needed to take care of some other stuff over the weekend.

More than a year ago = forever ago :) Awesome that you're covering CLIK widgets!

[Henrik]

Hehe :) Well, yeah, I do get a bit nostalgic sometimes for the days with lots of people online in UT3. Anyway.. will post back when I have more stuff.

[abraham2]

Very well done tutorials,thank you.

[Henrik]

Sorry for the wait folks.. have to make a living unfortunately :P

Here is the next part, and it's about visual cleanup and special considerations for menu related mapping in UDK: http://www.youtube.com/watch?v=zMR4uobMeXY

[Navy_Spitfire]

Why do I get this error after making the play button?

The file 'toplevel.as', which is required for typechecking ActionScript 2.0, could not be found. Please make sure the directory '$(LocalData)/Classes' is listed in the global classpath of the ActionScript Preferences.

[Henrik]

What program are you using to make the flash and actionscript? And what program gives the error?

[Navy_Spitfire]

What program are you using to make the flash and actionscript? And what program gives the error?

Flash CS4 & UDK May 2010- Compile error in flash. I think it happens right after I create the Play button.

[Henrik]

What flash version are you trying to publish as in Publish Settings? Make sure it is at least 8.

Alternatively your toplevel.as may be corrupt, which might require you to reinstall.

[Navy_Spitfire]

What flash version are you trying to publish as in Publish Settings? Make sure it is at least 8.

Alternatively your toplevel.as may be corrupt, which might require you to reinstall.

It's in 8. Damn, I guess I'll try and reinstall. Thanks for the help.

[eAlex79]

Did you setup the Gfx class paths in Flash?

[Henrik]

I'm not sure that has anything to do with his error, though. It happens before he even tries to export

[Navy_Spitfire]

Did you setup the Gfx class paths in Flash?

What Henrik said; I haven't even exported. I've changed the settings in both Publish and Edit>Pref>Actionscript so it reads:

.
$(LocalData)/Classes

but I get the error regardless. Reinstalls don't do anything. What folder would I find toplevel.as in?
--------------------------------------------------------
I tried importing and got this error, but the .swf with a picture of the logo came up in my package. Am I missing something?

Errors while importing 'menuTest1.swf':

File not found: C:\Users\*****\Desktop\scaleform_test\menuTest1\lo go.png.

NOTE: Using output of gfxexport for missing files!

My png file is called 'logo'. After I exported the swf I created a folder called "logo" and copied the png file into it.

[twenty1]

thanks, man

[Navy_Spitfire]

Fixed all my problems, but I can't get a level to open once I click PLAY. Since I'm almost positive I didn't miss anything, any suggestions of what I could have overlooked?

In the fscommand node I outputted "working" to screen and it shows up when I click the button but dm-deck doesn't load.

[Oglok_29]

Thank you Henrik for this great tutorial.

I'm still trying to hide the player and all spawn sounds and effects without using the UDK/UTFrontEnd trick. I only managed to change the UTGame class to recognize my TitleScreen and not the UTFrontEnd. Did you find a way or do you still use your "hack" to do it ?

Regards.

[Iclem]

I have a question about importing a swf file. When I try to import the swf, unreal tells me that I need to place the swf in a directory of c:/UDK/UDKGame/Flash/SomeDirectory/SomeFile. However, there is no such directory in the August release and when I attempt to make one, the editor still gives me the same message. Any Ideas why?

[seenooh]

Iclem,

Go to your UDK directory, under the UDKGame directory, create a new folder and name it Flash. Under, create another folder (perhaps your project's name) and paste your swf files there.

[Iclem]

Oh thanks, that worked!

[ozzmeister00]

Hey Henrik, I'm looking to create a scaleform "tool-tip" that would display in-game when the player touches a kismet trigger volume, and always face the player. Any thoughts on how to accomplish that?

[Henrik]

I would think just making a regular super simple implementation of a scaleform movie containing a tooltip (box with some text in it) would always face the player.. but perhaps you want it attached to the trigger.. honestly I haven't researched that in any detail but I know the demo swfs contain code examples of using 3d world space. I have just been too busy with work to do more Scaleform tuts and last I saw they were doing some themselves.

[tegleg]

jolly good tutorial there Henrik thanks

couple of small problems here if you dont mind helping
the cinematic mode doesnt work in the game, it does in the editor. i changed DefaultEngine.ini to start with my menu level. i still see the gun and can move around

also the game types dont work on the levels i load, i still get utgame hud and everything
i have my own gametype and hud that work with the UDK menu.
any ideas?

[Iclem]

tegleg, if you have a custom HUD that does not use flash then you will have to enter this into default properties of your custom gameType


bUseClassicHud = true


There is also the issue with DefaultGame.ini. You will have to enter something similar to this:


[Engine.GameInfo]
DefaultGame=UTGame.UTTDDUP
DefaultServerGame=UTGame.UTTDDUP
PlayerControllerClassName=UTGame.UTPlayerControlle r
GameDifficulty=+1.0
MaxPlayers=32
DefaultGameType="UTGame.UTTDDUP";
+DefaultMapPrefixes=(Prefix="TD",bUsesCommonPackage=FALSE,GameType="UTGame.UTTDDUP")


UTTDDUP is my gameType, so naturally you will need to replace that with yours. Hope this helps. The last line starting with the plus sign means that any level that has the name of TD-DocksAndDungeons or TD-Bridge will use your gametype.

[tegleg]

thanks Iclem
DefaultGameType was what i was missing

[Iclem]

No problem, glad I could help.

[KenD]

I just went along with this series and I got everything to work fine, very nice tutorials btw. So I tried to add in some custom fonts as png files to my menu. In flash it worked great, but in UDK when I went to test it, it crashed. All the image files are UDK friendly and I added them as was shown in the tutorials. But when I try to run it in editor or game it just drops. Any guess as to what I may have done wrong?:(

*EDIT* Bah, forgot to edit the properties of my image files, gotta stop working on things so late :)

[Doublezer0]

im still fighting with shared fonts. I dont mean to sound pushy but im really looking forward to that Font Tutorial Matt talked about. hint hint :D

[Matt Doyle]

Font tutorial will be coming next week (first week of October) most likely. I am swamped right now doing some other stuff for AGDC, but hope to get on the font tutorial after that.

[Godling]

Font tutorial will be coming next week (first week of October) most likely. I am swamped right now doing some other stuff for AGDC, but hope to get on the font tutorial after that.
I seem to remember someone from Scaleform saying that we would see a tutorial for "Sothink SWF Quicker" setup and use? Any word on that? :)

[Matt Doyle]

Uh it wasn't me. I've heard no such thing.

[Godling]

Uh it wasn't me. I've heard no such thing.
Thanks anyway Matt. It must have been a normal forum user offering to make a tutorial I guess.

[Matt Doyle]

Looks like a good alternative to paying for Adobe's Flash IDE. The UI looks similar too, so if you follow the tutorials made using the Flash IDE, I think you can still get the information you need to do the same thing in that app.

[Nysuatro]

Just want to say thanks for the video tutorials :)

[Le nain]

Hiya!

Your tuto looks really great, but I can't get it to work... When I try to import the .swf file, it first says that the file has to be in UDKGame/Flash/whatever_folder; thus I put my file in there, and try again to import it. This time I get to the import window, but I have no control at all on the text fields: I can't edit the package name nor the item name, which is kinda annoying. I still click on OK, and it looks like it imported it just fine: I see it appearing in the content browser, I can save it and stuff.
Problem: if I ever change the content browser display (i.e. i search for another item, I click on another package, I close it or whatever) I can't find my .swf file anymore afterwards (even when displaying ALL the swf movies present in UDKGame folder, thanks to the filters); it just disappeared...

This is facked up, I am already quite mad because I didn't plan on doing this now (I was using the old UIScene stuff for now, but thanks to the new UDK version it has been removed completely...), as I am on the middle of my networking, and I can't get it done following one of the simplest and best explained tuto...

[Matt Doyle]

Le nain, don't get discouraged. The problem with most tutorials, including my own, is that Epic tends to alter the code and the layout of the tools and files from build to build. So the tutorials become a little out dated. You'll just have to figure out what has changed, or come on the forums and ask for help.

[Le nain]

Yeah I know, I don't blame you anyways, I already assumed this is because of the latest version. I tend to get discouraged atm because I'm already bumping my head on the wall because of networking, which is not really easy to handle imho, and this UIScene removal + Scaleform not working just is the drop leaking out.

Anyways, do you have any idea on how I am supposed to import correctly my swf files from now on? (and further access them^^)

[Matt Doyle]

Yes. You should read this:

http://udn.epicgames.com/Three/ScaleformImport

And watch this video:

http://www.youtube.com/user/scaleformpress#p/u/16/oSbr7uc-JyM

[Le nain]

Thanks, especially for your youtube channel. Now that I know how it works behind the scene (how the package + group names are set), I guesses what the problem was: the subfolder I created within the Flash folder had the same name as an already existing package of my game, and thus I assume there were some conflicts.
Am watching your entire Scaleform UDK tutos series now.

[Le nain]

Mmmh I have another problem now: I watched most of the videos, until I reached the one dealing with the complete HUD. In that one, you explain the very basics of how works UT3 HUD and advise us to open an explore the .fla files. This sounded good to me so I wanted to go for it, unfortunately I can't open any of them .fla files. It says Unexpected file format. Any way I can get over that? (I'm using the Adobe Flash CS3 version, in case that is the problem...)

[Matt Doyle]

That's your problem. I believe those files are CS4.

[Le nain]

meh... I believe I'm cursed ^^
Thanks for the answer.

[Alienated Phreak]

Will this still work? Being that the scripting has changed a bit?

[neurosys]

I just watched the 5 videos, before I started I barely even knew flash, but I've got it all working now. One thing I noticed is if you use text for the start button it scales unless you actually use the resolution for the stage when running the game. The raster images dont but my button did.

I have a question... do we still have to setup clik in flash? I remember there used to be steps for that. Also some of the older tuts on scaleform have us making clik objects in US... is that all still clik? is clik something else? at this point I've no idea what clik is. I do understand the flash->udk->kismet stuff now and I'm hoping to learn about affecting it in US too.

Thanks for the tutorials!

[Eljay]

Thanks for tutorials.

You touched a little on game type modes in your last video and Im having a problem where my menu will only work in UTgame mode when triggered, but I dont want the weapon to show as I am working on an architectural project, so I set the game type to NONE, and now menu doesnt work. Could you point me in the right direction as how to solve this.

PS. Im following Matt Doyles tutorial no.5 where he triggers - "showscores"

Thanks in advance.

[Henrik]

Sorry for the late reply, this thread has been buried whenever I've checked so I've missed your questions. Well in response to Alienated first of all, I still receive the good word just about every day that the tutorials are still working at least in large, and it is hard to pinpoint where it starts breaking for some people. I have not had the opportunity to test the tutorial the whole way through on a recent build myself, but the most common thing I see is that people don't realize that for the console command part to work, you have to be in the real game mode, ie, not launching your map from the editor in any way shape or form.

As far as CLIK widgets go, I imagine these are really the way to go from the perspective of both Epic & Scaleform corp and perhaps they were disappointed I didn't venture into those at all. There's a reason for that. I wanted to take an approach where someone with no UDK or Flash experience could make a menu which actually makes the game do something with as minimal setup and time as possible. By the time I got the time to consider doing ones on CLIK for more complex interactions with UnrealScript and proper settings menus, they had gone ahead with their videos.
If I showed that there is more than one way to skin a cat, slapdash or not, then I feel fine with that.

As for your question Eljay, check "No Default Inventory" in your map's world properties but keep the gametype to UTGame.