Getting Started with Scaleform & UDK

[Matt Doyle]

Here's a growing list of links to important topics you'll need to know when learning Scaleform in UDK. As new tutorials come out, we'll be sure to add them all here.

Scaleform 4.x Sandbox Files (AS3 Only)
Scaleform 3.x Sandbox Files (AS2 Only)

Autodesk Scaleform Documentation




UDN Topics

• Scaleform Overview
• Scaleform Technical Guide
• Scaleform Workflow
• Scaleform Best Practices
  
• Quick Start Menu Creation

1. Initial Setup (VERY IMPORTANT)
2. Importing SWFs into UDK
3. Dealing with Texture Compression Issues
4. Resource Sharing between Flash Files
5. Using Kismet
6. UnrealScript and ActionScript
7. Using Sound
8. Creating a Scaleform Mouse

ActionScript 3 Specific Links (November 2011 UDK & Newer)

Useful Forum Posts

1. Enabling Access To Scaleform Extensions
2. Simple AS3 Mouse
3. Advanced Toggleable AS3 Mouse
4. Loading Another SWF with Loader
5. Attaching & Removing Movie Clips from UnrealScript
6. Working with AS3 Packages
7. Solving Failed to load Scaleform IME Warning
8. Using 3D Transformations
9. Creating an Invoke Kismet Node
10. Creating a Scaleform Frontend Menu System
11. Launching a Network Game Using Kismet & FSCommands
12. How to Hide the Minimap
13. Embedding Images in FlashDevelop/AS3
14. Get Right Analog Stick Values in Scaleform
15. Adding Music to a Scaleform Menu
    
    TextField Specific
    
    
16. Embedding Fonts to be Used by a Dynamically Created TextField
17. Setting up Non-CLIK TextFields
18. Setting Up Font Library for Embedded Fonts
    
    View Size Specific
    
    
19. SetViewScaleMode, SetAlignment, and SetViewport Explained
    
    CLIK Specific
    
    
20. [CLIK] CLIK AS3 Events
21. [CLIK] Handling CLIK AS3 Compile Error 1152 & 5000
22. [CLIK] Getting EventData
23. [CLIK] Instantiating and Populating a DropDown Menu

Official Scaleform Video Tutorials

1. Using SetExternalTexture() to Create a Rear View Mirror
2. See Older Scaleform 3/AS2 specific videos below

ActionScript 2 Specific Links

Useful Forum Posts

1. Best Practices - ActionScript
2. Best Practices - Content Creation
3. Output ActionScript Trace Statement in UDK Log Window
4. Reimport SWFs Without Opening the Editor Using a Batch File
5. Join/Host Network Game UI
6. Multiple UI Panel Sorting
7. Control Volume With Status Bar
8. Remove a Movie Clip
9. Where is GFxObject.SetObject?
10. Understanding ActionScriptSetFunction
11. Creating a Scaleform Menu Using Vectorian Flash Animation Tools & Flash Develop
12. UDK UI Class Inheritance Flowchart
13. Using SceneCapture2DActor as an External Texture in Flash
    
    1. FIX: My External Texture is Rendering Transparent
14. Offline Multiplayer Split-screen Scaleform Extensions
15. Routing a Simple (Parameterless) External Interface Call to Kismet
16. Retrieving & Setting Flash Variables from UnrealScript
17. Retrieving UnrealScript Variables from Flash
18. Accessing a Scaleform Movie from Your PlayerController
19. Displaying Damage Indicator Movies Over A Target
20. Making Sense of GFxUDKFrontEnd
21. Passing an Array of Objects to ActionScript/Flash
22. Getting Return Values from ActionScript Calls in UnrealScript
23. Displaying Something on the HUD When a Trigger is Touched
24. Auto Scaling Chat Bubbles
25. Solving Failed to load Scaleform IME Warning
26. How to Hide the Minimap
27. Adding Music to a Scaleform Menu
    
    
    Mouse Specific
    
    
28. Creating a Mouse Cursor in the HUD
29. More Mouse Cursor Code
30. Setting Mouse Position
31. Intercepting Right Mouse Clicks
32. Listening for Mouse Button Release
33. [RTS Style UI] Mouse Clicking on Buttons in the HUD During Gameplay (Method 1) | (Method 2)
34. Listening for Roll Over and Press Events on DropDown List Items
    
    TextField Specific
    
    
35. Getting and Displaying a User Name
36. Getting and Displaying Player's Velocity
37. Displaying Localized Text
38. Custom Kismet Action - Set TextField
39. Debug/Status Text in Hud
40. Displaying Map Name & Gameplay Time in the HUD
41. Embedding Fonts to be Used by a Dynamically Created TextField
    
    View Size Specific
    
    
42. SetViewScaleMode, SetAlignment, and SetViewport Explained
43. Handling Multiple Aspect Ratios
44. Getting The Original SWF Dimensions in UnrealScript
    
    Input Specific
    
    
45. bCaptureInput, AddCaptureKey, and AddFocusIgnoreKey Explained
46. Capturing Keyboard Input in Kismet
47. Capturing XBox 360 Controller Input
48. Capturing and Binding Keys in UrealScript
49. The Escape Key & The Pause Menu
    
    CLIK Specific
    
    
50. [CLIK] Getting and Setting Checkbox Values
51. [CLIK] Populating a List from an INI File
52. [CLIK] Multi-column Lists
53. [CLIK] Storing & Retrieving Options in a Tab View
54. [CLIK] Making Sense of The Inventory Demo
55. [CLIK] Setting Up A Rudimentary Chat Box
56. [CLIK] Using an Image Loader to load a texture from an Unreal package at runtime
57. [CLIK] Setting a Dynamically Loaded Progress Bar's Progress in AS
58. [CLIK] Using a Slider to Rotate an Object in 360 Degrees
59. [CLIK] Creating Tween Animations in ActionScript or UnrealScript
60. [CLIK] Using a ButtonBar
61. [CLIK] Displaying Icons in a Scrolling List
62. [CLIK] Loading a Map in ActionScript with a Scrolling List or Drop Down Menu

Official Scaleform Video Tutorials

1. Importing a SWF
2. Render Textures & Materials
3. Adding a SWF to a BSP Object
4. Capturing Input
5. Using Invoke ActionScript & FSCommands
6. Creating Custom Menus
7. Using Scaleform 3Di Flash AS2 Extensions to Create 3D UI
8. Working with Fonts
   
   1. FIX: Missing Fonts When a Text Field is Set Dynamically from UnrealScript
9. Mastering a Scaleform HUD - 5 Part Series
   
   1. Part 1 - HUD Overview
   2. Part 2 - UTGFxHudWrapper.uc
   3. Part 3 - GFxMinimapHud.uc (Part 1)
   4. Part 4 - GFxMinimapHud.uc (Part 2)
10. Getting Started with CLIK - 14 Part Series
    
    1. Part 1 - Initial Setup
    2. Part 2 - Main Menu Setup
    3. Part 3 - Creating the Options Screen
    4. Part 4 - Checkboxes, Radio Buttons, & Sliders
    5. Part 5 - Adding Functionality
    6. Part 6 - Retaining Changes
    7. Part 7 - Adding a Background
    8. Part 8 - Importing a Background
    9. Part 9 - Skinning the Main Menu Button
    10. Part 10 - Skinning the OK and Cancel Buttons
    11. Part 11 - Skinning the Sound Slider
    12. Part 12 - Skinning the Checkboxes
    13. Part 13 - Skinning Radio Buttons
    14. Part 14 - Skinning an Option Stepper

User Created Video Tutorials

1. VoxHouseStudio (Part 1, Part 2, Part 3, Part 4, Part 5)
2. AwesomeAllar's 11-part Series on Creating a Menu
3. Grosie's HUD Tutorial
4. Vickithesmith's 14 Part Scaleform Tutorial
5. Lexluthornumber1's 6 part series (Part 1, Part 2, Part 3, Part 4, Part 5, Part 6)
6. The Guildhall at SMU (Ruoyao M7) (Part 1, Part 2)
7. Ammo Display on Weapon

Additional Links

Other Tutorial Sites

1. UDK Central - Scaleform Tutorials

Additional Reading

1. UnCodeX - GFxUI
2. ActionScript 2.0 Best Practices
3. ActionScript 2.0 Language Reference
4. Learning ActionScript 2.0
5. Essential ActionScript 2.0 Book

Flash/ActionScript Editing Tools

1. Adobe Flash Professional CS5 - The de facto Flash editor (has 30 day trial & $100 student version)
2. SoThink SWF Quicker - Affordable third-party Flash editor (has 30 day trial) NOTE: Cannot open FLA files; Not compatible with CLIK
3. Vectorian Flash Animation Tools - Free Flash editor (must use Flash Develop to inject ActionScript into SWF files)
4. FlashDevelop - Open source ActionScript IDE
5. Motion-Twin MTASC - Free, fast ActionScript 2.0 compiler
6. Flash Decompiler Trillix - Decompile SWF files into FLA files & extract or edit their contents (has limited demo version)

User Created Tools

1. UDK GFx Exporter - A Stand-alone GFx Batch Export Tool
2. SWFMakeLossless - A tool to set all images in a SWF to lossless compression, for those who don't have Adobe Flash Pro.
3. UWindow3 - UWindow3 is a cross platform tool kit which makes it easier to develop user interfaces in Unreal Engine 3 and Unreal Development Kit. As long as the platform supports Unreal Engine 3, Unreal Development Kit and the Scaleform intergration; then UWindow3 will work on that platform. UWindow3 is developed and maintained by James Tan at Digital Confectioners.

[seenooh]

Woohoo!

Thanks alot for your efforts Mr. Doyle.

[TMichael]

Wow, 14 more videos added just for CLIK. You, Sir, know how to deliver.

Thanks so much for these!

[alvarofer0020]

Awesomeeee

[Matt Doyle]

You bet. One thing to bear in mind. These videos were made originally for licensees of GFx, regardless of the engine used. And, they were created for GFx 3.0, so there may be some minor differences in the way the CLIK components look and function. But, I believe you can still get some great value out of the tutorials. I hope to update them with a face lift and to fix any discrepancies one day, but that day may be a long time coming, due to the sheer amount of work involved, and that I'd rather create new stuff for you guys.

[TMichael]

I just noticed that all four of the first links (UDN Topics) are in the password protected part of the site, for Unreal licensees only. Would it be possible for someone to fix that?

[Lajah]

Hello,

First many thanks for the good tutorial´s.
But now I have a big question.
I wan´t to make a menü where I can change the keybinding´s from the UDK.
For this I must load/save the "BaseInput.ini" File.

Is that possible with Flash and Scaleform??
If it is possible you can help me with the code??

Many thanks for your help.

[Matt Doyle]

To my knowledge, those UDK links are available to the general public.

[Iron_Maniac]

I just noticed that all four of the first links (UDN Topics) are in the password protected part of the site, for Unreal licensees only. Would it be possible for someone to fix that?

Just change the start of the URL from 'https://' to 'http://' and the links will work.

Example:
http://udn.epicgames.com/Three/Scale...%20Environment

[Allar]

Yay for being included!

[alvarofer0020]

im getting a problem with the getting started click tutorials

after i finish everything i try to test it with the scaleform launcher and it just says

writted everything exactly as the tutorials but now when i try to test it with the scaleform launcher it says

i writted everything exactly how it is on the tutorials


Scene=Scene1, layer=actions, frame=10, Line29 Function Name Excpected
Scene=Scene1 layer=actions, frame=10, line 35 syntax error
Scene=Scene1 LAYER=ACTIONS, FRAME=10, LINE 36 Unexpected }
encountered

[Matt Doyle]

Sounds like you have some syntax errors in your code. Without seeing your code, I can't help you.

[alvarofer0020]

sorry i writted some parts wrong but now i fixed it

[AlvinDChipmunk]

Hi UDK Guys and Gals!

Just introducing myself here, before I ask my question. I am Alvin, a Visual and Game Programming student over at Art Institute in San Diego.

My basic question is not a "technical" question, but rather a "registration" question. I would like to ask if the guys and gals at Scaleform if they could set up something for students and educators, much like how Autodesk has an educational community. I only see something for the professional side of the community, but nothing for the educational side yet. I'd like to get involved in such a thing.

Thanks!!

[Matt Doyle]

Hey there. Right now the closest thing we have to an educational license is the UDK integration. There has been talk of working with schools, but I cannot say where that has gone or is going. For now, your best bet is to learn to use the integration in UDK and use these forums as your source of education.

[Wizzard~Of~Ozz]

Working with Fonts. Using Sothink, embedded fonts now spits a log full of

[0285.96] Warning: Warning, Failed to load 'Font None.Digital-7': Failed to find object 'Font None.Digital-7'
[0285.96] Warning: Warning, Failed to load 'Font None.Digital-7': Failed to find object 'Font None.Digital-7'
[0285.96] Warning: Warning, Failed to load 'Font None.Digital-7': Failed to find object 'Font None.Digital-7'
[0285.96] Warning: Warning, Failed to load 'Font None.Digital-7': Failed to find object 'Font None.Digital-7'

Which didn't occur in August, but does now. While I understand you only officially support Adobe FlashPro. Sothink had no drawbacks until this release. Can you look into why a Sothink generated flash file generates all these warnings in October ( and possibly Sept, but I didn't use that version )? The file displays properly, but it's like it's looking for a packaged font first.

[Matt Doyle]

I'm sorry but I don't have Sothink installed, and couldn't tell you what is wrong. If you haven't already, be sure to watch the Fonts tutorial video in the Getting Started with GFX forum post, which explains how to use fonts in UDK. And just make sure you've done everything correctly.

In the future, we may create Sothink specific tutorials, but at this time, it is not a priority.

By the way, where are these error messages occuring? UDK log when you run the game? On import into UDK?

[Wizzard~Of~Ozz]

UDK when running the game ( log ) but only after updating from August to October. In August there were no complaints in the log. I get 1 error for every font location ( same font in 30 places, I get 30 warnings ). The font embedding system is quite different in Sothink. You cannot specify names for the fonts, it's just "Embed" and select a charmap to embed ( simplicity at it's finest ). I have a suspicion that it names them internally with one of the prefixes you've added recently ( most likely $ ) and there is no way to change this.

I've submitted a support ticket with Sothink on the matter as well.

[juanitudev1]

In the Getting Started with CLIK - 2 tutorial, I get the error

The class or interface 'gfx.controls.Label' could not be loaded.

Same thing for the button class. Any ideas?

[MaVmAn]

In the Getting Started with CLIK - 2 tutorial, I get the error

The class or interface 'gfx.controls.Label' could not be loaded.

Same thing for the button class. Any ideas?

Make sure your action script settings are good.

[a monkeys uncle]

Mr. Doyle in the first video you mention you'll further demonstrate on how to set up the scaleform launcher flash extension. Can you please elaborate on this?

[a monkeys uncle]

k, I'm going to post the directions here. Special thanks to awesome allar:

1) Open Flash (the trial version works just fine for this).

2) Click "help," once it drops down click "manage extensions."

3) Once in 'manage extensions" click "Install."

4) the directory for the scaleform file (Scaleform CLIK.mxp) you want to install is as follows: "C:UDK-2010-11/Binaries/GFx/CLIK Tools/Scaleform CLIK.mxp"

Once you've found the flie, click on it and choose "open" or double click it and the install will begin. Note you have to accept the agreement once the install begins.

Thanks Matt.

[Matt Doyle]

The instructions can be found here as well:

http://udn.epicgames.com/Three/Scale...essional%20CS4

[MasterTFT]

Perfect!

Thanks so much for these!

[Navy_Spitfire]

Does actionscript 3 work with Scaleform or is everything done with AS2.0?

[Matt Doyle]

GFx 3.3 is AS 2.0 only. GFx 4.0, which is currently in Alpha, supports AS 2.0 and AS 3.0

[Navy_Spitfire]

Silly question, where would I go to find out what version I have for future reference? I got the December UDK installed so I'm assuming that's using GFx 3.3

[Matt Doyle]

3.3 is what you have. 4.0 hasn't been released yet. And to clarify, that should have ready 3.3 is AS 2.0 only.

[Navy_Spitfire]

Another question, this one regarding video 3: Adding SWF to an object. Is there a reason why as I'm moving around, the image becomes blurred (or rather, shakes violently)?

[Matt Doyle]

I have not seen that behavior occur myself.

[thommie]

i've followed part 1 to 4 of the Official Scaleform Video Tutorials and i can't get it to work. meaning, the picture won't rotate or increase in size. the picture increasing in size is about the same as in the tutorials, and the scaleform launcher shows its working. i've tried naming everything the same as in the tutorials, didn't work either. tried giving it all my own name and adjust the actionscript for it, didn't work either. is this a common problem?

[Matt Doyle]

Not really no. The tutorials are all confirmed working. You've probably missed a detail somewhere. But, without specifics (error messages, warnings, what your code looks like, etc.), I won't be able to help you figure out what's wrong.

[thommie]

well, no warnings or errors at all. checked the log as well, nothing happens. i'm pretty sure nothing went wrong in kismet because that was quite easy.

here's the code:

_global.gfxExtensions = true;
_perspfov = 25;

var keyboardInput:Object = new Object();
Key.addListener(keyboardInput);

keyboardInput.onKeyDown = function(){
	var keyPressed:Number = Key.getCode();
	if(keyPressed == 89){
		PNGTest._yrotation += 5;
	   }
	else if(keyPressed == 85){
		PNGTest._yrotation -= 5;
	}
}

function MyDemoFunction(toggle:Boolean):Void {
	if(toggle) { PNGTest.gotoAndPlay("on"); }
	showScores();
}

function showScores():Void {
	fscommand("showScores");
}

in the properties panel of my movieclip it says PNGTest at the top, and in the library the movieclip is also named PNGTest.

[Matt Doyle]

So, does this work when using the Scaleform launcher in Flash? Does the image rotate, etc.? And it just doesn't work in UDK?

If so, it is more than likely a Kismet issue.

[thommie]

hmm, seems that restarting the computer did the trick.

yes it worked in flash, and i didn't do anything wrong in kismet

however, when i use the scaleform launcher, the image automatically zooms in, and when it has reached the end, it starts all over again. same in the game now, how would i be able to stop this, because i am guessing that it should stay at frame 1 until i touch the trigger. and i'm new to flash so i don't really know how to do that ^^

edit:
just added "Stop();" at frame 1 and 30 (first and last frame), with the idea that it doesn't automatically go to the animation and that the animation doesn't loop. would this be correct?

[Matt Doyle]

hmm, seems that restarting the computer did the trick.

Stranger things have happened!

just added "Stop();" at frame 1 and 30 (first and last frame), with the idea that it doesn't automatically go to the animation and that the animation doesn't loop. would this be correct?

That is correct.

[cridia]

Excellent collection of tutorials (especially the video tutorials), but would there be something like an actionscript 2.0 reference specifically involving special functions/keywords made for ScaleForm?

I am the type that works better once he understands what code he is working with (with the general Actionscript and Unrealscript being pretty well covered), but so far I haven't been able to find anything regarding Scaleform specific Actionscript.

[Jason Amstrad]

ScaleForm GFX is causing all kinds of usage issues with UDK users.
Epic should try to re-introduce the UIScenes again as a second option in UDK.
Users can then choose between ScaleForm GFX or UIScenes.

[Gwedair]

Is it possible to launch Scaleform without Adobe Flash? Are there any free alternatives? Since I can't afford this Adobe Product it would be important for me to use scaleform without it.

[Matt Doyle]

Scaleform does not need Adobe Flash to be used. You do however need a Flash editor to create content, such as Flash Pro, but you could also use Sothink SWF Quicker.