Category: Fireworks

Posted on

Getting a Photoshop Design into Flex 2

Photoshop Fireworks Flex
Raw, unrehearsed, and barely edited. Hopefully useful. This video tutorial will show you how to get a Photoshop CS2 design into Flex 2. I show taking the design from Photoshop to Fireworks, and then importing it into Flex. I aditionally cover using those assets in states & transitions in Flex Builder 2. Ben, a commenter, asked for a tutorial on this subject.

This is not the only way to do this.

I’ve had a designer export all PNG’s for me from Photoshop.

I’ve had a designer export all graphics as GIF’s with per-screen printouts to tape inside of my cube for visual reference.

I’ve had a designer give me a PSD with no fonts. When I got the fonts, they were the Mac fonts, not the PC fonts.

So, I’ve had a full gamut of situations on how this went down. Typically, most designers do not know, or just don’t care to export PNG’s out of Photoshop. GIF’s are sometimes ok . Thus, these are the measures us Flash & budding Flex developers have to go through to get the design into our world. I’m not saying it’s the right way, but without a designer capable of exporting PNG’s, we have no choice.

Maybe if every designer capable of doing this wasn’t always busy when I asked them to do contract work, I wouldn’t be posting this. Unfortunately, there is still a shortage of talent, or that talent in house doesn’t get effectively communicated to, and it’s just faster to do this yourself.

I’ll be speaking about this as well as Flash integration at the 360Flex Conference March 5-7, 2007 at Ebay in San Jose, California, USA. [pending topic approval]

Anyway, I say “denote” at least 7 times. Also, apologies for Flex Builder’s non-real-time typing. Eclipse is stealing the key presses from Captivate. It catches up when I click though, so just wait patiently, and you’ll see the code.

If you are a Designer, you can safely stop on “Contents Layout”, the 9th section. If you are curious to see how to animate & implement image assets in Flex, feel free to watch the whole thing. I covered states & transitions by accident. All 30 sections counted, the whole tutorial is about 58 minutes. Took about 7 hours to create & edit since it was improv. Uploaded all 150 megs of it all of last night. BTW, I had to update my CaptivatePlayer to work with Captivate 2 skin SWF’s, so any problems viewing, just let me know and I’ll just link to the files directly.

Hope it helps!

Getting a Photoshop Design into Flex 2 – A Video Tutorial using Photoshop CS2, Fireworks 8, and Flex Builder 2.

Posted on

Winter: Fireworks MX 2004 Painting

Hit a snag last night trying to figure out why my BitmapData was getting cropped when I was sure my Bitmap was not using a scrollRect. If you don’t know what that means, neither did I at 10:00pm… I just gave up, and went to change my website banner. I wanted to do something Fall related, but… to me, Spring and Fall are just transitory seasons, used to emotionally delay the inevitable, so I went straight for winter.

To me, winter no matter where you are, is harsh and unforgiving. I have a love hate relationship with winter. While I loathe cold, I at the same time feel most alive in freezing weather. I really dislike feeling chilly at all, but being able to deal with such weather certainly makes me feel more awake, aware, and attuned to my surroundings.

I took inspiration from the Silver Marches, a harsh, northern frontier region in nothern Faerun of the Forgotten Realms. To me, that place exemplifies the harshness of people living in the cold of winter. Danger is everywhere, and yet even eeking out a meager living itself is immensely challenging and continues to be every day.

I used the light water color brush with varying weights, as well as thick and heavy brushes for the mountain and moon. I used colored pencil for more detailed areas. I’ve always liked artwork that incorporated water color and colored pencil combined. I think the coolest medium I ever was turned onto was water color pencils by an art teacher in my high school art class. You can draw with them, and then just stroke a wet brush over them, and they turn into water color. It’s awesome. I utilized my Wacom tablet with pen to paint, an Intuos 2 Platnium 9×12.

Although I own Fireworks 8 via Studio 8, Macromedia did something that I consider really stupid. When selecting a brush type, you can preview it’s painting effect in these wonderful popups that show the brush with your current color selection.

For some reason, in 8, you have to actually hover over the brush name itself whereas in MX 2004, you can just hover over the group, and it’ll preview all brushes for that group.

I reckon users who complained where running Fireworks MX 2004 on Pentium 2’s, but I don’t see why I must be punished because I have a fast machine. Sounds like taxing the rich just because they are rich. Stupid.

Anyway, in college, I would of chosen Painter to do something like this, but Fireworks certainly has matured from the “alpha channel PNG maker” that I used it for back in college.

Winter by JXL – Source PNG & JPG

BTW, if you marquee select the 3rd bitmap in the sky layer (Control + Click in MX 2004, Alt + Click in 8), you can make the stars twinkle.

Posted on

Fireworks: Draw Guide Grid Command

It’s 1:15 am, do you know where your cow is?

So, I wanted to draw a bunch of guides and slice guides, right? But, I was lazy, so I learned how to use the Fireworks JavaScript API (again). It’s cooler than Flash MX 2004’s, it has a waiting dialogue box that you can even cancel!

Anyway, yeah, this’ll draw a grid using guides based on the width and height you pass in. If you like graph paper, and don’t feel like going to View > Grid > Edit Grid…, this command is for you!

…careful, my router may block your website, it’s dangeours like that.

Draw Guide Grid Command – JSF