How should Photoshop play with Flash/Flex?

Now that we’ve gotten CS3 out the door & made a big leap getting Photoshop files into Flash, we can turn more fully to the future.  So, where do we go from here?

It’s not that we don’t have ideas, mind you; on the contrary, we have so many ideas that we need to stage a battle royale, then make ’em fight it out.  I have some pretty aggressive ideas, but I don’t want to “lead the witness” by sharing them before asking for your thoughts.

In my mind our goals fall into two areas:

  • Speed up the visual design of Flash and Flex projects/components
  • Smooth out the hand-off from design to development

Or, to put it even more simply, “Design quickly, transfer smoothly.”

What do you think?  As you’re working with Photoshop and Flash and/or Flex, where do you run into snags, lose time?  In your ideal world, how would everything work?  I’m looking forward to hearing your thoughts.


[Commenting was broken earlier due to a problem with the server, but it’s now working again. Sorry for the delay.  –J.]

0 thoughts on “How should Photoshop play with Flash/Flex?

  1. Quote: Smooth out the hand-off from design to development
    Don’t forget that a large percentage of Adobe users still do some of both design and development. Some do all of both (for me its 60% design, 40% development). Many do one or the other. I’ve heard Adobe people talk in the past as if they should be separate, but they’re not. So Design quickly, transfer smoothly. is an Adobe ideal that does not necessarily reflect the real world.
    [The goal doesn’t depend on “designer” and “developer” being two separate people. Assuming that we’ll never have One Tool to Rule Them All, we’ll always need to work on making transfer between tools a smooth process. –J.]
    CS3 seems to do a pretty good job of letting PS and Flash work together, especially for those of us who are already used to the work-arounds for the past seven years. So maybe that’s more a New User question.
    [To put the question really plainly, “Are we done yet?” That is, has CS3 accomplished everything that’s needed concerning integration? If so, tell us so that we can spend our time elsewhere. If not, tell us what work remains to be done. –J.]
    As for designing with development in mind, in Flash you’ve returned Flash 6’s ability to click into components to skin them (quite nicely by the way), so not having to toally ActionScript a look is great.

  2. Lee Brimelow once asked the question: “Why can’t Flash and Flex be merged into one program?” I thought this was an interesting question that no one really had an answer to. With that, component skinning, GUI designs, background patterns and all things visual could make their way into the realm of Flax or Flesh. (Flash/Flex)
    [Fresh! (Wait, you already used the good contractions.) –J.]

  3. What I’d really like to see in the next version of Photoshop is better handling of vector shapes. I’d like to be able to copy/paste vector paths to and from flash, as well as import simple vector paths from ai/swf/eps files. I’d also love to have some control over the quality and type of antialiasing performed on vectors inside Photoshop.

  4. I work in an agency as a Flash developer but I’ve also spent over 7 years using PS and I can vouch that a lot of time is spent unnecessarily going from a PSD to Flash. The main reason… designers want to use Photoshop as much as possible (over say Illustrator), and I can’t blame them it’s great and highly efficient to create wonderful looking things in less time than in other applications. But what’s interesting is that they tend to use it in a very different way to people who code Flash and also know how to use Photoshop. (There are exceptions to this rule and those guys/girls are fantastic to work with.)
    [Yes, this is very true. –J.]
    The main case is simply organising layers. Removing and flattening down the million or so subtle highlights, lowlights and corrections that have accumulated over time. Naming layers and grouping them into “logical” piles that can be exported and brought into Flash.
    So there’s a feature request, import PSDs “by layer group”.
    [Hmm–I think this is supportd by Flash CS3: PSD layer groups are turned into Flash layer groups, and you can specify that a group be turned into a movie clip. –J.]
    The other key area is vectors. Photoshop has basic support for vectors, but if a designer isn’t using them because there’s no need to optimize for file-size, or prepare for scaling regions then they won’t use them, and again it makes perfect sense.
    But what happens is that the Flasher will flatten the image, bring in a copy and almost by eye duplicate the design using vectors for areas that are solid or gradient filled, so that he or she can easily tweak the size of that element later on without redrawing.
    This can literally lead to something that took a couple of hours in Photoshop, taking a whole day to attempt to re-create in Flash so that it can be made interactive, localisable and dynamic.
    Things like layer styles and layer comps help a lot. I wish there were a way of enforcing a strict mode when exporting for Flash to reduce elements into groups that can be exported as PNG or vector, perhaps smart-layers specially designed for vector work so that they can be treated as a bitmap layer.
    [We’ve talked with users about maybe creating a Flash-oriented preflight mode, whereby you could tell what elements would be able to transfer successfully, previewing the results. It may be desirable to work in a Flash-oriented mode that would disallow use of things that wouldn’t transfer successfully. It’s not clear to me, though, exactly where people would want to apply constraints on what they can create in Photoshop.
    It’s also worth thinking about ways to improve PSD import into Flash, maybe making it possible to merge multiple layers, previewing the result (including compression artifacts). –J.]
    For me the seemingly unattainable aim is round-tripping. This can be done only in one direction at present. Further integration between the tools could enable this.
    [So, the request is to be able to use Photoshop to re-edit things that have already been brought into Flash, right? –J.]
    One last feature request. Font rendering compatibility mode. Allow the designer to check a box to mimick Flash font rendering. We’d love to have “Strong”, “Crisp” etc but we don’t have that level of control (in all honesty the advanced rendering is not the same), and what we end up with is a font that is slightly off-weight, which can ruin the design in terms of how much text can fit into a given space, or at worst, it has the potential to make the text unreadable at the chosen size, forcing us to make it larger or bold and reconsider layout.
    [Thanks for the detailed feedback. –J.]

  5. This is what I really love about Adobe – their willingness to listen to developers & designers.
    I’d have to say that my biggest gripe is vector support as well. On the Photoshop side, I’d LOVE to see it handle vectors more closely to Illustrator & Flash. I’m currently migrating back to Photoshop from Fireworks and wrapping my head around the way PS does things is my single biggest hurdle (that and the fact that it’s the ONLY graphics app that doesn’t use control + 1/command + 1 for 100% actual pixel view) I come across. If the drawing tools where more similar, it’d save me quite a bit of time. I’m still trying to find a way to draw a shape with just a stroke and no fill in PS that doesn’t require multiple steps (if I’m wrong PLEASE tell me).
    [It’s not as easy as it should be, let’s put it that way. The tough thing is finding the time to make this better, esp. with all the other things on our plates. That said, as I said, I have some rather radical ideas. –J.]
    But if Flash would not only maintain the vectors on import but some of the blending modes and live effects as well, we could safely create art in PS and bring it over to Flash without any worry of recreating the artwork.
    Vectors aside though, both products rock in CS3. Keep up the great work!
    [Thanks! –J.]

  6. One thing I run into as one of those designer/developer types is I love comping in Photoshop over illustrator because I like the control it gives me. However, when I work with vector shapes, and bring them into Flash, it doesn’t keep them as vectors. I believe this was touched on before, but I’d like the ability to bring my PSD vector artwork directly over into flash as native vector.
    Also, if you have a gradient vector layer or layer effect, translating that gradient into a flash gradient, rather than a raster graphic, would be a big timesaver as well.
    Ideally on the flex side, I’d also like a library of smart objects with PSD vector artwork of all the various Flex UI components that I could then skin and export as a skin, complete with nine scaling.

  7. “Are we done yet?”
    One is never done. All your jobs are safe.
    1. The ability to right-click a layer, several layers, or a layer group and have the option to “send that stuff over to PS, AI or FL (depending on where you are). This would bring over styled pixel objects (converted to png if sent to Flash), styled vector objects, or styled text in their initial layered arrangements. Or right-click on any one thing in the canvas area to send over.
    “Sending” could mean a behind-the-scenes Adobe clipboard thingy, opening the selection in a new empty destination file, or saving it to the desktop as it’s own thing.
    2. Make the swatch palettes appear as similar as possible. Photoshop won’t have Illustrator’s patterns or Flash’s components, but right now Flash is still using the MM color palette and Mixer. They should at least look the same.
    3. Metadata. Make all final objects (swf. jpg, gif, tif, eps, etc) able to keep whatever metadata that’s needed for project info or archiving. It’s bizarre that Photoshops so-called Save For Web strips that out.
    [Well, not really, in that the mission of S4W is to make files as small as possible, and Web apps (browsers, SWFs) don’t read the copyright info. What does sort of suck is that the mechanism for telling S4W to retain metadata is *very* hard to find. We need to make it an easy checkbox option. –J.]
    But it’s crazy to make each of Photoshop, Illustrator and Flash do everything like some sort of super-app. Adobe Everything v1.
    Aside from integration, don’t forget application-specific tools like PS’s Healing Brush.
    [Oh, don’t worry… –J.]

  8. Bring back the rollover palette. If PS is going to be used for skinning, UI templates could be built with states built in. Layer comps is an option, maybe repurpose the tech into a new palette. Perhaps instead of an html preview, a swf preview, maybe some mxml. IR evolved 🙂
    – MaTT

  9. I’d like to second what Nick Collins suggests having a quick way to work with skinnable components, perhaps have a new document template that comprises all current UI components as well as the various states that they can be in. Once edited and saved/exported all the assets and even CSS are created.
    Additionally, pull in 3D items in Photoshop be modifiable/animateable within Flash. I saw a demo of an aluminum can that was animated within Photoshop and then exported via a FLV, but if it could be exported as a FLA, or imported as a PSD and the 3D object and it’s animation carried over and editable within Flash, that would be pretty sweet.

  10. Flash has become outmoded. More and more, I see Flash animators becoming more adept at video and After Effects, and only use scripting for tweening or basic navigation or if/then logic. On the other side, more Flash developers are dealing less with hand animation and doing serious dev work. Taking these two trends into consideration, it is obvious that the Flash Platform tools do not properly speak to the userbase anymore.
    What needs to happen is, one tool for animators, the other for development.
    The animation app should mirror the interface of AfterEffects. The timeline concepts in AE are just superior to Flash. The animation tool would still have scripting ability, but optimized for that workflow — including components.
    The development app would basically be Flex as it is right now. But Flex’s UI and general workflow needs a lot of work to become a first-class Adobe citizen. It doesn’t *feel* like an Adobe app, and the fact that it is built on Eclipse is no excuse to be lazy. It is also pretty uninviting for newcomers. Flash developers who came from a design background (and there are lots of them) need some support to migrate to this kind of tool.
    As far as integration goes, I really like the idea that someone mentioned where Photoshop would contain a “Flash preview” of a comp. That resonates with me, because a lot of Art Directors can’t visualize the limitations. What I really want though is support of Smart Assets in Flash. If I import a Photoshop document, I want it to live update, even after it’s been split into layers. Otherwise, the time saved by importing the Art Director’s comp_FINAL_I_PROMISE_2B.psd file is a bit wasted.
    On a mostly unrelated note, it would also be interesting to explore the possibility of using Flash to do procedural generation of art assets in Photoshop.

  11. I think Adobe can create own flash program and made it very integrated with Photoshop
    [Been there, done that, not going back. 😉 That said, it is interesting to think about whether the Flash authoring market needs more specialized solutions. Macromedia recognized that Flash alone couldn’t address all users’ needs and therefore created Flex. It may be that Adobe should create complementary tools that more tightly address specific groups who, for whatever reasons, don’t find the existing tools a great fit for their needs. Input most welcome… –J.]

  12. 1) Please add OpenType support to Flash. Flash in general needs an overhauled type engine that better integrates with Photoshop & Illustrator.
    2) Agree with others about the revised color palette (that matches other Adobe apps)
    3) Agree with others about Flash supporting PS vector objects.
    4) Agree with others about bringing back the ImageReady Rollover palette for Photoshop CS4.

  13. Sorry to come to the convo late, but I am going to go out on a ‘way out’ limb here and suggest that the ultimate workflow may not be PhotoShop -to- Flash but rather Flash (and more importantly Flex) -to- Photoshop. The idea would be to have a SWC rendering window within Photoshop that exposes any and all Style object params of the SWC to the Photoshop tools palette (with layout, position and scale being exposed as well) . Using a 3d analogy, the coder would then be like a modeler creating a set of polygons; the polys are then handed off to the artists who “paints” on them (with something like Maya). When satisfied, the object is now complete and will appear, as created, in the renderer of choice.
    And Photoshop, the designer’s old friend and confidant, is the place for these tools not the IDE.
    The reason I like this paradigm is that giving art to a coder (and I am a coder so no prejudice here) can be inherently flawed. At best the list of conceptual and design ideas presented by the designer will only be *slightly* misinterpreted and the list of “why we can’t so this” will only be a few items long. It will (almost) never result in the full artistic vision coming to fruition. Better to have the choice of giving an artist a fixed environment where the rules are already evident. They are then free to create within those bounds and any progress made is assured an unadulterated place in the end media application. Of course the traditional workflow of Photoshop to Flash coexists in this ecosystem but I am intrigued at the possibility of the other.
    Just my 2 cents,
    Patrick Keating
    Bluefire Productions
    [I frankly think it’s a pretty damn compelling idea, Patrick. I haven’t said more yet because I’ve wanted to ask for input without leading the witness. I hope to share more soon. Thanks for the feedback. –J.]

Leave a Reply

Your email address will not be published. Required fields are marked *