Give Feedback
This tutorial will, more or less, teach you how to create a basic widget with Flash tools. Prepare for a long, long journey! The original, with way better format can be found here:
Let's begin:
1. Setting up the necessary tools
You will need Adobe Flash tools, this is inevitable. Tools like Trilix, SWiX or Sothink are good for basic 'code hacking', but not for serious development of Flash elements. You can download Sothink Decompiler to speed up decompilation and do basic stuff on .swf/.gfx files though. To create Widgets from scratch, I recommend using Flash CS6, to modifie existing .swf/.gfx I recommend * using Flash CS4. You will need to keep in mind, that if you compiled/decompiled a file with either CS6 or CS4, you will need to recompile it with the same tool version. If you, for example, decompile CS4 files and recompile them with CS6 ** they will create bugs in game, like weird symbols and messed up UI elements, or no HUD showen at all. You will get to notice anyways during the compilation process, because usually compiling with the wrong tool version, will spit out tons of compilation errors.
* by proposal of SkyUI team and due to personal experience
** which is perfectly feasible if you're planing on upgrading your file, but not if you want to downgrade it
But even if there's no compile error, you can't make a file, like the vanilla .swf files, that's supposed to be compiled with CS4, compilable in CS6 without dramatic changes to the file structure, and changes to your source code. This is the reason why I additionally propose to use CS4 when modifying existing UI elements. If you ever coded in Java you will understand what I'm saying here. In Minecraft (based on Java), every new update brought new and more efficient code, resulting in variables having whole different structures like in previous versions. Often you are forced to rebuild all your scripts from scratch, AFTER having gone through a tedious tutorial process of teaching you how the new code works. In Skyrim modding you basically learn a tutorial once, and can always make use of the knowledge gained, this is not true for Action Script. This, for example, is also a reason why Papyrus is so easy and effective to use. You can always make use of one and the same code, even with SKSE. Papyrus will never get updated to such an amount that your old code can't be compiled with it, but Java, and respectively Actionscript, does.
Flash tools are free as trial for about 4 weeks, from there it will cost 24, 95€ a month to furtherly use them. Also, as far as I understood it, you can ONLY buy a license for a year, you can't have the tools for just a month, or 3, or half a year, which is a bit of a disapointment. I'm just lucky I'm currently working on other Flash projects so I was allowed to buy the license which runs out by september 2015...and it costs me 24,95€ a month. So keep this in my mind when having any crazy ideas on UI modding. However, here's where to download the Flash tools:
Sothink Decompiler
Flash CS6
Flash CS4
2. Setting up the necessary sources files
You will need source files, which are granted to us by SkyUI team. To create widgets from scratch I recommend using @Schlangster's source files, to modifie existing Skyrim UI elements I recommend using @Mardoxx's source files. It's good practice to use CS6 for Schlangster's source and use CS4 for Mardoxx's source. Skyrim has been build with CS4. You will want to use CS4 for Mardoxx's files anyways, because compiling them with CS6 will cause previously mentioned errors in game, and make you're going to tear your hair out, because the files won't properly compile. Optionally you can do as Schlangster proposes and set up Github on your computer, to easily push files to the SkyUi Github Website. I did so previously, but since the loss of all my uploaded source files, I don't feel the nerv to do it again, unless SkyUI-Team asks for. Instructions on how to interact with the web based part of Github is to be found on their website. ALWAYS make sure, to give proper credits, because as far as I can tell, with the exception of maybe Alex J. Velicky on his Falskaar project and the SKSE-Team, there's no community member even remotely having done so much for the community then Schlangster, Mardoxx and team did. Here's where to download the source:
Schlangster's Source
Mardoxx's Source
3. Setting up the necessary file structure
Now let's get to the setup of files. Let's concentrate on making the widget this time, we'll get to more experienced stuff, like meters, or vanilla HUD modifications on another day. It's probably a good idea to make a seperate source folder for every new .swf based Mod you make. So for example, my Map Marker Mod has a different folder as my Widget Mod. If you'd plan on creating a Mod that lets you modifie the HUD in MCM, you'd need to make it seperate, because as you can imagine, mixing files used by CS4 and CS6 is a very bad idea!!! I assume you've already set up Adobe Flash CS6 and downloaded the zipped source files by Schlangster? Good. Now copy the source folder somewhere you can easily back it up, whenever you feel something went wrong, and make a second copy of it on the desktop. You don't need to put it on the desktop, but out of browsing convenience reasons, I strongly advice you doing so. You will browse a lot, specially if you're a beginner, and so you might want to keep things as efficient as possible. The structure you need to make should look something like this:
Quote
YourSourceFileFolder
- build
- dist
- misc
- scr
- ReadMe.md
The only relevant folder inside this structure for you is the src folder. You can probably delete the others, but NO!!! don't do it, I'm not far enough in learning myself, if those folders are needed for compilation or not, so it's probably best to just ignore them. As the name suggest the src folder has all the source files inside. As previously mentioned we will, for now, concentrate on creating widgets. The files you'll need for this are inside the HUDWidgets folder (browse for them). To create a widget this time we do not make one from scratch, but use an already exisiting widget. Source files for Widgets exist as .fla (Flash Movie) files. And the particular one you're searching for is the one labeled arrowcount.fla. This arrowcounter was developed by @Schlangster on my request some month ago. So, firing CS6 you will want to open the arrowcount.fla. Then follow the next steps:
Quote
1. You will get a notification about font errors, simply ignore and click ok <-- this probably happens because you do not have those font files on your computer, but they are inside the source package, so that's not a problem
2. The corresponding action script file is inside the src/HUDwidgets/skyui/widgets/arrowcount folder, open it as well
3. To get a basic understanding on how the .as file and the .fla file interact, read through the .as file and figure where to find the relevant data inside the .fla file, use the screen below as reference
http://www.nexusmods...Images/467230/?
Now go into your .as file again and read what it says on top
Quote
import skyui.widgets.WidgetBase; imports information from inside the WidgetBase.as file developed by SKyUI-Team
class skyui.widgets.arrowcount.ArrowCountWidget extends WidgetBase; states that this .as file extends the WidgetBase file which is similar to how Papyrus file extension works, this also exactly recreates the file path, where skyui is the origin folder. Look at the ArrowCountWidget data inside the .fla file to make sure the file path is the same for both files as also showen in the screenshot upside!!!
So, now that you've made sure that both files have the same file path set up, memorize this information to always do this again whenever you set up a new file. The easiest way to set up a new file, for example, if you would like to create a basic weight widget, is by duplicating the arrowcount.fla and .as files and change the file path, names and all relevant data FIRST, then start to actually import your code changes. You can start creating files completely from scratch once you're more familiar with developing Flash elements. Remember, the first thing you always want to do, is sycronizing file path structure inside .as and .fla files. Also, it's probably best practice to learn by simple copypasta, but do read what the variables tell you and try to understand them. Copypasta has limits, for more experienced code you'll actually need to learn the code.
4. Learning how .as script files work
Now we get into detail information on Actionscript files. This seems to be a very complicated task, and believe me, for a beginner it is. So first I will roughly describe how the structure looks, and then we care about the actual code. There's various relevant variables to be found in other .as files, primarly inside StatusWidget.as, Meter.as and ActiveEffect.as, use those variables with copypasta to start experimenting. Not all variables can be used on every flash element. Some variables are ONLY for counting widgets, others are only for meter widgets, you'll need to fiddle to figure. Go into the arrowcount.as file and read:
Spoiler
So basically the above code will define various functions you can interact with from inside Papyrus code by invoking information into said variables. This code will allow you set the arrow count visible and define the integral count. You're probably getting confused by the string, which usually referes to letters rather then numbers. But the int that gets counted inside Papyrus, will be displayed as string inside the flash element, so this is perfectly good, irritating but good. Now let's take this further to the code I actually tinkered for my arrow counter...
Spoiler
Not only does this code look much more 'tidy', it also made use by various functions from other .as files. What does that mean? It says that if you import from or extend on other files, you can automatically adress code inside those files from inside your Papyrus code. You do NOT need to define the code snippets inside your .as file again. This ia also a reason why you will need to do so much trial and fail in Papyrus later on. You'll need to figure what's explicitly working for your widget, and what not. However, the above code has two integral counts, one text field, allowes your widget to be turned off and on, its scale can be set, as well as its position and its transparency changed. So in a nutshell,this arrowcont.as files actually is equivalent to three files bottled inside your custom .as script. I figure this all reads complicated, probably also because I'm describing it extremely complicated, which I usually don't, but there's nothing I can do about it, developing flash elements IS complicated, and you will need to browse, read, trial/fail and compile a lot, before your first widget will work in game...
5. Learning how .fla movie files work
Ok, so now that you got yourself familiar with .as files, we're now going to make changes inside the arrowcount.fla, to make use of the newly imported code. Remember, always synchronize the file path structure before hand, can't stop repeating to remind you of that. The original arrowcount.fla has a simple arrow icon and a global counter telling you how many arrows are inside your inventory. We're going to enhance this arrow count widget, by also displaying the currently equipped arrow name, and the numbers of currently equipped arrows. So basically we will duplicate the integral counter, import a string field, and as bonus, will also change the appearance and color of the arrow count widget. First have a look at this screenshot:
http://www.nexusmods...Images/469436/?
You will notice it has a whole different look from the original arrow counter. To see how the arrow counter looks inside game, I recommend taking a peek at my Widget Mod. On the right sight you will recognize that there's also changes made to the library. The library basically contains everything that is used by the .fla file. This could be fonts, pictures, text and various other items. What you want to do now, is importing a small arrow icon made by @Psychosteve, which is the icon developer inside SkyUI-Team I assume. The new arrow icon will act as visual impression of bolts from DLC's, as well as spears and other ranged weapon ammo. Make it so:
Quote
1. duplicate the weapon_arrow icon and rename it to weapon_bolt
2. right click on weapon_bolt and select properties
3. now click Source File... and navigate to the SkyUI icon ressources usually to be found in src/ressources, they're labeled icons_effect_psychosteve.fla for example
4. now in the popping up window browse the tree to find an appropriate icon and select it (weapon_bolt is in src/resources/icons_item_psychosteve.fla -> icons/item/weapons/dlc01/weapon_bolt
5. once selected and all windows closed, right click your weapon_bolt icon and copy
6. right click weapon_arrow and select edit
7. paste the previously copied weapon_bolt and rearrange to your liking
This is one way how to import new icons and combine them. You can also use this to replace icons, so for example if you want to make a basic weight counter, you'd just replace the arrow icon with something that reflects weight. So now, since we're learning here how to replace icons, let's teach us how to customize them. I like my UI colorful, in tradition of old RPG games. If this is not your cup of tea, and you simply want to use the icons as they are, then you're better off to skip the next lesson. So now we have a arrow icon symbol that has a bolt component added. Let's recolor it! To customize the single icons you will want to right click and edit it in the library. On some occasions, and based on how you've structured your customization * you can also furtherly customize the elements inside the icon holder ** or the widget as whole directly. You'll need to fiddle around to figure. Use CTRL-Z extensivley during trial and fail and only save if you're certain your changes are appropriate. Ok, now let's customize the weapon bolt. Right click it in the library and select edit.
* for example, you could also make this customized arrow icon outside of Flash and then have it imported
** see the library
Now it's probably best practice to get familiar with the right side customization bar. Basically it's the same as in programs like Paint, Photoshop or Gimp. The important information here is, a icon can have several layers which you will need to sometimes select seperately to customize them. It's all dependend on the icon and they're are not always the same. If you're lucky the icon has a single layer which you can modifie, if you're unlucky, then there's a miriad of layers which you will sometimes have to split and glue back together later. If you need to do this, it's important that you do it correctly. It's basically the same as inside the CK, if you do not work carefully, you will create a lot of 'dirty edits'. You will notice if you made bad edits once you're in game. Flash will not always necessarily inform you if you did something wrong. Now, what you want to try is giving the bolt icon another base color and edge color.
Quote
1. select the bolt icon by either dragging a window around it or double clicking it
2. now change the stroke color to change the edge, you might also want to change the width of the line
3. now change the fill color to change the base color
4. in the upper row there's a selector named 'Edit Scene', click it and select 'Scene 1' to get an overview impression of the complete widget how it will be displayed ingame
There's tons of customization options available, so start playing with them and later see the results in game. The last thing we want to do now is setting up the functions that are used inside the .as file. So you will learn now how to import the arrow counter and text elements into your game.
Quote
1. first right click ArowCountWidget in the library and select edit
2. click the 'properties' tab located besides the 'library' tab
3. now select the counter element indicated by the number '10000', see how the propertie window changes its state
4. see how it says countText in the name area?
Stop!!! Now before we continue, just for reference, go into the arrowcount.as file and search for 'countText', found it? Good, you probably see what I'm up to?
Quote
5. now copy and paste the counter element and reposition it to whereever you want
6. rename the new element to 'countText2'
7. make another copy of the first counter element, replace the '10000' text with 'xxx' and rename this third element to '_labelTextField'
8. rearrange this third element to your liking
Notice that you can also customize those counter/text elements. For example you could recolor them to adapt them to the recolorization of the icons. You probably ask yourself, what the heck was I doing? Well, you've made a duplicate of the already existing counter element to later display the currently equipped arrows, and made another duplicate to later display the name of the currently equipped arrows type. Exchanging flash elements to show text instead of numbers is simply done by replacing numbers with letters. So if you want to show the arrow name, you just need to change it to show strings instead of integers. If you want to display floats, you will need to put a dot somehwere inside the number. Integers = 10000, floats = 10000.0, strings = xxx. The original counter will be used for what Schlangster intended it to do. It will display the global number of arrows inside your inventory. So ok, now that you've learned how to modifie .as and .fla files, it's time to learn how to connect both files in order to make them do what they're supposed to by compiling them.
6. Compile the fla. file into a format useable for the game
Before I'll explain how to compile, I want you to again read through the .as file and figure all the connections to the .fla file. I can't emphasize and encourage you enough to do so. It's important that you did not simply copypastaed what I presented you inside this tutorial. Learn all the diverse variables please. If you do so, you, and respectively the mod user community will benefit greatly. Capable Flash Modders are extremely rare, and I understand this is due to the degree of difficulty and the product prize. With this tutorial I can help you to overcome the difficulty factor. You will scratch the surface of UI modding, rendering you an apprentice, but if you happen to have mastered this 'art', you will be amongst the finest of modders the community has to offer *. I want to honorably note @LordConti2 from the Nexus here. Go and have a look at his Mods, it's amazing what this guy achieved with UI modding, specially because it was way ahead in time of every other effort. However, let's continue with compiling:
* I haven't even remotely mastered it yet
Quote
1. make sure all your changes to the .as and .fla file are appropriate
2. save both files, make sure the 'Compile Errors' tab is selected in the lower area of Flash
3. hit CTRL+SHIFT+F12
4. now change the 'Output file' to be placed at the desktop so you can easily access it
5. leave everything else as it is, Flash Player should be 11.4, Action Script should be 2.0
6. now hit 'Publish'
A note on compile errors!
Ok, now, this is something I can barely adress. If you happen to have compile erros, there's not a lot I can do, then telling you that something went wrong. Usually this happens to wrong file structure mentioned in part 3. of this tutorial. If you get a high number of compile errors, this is likely due to this reason. If you maybe have like 5 or 6 errors only, then you maybe have some typos inside your .as file, or you forgot to import information from other .as files, or you haven't correctly syncronized file structure and variables inside the .as and corresponding .fla file. All errors I ever experienced, were always related to me using the wrong tool version, not having the correct file structure set up, or forgot to import/extend 'Mother' .as files. Flash will search for .as and .fla files that are used by your widget in the correct folders and pack them inside the compiled file. If those files can't be found by Flash, due to faulty file structure, then this will likely create said compile errors. Files compiled with errors will NOT work in game, even if there's only one error. If everything's working perfectly during the compilation process, you will have your newly created .swf file on your desktop. Please copy this file into your Skyrim folder:
Data/Interface/Exported/Widgets/YourWidgetFolderNameIf you can't find those folders, please create them. Name your Widget Folder to something that reflects your Mod. For example my Folder is simply named 'WM' for 'Widget Mod'.
7. Build your actual Mod inside the Creation Kit
Ok, puhh...now that's done, let's continue with the most important part. Make use of the .swf file from inside Papyrus script. The way it works, is by using various SKSE 'invoking' functions. You will now want to start the Creation Kit, and before, make sure that the SkyUI source files are copied to your Skyrim folder. I'm refering to the .pex and .psc files, NOT the flash files. Usually you can find the SkyUI SDK files over here, BUT, and that's the personally recommended way of getting the source files, they're also inside the .bsa coming with the SkyUI Mod. Unpack those script files with a .bsa browser and copy them to your Data folder. Some files are missing from the Github download. Make sure to build your new plugin with Update and all DCLs as master enabled, IF you want to cover assets imported by this master plugins. For example, an arrow counter widget also wants to display bolts and spears from Dragonborn and Dawnguard.
So ok, pretty much the only thing needed to enable a widget is by creating a new quest. So head on:
Quote
1. create a new quest: Priority 60, start game enabled, run once
2. click ok and save your plugin with an appropriate name
3. in the quest, set up a new alias: SpecificReference -> PlayerRef
4. add the script SKI_PlayerLoadGameAlias to this Alias
5. Ok out of the quest and save you plugin again
Basic setup done, now let's ge to the funny part. Basically Widget Mods make use of three script types. The actual Widget Script, the Update script pumping information into the widget, and the MCM configuration script, if you want to be able to customize your widget from inside the ingame MCM menu. The update script will update information on a given interval for your widgets to display. Usually it does that by simply calling a function inside the widget script OnUpdate(). So please make three new quest scripts with appropriate names. Examples, where XXX resamples your Mods name:
1. XXX_ArrowCountScript2. XXX_MasterUpdateScript3. XXX_MCMScript
I will not describe how you actually build scripts inside the CK. Being capable of scripting with Papyrus is a prerequisite to even remotely think about creating UI related Mods. I will post the scripts of my Widget Mod instead, and let you figure how to do it. However, I will give you some hints on what actually happens inside those scripts. So let's continue:
Arrow Count Script:
Spoiler
Master Update Script:
Spoiler
MCM Script:
See second post, I've reached the post limit.
Things to remember:
1. you have to make a new script for every new widget, unless you want to make a giant and inconvenient single widget (think about the amount of icons inside your .fla)
2. you have to call every new widget script from inside the update script
3. the .as, .fla and .psc variables are pretty much all available inside SkyUi and SKSE or you to learn, if you want to get more advanced, see code from @Chesko, @LordConti2 or the Clock Mod
4. for the moment there is no function that allows to modifie colors on static icons via MCM or Papyrus code in general, I'm working to get this done
5. setting up the MCM menu is the most sophisticated part. You'll need to have done this before or you will certainly fail. All variables inside the MCM script have been described before.
Also, see this screenshot on how you have to fill propertys on the widget script, the update and mcm script will have all properties filled, the explicit widget script does not:
http://www.nexusmods...Images/469622/?
11 comments
And just 26 endorsments ?!
And thank you for the tutorial. It was very helpful :). Though the code seems to be missing (the spoiler parts).
Though reading about the inconsistencies between CS4 and CS6 alone, I'm a bit scared to try this with another shiny new version - any comments on that?
But this was incredibly helpful, as I could not find anything on how some of this stuff works (many of these commands are not even in the CK wiki).
Thank you for this - this sheds like on so much undocumented (well, at least where I can find it...user error on my part) stuff.
Now, I have to figure out how to add some of these properties - and I almost want a ....widget repository....that I can start attempting to do stuff with.
(I don't even know how to find the core stuff in the game ... ).
thanks again.