When we think in terms of webdesign in HTML, we immediately associate it with programs such as Photoshop or Fireworks. Very rarely do we consider Flash, which is not strange, because image-editing is not the purpose of this software. Meanwhile, that powerful tool - Flash - is pretty much everything you need to create decent graphics. In fact, a person who is not very familiar with Photoshop might find it much easier to work with Flash.
During this tutorial, you will need a sreengrabber, such as MWSnap (a very cool program with lots of screengrabbing options).
So, to support what I wrote above, I'll show you how you can create html/jpeg buttons with Flash and a screengrabber.
Let's begin
This is a screenshot of a button made in Flash. All I did was create a rectangle with rounded corners (to set it, doubleclick on the icon), the text in the middle of the button is a pixel font. Important: make sure that Stroke hinting option is on.
What can we do now? We can put this image directly to a website, and well, we've done the job. But what also might want to do is gain a little more control over this button by leaving the inner part (the text). This can usaully be done using Photoshop and the Slice feature, that will chop your graphics as you need.
In Flash it's not as easy, stll it's possible. We'll need MWSnap because it allows us define any area on the screen with 1 pixel precision, which is crucial for making it work.
So, in the case of this button, we should chop it into four elements - top, bottom, left and right.
Once we have them, we should create an HTML table that we'll put them into. Note that's a 3 column table but the bottom and top rows will have only one.
.
The html code is:
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
Now go ahead and put the right parts into the right cells.
My html code looks like this:
<tr>
<td colspan="3"><img src="top_part.jpg" width="87" height="7" /></td>
</tr>
<tr>
<td width="6" background="left_part.jpg"> </td>
<td width="77" bgcolor="#3599FB"><span class="style1"> Welcome </span></td>
<td width="4" background="right_part.jpg"> </td>
</tr>
<tr>
<td colspan="3"><img src="bottom_part.jpg" width="87" height="8" /></td>
</tr>
</table>
As you can see I used the background tag for the left and right columns. It's generally good to do so because it allows you to extend your button if you need to.
My end result is as follow:
You can download what I managed to create here.
This technique doesn't absolutely limit you to creating only buttons. Haven't tried that but I'm sure you can create whole HTML websites with shadows and all the stuff that you'd expect from a website.
I hope you enjoyed this tutorial. Cheers!
