Flash CS4: The photo tour of features

After spouting off about the benefits of the new motion model in Flash CS4, I thought I’d take a bunch of screenshots of Flash, most of which are showing new features and such. For all of the following photos, click the thumbnail to look at the full size photo.

More after the jump.



splash.jpg

The Flash CS4 splash screen.


full-interface-with-start-screen.jpg

The full interface with the Welcome page / Start page (or whatever we’re calling it these days).

The next screenshots are of our various preset workspace layouts. These are accessible in the upper right of the interface from a menu. Of course you can create and save your own workspaces. Look in the upper right of the screenshot for the workspace name.

essentials-layout.jpg

animator-layout.jpg

classic-layout.jpg

debug-layout.jpg

designer-layout.jpg

developer-layout.jpg


And as you may have noticed above, the Tools panel can now be horizontal!


horizontal-tools-panel.jpg


Next, one of my favorites, the Motion Editor. It’s a big panel, so this is a two-parter screenshot:


motion-editor-1.jpg


motion-editor-2.jpg


Under the filters heading, the dashed lines in the graph shows you the eased value of the animation. I will provide full details in a future blog post.


Next screenshot shows the changed Transform panel, and the Motion Property inspector. The Motion PI is active when you select a tween span or a tweens motion path.


motion-pi-and-transform.jpg


And the Library has improved, see the search box:


library.jpg


Or you can edit multiple symbols at once (select multiple symbols in the Library and click properties):

edit-multiple-symbols.jpg


While we’re around this area, the general Property inspector.


general-pi.jpg


There’s a new panel for Motion Presets. Following screenshot shows all of the ones that come with Flash. These are pre-made animations you can apply to your instances (and modify or whatever you want).


motion-presets.jpg


By the way, once you see these after you get Flash, let us know what you’d like to see as a preset.

The Timeline has some improvements too (note the hot text at the bottom and such. This timeline happens to contain some new tweens.

timeline.jpg


Publish Settings dialog.

publish-settings.jpg


When you create a new document, now AIR is there without needing to install any add ons.

new-document.jpg


So when you work with IK bones, there’s a special PI for that:

bone-pi.jpg


And an IK layer:

ik-layer.jpg


And the timeline has some new icons in there for the new layer types you can have. Here is IK, new tweens, tween and IK masks, tween and IK as guides.

new-layer-types-mask-guide.jpg


There’s a new Deco Tool in Flash CS4. Lets look at the Deco version of the PI (the tool’s icon is shown at the top). Here’s the default, which is set to Vine:

deco-tool.jpg


A menu shows what different effects you can use:

deco-menu.jpg


And here are the grid fill and symmetry brush settings available (Vine fill is above):

deco-grid-fill.jpg


deco-symmetry-brush.jpg


Now some stuff on the Stage. 3D. There is a 3D rotation tool and a 3D translation tool available. 3D rotation looks like this on the Stage:

3d-rotation-1.jpg


3d-rotation-2.jpg


And 3D translation, pushing an object back in Z:

3d-translation-in-z.jpg


You can switch between global and local mode for 3D – that button is at the bottom of the Tools panel and looks like this:

global-local-3d-button.jpg

And to end, a couple pictures of motion paths on the Stage. The first one is a 3D translated animation (coming from far away in Z to close) – this is what the motion path looks like:

3d-motion-path.jpg

And this one just shows a few motion paths on the Stage at once:

multiple-motion-paths.jpg

So there you are – bunch of shots of the new Flash CS4. Hope that was interesting. Again, for some details on the new motion model, see this post here.

Author Jen deHaan

Jen deHaan is a freelance graphic and web designer, fascinated with great layout and usability. She has been working in the software industry since 2001, and has held positions with Macromedia, Adobe, and Motorola. Jen has written and contributed to over 20 print publications on web design that have been published by Peachpit, Adobe Press, and Wiley. She is also a professional pet blogger at DOGthusiast, and owns a small business called Stylish Canine.

More posts by Jen deHaan

Join the discussion 25 Comments

  • Mike says:

    Is the editor improved? I currently use FlashDevelop and it is waaay better than the actionscript editor in Flash CS3.

  • reremoon says:

    Excellent work dude. Thanks !

  • Quentin says:

    Thanks for all these pics!

  • Will says:

    Thanks for these. I can’t wait to get my hands on this and start playing with it.

  • jdehaan says:

    Hi Mike,
    The ActionScript editor hasn’t seen a lot of change this release. Our focus on this one was the expressive/design stuff (hence: new motion, IK, and 3D). I’m sure it’ll see some love in the near future though…

  • Glaiel says:

    Does AS3 have any new features? I read somewhere that they were adding dynamic sound creation into it.

  • jennicandance says:

    awesome! AS4 looks really fun!

  • Mike says:

    “The ActionScript editor hasn’t seen a lot of change this release.”

    Then it’s a no deal for us, in fact we will move forward in adoption of FlashDevelop. It’s a superior product from the standpoint of a developer. Saves money too being free and all!

    Have a look at that program to see what you should focus on for the editor in CS5 (or whenever). Hint: it’s not the pretty interface. Also, see dearadobe.com for more tips.

  • jdehaan says:

    Hi Mike,

    There isn’t a graphical change really like the other areas I have taken screenshots of. There are some changes, like code completion is case insensitive. Since I was working with the Timeline/Motion Editor so heavily there may be other things I’m not thinking of. Are there specific changes and enhancements you feel are the most important to you and your company’s workflow? We can make sure they’re in the bugbase and known about if they aren’t already.

    Thanks!
    Jen.

  • jdehaan says:

    Oh, and I’ll definitely take a look at that tool 🙂 It would be great to know what you feel would be the most important changes though!

  • Min Thu says:

    very nice to see all screenshots. 🙂 thanks!

  • beau says:

    Any word on if the html publishing now uses swfobject.js or the old ac_runActiveContent still?

  • Paul says:

    The motion editor looks like AE. Too bad. AE sucks for this stuff, very counter-intuitive compared to 3d studio max or Maya (handles appear and disappear and don’t behave like beziers all of the time, making gradual easing curves difficult to create). One of the things that made flash more successful than live motion is that tweening and easing was simple and modeled after traditional animation. It’s a shame that Adobe is “featuring” flash into the ground.

  • gern says:

    Hey, Jen–

    Any improvements to printing? I’d LOVE *real* pagination. I’d also love better I/O support locally and with a server. Maybe direct connections to MySQL and Oracle.

    :gern

  • gern says:

    After reviewing the changes to Flash and the other apps in the CS4 design suites, I remain a little disenchanted with Adobe.

    Every release of Flash and Dreamweaver from Macromedia were must-haves and great leaps forward. This being Adobe’s first release with their full control, I must admit, it makes me yawn. More interface changes and few actual productivity enhancements.

    Yes, the new Flash tweens are nice and the bone tool could be fun, but when I animate with code these do little for me. Using Dreamweaver since version 1.0 I’m a little more impressed with this new release, but have trouble justifying the $600 upgrade cost for the suite based on one application.

    These are the reasons I stuck with Photoshop 7 then upgraded to CS3.

  • Toby says:

    Looks nice, regarding AS editing, I would find it useful to be able to choose where the Document Classes are placed when opened in the Flash IDE.

    I would find it more useful to have them tabbed in the Actions frame rather than the main work area. The reason being that when you open a Document Class currently it both obscures the work area *and* make the Actions frame useless since it loses context.

    So then I have to keep minimizing the Actions frame since it serves no purpose whilst editing the Class (as far as I can tell) and then max it back again when I switch to the scene.

    Anyway, just a thought, I probably haven’t taken some state into consideration where it wouldn’t work but I thought I would share.

    Cheers

    Toby

  • Mike says:

    Well, I am always struggling with the non standard windows and panels in Flash (since CS 3 that is). Like you want to activate a windows and click on the title bar, and it will collapse. Or the mouse wheel scrolling is different (slower) than it is in other programs (like Word or a browser). And the search results in the help (the tree on the left) is not even alphabetical (how could that get past quality control). And the workspace regularly forgetting panel layouts. And the fact that the panels when placed on your second monitor are still ‘part of’ the program, so they come to the foreground with it, and overlap for instance your browser with a tutorial. Or the standalone/debug player gets hidden behind the library window, until you close it and run again. Or the debugger treeview with variables being stateless, so you have to click click click to see a variable between each breakpoint (try that in a loop, it’ll drive you nuts).

    Yeah, I could go on, believe me. Open up a bug tracker and I’ll be all over it, just as long as I get something in return for the trouble.

    Thing is, some team at Adobe went all the way implementing a complete cross platform windowing system, except they forgot the quality control. Sometimes even just the controls (like scrollbars, and grabhandles) are placed att weird positions.

    In the mean time, all I do with Flash is CODE. And for that, the editor s*cks. Sorry tosay that. I’m also a .NET developer and Visual Studio is about 7 years ahead of you guys when it comes to

    A. Editing code with code hinting
    B. Project management
    C. Debugging (visualizers, edit and continue)
    D. Auto formatting

    And really, if I have to tell you this, than I have no hope. It’s fantastic that you listen and respond, but all this stuff should be on your backlog. Flash needs to compete with Silverlight, and though your market penetration is nearly 100% Microsoft will beat your pants off with their tooling support. It’s superior in every way.

    And no, my boss spends a fortune on CS 3, so he’s not buying Flex Builder, although it is a very good program, comparable to Visual Studio.
    This is why FlashDevelop is so great, it’s free to try out and they have some smart code inspection, so you get code hints for the classes you wrote, not just for variables that start with “mc_”. it can also auto import packages, and it uses the Flex compiler, so it produces regular SWF.

    Phew long rant, hope to see some improvements in the (near) future. And seriously, read the website http://dearadobe.com, it’s sooo true.

    Bye!

  • Rob says:

    Although the new “expressive/design stuff” is very exciting and all, it does very little for the end developer. Sure it is easier to do the things we can already do with Flash. But the real meat of the program, AS, is still neglected. Developers need better tools than the paltry offering in Flash. A decent AS editor and debugger would be a good start.

    How can 3rd parties create decent alternatives for free and Adobe cannot even attempt to charge us for such? It sometimes feels, as a developer, that Adobe is actively pushing me away. 🙁

  • Digiguru says:

    Thanks for sharing this. Something that is concerning me when I see all these interface updates is Adobe ignoring people who use more than one monitor. There designer and developer modes show they are thinking about different people, but why not expanding on that by allowing a more solid way of setting up the enviroment to expand beyond a single screen. I’m sure you can un-dock panels, but doing this usually never works properly. Each time you open Flash things have shifted and so on. I want a timeline that runs the entire length of my 24″ monitor, my actionscript panel to be on one screen, my libraries, tools, properties etc on another. If I remember correctly 3D studio max used to allow for this sort of behavour. Thanks agin for sharing this with the rest of us.

  • Jen deHaan says:

    Hi Digiguru,

    I’ve been working on a dual monitor setup while testing Flash (while on Mac, I don’t have dual set up for Win – others do here though), and you can set up a custom workspace that’s dual monitor – and at least for me it’s generally working fine each time I open Flash. Personally I have the stage and Tools panel on one monitor (my Cintiq), and the other monitor has the rest of the panels I use the most — Timeline across the entire length, Motion Editor, PI and Library, etc. When I open Flash it looks the way it did when I closed it on both monitors. If there’s a specific workspace that isn’t working for you (something specific keeps shifting between when you close it and open it up again), please let us know the specifics! Thanks!

  • Todd Pasternack says:

    Overall CS4 has been great, Jen (I have a pre-release version). I’m kinda bummed about not being able to switch between Document windows with a keyboard shortcut anymore (CS3 had the Command + ~). And the Help menu no longer allows for 3rd Party API files as it kicks to Adobe’s site.

    Otherwise my work-flow between all the apps has been greatly improved.

    And thanks for the overview above!

  • ieaiaio says:

    still less space for height. nice review! 🙂

  • Nice, though I’d loved to see some screenshots of the Code Editor too.

  • MDiogo says:

    Can´t wait to put my hands in one Flash CS4 box.

  • Chelsea says:

    Hey, excellant writing.

Leave a Reply