Diving into Flash Design: Notes from a Web Nerd

This is a guest post by Christian Montoya

For years, I have focused heavily on open web technologies: CSS and Javascript while avoiding Flash and Actionscript like the plague. Even though I always liked Flash games, I was very much entrenched in the languages that I knew, and I often felt that a closed language like Flash was not something I would be interested in anyway.

A year out of college, I found myself doing a lot of game design. At the time, all my work was in the same realm that I had grown to love: CSS + Javascript, usually with jQuery and sometimes with Blueprint. I’ve worked on massively multiplayer RPGs, head-to-head competitive word games, and quite a few things in between, but there has always been a limit to what I could accomplish with these technologies. I knew that eventually I would be working with Flash; let’s just say it happened sooner
than I expected.

Two months ago I took the plunge. Me, someone many would call an “open web standardista,” going to the other side! If I have one thing to say, it’s this: it wasn’t so bad. For one thing, Actionscript 3 is a very mature language. If you have a lot of experience with object oriented Javascript, and you are comfortable with event-based programming, then Actionscript 3 should feel very natural for you. If you are accustomed to building your designs in code, then you can do everything you need to do with FlashDevelop (open source) or Adobe Flex Builder, and you can even use a number of AS3 libraries that offer UI controls and flow layouts. Believe it or not, you can even use CSS and HTML! UI controls in Flash are mostly based on text and shapes. When you build them, you use object oriented code. For example, to build a rounded button in AS3 with a stroke and a gradient, I use the following code that takes a few arguments and then returns a button object:

public static function genRoundedButton(textField:TextField, lightColor:uint =
0xF3F3F3, darkColor:uint = 0xAAAAAA, lineColor:uint = 0xDDDDDD):SimpleButton
  var s:Sprite = new Sprite();
  var m:Matrix = new Matrix();
  m.createGradientBox(textField.width + textField.height / 2, textField.height 
                  + textField.height / 4, Math.PI / 2);
  s.graphics.beginGradientFill('linear', [lightColor, darkColor], [1,1], [0, 255], m, 'pad');
  s.graphics.lineStyle(2, lineColor, 1, true, "normal");
  s.graphics.drawRoundRect(0, 0, textField.width + 10, textField.height + 4, 14);
  textField.x = s.width / 2 - textField.width / 2;
  textField.y = s.height / 2 - textField.height / 2;
  var sb:SimpleButton = new SimpleButton(s, s, s, s);
  return sb;

I create a sprite that will hold the shape, create a gradient box that represents the gradient fill, then draw the rounded rectangle on the sprite after I have applied the gradient fill. Then I center my text inside of that sprite, and apply the sprite to the SimpleButton class, which is provided by AS3.

When it comes to building simple games in Flash, this is standard fare. Working on the stage is a lot like working with the canvas element in HTML, or working entirely with absolutely positioned elements. There are, however, more complex options for building large applications, which were introduced with AS3 and Adobe Flex Builder. You can now use MXML files along with CSS to design your Flash applications, and this gives a lot more structure and reusability to the code. There are, however, a handful of limitations with the implementation of CSS in Flex. Layout properties are still defined using Flex properties instead of CSS, and features like multiple classes and descendant selectors are not included.

In my own work I have not used Flex yet, but the point of this article is just to show you that there’s no need to see Flash as enemy territory. Some of the technologies that you are used to using carry over very well, and there’s enough documentation and community support for you to learn everything quickly. Give it a shot and show me what you make.

Christian Montoya is a web and game developer. He has designed two Flash games, Ruby Rocket and Survive DX. You can find all of his work at mappdev.com

This entry was posted in Business and tagged , , . Bookmark the permalink.

7 Responses to Diving into Flash Design: Notes from a Web Nerd

  1. Pingback: Diving into Flash Design

  2. favSHARE says:

    This article has been shared on favSHARE.net. Go and vote it!

  3. Pingback: CSS Brigit | Diving into Flash Design

  4. Curt Brown says:

    I felt exactly the same way. In fact, I only changed my mind yesterday after hearing about the Flash 10.1 plug-in for mobile and Flash CS5’s iPhone capabilities.

  5. Pingback: Guest post on Most Inspired | The Montoya Herald

  6. Pingback: 135+ Awesome Fresh Article Links for Designers and Developers | tripwire magazine

  7. WoW 🙂 Christian, Very informative notes. Thanks for sharing this awesome flash design notes.