In a month like this it’s the perfect time for a look behind the scenes. And that’s what this text is about – I hope some of you find it interesting and the others are not too bored because of it ;). I will answer question about how the SP-Studio is made. But let’s first have a look at what this website looked like 10 years ago. Do you remember this? It was before the age of YouTube, Facebook and World of Warcraft… a really long time ago. Click on the image on the right to play with the first SP-Studio:
When I started to work on it I was still at school and had no experience with coding. I used Macromedia Flash to draw small animations for my South Park fanpage, but creating an interactive tool was something new for me. So I did it as simple as possible. I created a layer for every category (like in Photoshop or Gimp). When you click on a button the item was loaded into this layer. So it was not complicated in the beginning, I just had to learn a few things about Actionscript (that’s how you code in Flash). Here is a screenshot of what working on the SP-Studio looked like back then. You can see the timeline on top of the actual working area. This timeline contains the layers and every layer contains frames. When you jump from one category to anther a different frame shows up. I still use the same software, Flash. But the SP-Studio has become WAY more complex over the years.
The most important things about a character creator like the SP-Studio is the fact, that the items have to appear in the right order. In the SP-Studio every category of items has its own level (levels work like layers). The number of the level tells Flash if it is shown on top or under another item. Items within the same level replace each other. That is why it is more work to include objects for the “stuff” category – usually every “stuff” item needs its own level, because you should be able to include more than one of them. To keep track of which numbers I have already used and which item appears in front of the others I use a very long list ;).
Another important thing is that you take care of the position of the items. If a hat is only 1 pixel aside from where it should be it might not fit some of the hair-styles. A question I read a lot is: Do you draw everything yourself? Yes, I draw everything in Flash, using only my mouse. I added a picture I created some time ago about how I draw a hair-style. Nothing special, but you can see my favorites drawing tools. It is basicaly the same like drawing in Paint or Photoshop, but Flash is a software for vector graphics. Vector Graphics look cleaner than pixel graphics and by using them I can keep the loading time short for my visitors. It is a comfortable way to work because I can do everything with this single software: I draw, create buttons, code and publish in Flash. Some of my visitors asked me to do a HTML5 version of the SP-Studio, but even if I knew how to do this it would be way too much work. Right now I have no plans to give up on Flash.
This was my little insight look. See you in a couple of days with the big anniversary update!
