Developers FAQ
- The sim uses TweenMax extensively so read this first!
- Could you explain your glyph numbering system in more detail?
- What ActionScript version is the sim developed with?
- What is your development enviroment?
- Why are some things generated with code and others are design time library assets?
- Why didn't you store all the XML in one directory?
- What language is the sim?
- How come you use external video files in different parts of the interface?
- What was the video production process?
- Any tips on getting smoother video playback?
- How did you make the wormhole animation?
- Why are some of the sound files mp3s and some are wavs?
- How did you make that TSACS logo at the top of all the source files?
- What is that mess written in comment tags at the top of all the source files?
- How do I use the gate address viewer on my own web pages?
- What font is used in the system?
The sim uses TweenMax extensively so read this first!
If you plan on developing with the sim then you should download the TweenMax ActionScript 3 source. Extract it and copy the com/greensock directory into the sims "com" directory.
I do not include the TweenMax source with the sim as I belive it is best if you download the latest version from the TweenMax site. I can supply the version I used in the sim if requested.
Could you explain your glyph numbering system in more detail?
There had to be some way to refer to each symbol so I just arbitrarily numbered them from 1-36. Later on it was discovered via the Sateda Gate Address screen shot that the symbols had proper numbers within the system. So far only a small handul of these are known as they are not often shown in the actual TV show.
What ActionScript version is the sim developed with?
ActionScript 3.
What is your development enviroment?
I use FlashDevelop for most coding. I created an FD project in the root directory called "SGACS.as3proj". This isn't a true FD project, it's just used for easy access to the code files and the additional benefits from using an FD project. The reason it's not a true FD project is that I use the Flash CS4 IDE for actually publishing the content. With a proper FD project you would let FD do the SWF compiling. That's my opinion anyhow. The reason I use the CS4 IDE is that alot of the static content for each screen has been drawn at design time.
Why are some things generated with code and others are design time library assets?
Time for a sim history lesson. The sim has had several revisions. Only a couple of these were made public. It took me a while to work out the nicest way to work. At one point a project goal was to have the entire thing generated with ActionScript. Whilst this worked it also prooved troublesome in three ways. In cirtain situations it became quite slow to make simple changes to the interface. If these had been design time assets then it would of taken a few seconds. There was a lot more code and because the bulk of it was drawing related it did look a bit scruffy and endless which I thought might be off putting to people wanting to make their own changes. The final reason was that I thought it made things too complicated for other people to change.
The current logic is that most static objects are drawn at design time on the stage and anything that is dynamic is generated with ActionScript 3.
Why didn't you store all the XML in one directory?
There are Flash secutiry sandbox issues when a movie loaded from a subdomain tries to access a file in a different subdomain. Flash basically refused to load the file and I didn't want to mess around with the security system. It's best left on defaults.
Each screen has its own xml directory that stores any specific XML data for that screen including its language files. This has the added benefit that it encourages people to keep things seperate which will help when there are more screens.
Everything is written in English although it can easily be translated into other languages due to the external XML language files.
Each screen has its own language file, the english one can be found in "/xml/language/english.xml". To translate the screen to a new language involves copying the English file, naming it after your language and then translating the content. The final step involves telling the sim to use your language. You can read more about it in the Translators FAQ.
How come you use external video files in different parts of the interface?
I just found it easier than coding up a solution. It means the effects can be graphically presented in ways that Flash on its own can't do. One example of that would be the outgoing gate screens shield noise effect. I found a really cool post on the Quasimondo site about improved noise in Flash. That appeared to run as badly as the built in perlin noise function. It made other parts of the system chunter whilst each frame of noise was generated. By having a looping video file all of that processing is removed.
What was the video production process?
First I made each video in 3D Studio Max. Using the Video Post I rendered out a mov file with 24+ Million colors. The + indicates that it has an alpha channel. I then use the Adobe Media Encoder to convert that into an flv with an alpha channel. That's it, I then use the Video and Netstream classes to display and control the flv. I could of used f4v files but I found it easier to work with cuepoints using the flv format.
Any tips on getting smoother video playback?
I found the best mix for a smooth framerate was achieved using various techniques:
- Render the main source at the dimensions you intend to use the video. Scaling the video up or down will always have a performance and quality hit.
- Do not use the alpha channel.
- Do not rotate the video. It does look really cool as it all rotated nicely but it brings the gatescreen performance way down to around 10 FPS. I tried several things but it really seemed to be more an issue of rotating such a large graphic. If you can then cheat with the video and do the roration actually in the video itself.
- There didn not seem to be much difference when using f4v over flv so I stuck with flv since it is very easy to use that formats cue point system.
- Do not use a high video framerate. I found the default Max was outputting was 30 FPS so the resulting mov file had the same FPS. In the Adobe Media Encoder I set it to reduce the framerate to 15 FPS. That almost doubled the performance I was getting before with 30 FPS.
- I create the video in 3D Studio. I render it out as a MOV with 24 Million Colors+. The + means it has an alpha channel. I then use the Adobe Media Encoder to convert that to an FLV. I choose a single pass VBR and set the FPS to 15. Turn off the audio channel if you're not using it.
How did you make the wormhole animation?
The wormhole animation is actually one big video file. Here is the production process from beginning to end:
- I created the initial wormhole in 3D Studio Max. It's just a long line that I looped around. The original max file is included in the video/wormhole directory.
- The audio took me ages to put together. My first attempt was to simply pull the sound off a few Stargate Atlantis episodes. That didn't work very well since they almost always had music playing at the same time so it sounded really crappy. My next attempt was to create the sounds myself by distorting various wav files I had like Jet fly-by sounds etc. That worked alright but if you watched the show alot you could tell it was not quite the same. This actually took me a couple of days to finish. I was happy to leave it like that since I wanted to get bakc to coding but then I sat down and watched the whole first season of Stargate Universe. From a sim developers point of view that show is awesome. Why? Because they hardly ever have background music playing. That helps feed the shows darker tone. Why does that help us? They actually use the same wormhole for Universe as they do for Atlantis. They just color it white instead of green. It also means we now have access to wormhole sound effects without music overlaid. I ripped the effects from 1x06 Water when they first travel to the ice planet. I had to loop it a bit and there are some audible distortions where I joined it up. Even then though it sounds a million times better than my home-brew sounds.
- So, with 3D Studio I rendered out two videos. One of the wormhole at the same dimensions as the sim 1280x800 and the other at a smaller optimised size of 640x400.
- I used Windows Movie Maker to combine the audio and video. Well, ok, I did this as a cheat because I originaly embedded my own home-brew sounds into the video using 3D Studio. To avoid re-rendering both video sequences I used Windows Movie Maker to replace the audio track with the new improved one. I also added a fade from white to the start and a fade to white at the end. In some episodes they do this cool water dissolving effect at the end of the wormhole but in others they just do a simple fade to white. I chose this option purely because it was quicker to do. The Windows Movie Maker project file is included in the video/wormhole directory, it is called "wormhole.MSWMM". I used the same project file for both video versions, I just swapped the video track for each version.
- An extra step I had to do before I could publish the video was to create a couple of custom publish profiles for Windows Movie Maker as the default ones don't support either of the wormhole videos dimensions. To do this I downloaded the Windows Media Encoder 9 Series. One of its utilities is called the "Windows Media Profile Editor" which lets you create your own profiles for Windows Movie Maker. The ones I used are also included in the video/wormhole directory. To use them you must create a directory called "Profiles" inside your "C:\Program Files\Movie Maker\Shared" directory and then copy both the prx files into there. You should now see the two new profiles in the Profile selection stage of publishing via WMM.
- Publishing in WMM is pretty straight forward. Choose "File->Publish Movie->This computer" and then give the video a name and pick an output location. On the "Choose the settings" screen select "More settings" and then from the drop down list select one of the two profiles we made earlier. Tap Publish in the bottom right to start outputting the WMV file.
- Because we've used our own dimensions the actual WMV file will not play, at least it doesn't for me. That doesn't matter since we're just using this as an intermediatary file. The next step is to load up the Adobe Media Encoder to convert the file to an FLV. I just set everything to maximum quality and set it to work.
- That's it, we now have a couple of FLV wormhole files. One at the true sim dimensions and one at half that size.
Why are some of the sound files mp3s and some are wavs?
I use Sound Forge for making the audio files. When you save a sound as an MP3 it adds a little bit of silence to the start and end. This means looped sounds have an audible blip as the sound loops each time. By using a wav file this is avoided as they don't have this automatically added silence padding. I found this cool and simple code from Anton Fedorov that lets us load in wav files. The format is quite specific, stick to 44,100, stereo.
There really is an audible difference between using the wav files over the mp3 versions. From this point on I'll only be adding wav files to the project.
How did you make that TSACS logo at the top of all the source files?
I used this great website to make it called PAT or JK's Text ASCII Art Generator (TAAG). It's very simple to use, you just set your options or leave them on defaults as I did and then type your word(s) in. Then you can choose which font you like. There's even a "Test All" in the fonts list so you can see your word in all 300+ fonts.
What is that mess written in comment tags at the top of all the source files?
That is actually a neat TSACS written in ascii art. The reason it looks like a mess is because the code editor you are using is set to use a none monospaced font. This means the characters will not be evenly spaced. Try opening the same file with the code font set to be Courier. The Flash IDE is set to use Courier as default.
How do I use the gate address viewer on my own web pages?
It uses some very simple HTML. The first thing to do is include swfobject2 in the HTML head section:
<script type="text/javascript"><!--//--><![CDATA[//><!--
swfobject.embedSWF("gate-address.swf", "address1", "820", "140", "10.0.0", "expressInstall.swf", { name:"Lantea", address:"28,3,2,25,16,14,15", bordercolor:"0xEFEFEF", bgcolor:"0x1F1F1F", textcolor:"0xEFEFEF", symbolcolor:"0xA78CBC" }, { wmode:"transparent", bgcolor:"#1F1F1F" });
//--><!]]></script>
The flashvars passed in are self explanitory. I set wmode to transparent for the TSACS site as I wanted the drop down menu to go over the top and this is required. The other part is setting the z-index in CSS for both the drop down menu and the "gate-address" classs. In the body of the HTML file I use:
<div id="address1" class="gate-address">28,3,2,25,16,12,15<br /><a href="http://www.adobe.com/go/getflashplayer"><img srchttp://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></div>
So the id is used by swfobject whilst the class is used by me in the CSS file to display the alternative content if the user doesn't have Flash installed or has Java disabled. I just write the address numbers and provide a link to the latest Flash plugin on the Adobe site.
What font is used in the system?
The name of the font is BankGothic Md BT. Because it is not free I could not distribute it with the sim. What I could do is embed it in an external library swf "misc/Font Library/fonts.fla". This means that as long as you don't republish that file you can use the font within the system. The FontData class ensures our external shared font library is only loaded once. Althought the fla for the font library is in the misc directory the actual swf is compiled into the main sim root directory so it can be easily accessed by all the other swf files.