Category Archives: Flash

Sleek Photoshop->Flash integration sneak at Flashforward

I’m getting back to my Web roots here in Austin, and at today’s Flashforward keynote speech, Flash PM Mike Downey gave a sneak peek of the integration with Photoshop that’s planned for Flash 9. Aral Balkan’s great coverage of the keynote sums up the demo nicely:

One of the new features is importing Photoshop PSD files. Import -> Import to stage. There is precise control over every layer. [Mike] chooses a PSD file and you can see all the layers, layer groups, layer comps and you can make choices about each layer separately. The options include “Make text editable” (so that text imported from PSD files is editable in Flash). He selects a Folder. And asks everything in that folder to be made into a MovieClip and he gives it an instance name and sets its registration point (the crowd loves it – claps!). They’re also supporting layer modes — drop shadows, blurs, etc. — and converting them to the Flash format. [Via]

Mike also noted that Flash plans to replace its vintage JPEG compression code with the library used by ImageReady/Save for Web. Good stuff is afoot at the Cirle A!
By the way, if you’re importing PSDs into Flash today, you might want to check out this video tip from Myke Ninness. He touches on how to convert Photoshop drop shadows into native Flash equivalents.

Sleek Photoshop->Flash integration sneak at Flashforward

I’m getting back to my Web roots here in Austin, and at today’s Flashforward keynote speech, Flash PM Mike Downey gave a sneak peek of the integration with Photoshop that’s planned for Flash 9. Aral Balkan’s great coverage of the keynote sums up the demo nicely:

One of the new features is importing Photoshop PSD files. Import -> Import to stage. There is precise control over every layer. [Mike] chooses a PSD file and you can see all the layers, layer groups, layer comps and you can make choices about each layer separately. The options include “Make text editable” (so that text imported from PSD files is editable in Flash). He selects a Folder. And asks everything in that folder to be made into a MovieClip and he gives it an instance name and sets its registration point (the crowd loves it – claps!). They’re also supporting layer modes — drop shadows, blurs, etc. — and converting them to the Flash format. [Via]

Mike also noted that Flash plans to replace its vintage JPEG compression code with the library used by ImageReady/Save for Web. Good stuff is afoot at the Cirle A!
By the way, if you’re importing PSDs into Flash today, you might want to check out this video tip from Myke Ninness. He touches on how to convert Photoshop drop shadows into native Flash equivalents.

FlashFilterLab: Visual effects builder for Flash

As I’ve mentioned previously, I came to Adobe to hijack the brains of people smarter than me, getting them to make crazy technology accessible to regular creative folks. Along those lines, it’s great to see FlashFilterLab, a free project that lets you leverage the Flash Player’s new runtime filter effects by using a drag-and-drop visual system instead of writing code. The FFL gallery encourages sharing & community review. Nice! [Via Mark Baltzegar]
Related: Filter Forge brings a similar approach to creating Photoshop filters. Big ups to the brainiacs who are opening these technologies to broad experimentation.

New vids: Illustrator CS2 + Flash 8 Integration

Having wrestled Illustrator & Flash into playing nice for the past, oh, 8 years (even going so far as to write a bunch of tutorials back in the day), I’m delighted to see that Illustrator dynamo Mordy Golding is tackling the subject head-on in a new set of training videos from Lynda.com. The videos (direct link here) cover everything from symbols in Illustrator (yes, Illustrator has symbols) to blends, styles, text on a path, and 3D effects. If you ever stub a toe when moving between these vector graphics heavyweights, Mordy’s tutorials should come in handy.

Next-gen Web galleries: XSLT, Flash, & CSS for all

As you might have heard in Lightroom Podcast #9 (starting around the 25-minute mark), we’re working on a fresh, new Web Photo Gallery engine for Lightroom. For those wanting to dig under the hood and start creating or modifying galleries, Adobe engineer Andy Rahn has created an overview, which I’ve included in this post’s extended entry.

We think this new engine provides a great foundation for the future, and while we really can’t comment on upcoming products, we’d like to see the engine make its way to, ah, other applications (something something, rhymes with “Shmoatoshop”…). So, with any luck, the time you spend working with this new engine will end up being broadly applicable down the road (no promises, of course).

Continue reading

Next-gen Web galleries: XSLT, Flash, & CSS for all

As you might have heard in Lightroom Podcast #9 (starting around the 25-minute mark), we’re working on a fresh, new Web Photo Gallery engine for Lightroom. For those wanting to dig under the hood and start creating or modifying galleries, Adobe engineer Andy Rahn has created an overview, which I’ve included in this post’s extended entry.

We think this new engine provides a great foundation for the future, and while we really can’t comment on upcoming products, we’d like to see the engine make its way to, ah, other applications (something something, rhymes with “Shmoatoshop”…). So, with any luck, the time you spend working with this new engine will end up being broadly applicable down the road (no promises, of course).

Continue reading

Adding Flash to PDF & more in Adobe Design Center

Jen deHaan has pointed out a number of new updates to the Adobe Design Center:

Adding Flash to PDF & more in Adobe Design Center

Jen deHaan has pointed out a number of new updates to the Adobe Design Center:

AE->Flash Part II: Audio Amplitude

Dr. Woohoo is back, introducing After Effects 2 Flash: Audio Amplitude. This new ExtendScript exports the audio analysis data from AE 7.0 as an XML file and uses a component to map it to the Rotation and Scale Matrix transformations in Flash 8. “In other words,” he writes, “it makes objects in Flash dance to the music.” The scripts complement the recently introduced Transform Properties work, and each is on sale for $40. It’s cool work, and seeing it takes me back to a weird & ridiculous example I did, using AE to map audio data to rotation, then exporting XML to LiveMotion be made interactive.

AE->Flash Part II: Audio Amplitude

Dr. Woohoo is back, introducing After Effects 2 Flash: Audio Amplitude. This new ExtendScript exports the audio analysis data from AE 7.0 as an XML file and uses a component to map it to the Rotation and Scale Matrix transformations in Flash 8. “In other words,” he writes, “it makes objects in Flash dance to the music.” The scripts complement the recently introduced Transform Properties work, and each is on sale for $40. It’s cool work, and seeing it takes me back to a weird & ridiculous example I did, using AE to map audio data to rotation, then exporting XML to LiveMotion be made interactive.

Slick After Effects->Flash integration

I’m delighted to see that Drew Trujillo (aka Dr. Woohoo) has released a pair of tools for moving After Effects keyframe data into Flash. Along with a free AE export script, Drew has created After Effects 2 Flash-Transform Properties, a Flash extension that smooths the importing of AE data. You can read more about the tools on his blog. (Note: My role in this is kindly overstated; in fact I just helped people smarter than myself get connected–which, for what it’s worth, is what a lot of product management boils down to.)
This kind of integration is, I think, the start of much great progress to come. Back in 1999, when I first heard that Adobe was thinking of making a Web animation tool, I started lobbying my contacts at Adobe & Macromedia for a “Flash Interchange Format” that would enable Flash, AE, and other applications to exchange data with layers, keyframes, object names, and other data intact. The timing wasn’t right, of course, but now that the companies have come together, the opportunities to collaborate are incredible. Stay tuned, and in the meantime, give these tools a shot.
(More on Drew’s work can be found here.)
[Update: I realized I’d inverted the title. It’s now revised to indicate the direction of integration: AE into Flash.]

Slick After Effects->Flash integration

I’m delighted to see that Drew Trujillo (aka Dr. Woohoo) has released a pair of tools for moving After Effects keyframe data into Flash. Along with a free AE export script, Drew has created After Effects 2 Flash-Transform Properties, a Flash extension that smooths the importing of AE data. You can read more about the tools on his blog. (Note: My role in this is kindly overstated; in fact I just helped people smarter than myself get connected–which, for what it’s worth, is what a lot of product management boils down to.)
This kind of integration is, I think, the start of much great progress to come. Back in 1999, when I first heard that Adobe was thinking of making a Web animation tool, I started lobbying my contacts at Adobe & Macromedia for a “Flash Interchange Format” that would enable Flash, AE, and other applications to exchange data with layers, keyframes, object names, and other data intact. The timing wasn’t right, of course, but now that the companies have come together, the opportunities to collaborate are incredible. Stay tuned, and in the meantime, give these tools a shot.
(More on Drew’s work can be found here.)
[Update: I realized I’d inverted the title. It’s now revised to indicate the direction of integration: AE into Flash.]

Illustrator, Flash, AE, and a bandsaw…

…equals kinetic sculpture. This is one of the coolest customer applications of Adobe tools I’ve seen in a while. Artist David C. Roy builds spring-driven wooden forms that, once given a few cranks by hand, provide hours of hypnotic movement.
Though the techniques page is out of date (is that Illustrator 6 and Extreme 3D??), David reports that he’s been evolving his technique in synch with the software and cutting tools. He writes:

I do all my drawing directly in Illustrator, and as an idea matures I “test” it in After Effects. The direct update link between the programs has been a great boon as I can modify the forms in Illustrator, often using symbols, and get almost immediate feedback on how the piece will look in motion from After Effects. The design of my “Variation” series and my new sculptures Illusion and Spectrum were greatly enhanced by the ability to see motion and quickly change the design.

I use After Effects expressions to simplify setting up the animations. They are nothing elaborate, but they make for far more realistic motions. In the case of the Variation series I use them to keep the orbiting forms counter rotating in time with carrying wheel. In the “bird form” pieces like Migration and Quest I use expressions to keep the bird “level” as the wheels that carry it move at varying speeds. This was very tedious prior to expressions. I’m currently working on a new design where a form that is carried by other counter rotating wheels will pick up a swinging motion but basically stay in a fixed orientation. I was able to add the swinging by simply including a sine function and controlling the amount of swing with a constant.

(this_comp.layer(“back wheel 6 spoke”).rotation+this_comp.layer(“back
carrier”).rotation)*-1 + (Math.sin(time)*60)

The animated simulations can then be exported directly from After Effects to SWF for use on the Web, though David reports he’ll often bring them into Flash or LiveMotion for tuning first. When it’s time to build the pieces in the real world, he converts his Illustrator documents to DXF files using a plug in from BPT-Pro. These files get emailed to a local father/son team who have a large computer-controlled router. These guys convert the DXF files directly to machine code, then send it to the cutter. “It is amazing to watch the machine work,” says David.
It’s likewise amazing to watch an artist and his work grow with the tools. Seeing the technology open doors makes the long hours of development worthwhile. [Thanks to Photoshop engineering director Marc Pawliger, who hangs Tri-Fusion in his home, for the lead.]
[Tangentially related: speaking of computer-assisted woodcutting, Turn Your Head will take a picture of your profile, then use a lathe to render your profile on a wooden dowel. [Via]]

New Flash gallery hook-up for Photoshop

I’m delighted to report that Felix Turner’s slick PostcardViewer (see example) is now compatible with Photoshop CS2. A simple Photoshop script pops an interface for setting gallery parameters, then cranks out the JPEGs and XML needed to display your photos through Flash. Sweet.
It was largely Felix’s work that inspired us to add Flash support to Photoshop’s built-in Web Photo Gallery (example). We’re now building upon that start with Project Lightroom (example), and we’d like to standardize on an XML flavor that will let gallery templates developed for one app be used by others.
[Update: D’oh–I inadvertently attributed PostcardViewer to Felix Nelson (a very talented Photoshop artist from the NAPP). Felix Turner is the author of PostcardViewer. Sorry, guys; I will keep my Felices straight from now on.]

A nice send-off for LiveMotion

LiveMotion, the project that brought me to Adobe, has been dead & buried for more than two years. That said, it was nice this week, at the first Flashforward show since Adobe and Macromedia came together, to close out that chapter with the LM-authored Words at Play site winning the Typography category. Congrats to Steve, Bo, Roberto, Matteo, Whitney, and Alyson.
The whole LM thing was a tough row to hoe, and though we fell short, many of the issues we took on (tight integration with Photoshop/Illustrator/After Effects, rapid extensibility, etc.) remain priorities for designers & developers. It’s great that we now have the chance to work on them together, in the app people already know & love.

Podcast from Flashforward

I’m still recovering (in a good way) from spending the week at Flashforward & hope to have some notes up soon. In the meantime, if you’re interested in hearing some of my (slightly breathless) thoughts from the show floor, check out this podcast from Scott Sheppard’s Inside Mac Radio. The segment runs about 15 minutes, and author/blogger Jan Kabili has done an amazing job of transcribing the talk on The Unofficial Photoshop Blog. (Thanks, Jan!) Notes to self: Supply less cornball press photo. And stop being so word-dependent on “really.” I mean, really…

Mind-blowing design portfolio

Oh my God… Who is this Dave Werner guy and what kind of government lab built him? Simply put, this is the most effective portfolio site I have seen in years. Dave makes outstanding use of Flash video to tell the story behind each of his featured projects, ranging from print to Web to furniture design, filmmaking, writing, and game creation–sometimes all at once. As I browsed from the scrolling treasure map (see Illustrations) to “Ninja birds with Katana blades” (in “Cadence”), I felt my eyes re-open to the possibilities of technology & storytelling, much like they did when encountering From Alice To Ocean back in ’93. Damn. I just hope he doesn’t take a shine to product management… [Via Core77]

Top 10 Flickr mashups

Webmonkey lists 10 great Flickr mashups, including Retrievr for Flash-enabled visual search and Tagnautica for visual tag browsing. You know people have been up to some good stuff when rad projects like Felix Turner’s Related Tag Browser and Mario Klingemann’s Flickeur don’t even get into the honoroable mentions! All this work keeps our juices flowing when thinking of ways to more effectively burrow through images via our desktop tools. [Link via Marc Pawliger]

Errol Morris, AE7->FLV, more in Motion Design Center, Adobe Proxy

  • Volume II, Issue 1 of Proxy, Adobe’s quarterly interactive PDF magazine, has been posted. [Via] This issue discusses typography in book publishing, Live Trace & Live Paint in Illustrator, Vanishing Point in Photoshop, moving a document from InDesign to the Web, and more. Here’s the direct link.
  • The Motion Design Center has been updated with a raft of new content. Here’s what got posted yesterday:
        Gallery

      • WeWorkForThem

        Michael Cina and Michael Young “ferret out” a host of critters to showcase their unique outlook.

      • Domani Studios

        Always pushing the envelope, Domani Studios’ 2100 pounds of creative muscle displays its playful side.
        Dialog Box

      • Errol Morris: Revealing Unexpected Realities
        By Megan Cunningham
        From The Fog of War to Apple’s “Switch” campaign, Errol Morris describes the unique connections between his dual career as an award-winning filmmaker and advertising iconoclast.
        Think Tank

      • Buildings as Interfaces
        By Peter Hall
        Architects and designers collaborate to create digital skins that allow buildings to blink, wink, and breathe. Step inside.
  • Errol Morris, AE7->FLV, more in Motion Design Center, Adobe Proxy

  • Volume II, Issue 1 of Proxy, Adobe’s quarterly interactive PDF magazine, has been posted. [Via] This issue discusses typography in book publishing, Live Trace & Live Paint in Illustrator, Vanishing Point in Photoshop, moving a document from InDesign to the Web, and more. Here’s the direct link.
  • The Motion Design Center has been updated with a raft of new content. Here’s what got posted yesterday:
        Gallery

      • WeWorkForThem

        Michael Cina and Michael Young “ferret out” a host of critters to showcase their unique outlook.

      • Domani Studios

        Always pushing the envelope, Domani Studios’ 2100 pounds of creative muscle displays its playful side.
        Dialog Box

      • Errol Morris: Revealing Unexpected Realities
        By Megan Cunningham
        From The Fog of War to Apple’s “Switch” campaign, Errol Morris describes the unique connections between his dual career as an award-winning filmmaker and advertising iconoclast.
        Think Tank

      • Buildings as Interfaces
        By Peter Hall
        Architects and designers collaborate to create digital skins that allow buildings to blink, wink, and breathe. Step inside.
  • Color between Photoshop and Flash: What's the deal??

    Why is it that when you design an image in Photoshop, then move it to Flash (or Dreamweaver, or the Web in general), the appearance can totally change? If this issue has bitten you, spend ten minutes (9:19, actually) watching this new tutorial from our friend Michael Ninness. Myke explains the right color management switches to flip to change the out-of-the-box setup (geared towards a camera-to-print pipeline) to one that better suits Web output.
    On a related note, if you’re frequently working between Photoshop and Flash (as evidently lots of people are), check out Myke’s full set of tutorials on the subject, and/or his Photoshop + Flash session at next week’s Flashforward conference in Seattle.
    Of course, the fact that this stuff requires classes & tutorials gives us plenty of motivation to make it just work. More on that soon.

    Words at Play

    Typography + animation come together beautifully in Words At Play, the companion site to Roberto de Vicq de Cumptich & Matteo Bologna’s book of the same name. The project, a “many-splendored, multi-layered typographic tour d’amour,” showcases de Vicq’s typographic portraits of 21 renowned writers (plus Al Capone and Napoleon Bonaparte). After snagging a pair of Webby awards, the site is up for the People’s Choice award at next month’s Flashforward. It’s got my vote.
    Words at Play was built by animating type in After Effects, then exporting keyframes to Adobe LiveMotion as XML (.amx). As it happens, I’ve seen speculation recently about Adobe resurrecting LiveMotion. That strikes me as quite unlikely, but there were some cool concepts (e.g. data exchange via XML, animation applied via styles) that I’d love to see revisited.
    If you like Words At Play, check out Roberto’s earlier Bembo Zoo, an abecedary featuring animals drawn in letters [Via]. These guys also did a terrific portrait of Adobe co-founder John Warnock, using the Warnock Pro font created in his honor. (Random aside: I also found a portrait of Dr. Warnock rendered in PostScript, the language he invented.)
    Tangentially related:

    • I’m captivated by the typographic paintings of Paula Scher [Via]. She discusses her work in the video Adobe commissioned from Hillman Curtis.
    • TYPEDRAWiNG uses Flash to enable drawing with letters.

    Retrievr: Visual search of Flickr

    It’s been noted on other blogs throughout the week, but I wanted to mention Retrievr, Yet Another Clever Flickr Interface (YACFI?), as it relates to the problem of burrowing through large sets of images. A Flash interface lets you make simple sketches, the color palettes of which Retrievr then attempts to match with images from Flickr (details from the developer here). See also comments from ResearchBuzz (“[E]ven if it doesn’t work very well it makes an awesome toy and you should go play with it right now”).
    We’ve experimented with visual search for image retrieval, adding technology from Idée to the organizer component of Photoshop Elements. Elements lets you choose as many as four source photos in the browser window, then automatically find other photos similar in appearance. Elements 4 also introduces some new face-tagging features created by Adobe’s Advanced Technology Group.
    Incidentally, if you’re wondering why we sometimes introduce new technology in Elements before bringing it to Photoshop proper, think of it as similar to, say, the Foo Fighters dropping in to play an out-of-the-way club. It’s a chance to introduce promising, useful work without immediately subjecting it to the full glare of hardcore pro workflows.
    [Thanks for the Retrievr link to Mark Kawano, formerly the UI designer for Camera Raw, now at frog design until we can steal him back. ;-)]

    AE + Flash "In the Mod"; Flickeur

    Drew Trujillo (aka Dr. Woohoo) has been experimenting with ways to use color, Flash, and After Effects together. His In the Mod color analytics app assesses artwork, then generates XML files for Flash and Processing as well as HSL arrays for AE. Use the “Choose a Palette” button in the upper-left to select a painter & work, then check out the results.
    Drew’s brushes.paints.stencils project uses AE & the Sound Keys plug-in to analyze audio data & generate keyframes which are then fed to Flash as XML. He then exports the audio from AE as a Flash FLV file, using that to synch up with animation based on the XML. It’s more fun to see than to read about, so check out examples like Radiohead & the kaleidoscopic collaboration with Mario Klingemann.
    On a related note, Mario (who’s also made some Photoshop plug-ins) shows how modern processors & the new blending modes in Flash Player 8 can create rich motion graphics on the fly. He’s created Flickeur, a project that “randomly retrieves images from Flickr.com and creates an infinite film with a style that can vary between stream-of-consciousness, documentary or video clip. All the blends, motions, zooms or timeleaps are completely random. Flickeur works like a looped magnetic tape where incoming images will merge with older materials and be influenced by the older recordings’ magnetic memory.” The app brings in images from Flickr over time, so be patient if it needs a minute or two before it gets interesting.
    J.
    Continue reading

    Math rock in Illustrator, Josh Davis-style

    Adobe.com features a new profile on Joshua Davis and his work that brings together Illustrator with scripting to create generative art. The work combines known building blocks (sketches scanned & vectorized in Illustrator) with algorithms that introduce chance and chaos. Josh presented a great lecture on this work at the Adobe Ideas Conference earlier this year–a bracing, whirling blur of charisma, tats, code, and f-bombs that lit up an otherwise sedate gathering.
    I’ve been thinking for quite a while about ways to make our tools freer, to tap into what my friend Matthew calls the “math rock kids”–the sort who make and use experimental apps like Auto-Illustrator (no relation). People can build beautiful, freeform interactive drawing pieces in Flash, so why can’t we use them in Photoshop or Illustrator? Why not make it easier to create offbeat interfaces that leverage these deep imaging engines in new ways? And could we combine that power with the linear animation chops of After Effects? Let’s be less predictable, more playful, more absurd.
    [Adobe.com link via Branden Hall]
    [More from Joshua here and here.
    He’s also contributed a chapter to John Maeda’s Creative Code: Aesthetics + Computation.]

    Flash + AE video tutorial

    A few days ago on the Flashcoders list, some people were discussing ways that Flash and After Effects can be used together. Video support in Flash has opened some cool possibilities, but note that AE also exports Flash SWF files. The newly launched Motion Design Center features a video tutorial on using AE to animate text, then import it into Flash. [Update: In case they’re useful, you can find my old tutorials on AE SWF->Flash (demoing parent-child relationships, text animation, etc.) here.]
    Now that the product teams can work together, we have opportunities to take integration to a new level. As we build the roadmap, we’d love to get your feedback on what’s most important.

    Best GIF Ever; New Gondry Vid; etc.

    Random interesting design bits I’ve encountered while shirking my actual job duties:

    • Best. Animated GIF. Ever. With a perfect soundtrack to boot. (I knew there was a reason we brought animated GIF creation into Photoshop CS2.) [via]
    • Director Michel Gondry and the White Stripes team up again to make your head hurt & make you like it. (This is timely if you were losing sleep wondering what a mash-up of Conan, Terry Gilliam, and those weird WEFAIL puppets would look like.) [via] (Previous Gondry/Stripes brilliance here and here.)
    • Coudal Partners, original proponents of Photoshop Tennis, have produced the clever short film Copy Goes Here. The mellow pace means you can’t jam in a screening while waiting for, say, your online banking to refresh, but it’s good for a laugh when you have 10 minutes or so. [via]
    • Here’s a zoom interface you don’t see every day: Justin Everett-Church has skinned the new Yahoo Maps in a pirate theme, complete with extending spyglass. (He’s also done a radar theme). [via]

    Flash + After Effects

    I’ve been dying to see After Effects and Flash get together for a long time, having written a bunch of tutorials on the subject back in the day. Until now, however, the process has been powerful but a bit laborious.
    With the advent of support for alpha channels in Flash video, however, you can create some slick combos. See The Flash Blog’s examples of AE-made video composited with interactive Flash elements. Groovy.

    Better bitmaps in Flash

    Great news for anyone wanting to integrate Photoshop and other imagery into Flash (and judging from the crowds drawn by my old boss, Myke Ninness, when he lectures on this at conferences, that’s a lot of people): Macromedia engineer Tinic Uro reports that they’ve made some solid improvements in how bitmaps are drawn in the recently announced Flash 8. This should provide smoother, faster drawing of images, such as those displayed in Photoshop CS2’s new Flash Web Photo Gallery templates (example | download).
    This reminds me a bit of when we launched Photoshop 7. The eye-popping Healing Brush got the big wows, but the feature battling it for applause was the simplest thing in the world: when you’d rename a layer, you could now type right into the layers palette, rather than into a dialog box. Sure, it would save you just a couple of seconds, but multiply that by number of layers, across days, weeks, months… It’s a simple lesson but one that’s easy to forget: to really make the experience better, spare some cycles for the spit and polish. It’s cool to see the Flash team doing the little things that make a big difference.
    [Disclaimer: Adobe and Macromedia have announced their intention to join forces, but until that’s a done deal, we’re required to operate as separate entities. So, just to be clear, I’ll point out that I’m simply relaying publicly available information.]