6-6-09

So my new website is up. I've been working on this for the last couple months in my spare time, which is why there haven't been many updates lately. So far this is my favorite incarnation of my website. I thought it was time to make my site reflect that I had turned my career focus from 3d to Flash and the web. Unlike previous versions I completely redid the site from the ground up. It has a new site structure, new CSS, new Flash and new Javascript; overall I think everything is a lot cleaner. I also got a chance to try out Papervision with the navigation and am very happy with the 3D card flip effect for the featured projects. I will probably find myself working with it more in the near future.

My website isn't the only thing I've been keeping myself occupied with. I have two new additions to the flash gallery. The first is a bunch of animations for the wizard site. The second is a new splash page for the wizard site. I'm very proud of these projects as I had a strong hand in designing and programming both. Animations for Wizard101 Splash page for Wizard101
I've also added two new pieces to the art gallery, Oracle and Rooftop. Both of these are 11X14 ink washes. Oracle Rooftop

3-16-09

I recently had some questions that revolved around making Flash applications that can take up the full screen and still look correct. In other words, how do you make applications that are dynamically resizeable. This isn't necessarily the sort of thing that you want to work into every project that you do, as it adds a bit of work to the initial setup of your file. If you find yourself with an application that you frequently reuse across different sites, use in multiple areas on a single site or have a client that can't decide how large they want their layout to be; this is something that's worth your time to implement.

In order to get your application to resize you'll need to make sure that your embed and object code have scale set to scale="noscale". Then you manually set width and height to whatever size you need for each instance. For my examples I'm setting the width and height and rendering the Flash file into a <div> with a matching width and height.

Flash app at original size, 200 X 100.

Same flash file as above at larger size, 300 X 150. The stage's x and y coordinates don't remain in the upper left, instead padding is added around the stage evenly.
 
Flash isn't really set up to do resizeable applications by default. When you scale something up and it's set to noscale mode, it doesn't size up as you'd expect. Instead of the 0,0 coordinate remaining in the top left corner, padding is added around the stage in equal amounts. This means that, as the file changes size, you're going to need to constantly recalculate where the boundaries of the stage actually are and keep repositioning things as necessary. Fortunately this ends up not being very difficult.

The first things you'll need are some global variables to have for reference throughout your main file.
//the original width of the flash file
private var widthRef:int = 200;
//the original height of the flash file
private var heightRef:int = 100;
private var top:Number = 0;
private var right:Number = widthRef;
private var bottom:Number = heightRef;
private var left:Number = 0;
It doesn't matter what size you develop your Flash file at, since it's going to be resizeable anyway, but you'll need to keep the reference to the width and height in order to calculate the new size. If you change the stage size at some point during the dev cycle, remember to update those values or things will go wonky.

Next you'll need to set up the function to calculate the new boundaries.
private function resizer():void{
var targetWidth:Number = stage.stageWidth;
var targetHeight:Number = stage.stageHeight;

left = widthRef/2 - targetWidth/2;
right = widthRef/2 + targetWidth/2;
top = heightRef/2 - targetHeight/2;
bottom = heightRef/2 + targetHeight/2;
}
Now you'll want to add an event listener for the stage resizing in your initialization code. You'll also want to call the resizer function from the initialization code. You'll want to do both because most of the time the resize event will have triggered before the app hits the initialization block but not always.
private function init():void{
stage.addEventListener(Event.RESIZE,event_stage_resize);
resizer();
}

private function event_stage_resize(event:Event):void{
resizer();
}
That covers everything you need to know to be able to calculate the new boundaries. Now it's just a matter of making sure that everything goes to the right place every time the resizer function is called. I've found that my stage placement calculations tend to fall into two main categories, keeping things in the top left corner and keeping things centered on the stage. Most fiddly placements of things occur within containment sprites which don't need to know the boundaries of the stage, just how large it is and when that size has changed. In order to accomplish this easily, I create three arrays: movers, centerers and resizers. In the resizer function, I loop through the arrays and move them appropriately. Every time I create something on the main stage I push it in to whichever of the arrays it applies to and then I don't have to worry about creating a whole bunch of global variables just to keep track of placement.
//all the movers are just kept in the top left corner
for(var i:int = 0;i<movers.length;i++){
movers[i].x = left;
movers[i].y = top;
}
//all the centering objects are kept centered
for(i = 0;i<centering.length;i++){
centering[i].x = left + ((targetWidth - centering[i].width)/2);
//optional line for keeping things vertically centered
centering[i].y = top + ((targetHeight - centering[i].height)/2);
}
//all of the objects in the resizers array have a custom function that updates its display in a specific way
for(i = 0;i<resizers.length;i++){
resizers[i].resize(targetWidth,targetHeight);
}
The resize function is added into a custom class, one that would probably extend the Sprite or MovieClip. This is where you'll be spending most of your time with your calculations. I usually have a MainContainer class that's pushed into the movers and resizers. Every time the resizer function is called, the MainContainer is moved to the top left corner and a resize function is called on it telling it what the new height and width are. Because the coordinates for any children in the MainContainer are based on the MainContainer's coordinate space, you can place things in it knowing that 0,0 will be the top left corner of the stage. Then you just have to figure out how everything should be layed out within it based on the new width and height. This tends not to be difficult, mostly tedious.

Hopefully this helps answer some questions about how to handle resizeable applications. Feel free to contact me with any questions you might have.
Source Files

Above is an example with a few different pieces placed about the stage. Try resizing it to see how the pieces stay in the right spot.
Width: Height:

 

3-10-09

Player Started and finished work on a new mini project for my Flash gallery, a standalone flash video player. It started out as something quick and dirty for testing videos at work, to make sure they looked and functioned all right. Then one thing led to another and it snowballed into something a bit larger. A lot of the features resulted from requests by some animators, to help in watching reference footage for their work. I added slow speed viewing, frame-by-frame progression and a toggle for the horizontal view.

I learned a bit about how Flash processes its video while working on this project. I had originally intended to be able to do frame progression both forward and back. It even seems like you can, based on the parameters that can be fed into the seek command for video, which allow for a specific seek time within milliseconds. It turns out, however, that you're not allowed to because of the way that Flash compresses video. It looks like Flash sets keyframes every 10-50 frames within video that's being compressed and you can only seek to those keyframes. Attempting to seek to anything else will just jump you to the next keyframe down the line. I bypassed this with forward frame progression by setting a Timer to play the video for one frame's worth of time. The framerate is frequently encoded in the metadata of the FLV; if it isn't I default to 15 FPS, the default encoding framerate. I can't do this in reverse because Flash offers no option to play Flash videos backwards. I did something similar with the slow speed playback, setting Timers to alternate between playing and pausing the video playback.

These techniques result in an imprecise method of slow playback, sometimes not working quite as anticipated, but the animators seem happy enough with the results. I'm hoping to add a few more features in the future and I plan on using the skin to decorate my own site's video player.

For those who are interested in using the FLV player, it's available for download on the gallery page. I also included tutorials on how to grab any FLV's you want to keep through Firefox and Internet Explorer 7.
 

12-8-08

Player Nice large update for the game this time. This last month I managed to plow through all of the player graphics. I think I was getting pretty good with the pixel art by the time I started working on her and I'm really happy with her overall look. I really wanted rework some of her animations, I now recognize a lot of places they could be stronger, but I don't really have the time. I am hoping to add motion blur and effects to her attack but we'll see. My friend Trent also put together some background music for the first level. I really like how it fits in there; it makes the game feel a lot more intense. He had also been working on the graphics for the boss of the first level as well but an untimely hard drive failure has passed all of his work into the great unknown. It's really unfortunate as the boss was looking very cool and had a really fun concept. I have some of the sketches still and I will try to post some in my next update.

The Mounts Burned There will be a few more minor updates to the game but I am bringing this project to a close at the end of this year. It's been one of the best experiences I've ever had but it's time to move on to the next thing. A big part of my decision is that I've learned a tremendous amount about programming (especially how to do proper class based stuff) over the last year and will be continuing to do so over the next year as well. The game's code desperately needs to be reworked and I would really rather be working in ActionScript 3 at this point. With the laundry list of things that still need to be added on top of that conversion, it would almost mean starting over. Really, after working on this for a year and a half, mostly by myself, my motivation is starting to flag. So I've decided to move back to 3D for this next year, let my programming skills grow a bit more, and then move back into doing Flash games after that's done.

I also added a new painting to my 2D Gallery, The Mounts Burned. I enjoy this one mostly because of the technique involved with making the flames and smoke. I used salted water and a wet ink wash to get the effects. It took a few tries but I think I've added another brush skill to my belt.
 

10-27-08

Player and Gulp Completed all the animations for Gulp with the game. I'm really happy how these turned out; I think I'm getting better with the pixel art as I go along. My absolute favorite frame is pretty much not visible so I decided to post it here because I'm proud of it and it goes by so fast it'll never get seen otherwise. I've also started on the main character, at long last. When I was drawing out the animations I got better as I went along. Unfortunately the main character was the first character I drew so I think her animations are the weakest of all of them. I figured I could make up for it a bit by doing her graphics last so I could get the hang of pixel art by the time I worked back to her. I'm really happy with her look and I'm excited to finish all the character art off.
 

3-10-09

Zarg Finished up coloring the Zarg animations for the game. Now I just need to color Gulp's animations and all the base enemies will be complete. I'm moving to a new apartment this month though, so my time to work on things will, once again, be a bit fleeting.

I also managed to redo the top nav of the site a bit. The fog is now dynamically created and offers a bit randomness for interest. The thumbnails are also now pulled in randomly from external sources. This way I'll be able to keep them updated with new work easily and keep the nav more intersting.
 

9-4-08

The last month at my job was full of overtime so I've only been able to do bits and pieces of projects. The zooming application for my friend is waiting approval is definitely in a demonstrable state right now. One of my new applications for the Wizard101 site is also now viewable. Finally I've been working on the site itself again. I added filler background image and finally got around to center aligning the site. No more awkward amounts of space on the right side of the screen for users with large monitors. I also fixed up a few buggy areas which I won't mention in the hopes that no one saw them.
 

7-27-08

Wobble and Stabby Just a quick update for the game. I've got the pixel art in place for Wobble and Mr. Stabby. I thought doing the pixel art was going to be a tedious and horrible process but it's turned out to be tremendously fun. I'm still learning a lot and the process becomes faster and better with every finished animation. It won't be too much longer before I can consider this a finished project.

The other bit that I'm working on is a freelance job for a friend turning my little zooming test and turning it into a full application. I was just going to modify the original code but it's a pretty open timeline so I decided to convert it completely to ActionScript 3. I have the base classes in place and I should have a working version up by next week. It'll be fun to see it turn into something useful.
 

7-13-08

Hey, how about an update for this year? I've been a bit busy with the job and with my game (the only thing to still receive regular updates on this site) but I thought it was about time to actually put together a real update.

Added a new application and a new website to the Flash gallery. The former is a pop text display widget thing that was developed for the corporate site of my employers. The other is the website of their first game that just went into beta. I'll be having another round of updates for that site soon but I can't put anything in my gallery that hasn't been moved into the live site yet. The game has, of course, had about a billion changes to it since the last time I posted. It's looking much more like a game. Very much someone's first attempt at a game but a game none the less. I had hoped to be further into it by now but I had a space of several months where I couldn't work on it because my laptop was dead. Right now I'm doing the final graphics push, which is tremendously fun. I've also moved the game itself onto its own page; I'd had complaints that ducking was causing the page to scroll in one of the browsers (Firefox I think).

I know I updated the 2D gallery at some point or other with some new paintings.

The web gallery has also gotten a couple new additions from my projects with KingsIsle.

No 3D love this year. I've been focused on the game and moving it towards a finished state. I have a project that's in preproduction right now but I feel it's important for me to bring my current project to a complete close before moving on to something else. I have to say that the game has been one of the best experiences I've gone through. It may not look for much but I've learned a ton about art, animation and programming through it all. Hopefully it will even be fun to play when all is said and done.