Preface
This tutorial was completed using Photoshop CS4 although previous Creative Suite versions should also work appropriately.

Programs you will need:
Adobe Photoshop CS4

Files Used
http://www.mostinspired.com/blog/?attachment_id=1633

Step 1

Open the parrot image in Photoshop.

Step 2

Go to the toolbar and find the eraser tool. Click and hold on the icon until a set of three erasers appear. Click on the Background Eraser Tool.

Step 3

Choose a preferred brush size. A 70 px size brush was used in this tutorial. Also, make certain that the limits are set to Find Edges, the Sampling is Continuous, and the Tolerance at about 15%.

Step 4

Begin to erase around the edges of the parrot. Keep the small “plus sign” in the center of the tool in the background area, to avoid erasing parts of the parrot. The erased parts will look bumpy and circular, but erasing the edges as close as possible is the goal here. This process could take a while depending on experience, so be patient and eventually you will get the hang of it.

Step 5

Once there is a nicely sized border around the parrot, delete the rest of the background. You can use marquees, the magic wand tool, or eraser tool to accomplish this.

Step 6

The parrot’s plumage is very nice, but the next goal is to really exaggerate the colors and make them stand out. Go to Image > Adjustments > Vibrance and change the settings to +100 on Vibrance and +20 on Saturation. This will allow the subtile colors in the photo to stand out. This can best be seen on the top of the parrot’s beak, with the blue color now becoming more prominent.

Step 7

Now that the colors have been brought out, many different colored variants for the parrot may be applied. Go to Image > Adjustments > Selective Color and play with the settings there. Below are a few examples of what can be achieved, and the methods used to achieve them.

There are thousands of combinations that can be achieved through this process. Whichever color(s) that the parrot becomes is up to you!

If you have any questions or comments about this tutorial, feel free to e-mail me at matthew.bitley@gmail.com. Thanks for reading!

Here are a few thing that you are safe to forget about when you’re designing the website, you’ll have plenty of time to think about them later on with the other people involved in building the website.

Trends

It is very tempting to see what is hot in the industry and jump on the bandwagon, producing similar designs. I try and avoid trends in my work, for two reasons.

I want my design to stand out from the crowd, having a design that is like everyone else’s, makes that very difficult. It is much better to be the one starting a new trend than being someone who follows them.

You also want to avoid picking a style just because its popular right now. Picking the right style for the website is better for the long term success of the project than what is techniques or styles are hot right now. Even if something isn’t in vogue right now doesn’t mean you can’t use it for your design, especially if it is the right one to you.

HTML/CSS

It has often been said that a good designer should know HTML/CSS to avoid problems while coding. I say that’s not the designers problem. If designers start to worry about what HTML/CSS is able to do we will never push the boundaries of what is being done.

Also, a designer won’t have the time to stay a breast of all latest developments in front end coding (it’s not their job to do so), so what they think is or is not possible may not be accurate.

Updated: The reality is that most designers have at least a basic understanding of HTML/CSS, some are able to code their own designs, and yes that is a good thing. Even still I’m suggesting that while you are designing you forget what you think know about how the design will be built. If you start thinking about that, you’re not thinking about what is best for the design. Yes you will work with your team to figure out if some things need to change in the design due to the implementation details (usually time is the biggest factor). It is better start with what you want to do and scale it back, than self edit as you design.

Cross Browser Problems

Similar to ignoring HTML/CSS capabilities, designers should ignore problems cross browser. Just because something isn’t possible in IE, mean’s you shouldn’t design it. Let the front end developers worry about hacking the browsers to make sure things work cross browser. They may come back to you to create a slightly different treatment for the older less capable browsers, but that’s ok.

Bandwidth

With the proliferation of the high speed connections, speed of connection is something you shouldn’t worry too much about, unless you’re designing for mobile devices, and even some of those have high speed connections.

Yes there are many people out there still on dial up, or other low bandwidth connections, but you really shouldn’t let them be the rulers of the design. If it turns out that low bandwidth users are a big issues it is easier to scale back the design than scaling it up.

SEO

Don’t design the website for search engines, design them for people.

Google is the god of free traffic (paid too!) and this can influence people to change the layout and design of their websites to improve their rank. This is one of the worst things you can do. The primary ranking criteria for Google is back links. Design your pages for search engines and users will hate you, and you’ll have no backlinks, and your Google ranking will suffer. Treat your users well and Google will treat you well too.

What things do you ignore when designing?

Response to some of the comments below:
Designers are getting more involved in the build of websites, this can lead changes in the design due to build factors, not because it is the best thing for the design. Sometimes these changes are necessary but often they are not, they are made due to the designers understandable lack of knowledge of current development techniques. Yes it can be helpful for a designer to know how the build of a website is done, but that knowledge should not affect the design just because they think something is hard or easy in the implementation.

Some people have suggested that this article says that these things are responsibility of other people and so the designer should ignore them, and that this is awful advice … A designer typically works as part of a team to design, develop and deploy a website, I think it is wise to rely on other parts of team to do the things they were hired to do. To think a designer should do it all, is irresponsible and definitely won’t produce the best website for the client. Yes there are a few geniuses out there who can do it all, but they are the exception rather than the rule.

In the comment people have suggested it only 20 minute to learn HTML/CSS so why shouldn’t a designer learn it. That’s is simply a foolish statement, sure you can pick up the very basic rules in that tiny amount of time, but to be able to do a good job of coding a website is something that people never stop learning.

Preface
This tutorial is for Adobe Flash CS4. Due to several changes and upgrades in CS4, prior versions of Adobe Flash will not work the same as the latest version.

Programs you will need:
-Adobe Flash CS4

Rotation:

Step 1
Open Flash and create a document that is 550 px by 400 px, and set the frames per second to 24.

Step 2
Create a rectangle 40 px wide and 200 px tall. Choose any color for the object, and then center it.

Step 3
Right Click (CTRL + Click on Mac) on the rectangle, and select Convert To Symbol.

Step 4
Name the rectangle “rect_mc” and save it as a Movie Clip.

Step 5
Go to the Timeline and right click on Frame 30. Select Insert Frame. You can also press F5 to insert the frame.

Step 6
Click anywhere on the Timeline and select “Create Motion Tween.”

Step 7
Be sure that the rectangle is selected on Frame 30 and go into the Motion Editor.

Step 8
Find the “Rotation Z” option and change the number from “0º” to “360º.”

Step 9
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your rectangle should move like the animation below.

Scaling/Easing:

Step 1
Repeat Step 1 in the Rotation section.

Step 2
Create a pentagon measuring 125 px by 125 px. Choose a color and center the object.

Step 3
Right Click (CTRL + Click on Mac) on the pentagon, and select Convert To Symbol.

Step 4
Name the pentagon “pent_mc” and save it as a Movie Clip.

Step 5
Go to the Timeline and right click on Frame 50. Select Insert Frame. You can also press F5 to insert the frame.

Step 6
Be sure that the pentagon is selected and go into the Motion Editor.

Step 7
Scroll down towards the Transformation section, and locate the Scale X & Y settings. Change their percentages to 250% each.

Step 8
Change the easing on the right to “Simple (Slow).”

Step 9
Scroll down further to the “Eases” section, and change the number to 100.

Step 10
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your pentagon should get larger, but nearing the end, slowing down, as depicted in the animation below.

3D Rotation:

Step 1
Repeat Step 1 in the Rotation section.

Step 2
Create a circle with the dimensions 150 px by 150 px. Choose any color and center the object.

Step 3
Right Click (CTRL + Click on Mac) on the pentagon, and select Convert To Symbol.

Step 4
Name the circle “circle_mc” and save it as a Movie Clip.

Step 5
Go to the Timeline and right click on Frame 45. Select Insert Frame. You can also press F5 to insert the frame.

Step 6
Click on the 3D Rotation Tool, and click and drag the right side of the Y Axis (green line) over to the opposing side of the circle. while holding Shift. This may take a couple of tries, so be patient with the process.

Step 7
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your pentagon should get larger, but nearing the end, slowing down, as depicted in the animation below.

Next week, Filters and Color Effects in the Motion Tween will be analyzed, and used in conjunction with some of the above techniques.

If you have any questions or comments, please feel free to e-mail me at matthew.bitley@gmail.com.

Using Adobe Flash can be a bit of a daunting task, especially with no prior experience to animation. This tutorial aims to create a basic understanding with the three tweening animation techniques (motion, shape, and classic) in Flash.

Preface
This tutorial is for Adobe Flash CS4. Due to several changes and upgrades in CS4, prior versions of Adobe Flash will not work the same as the latest version.

Programs you will need:-Adobe Flash CS4

Motion Tween Tutorial:

This animation technique is the most recent revamp of Flash CS4. It allows for objects to be rotated, scaled and moved about the stage.

Step 1

Open Flash and create a new Flash File. We won’t be using ActionScript in this tutorial, so choose either 2.0 or 3.0.

Step 2

Click on the Properties Tab and set the stage to 550 px wide and 400 px high. Set the frames per second to 32.

Step 3

Click on the Rectangle Tool (or push R) and create a square that is 150 x 150 px, and center it on the stage. You can make it any color you wish.

Step 4

Right Click (CTRL + Click on Mac) on the square, and select Convert To Symbol.

Step 5

Name the symbol “square_mc” and register it as a Movie Clip.

Step 6

Go to the Timeline and right click on Frame 20. Select Insert Frame. You can also press F5 to insert the frame.

Step 7

Right click again on any of the frames and select Insert Motion Tween. The frames should turn blue.

Step 8

Click on Frame 20, right click, and select Insert Keyframe. You can also press F6 to insert the keyframe.

Step 9

Make sure that Frame 20 is selected in the timeline, and then click the Motion Editor tab at the top. Change the X and Y coordinates to 450 px and 320 px, respectively.

Step 10

Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should move like the animation below.

Shape Tween Tutorial:

This effect can only be used with objects that have not been converted to symbols. It can change the color and structure of a drawn vector object.

Step 1

Repeat Steps 1-3 in the Motion Tween Tutorial.

Step 2

Click on the timeline, and then right click on Frame 60. Select Insert Keyframe. You can also press F6 to insert the keyframe.

Step 3

Delete the square, and create a new shape of any color and size. Shown below is a green Polystar at 150 px squared.

Step 4

Go back to Frame 1, right click, and select Create Shape Tween.

Step 5

Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should morph, looking similar to the one shown below.

Classic Tween Tutorial:

The Classic Tween is what the Motion Tween had previously been in the prior versions of Flash. It is not as robust as the new Motion Tween, but can still move objects on the stage.

Step 1

Repeat Steps 1-5 in the Motion Tween Tutorial.

Step 2

Go to the timeline and right click on Frame 40. Select Insert Keyframe. You can also press F6 to insert the keyframe.

Step 3

Change the size of the square in Frame 40 to be 300 px by 300 px. Center the square once again.

Step 4

Go back to Frame 1, right click, and select Create Classic Tween.

Step 5

Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should get larger, looking similar to the one shown below.

Next week, the Motion Tween will be discussed more in depth, highlighting the rotating, skewing, scaling and easing components of the technique.

If you have any questions or comments, please feel free to e-mail me at matthew.bitley@gmail.com.

Here are some design trends that we’ve seen over the past year as we head towards the end of the year.

1. Extremely Large, Focal Imagery

A lot of designs have begun adopting a single, powerful image at the heart of the website which serves as part of the design and attempts to communicate the intended brand image.

2. Heavy use of Georgia

We’re seeing a sweep of websites (including a lot of my own) who have adopted a culture with the love for Georgia. The font itself is a pretty good for standard text in content at anywhere between 10-14px and even serves well for titles at larger sizes.

3. The Return of Minimalism

The minimalistic train has made yet another stop on the web. Its passengers vouch that less graphics means better, and a lot of websites have begun to adopt this mantra.

4. Clever mix of vibrant colors

As the web moves on, people are becoming a lot more adventurous with their use of color and they combinations they create. The site below is a typical example on a beautiful, lush, vibrant design with strong use of blues and greens.

As we can see, design in general is making a very quick advance in style. About 5-10 years ago, you would have never seen anything like the sites I’ve mentioned in this article, it was just bland design outlines with no real color usage and in many cases, plain text.

Predictions

Now, where do we see the design world in the next few years – well let me make my predictions. First of all, we’re seeing an ever-increasing number of websites adopting what is called ‘AJAX’ technology (Asynchronous Javascript and XML), albeit a coding-side development it will help radically change the design trends of the future. Remember when flash websites were all the range? Well, it’s becoming more and more possible to build an almost flash-like website with lush, cool animations using AJAX instead.

The less is more concept is still a core ideal that has been developed over the last few years in the web design industry, after moving away from initially heavy graphical websites, but I also suspect for the majority of sites to hit in the middle, and be sites which are quite minimal, but still take advantage of large imagery in certain key parts of the design.

There’s also a great deal of pressure on all designs to be accessible and usable. This means that we’ll see a lot more contrasting colors and a lot less “blending” in terms of both design and content.

Conclusion

It is difficult to outline where something as creative and wild as design will move to over the next few years, but all we know is that the standards set will become higher and higher, and the industry will see more (yes, even more) competition, only allowing the best of the best to succeed in the field, driving more and more innovation into the world of web design.

If you enjoyed this article, please be sure to:

• Subscribe to our RSS feed to keep updated
• Promote this article via the social media buttons/icons below
• Comment below with your experiences

]]> http://www.mostinspired.com/blog/2009/10/17/design-trends-for-2009-current-and-future/feed/ 5 http://www.mostinspired.com/blog/2009/10/17/design-trends-for-2009-current-and-future/ http://feedproxy.google.com/~r/MostInspiredBlog/~3/X0ZDzmkcTRA/ http://www.mostinspired.com/blog/2009/10/16/search-engine-optimization-for-designers/#comments Sat, 17 Oct 2009 03:11:50 +0000 Mubashar Iqbal http://www.mostinspired.com/blog/?p=1586

In the dog-eat-dog world of freelancing and web design, SEO has ceased to be a cool trick reserved for the elite big boys on the Internet. It’s now for little guys who need to get noticed, too. Since the process is fairly easy, it’s probably time you get more SEO … and get more of everything else in the process.

Yeah SEO can get you more of everything. Like more work, more site visitors, more clients, fans, and let’s not forget more money. SEO isn’t quite as easy as winning the lottery, but with SEO you do have better chance of striking it rich than you do with the lotto. So, to get down to it, what is SEO and how can it work for your design business?

SEO Defined

SEO stands for Search Engine Optimization. What that means is tweaking, adding, or amping up the stuff in your website to make sure that it gets a top spot on the search engines. Optimizing essentially means that you craft everything in your content and meta content to make a search engine give you a higher listing. People searching will notice you sooner. After all, what good is a website if nobody looks at it?

SEO Explained

SEO is more than just nice words on a nice website. It is a science—led by a group of techies who know how Google searches for stuff, and how to make websites get in on the searches better. Web crawlers, software driven by algorithmic formulas, delve deep into every bit of information on your website, indexing it and arranging it in order of importance into search engine results. Thus, optimizing your site for search engines means organizing this data in order to make the crawler consider your site more important. It has very little to do with what colors you use or how the shadow on your logo looks. Optimization usually involves the following:

• Keyword Content. While it is important to make sure you frequently repeat your targeted keywords in your content, make sure to includes terms that are related to the keywords. Many search engines make use of LSI (Latent Semantic Indexing) to check if you’re simply stuffing your pages with keywords. Including terms related to the keywords your targeting is a good way to avoid any problems.
• Lots of links. Cross-linking within your site is a helpful technique, but getting more links from outside websites to your site is even better.
• Meta stuff. Organizing meta tags is important for optimizing your site. Making sure that your URLs are canonical and placing key words or phrases in the guts of your coding make a website truly optimized.

SEO Accomplished

Why work on getting your site optimized? In one word: money. Not to sound greedy, but that’s why you work, right? You also work for the sheer enjoyment of it. Optimization gives you both–more money, more work. So if you want to stay on the top of the search engines, get more visitors, and maintain a flow of work–SEO is important. But how do you do it? You have two options: outsource, or work hard.

Outsourcing: There is no shortage of companies that would like to take your money in exchange for SEO services. It may be worth the money. Depending on the depth to which they go, the tricks they know, and their track record of success, they may be able to do a great job at it. These companies normally provide a full-service package that involves way more than the scanty suggestions listed above. The result is a transformed website and a money-generating machine.

Work Hard (i.e., do it yourself): If you have the chutzpah to do it yourself, go right ahead. With a bit of research and a flair for writing (oh, and a bit of time), you can optimize your own site. This involves the simple act of determining and using keywords, and tweaking some of the meta tags. As you do, make sure you follow some of the SEO rules of the road. Keyword stuffing is a self-explanatory sin that gets you rejected from search engines.

However you decide to accomplish SEO just do it! SEO is the single best method of driving free traffic to your website.

Kohana is a PHP 5 framework that uses the Model View Controller architectural pattern. It aims to be secure, lightweight, and easy to use.

Although Kohana was originally forked from Code Igniter it has been rewritten from the ground up since for — amongst other things — strict PHP5 compatibility.

Despite being a solid framework that provides great performance, with an awesome community Kohana’s popularity still lags behind the other PHP frameworks. So I thought I’d put together a little showcase of sites built with Kohana to show what can be done with this excellent framework.

Ember

emberapp.com

Andrew Zimmern

andrewzimmern.com

Kohana Jobs

kohanajobs.com

DJ Hero

djhero.com

Studio Hari

studiohari.com

Most Built

mostbuilt.com

heartbeat

heartbeatapp.com

Most Cheated

mostcheated.com

Church Metrics

churchmetrics.com

And of course I can’t leave of my personal website, which I recently rebuilt with Kohana.

Mubashar Iqbal

mubashariqbal.com

Preface
This tutorial is targeted towards individuals with some experience with Adobe Software, and some terminology may be confusing to those who are not familiar with the programs.

Programs You Will Need:
-Adobe Photoshop
-Adobe Illustrator
-Adobe InDesign
(This tutorial will be using the Creative Suite 4 version for all software, although previous versions should also suffice.)

Files Used
Superman Title
Superman Logo
DC Logo
Superman Cape Texture (Source: FilterForge.com)
City Scape

Step 1
Open Photoshop and create a new document with a width of 6.75 inches and a height of 10.25 Inches. Make sure to set the DPI to 300, and the color to CMYK.

Step 2
Import the City Scape into the document, and scale it up to fill the entire document.

Step 3
Go to Image > Adjustments > Brightness/Contrast and set the values as -22 for Brightness, and 43 for Contrast. This will give the image a more ominous and somber tone.

Step 4
Move the cape texture into the document, and enlarge it to a fairly large size.

Step 5
Using the eraser tool, remove areas of the cape to make it appear as though it has been ripped and tattered. Make sure you use a hard brush, as a soft one will make the texture’s edges fuzzy. Make sure that the cape is torn from left to right, to ensure a more uniform and realistic effect. Also, change the size of the brush on the eraser to make the effect look more natural. You can also make this as tattered and weathered as you so desire. This will be a bit of an arduous process, so be patient, and the end results will be worth while.

Step 6
Import the Superman Logo (The S-Shield), using the default import settings. Use the ink drop tool to select the yellow from the image, and then use the paint bucket tool to cover the red in the logo. Then, erase the small “TM” symbol in the bottom right corner of the shield.

Step 7
Move the logo into a new layer in the document. Scale it up so that it covers a majority of the cape, and then set the blending mode to Soft Light. You may also wish to warp the logo to make it align with the the cape’s creases a bit more realistically, although this is not entirely essential.

Step 8
Merge the Logo and Cape layers together, and go to Edit > Transform > Distort. Move the corners on the cape to a left to right, and slightly downward angle (pictured below).

Step 9
Using the warp tool, further transform the cape to this downward angle. This may take a few tries to get it to look right, so again, take your time, and be patient with the process.

Step 10
By this point, the cape may have shrunk a bit too much. Simply scale it up so that it is the dominating focus on the photo.

Step 11
Go to Image > Adjustments > Brightness/Contrast and set the values as -35 for brightness, and 15 for Contrast. This will make the color of the cape a bit more consistent with the lightning in the document.

Step 12
Rotate the cape so that it looks as if it is falling from the sky. Warp it again, if it still looks too flat or rounded.

Step 13
Use the lasso tool to select several small and random sections of the cape, and then Option+Click and Drag to place these pieces around the document. This will simulate some scraps flying off of the cape as it flies to the ground. Repeat this step as many times as you feel necessary.

Step 14
Save the document as a .pdf file. Close Photoshop.

Step 15
Open Adobe Illustrator, and open the Superman Title file. Delete the white box background, and save it. Also, if you’d like to change the title’s color, feel free to do so.

Step 16
Repeat Step 15 with the DC Comics Logo. Save it when you finish. Close Illustrator.

Step 17
Open Adobe InDesign. Create a document with the same settings as the .pdf file. You do not need any borders or gutters for this project.

Step 18
Place (Command + D on Mac, or Control + D on PC) the .pdf file into the new document. It should fit perfectly within the InDesign document’s borders.

Step 19
Place the Superman Title file into a new layer. Adjust the size to fit in the top most section of the document.

Step 20
Repeat Step 19 with the DC Comics logo. Adjust the size to fit the top left section of the document.

Step 21
Create another layer placed behind the DC Comics layer. Draw a small rectangle with a color of your choosing behind the Logo (see below for details). Use the type tool and rectangle tool to fill out some pertient information in a new layer above the last. Issue number, price, and date should all be considered.

Step 22
Next, credit the creators of the comic: “Dan Jurgens” and “Brett Breeding.” Place their names in the lower right corner, using a font and color of your choosing.

Step 23
Create the “Death of Superman” Title. Use any font and color you prefer.

Step 24
Go to File > Adobe PDF Presets > High Quality Print and save your file. There you have it!

Afterword
If you have any further questions or comments you would like to voice use the form below, or please don’t hesitate to e-mail me at matthew.bitley@gmail.com. Thanks for reading.

If you found this tutorial helpful, please do not hesitate to:

• Subscribe to our RSS feed to keep updated
• Follow us on Twitter
• Promote this article via the social media buttons/icons below

Don’t fret if you miss all those cool links hop on over to Uberlook, where I’ve started posting all those great links. I’ll be adding the recent posts from Uberlook to the sidebar in the blog to make it easier to find those cool links.

You can follow Uberlook on Twitter, or subscribe to the RSS feed.

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);
  s.graphics.endFill();
  textField.x = s.width / 2 - textField.width / 2;
  textField.y = s.height / 2 - textField.height / 2;
  s.addChild(textField);
  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.