Monday, June 7, 2010

Part 3: CS5 Recap/Notes

Flash CS5
  • InDesign: export file (CS5 FLA); TLF Flash type engine text (requires FL10 player); classic text for FL9 or earlier; ID goes in and saves 24-bit PNG files for FL use; very powerful image processing tool (ex. 200 headshots; add effect; export JPG)

  • Open file in Flash; file doesn’t have any timeline controls set in place; need to add actions; everything in ID has been made to work in native FLA files - everything as pgn files, sound/video or symbols (movie clips or buttons).
    • isolation mode (double click on movie to dig into file); ID also created layers in timeline inside movies
    • only disconnect is that invisible buttons are nested inside movie clips. You have to reference parent clips with AS or cut/paste button onto main timeline.

  • Action Script 3 updates - Code Snipets (Yippee!): click on movie/button; bring up code snippets panel; panel has folders of snippets: actions, timeline nav, animations, load/unload, audio/video,
    • Actions > ‘click to go to web page’
    • All code is imported with correct syntax and FL will made it applicable to your instance (plus it automatically adds notes w/ instructions for editing!)

  • Linked text frames (finally)
    • TFL (Flash 10)
    • Property panel (new panels) - everything is scrubby (position/size; advanced character; containers/flow; columns; color effect; display; filters); similar type properties as ID without converting to dynamic text box - all in one object now; will read in browsers that don’t support TFL Flash 10; but will not have some of the enhancements/features you’ve used.

  • New doc: Properties Panel (one work flow option); Publish - create AS3.0 Class file; main; okay; script written it for your file, independent from fla doc; you can edit AS3 outside of doc;  allows you to work simultaneously with designers on fla files and developers on AS. 
    • Flash Builder: XML, rich text environment; all code/no interface.

  • Drag/drop native PSD onto scene - converts to PNG in libray
    • Fla file format > XFL (CS5 uncompressed doc)
    • Save as folder with XML and all assets; text based files now; versionable; now open in DW and edit;
    • Library Folder - acts like a mini-website; now you can swap out images or update them directly from folder independent of flash.

Dreamweaver CS5
  • In Photoshop: save map pic as jpg (save at least IE6); save file with a series of 3 dots; each diff color; shift file than div and achor tags = fully interactive experience; add New CSS Rule > class; ‘map container’; define dimensions; import jpg as background of div; Insert > Div Tag (reference ‘map container’); Code View: insert achor tag (add class, even if it isn’t defined yet); link to # symbol; achor tags become objects; New Rule > ‘a..’; display - block; background - dots.png; repeat - no repeat; set to zero, zero; position as absolute; container position as relative; all code is generated by CSS; no change in HTML (local rules vs global CSS rules for the objects)

  • jquery - Javascript framework; manipulate all HTML docs; link to it; then script with document ready function; once all page is loaded; you can updated/manipulate anything; built in functions - show/hide, change dimensions; dynamic manipulating on the fly   

  • Spry - Adobe released with CS3 (manipulate while working); select XML file; select layout format and click OK; blue = variables from XML; bindings panel - variables from data set; dynamic XML driven application

  • Webkit/iPhone Simulator

  • RSS feed can plug into XML file on web.

  • Dreamweaver Features
    • Live View or use Hover View (inside DW layout); Non-destructive CSS previewing; temporary de-activing of CSS to see modifications
    • CSS Theme (Wordpress) editing w/DW; ‘Discover’ in DW and it downloads all server files; filter by css and edit your Wordpress site.

Flash Catalyst CS5 (new workflow option for flash users)
  • In the background constantly building code; can be edited in Catalyst or Builder.

  • Open > AI file; convert all to FXG (XML based file); graphic interchange formats for all programs in CS to use
    • At Top: states (similar to FW and PS layer comps); main canvas; timeline (regular and designtime); interactions panel; library w/all layers from illustrator in it.

  • HUD (heads-up display) - choices of all the things you can do based on what you are clicking on; components can be made by grabbing/clicking on it and telling Catalyst to make it a button; States in HUD - double click = inside button and you see states at the top; Button - interactions panel: on click; play transition to state;

  • Timeline is visual - shows the transition states w/every item and ability to preview; visual timeline to see when it’s going to happen; smooth transition button; will create transition between anything different in one state to another (size; location, etc.)

  • Publish to swf or AIR; display-to-web folder; run-to-local folder (to preview on your machine).

No comments:

Post a Comment