Category: Flex

  • 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.

  • WPF/e, Prototyping, and Workflow

    Preface

    I’m tired, but I’ve got to get these thoughts to text. I’m trying digest all of this WPF/e stuff. JD linked to Scoble and Scoble’s post has a lot of great information in it, especially the comments. If you need quick context for this post, hit comment #5 in Scoble’s post by Rory, then come back here. Comment #9 by Nick has some good 30,000 ft. view context.

    You can skip the intro below if you want; not the main part of this entry.

    Introductory Rant About My WFP/e Experience

    First, Blend. Blend is one of 4 projects in Microsoft’s new design suite of products. Blend makes WPF & WPF/e apps. I think it was originally called “Sparkle”, then Expression Interaction Designer, and now Blend. I never played with Sparkle. Many called it a Flash killer. I actually got to play with Expression Interaction Designer. The build I played with is extremely different than what Beta 1 of Blend is. In fact, to me, I’ve been re-reading all the WPF sites I can find to ensure I’ve got my technologies straight. I truly believe they re-wrote Blend from the ground up, ditching what I played with, OR bought some company that had this product… it’s that different. Either way, it had familiar terms, like the designer window tab, the XAML tab, properties panel for modifying stage objects, etc.

    I originally gave Expression a weekend to kick the tires. I gave Blend about 2 minutes. I couldn’t find the timeline, so called it a night… er, morning. I’ll give her more play this weekend. One of my biggest gripes with Expression was the timeline sucked. The entire app was really cool, but the timeline… I basically told them to copy After Effects, and they’d be golden. So, naturally, my expectations for Blend’s timeline are high.

    The rumor mill the past 2 weeks really made things more confusing. Bottom line, Blend can create both WPF and WPF/e apps. That’s like saying Flex Builder can create both Flash Player & Apollo apps. Web & Desktop deployements.

    WPF/e installed on my Firefox without me even have to reboot it. Nice job! The loading of apps was slow as nuts, with no visual feedback. It even locked Firefox. Horrible job. One thing that Firefox does to Flash is give it only a little CPU. That way, you can open 50 billion tabs, and they could all have Flex apps on it, and your browser still actually functions. Apparently, Microsoft found a way to get past this WPF/e. The apps do run extremely fast, though, once cached. I’m a big fan of major pain up front for faster loading later. If you’re girlfriend gets pissed at you, and you later give her a flower, she forgets she was ever mad at you. If she does, you can laugh about it, and use an apology to get lovin. Works every time. Pitching that analogy to upper management doesn’t always work though. Anyway, good job on speed! 2 for 1, w00t!

    I forgot to test on IE7. That’s a good sign. Already, as a developer, I’m more concerned with creating content vs. deploying it.

    Prototyping

    Ok, so the first real point of my blog entry is about Scoble’s mention of prototyping. I really like how he accurately portrays how prototyping can get you into trouble. I am actually walking that very very very fine line currently. Prototyping has pro’s and con’s. Where the Pragmatic Programmer refers to Tracer Bullets, prototypes built to ensure met requirements, prototypes are more broad in this context, and are made with the intent of pitching ideas and seeing if they stick.

    If you create something horrible, no worries, it was a prototype with little to no architecture in it, little time, and you can throw it away with no emotional remorse.

    If you create something awesome, you better hope you effectively communicated there is a huge difference between a prototype and a real product. All to often the temptation is to turn the prototype into production code.

    However, Scoble immediately scares me because he effectively conveys that Microsoft’s vision (with the corroboration of commenter’s) is that Blend can actually be used in prototyping, and actually be immediately turn into production code since the “code” is written for you by Blend, much like Flex Builder writes the MXML for you in Design mode. The whole post, combined with those commenter’s that have a lot of great information about Blend & WPF in general to share, IMPLY that “it just works”. Granted, I’m paraphrasing here, and you are welcome to go read Scoble’s post to see what I’m saying. If you do, I bet you come back here getting the same vibe I do.

    No Workflow Problems?

    I don’t know about those of you who have ever deal with designers & developers on the same project, but as far as I’m concerned, it’s frikin’ hard. Both camps have different motivations, different agenda’s, and different accountability structures. Making them mesh is rough. Being an advocate of either team without alienating your teammates is an extremely delicate balance. It’s all about the mediation and manipulating people to work together.

    That doesn’t even relate to the tools, though. Version 9 of Flash is getting PSD import. Granted, from a legal standpoint, I can see why this took so long, but even that is fraught with issues.

    “Dude, did you flatten your effect layers, render your text layers, and email me those fonts?”

    “Yeah man, I sent you the fonts. Don’t worry about the PSD, Flash 9 will import it just fine.”

    “Right… why don’t YOU organize this library for me then if it works so well. Do you really need 10 billion layers in your comps?”

    The above is child’s play. You take your verbal stabs at each other, and move on. The above work flow is rough, but that’s the way it will be. The only difference now is one has to manually import this stuff.

    …but, here’s a curve ball.

    “So… you realize this is for the web right? The whole reason we used Flash on this project instead of Flex was because the Flex components are too big. Why are you sending me a PSD full of raster (bitmap) graphics? Why did you just use Illustrator or Flash?”

    “Oh relax, most of the images are beveled gradients; Flash Player’s built-in PNG compression will knock those babies down really low, no problem!”

    “So, rather than choose the appropriate tool, you bank your luck on LZW compression to justify your tool choice?”

    “Just shuddup and get to work slacker!”

    [punchline’s coming soon folks, bear with me]

    The various tools, and the various ways they use content makes using Flash and/or Flex time consuming when implementing designs on programming projects. Even some design driven ones can be slow going depending on the programmer. Some developers can actually thrive in the design world, writing classes one second, and deleting them the next. I’ve got scares from that type of work, and will never go back, but my point is, NOT all developers suffer madly like people make it out to be.

    However, what no one can deny is that production artwork, the insertion of designed assets into a Flex / Flash project takes time. A lot of time. And it’s not easy.

    This, coming form Adobe & Macromedia, companies with a long history of design & multimedia development.

    Suddenly, Scoble and others say in passing, almost like it “just works that way”, that Blend renders all of the above not an issue. Say WHAT!?!?!

    Obviously, one has to import PNG’s and other audio / bitmap assets into your Blend project, but I’m talking about the whole “A designer creates content a developer can use.” This gets really fuzzy, and depends on your type of project, but at the end of the day, I’ve seen bad things happen every time a designer messes with a developers build, or a developer starts attempting to wrap code around a designer’s comp.

    This is gone now? Huh? Just like that, eh? I find that extremely hard to believe from a company that has very little experience in this realm. Maybe there have been tons of web developers secretly doing multimedia engineering on the side, moonlighting to reduce the pain of wrapping good looking CSS around Windows forms and .NET client applications… but I doubt it. If I’m wrong, please link.

    Here I am, with a Flash 9 alpha build that supports AS3, and Flex 2. I’ve been spending weeks of my free time developing an example for the community to see that you can design nicely looking applications in Flex 2 without having to “wait” for Flash 9 to get the AS3 speed goodness. There have been a slew of companies these past few months contacting me with either requests to be involved in incorporating design into their Flex projects, OR questioning if Flex CAN even design to the level they want.

    I would of assumed most companies would be more worried about Flex. Instead, while it’s a good thing that they all so easily pick up Flex and run with it, they immediately think that it’ll give them a generic look and feel. Hell yeah! This means people are “getting it”. Not only are they quickly getting up and running, but they are recognizing what the Flash Platform gives them with regards to design. Love it.

    Anyway, …I’m still struggling. You basically have 5 scenarios:

    1. Take the agency approach; using Flash, hire a, rare, Flash Hybrid.
    2. Take the software company approach; use Flex, design as an afterthought, if at all.
    3. Take the software company to another level, and use copious CSS + fonts + image icons in Flex. Looks a lot less generic. Or, dynamically load in Flash assets.
    4. Take the agency approach with a Flash Developer and a Flash Designer.
    5. Merge the two.

    #1 is what most design firms do. They have few if any people on staff who can code, and instead make hot looking Flash animations and mini-apps. Flash is a design tool. It works.

    #2 is what I loathe, and really have a challenging time educating on the importance of design. #2 is dying based on the ratio of them vs. pimp clients I’m seeing.

    #3 is what almost every company now doing. They are using Flex 2’s CSS & skinning to it’s fullest. From what I’ve been reading, most are successful. Even by default, it looks and works hotter than Swing.

    #4 is extremely rare to keep a team like this together. I’ve seen a lot of teams like this, but can’t imagine the constant pain of having to recode things, force designers into some form of template, etc. It DOES work, though, and well. Some of the best public facing Flash application development on the planet comes out of this.

    #5 is what I’m TRYING to do. Most Flash Developers coming to Flex immediately want to “load their stuff”. Me? I’d rather assimilate it into the Borg cube. So far, though, there are a disparate amount of ways to do this, and a lot of my approaches are subjective. For example, a programmer could acknowledge my architecture is “not horrible”, whereas a designer could say “Man… in an hour, you’ll match the comp. Cool.” “COOL!?!?! I’ve worked for weeks, and all I get is a ‘Cool’!!?!?!?!?!?!?”

    Adobe has very well over the years improving #4, empowering people like me to implement design work more fluidly, and code it well.

    …yet, here comes Blend, jumping over #4, and becoming the panacea that is #5? No way dude… too good to be true.

    Regardless, I’ll still continue to learn Blend to see stacks up. I have a feeling that using the Designer tool will really make a lot of the production art issues go away for the most part. Regardless though, I call bs until I’ve seen for myself that “it just works”. The proof for me will be when I’m on a project, and it goes down like this.

    “So, designer, does it pass your review?”

    “Yep, you’ve implemented the comp as best you could based on the limitations of the tool.”

    “Cool… programmer, is the C# & XAML it generated ok?”

    “Yep, fits into the framework nicely, and we’ve gone through multiple design edits with no problems.”

    You’ll have to excuse me in finding the above scenario extremely unlikely for many years. Adobe is STILL working it out, and making it better all of the time. Half of the above isn’t even the technology. It’s the processes, team aptitude, and ability to execute. What is the likelihood that Microsoft comes out of nowhere and solves this with their new products and tool set? :: shrugs ::

  • Skinning in Beverly Hills

    On a Flex 2 project in Beverly Hills, California for the week with 3 others from my team at Universal Mind. It’s apparently a long term project (as most Flex ones are compared to most Flash ones). I’ve fallen into the role of skinning; basically what I didn’t seem to effectively convey at MAX.

    I take a Phothoshop comp, flatten the effect layers and render the text ones. I then import it into Fireworks, and rip out the good assets, and save as individual PNGs. Those that are better as vector, I rebuild (yes, RE-build) in Flash, and export out as SWFs. I then either embed them in Flex’ CSS to button skins, embed the images in the MXML, or extend one of the Programatic skins.

    Nahuel Foronda, my co-worker and one of the winnners of the Flex Derby for his Real-estate App, found a way to get bitmaps into Programmatic skin classes. I always thought you couldn’t because they all extend Shape, and thus only allow dynamically drawn vector content, but flash.display.Graphics DOES have the beginBitmapFill method, so you CAN blit bitmap content very nicely. It’s very cool for some of the bitmap designs that cannot be scale 9’d, but can be tiled. He also found a better way to scale some our dynamically created content. While a Repeater thrown in a VBox could work, it didn’t in Flex 1.5, and the drag and drop capabilities of the List are easier to code. Basically, a Canvas in a Canvas. The inner canvas holds your content. Eloquent!

    I’m constantly put on projects where the designers have no idea the capability of the platform they are designing for, mainly Flash & Flex projects. The bigger the scope, the less communication there is beteween the 2 teams. A lot of these projects on the Flex side are your cliche “database driven” project, but more and more are incorporating a lot of design, so much so one could argue they ARE design driven. The problem is, I’m still not seeing information architects in any official capicity, and on the Flash side, the Creative Directors seem to not participate.

    In short, we have a long way to go to improve these processes, ecspecially in Flex & Flash projects.

    For example, not every skin I’ve implemented was 1 line of CSS. Some required a significant amount of programming effort. Thus, we’ll have multiple “programmers” on the project, some even guys n’ gals doing both back-end and front end development at the same time. Me? Yeah, I’m coding, but I’m merely incorporating design elements. The other co-worker here did a really good job at putting the interface together, so I already have all the plumbing there; I can basically paint my way to making the app look good. It’s an interesting role. Even more interesting is that I STILL cannot get away from using Flash on these projects. There is always some need on a Flex project for it I’m finding. It’s not a bad thing, or a good thing, just an observation. Unfortunately, “Flash” the IDE in any capacity makes the traditional developers nervous for maintainability reasons, but I usually pawn it off to designers to maintain the FLA. Doesn’t always work, hehe!

    I think one thing that would help designers is to open up the Aeon FLA that comes with the Flex 2 framework, and see what’s capable. For example, I’m constantly getting designs with no over or down states. Those I do are still only 3 states. Most designers I’ve worked with don’t know a Flex Button has 6 states with a total of 9 different skins. On the Flash projects, they get free reign since the timeline obeys the designers whims, and I’m expected to code it. Regardless, I think it’d be easier for the entire project and cheaper for the client if the designers would design the Flex interface in Flash in the first place. This would make it easier for a production artist like me to put their design into Flex without ruining their original design in the process. A lot, though, have no idea what platform they are desining for, nor it’s capabilities. This is fine, but it’s pretty easily solved; get a Flex developer in the meeting where they are making design decisions.

    In the end, it’s all about communication. So, if ya got silo’s, well, that never is conducive. If you emailed me in the past week, sorry I haven’t responeded, really busy here. Mail & Gmail are filled with unread emails.

  • Flex Panel Expose Attempt

    Rather than let the code rot on my harddrive, figured I’d put it up here at least. Trying to emulate in Flex what Expose does on the Mac. You can hit F9, and all open windows will shrink so they fit on your desktop. You can then choose which one to bring in front. It’s really nice because of instead of going “elsewhere” to get to the window you want, you can just click it. Helpful for drag and drop stuff too.

    The window placing algorithm was frikin hard, and I never got window selection working. The cover shows up automatically instead of showing up when you hover over the window. Tons of things wrong and unfinished, but only messed with this for a couple of hours. Anyway, first time I’ve done state & transitions this heavy in code. Gotta say, it sucks. Love using Design View much better. Regardless, would of loved to have this code style years ago in Flash, that’s for sure.

    Using Zinc, you can have it work on your desktop. It’s not as good as my old stuff, but just bored on a Tuesday night and this is what I ended up with after a couple of hours of playing around. To preview it in the browser, click the button first to give Flex focus, and then press F9.

    Flex Panel Expose – Preview on Desktop | View in Browser | Source | ZIP