« July 2005 | Main | September 2005 »

August 31, 2005

FOTD 18: Fireworks 8 - All the Small Things

Fireworks 8 has a lot of small tweaks, changes and updates that to me, aren't necessarily big enough for a dedicated feature - so for today's FOTD I wanted to cover a bunch of small tweaks that collectively make for a much, much more flexible imaging tool. There's a lot to cover (and this post won't even get close to covering them all), so let's get started!

Layer Improvements
First, in Fireworks 8 you can lock objects individually within the Layers panel- unlike Fireworks MX 2004 and earlier, which only supported locking by layer (including all objects within that layer).
Secondly, Text layers are now automatically named with the text that you've placed, making it easier to differentiate between multiple text layers (and of course you can rename them at will to even more relevant titles). The combination of these two makes for a much more intuitive Layer panel, if you ask me. ;-)

Blend modes
26 new Blend modes were added in Fireworks 8 (!!), so along with your old favorites you've now got these options for blending from both the Object Property Inspector as well as the 'Blend' drop-down menu in the Layers panel (and where these correspond 1:1 with Photoshop's blend modes, they are maintained correctly both when exporting a PSD from Fireworks as well as when importing a PSD from Photoshop):

  1. Average
    This mode is commutative (base and blend color can be swapped). It returns the same result, when opacity is set to 50%.
  2. Negation
    This blend mode is the "opposite" of difference mode. Note that it is NOT difference mode inverted, because black and white return the same result, but colors between become brighter instead of darker. This mode can be used to invert parts of the base image, but NOT to compare two images.
  3. Exclusion
    This blend mode approximates Photoshop's Exclusion blend mode, and creates an effect similar to but lower in contrast than the Difference mode. Blending with white inverts the base color values. Blending with black produces no change.
  4. Hard Light
    This blend mode multiplies or screens the colors, depending on the blend color. The effect is similar to shining a harsh spotlight on the image.
  5. Soft Light
    This blend mode approximates Photoshop's Soft Light blend mode and either darkens or lightens the colors, depending on the blend color. The effect is similar to shining a diffused spotlight on the image.
  6. Fuzzy Light
    This mode is very similar to the Photoshop soft light mode, for dark blend colors it is identical, for bright ones it does not share the disadvantage of the Photoshop soft light mode.
  7. Color Dodge
    This blend mode approximates Photoshop's Color Dodge blend mode, and looks at the color information in each channel- brightening the base color to reflect the blend color by decreasing the contrast. Blending with black produces no change.
  8. Color Burn
    This blend mode approximates Photoshop's Color Burn blend mode and looks at the color information in each channel- darkening the base color to reflect the blend color by increasing the contrast. Blending with white produces no change.
  9. Inverse Color Dodge
    This blend mode is more or less same as color dodge mode, but base color and blend color are swapped.
  10. Inverse Color Burn
    This blend mode is more or less same as color burn mode, but base color and blend color are swapped.
  11. Soft Dodge
    This blend mode is a combination of both the Color Dodge and Inverse Color Burn mode, but much smoother than both. The base image is darkened slightly, with very bright blend colors "dodged" in .
  12. Soft Burn
    This blend mode is a combination of Color Burn and Inverse Color Dodge modes, but much smoother than both. The base image is lightened a wee bit, with very dark blend colors "burned" in.
  13. Reflect
    This blend mode is useful when adding shining objects or light areas into your images. The formula is very similar to a color dodge, but the result is less bright (in most cases), looking a bit like Soft Light.
  14. Glow
    This blend mode is a 'harsher' variation of Reflect mode (base and blend color are swapped). The result appears a bit more like the Hard Light blend mode.
  15. Freeze
    The Freeze blend mode is yet another variation of the Reflect mode (base and blend color are inverted, and the result is inverted again).
  16. Heat
    Another variant of the Reflect mode, similar to Freeze mode but with the base and blend colors swapped.
  17. Additive
    The Additive blend mode looks at the color information in each channel, and adds the base color to the blend color.
  18. Subtractive
    The Subtractive mode also looks at the color information in each channel, subtracting the base color from the blend color.
  19. Subtract
    Forgive me, but I didn't have time before posting to really dig into the difference between Subtract and Subtractive. Sorry! I'll repost more detailed info shortly on this.
  20. Interpolation
    This blend mode somewhat combines both the Multiply and Screen modes (and appears similar for very dark or bright colors).
  21. Stamp
    This blend mode is similar to Average mode, and is particularly useful when applying relief or "bump" textures to images. Gray blend colors do not change the background, brighter or darker colors make the background either brighter or darker. The result can become very extreme, so this mode works best with mid-range colors.
  22. XOR
    Both the base and blend color are combined using a binary XOR operation. The result looks very strange if used on normal images (like photos). Much like Difference, Exclusion and Negation modes, the XOR mode can be used to invert parts of the base image, and to compare two images (resulting in black pixels where they are equal). While XOR mode can be compared to exclusion, a logical AND mode could be compared to multiply, and a logical OR could be compared to screen mode. Don't sweat the math, though- you'll really want to play with this in practice once you get your hands on Fireworks 8. ;-)
  23. Red
    As opposed to the modes above, the Red, Green and Blue blend modes don't work on all channels of both images- but instead take the appropriate channel from the blend image, and the other channels are taken from the base image.
  24. Green
    As opposed to the modes above, the Red, Green and Blue blend modes don't work on all channels of both images- but instead take the appropriate channel from the blend image, and the other channels are taken from the base image.
  25. Blue
    As opposed to the modes above, the Red, Green and Blue blend modes don't work on all channels of both images- but instead take the appropriate channel from the blend image, and the other channels are taken from the base image.
  26. Overlay
    Overlay blend mode multiplies or screens the colors, depending on the base color. Patterns or colors overlay existing pixels, while preserving the highlights and shadows of the base color. The base color is not replaced- but is mixed with the blend color to reflect the relative lightness or darkness of the original color.

(much thanks to the eng/QA teams for documenting these well!)

'Live' Marquee settings
So you've got a complex selection marquee active, and you realize that your feathering settings aren't just right. Or the tolerance of the magic wand tool isn't quite what you wanted. In Fireworks MX 2004 and earlier, you had to drop and reselect the region after making settings changes to marquee/selection tools, but in Fireworks 8 you can change these on the fly without losing your selection. Make sure to check the 'Live Marquee' checkbox in the PI for your selection tool to turn this new feature on.

Save and Export - Smarter Default Folders
When you're saving libraries/styles/image files/etc., you won't have to worry about re-navigating to where you last saved to- Fireworks got a brain here in v8, and will remember the last path you saved to, even after restarting- a serious productivity boost if you're working with a lot of images or assets.

Undo in Preview Mode
Yep- you heard right- you can revert prior changes in the Preview pane, so make those relative changes with wanton abandon and just hit Control/Command-Z to revert 'em one by one. Very handy for when you're just visually previewing a bunch of different compression/format options and need to step back- save your brainpower for more important tasks.

Fonts
Fireworks now remembers the most recent fonts you've used, and displays them at the top of the font lists so you don't have to scroll endlessly (my experience, having a zillion-plus fonts installed on my machines) to get back down to Zapf Dingbats, should you use it a lot (yikes).

Save Multiple Selections
As opposed to prior versions of Fireworks that would only allow one marquee selection to be saved per PNG file, you can now save, restore, and name/rename multiple marquee selections within your PNG source files. Very cool!


If you've read this far, you're probably getting the picture I came to after diving into Fireworks 8 for the first time a few months ago- although at first glance the 'gee whiz' features seem more evolutionary than revolutionary, the amount of small, reasonably-unearthed workflow and productivity enhancements in v8 - in my opinion - are worth a heck of a lot more collectively than the sum of their parts.

Hope you enjoy all these little enhancements as well- and I'll catch you again tomorrow for FOTD 19!

Posted by sfegette at 12:55 PM | Comments (0)

August 30, 2005

FOTD 17: Flash 8 - Fireworks Import

I do a lot of asset generation in Fireworks, and often these assets are headed towards Flash. In Studio MX 2004, there were a few hitches in that workflow, primarily in that any blend modes and effects needed to be rasterized, and vector paths from Fireworks always showed up in Flash as grouped objects. If you follow a similar workflow, you'll be glad to hear that things have shored up here quite a bit in Flash 8.

First and foremost, I've gotten rather accustomed to the Effects in Fireworks, primarily the Drop Shadow filter (which gets used constantly for both subtle and not-so-subtle effects). When importing a Fireworks PNG with a single object and it's applied Drop Shadow effect into Flash MX 2004, you had the not-so-enviable choice of either rasterizing the entire object and effect (losing editability) or ignoring the effect entirely (and requiring you to recreate it within Flash).

In Flash 8, however- many of the Fireworks effects are supported natively, and you'll be presented with a slightly different dialog box when attempting to import a PNG from Fireworks:

import_dialog.jpg
The new Fireworks PNG Import options (in Flash 8)


As you can see, you now have the option to import the entire file as a movie clip (retaining layers and blend modes), or import the file into a new layer in the current scene. You can have Flash 8 rasterize the file (as in previous versions), or keep your Fireworks objects fully editable (much preferred, in my opinion). Text can be handled separately as well- either rasterizing right away or maintaining it's editability in Flash. Tons of options are available, you may just find yourself using Fireworks a lot more now than you have in the past. ;-)

So in a nutshell, a Fireworks object with a Drop Shadow applied looks like this in Fireworks 8's property inspector:

fireworks_drop_shadow.jpg


... and after importing to Flash 8, the Drop Shadow appears as so:


flash_drop_shadow.jpg

Now of course not all of the Fireworks Effects are supported in Flash 8- this is the list of supported effects (and how they map to Flash 8's filters):


Any other Effects in Fireworks will be either rasterized or ignored when imported to Flash 8- but knowing how these map to one another will greatly help you set up your Fireworks files for best Flash import, the new importer is certainly a better option than either rasterizing or dropping entirely your Fireworks effects.

As Flash MX 2004 didn't support blend modes, there was never a direct option for importing Fireworks objects you've layered in this respect, and you again needed to rasterize it first, losing any editability. In Flash 8, however (which does support blend modes), you'll have much less hassles in this respect, as blend modes are maintained when importing your Fireworks PNGs. But as Fireworks supports a LOT more blend modes than Flash 8, these are the key blend modes you can use in Fireworks and still keep intact/unrasterized when importing to Flash.

This small update to Flash 8 should prove to be very helpful indeed when comping in Fireworks, then moving your assets around between Studio apps- for example, slicing up a Fireworks comp for integration in Dreamweaver, exporting its buttons/assets as individual PNG files for Flash development, and making sure you can maintain editability across the board. Enjoy- and I'll see you tomorrow for FOTD #18!

Posted by sfegette at 03:20 PM | Comments (7)

August 29, 2005

FOTD 16: Dreamweaver 8 - Unified CSS Panel

Although Dreamweaver MX 2004 made signficant improvements to the way CSS styles were handled in development, there were still some parts of the overall CSS workflow that were a bit awkward. In order to get the most mileage out of Dreamweaver with CSS layouts, you needed to devote a whopping amount of real-estate to the associated panels- CSS Styles and Relevant CSS. And unfortunately, the former panel was buried within the 'Design' panel set, and the latter wasn't even listed in the Window menu! Dreamweaver 8 to the rescue- both panels have been combined into a single, unified CSS panel that serves as a centralized control panel for working with CSS layouts. Shall we explore?

The new CSS panel set actually includes two panels- CSS Styles and the rather-familiar Layers. The Layers panel/tab, as in previous versions of Dreamweaver, simply lists the absolutely-positioned DIVs (dubbed 'Layers' in Dreamweaver-speak) in your document and lets you order them/toggle visibility/etc. Nothing new there, so I won't waste your time with that tab any longer. However, the new CSS Styles panel/tab is the all-new hybrid combination of the old CSS Styles panel and the Relevant CSS panel- centralizing all the features of the two in a very usable manner, with far less screen real-estate wasted as a result. Here's two screenshots (showing the two display modes available):

panel_selected_cat_list.jpg
The new CSS Styles Panel - Current Selection mode
panel_allrules_alphabetical.jpg
The new CSS Styles Panel - All Rules mode


As you may have noticed above, the new CSS Styles panel can either display all the styles in your document (the 'All' toggle button), or just the styles in your current document selection (the 'Current' toggle button). These two display modes (for sake of reference, I'll refer to them as 'All Rules Mode' and 'Current Selection' mode) afford you two ways to drill into your document- let's start our examination with 'All Rules' mode.

The new CSS Styles panel has two main areas- a Style list (top) and a Rule Inspector (bottom). The Style List shows all the defined styles in your document, or attached to it via external stylesheets. The Rule Inspector below offers a summary of the defined properties in the selected style- and you can type your edits/changes right into the panel, of course. You can also see exactly where the given rule/property was defined - both in the current document as well as within any attached stylesheets. This makes exploring, or just quickly evolving your site designs and layouts, far easier. And if you've been reading these features of the day for a while, you'll know I'm a big fan of keyboard shortcuts- of which there's a few you'll want to know about when using the Rule inspector:


At the bottom of the panel, you'll find a row of buttons that offer some familiar functionality as well as some new options- along with the old-standby icons for attaching an external stylesheet and creating/editing/deleting CSS styles (on the right of the bottom margin), there are three new icons over on the left that control the view of the Rule inspector.



panel_view_icons.jpg

And while I'm on the subject of 'Relevant CSS', have you noticed in DWMX 2004 that if you create a new visual style you're stuck with a non-descriptive "style1" style in your doc that you had to manually edit? Well now, you can select that style in the Property Inspector, and click the new 'Edit CSS' button right next to it to jump to the relevant view of the CSS Styles panel- and edit/change/modify it as you see fit. Great way to contextually use the CSS Styles panel from a visual workflow.

I could probably babble on about all the different ways you can leverage this panel, but honestly- you'll find new and creative ways to let the CSS panel help you work faster and smarter, no matter whether you're a visual designer or a code-based developer. The new CSS Styles panel is one feature you'll really want to try for yourself to get a full read on, but I'm certain you'll find it indispensible once you have. Being able to quickly iterate designs, review cascading rules in my documents, and generally get a quick visual 'snapshot' of all properties related to my selection (or document, of course) has been quite a help for me, personally- and I spend most all of my time in Code view.

I'll trim today's FOTD here though- feel free to drop any questions you may have in the comment section and I'll respond as soon as I'm able... see you again tomorrow for FOTD 17!

Posted by sfegette at 05:47 PM | Comments (5)

August 26, 2005

MAX 2005 - new sessions, discount ending

In case you didn't notice, several new sessions were recently added to the MAX track schedule based on popular demand (for example, I'll be presenting on Flash Video and Dreamweaver). You can find more details at the MAX home page linked below- note that today (8/26/05) is the last day you can register at a $200 discount:

http://www.macromedia.com/go/max/

Posted by sfegette at 03:37 PM | Comments (1)

FOTD 15: Flash 8 - Enhanced Gradients

In Tuesday's FOTD we looked at some key updates to strokes in Flash 8, and today we're going to look at some similar (and equally helpful) updates to gradients that will give you a lot more options in your fills. Let's dive a little deeper.

First up, when applying a gradient you'll have much more onscreen control in Flash 8 over it's placement. After applying a gradient fill and selecting the Gradient Transform tool (formerly referred-to as the Fill Transformation tool), here's what the new onscreen controls look like for both a linear, and radial gradient:

linear_grad_controls.jpg

radial_grad_controls.jpg

For both linear and radial gradients, you can scale the gradient (i.e. effect the width of the gradient area within the fill of the selected object), rotate the gradient, and move the center point of the gradient to a new location inside the fill.

For radial gradients, there are a few extra controls to bear in mind.

First, the focal point of the radial gradient can be changed by clicking and dragging its triangle-shaped slider control. This focal point 'handle' will move along the central axis of the radial gradient and stay centered on that axis as you move it, up to the circular boundary defining the gradient. Rotating the gradient (via the rotation handle) will allow you to place the focal point at any point within the radial gradient area. To reset the focal point to center, you simply double-click the control.

Secondly, you can stretch or squeeze the radial gradient by moving the appropriate control (see diagram above). This feature is very handy for adding 'pseudo-perspective' to radial gradient fills- useful for highlight variations to spheric shapes and skewed objects, for example.

You also now have control over how colors are applied past the boundaries of your selected gradient (assuming there is more real-estate in the object's fill area to show the overflow, of course). When either the "Linear" or "Radial" gradient fill type is selected, a popup menu will be available in the Color Mixer offering three different overflow modes:

mixer_overflow_settings.jpg

Here's a diagram illustrating how those overflow modes actually work out in practice:

overflow_mode_diagram.jpg

A bit more description for the overflow mode examples above:

This - along with the default number of gradient colors being increased from 8 colors to 16 colors, will afford you far more control, flexibility and options when using gradient fills. Now along with these updates, there's a bit more to note with the gradient handling in Flash 8.

Linear RGB
An additional interpolation mode will be supported- Linear RGB (closer to the SVG interpolation model). A check box to turn on Linear RGB interpolation is displayed in the color mixer when a gradient fill type is selected.

Color Picker Enhancements
Although this isn't specific to gradients- you'll note the size of the individual color swatches within the Color Picker has been increased to enable much easier picking. You'll also note there's now the option to specify alpha for the selected color, putting more of the options you'll need in one handy location:

color_picker_cropped.jpg


Animation
What good is it to have finer control over your gradient's focal point if you can't animate it? Not a lot- so it's fortunate that you can now animate the focal point of gradients in Flash 8. Gradient style, interpolation mode, spread mode or changes in the number of colors are not animatable, however.

Gradients on Strokes
Did I mention you can apply gradients as strokes? That should open up some out-of-the ordinary options for you, as well.

grad_on_stroke.jpg

I hope you've found this overview of the new gradient handling interesting- yet another 'expressive' feature of Flash 8 that should help make your creative workflow more robust. See you next Monday for FOTD 16- and have a great weekend!

Posted by sfegette at 02:58 PM | Comments (3)

August 25, 2005

FOTD 14: Dreamweaver 8 - Flash Video

In an earlier FOTD, we looked at the workflow for importing and converting Flash Video in Flash 8, and today, we're going to look at how you can use the resulting FLV files in your Dreamweaver 8 sites using the new Insert Flash Video feature. Well, it's not an entirely new feature, as the Insert Flash Video command/feature was known in the MX 2004 era as part of the Macromedia Video Kit - a separate product/purchase- but it's now rolled into the product as a full-fledged, official (and also updated) feature of Dreamweaver 8. Time to explore- let's dive in.

First, to be clear- this Dreamweaver 8 feature is strictly intended for embedding pre-encoded video clips into web pages quickly and easily- not encoding video to the FLV format, which is accomplished via Flash 8 or the Flash 8 standalone video encoder (all part of the Studio 8 suite of tools). To customize the user experience beyond the steps in this FOTD, you'll need to delve a bit into Flash- but if you've read this far you're either interested or already on board, right? :)

Anyway, so you've got an FLV video file on hand that you'd like to place on your Dreamweaver site. Just open the page you'd like to insert it into, place your cursor in the right location, and select 'Insert > Media > Flash Video...'

insert_menu_screenshot.jpg

... and you'll be presented with the Insert Flash Video interface:

main_insert_dialog.jpg

Let's step through the elements/options you'll find here.

First up, you can choose between Progressive Download Video (i.e. the FLV file sits on a web server and is progressively downloaded/played by the Flash video object in your page), or 'Streaming Video' (i.e. a Flash Communications Server-based FLV file which is streamed directly to the player). If you don't have access to a Flash Communication Server, then you'll probably use the first option most commonly.

Next, you'll enter the URL to your FLV file on the server. Pretty straightforward.

The 'Skin' menu will let you choose from the preset Flash Video player skins that ship with Dreamweaver 8. You can also customize these skins and create your own, but that's a much more involved subject I'll cover at another time (as well as during my Flash Video session at the MAX 2005 conference, if you're attending this year).

The 'Width' and 'Height' parameters are simply the height and width of your FLV file. You can always click the 'Detect Size' button to autofill these based on the FLV file you're embedding, but if you decide to resize the video here, make sure to click the 'Constrain' checkbox so when you change one of these values the other will be updated correctly to keep the aspect ratio of your video unaltered. There are many creative reasons to squeeze and/or stretch video, but this isn't exactly the best way to do it (always recommended to export the FLV at the final size you'll be using it at, that way the Flash Player isn't spending processor time and horsepower converting the video's size at the expense of smooth playback for your site visitors.

Auto Play, when checked, will simply tell the Flash Player to start playing the movie as soon as enough of the FLV file has progressively downloaded to ensure it will complete without pauses or 'hiccups' (note that this also can be affected by network speed and other considerations, so it's never an exact science). Auto Rewind will return the 'play head' to the start of the FLV file when it's finished playing through the entire file.

The final step is an interesting one- you can have the Insert Flash Video process include a small blurb to prompt users to download the Flash Player if they don't have it installed. A handy addition that will help make the experience smoother in the edge-cases of browsers without the Flash Player pre-installed (do they still exist?)... :)
I should also note that Dreamweaver 8 will also detect the codec (Sorenson or On2) used in the FLV file, and write the object code (and generic player detection code) appropriately- Flash Player 7 for Sorenson and Flash Player 8 for On2 VP6 (the new video codec introduced in Flash Player 8). This really helps optimize the user experience, behind the scenes, without needing to lift a finger- just let DW8 do the heavy-lifting for you.

Once you've selected your choices above, just click the 'OK' button, and you're done! You'll see a grey(ish) box with a Flash Video icon representing the object in your page, however- you'll need to preview your page in order to see the actual Flash video and player in context. When you upload to your remote server, however- make sure to also upload the two new 'dependent' SWF files in the same directory - one 'player' SWF (either progressive or streaming, based on your choice), and one 'skin' SWF containing the interface elements for the player controls (again, based on what you selected in the Insert Flash Video interface).You won't need to jump through hoops to change properties of the object if you'd like to change settings, however- the Property Inspector will always give you direct access to the important settings if you've got the object selected as so:

flv_propertyinspector_halfsize.jpg
Property Inspector - Flash Video Object
(click for larger view)

And that's basically it- you've just inserted a Flash Video file into your Dreamweaver page- no fuss, no muss, fun for the whole family. If this has piqued your interest, make sure to check out my prior post on the Flash 8 Video Import Wizard, as it covers the encoding options you have available when creating FLV files in Flash, and helps 'round out' the workflow in this FOTD. And stay posted- there will be more on Video coming up in these posts, and if you're going to be at MAX 2005, I'll be presenting a session on Flash Video and Dreamweaver that will get into much more depth on the subject.

See you again tomorrow for another Flash 8 feature!

Posted by sfegette at 12:20 PM | Comments (33)

August 24, 2005

FOTD 13: Fireworks 8 - Image Editing Panel

Fireworks 8 got some very nice updates this release, and several of them are in the form of new SWF-based panels that either extend, or consolidate groups of functionality in Fireworks around key tasks. Today I'm going to shine a flashlight on the new Image Editing Panel in Fireworks 8- which is basically a handy centralized location for all the functions you'll need the most when editing digital photos, design comps and other bitmap images. Let's take a look.

image_editing_panel.jpg
The new Image Editing Panel


You can bring up the Image Editing Panel (if it's not already displayed in your 'panel stack') by choosing "Window > Image Editing". Across the top you'll find 7 icons, from left to right they are:

As you'd expect, these icons simply allow you quick access to the most common tools used during image editing. But there's a lot more hidden in the 'subsection menus' beneath the icons. Let's step through these next.

Transform Tools
These tools apply the following commands to a selected object:

Transform Commands
The Transform Commands menu lets you apply the following commands to selected objects:

Adjust Color
You can apply the following filters to a selected object from within the Adjust Color menu:

Filters
Some of the most common filters used in Fireworks can be quickly accessed via the Filters menu:


View Options
And finally, the View Options menu gives you quick access to some of the more common view options you may want to toggle on/off while editing images:

Now of course this panel doesn't add new functionality in Fireworks, it helps consolidate your options and streamline your workflow- which you'll find a common theme throughout the new Studio 8 products. Personally speaking, I find the Image Editing panel a great time-saver to have out and floating next to my image - especially when I'm working with a Wacom tablet and stylus - so I have virtually all the options I'll need close at hand without needing to wander the menus. If you find this type of feature interesting, then by all means leave a comment and let me know- there's more 'workflow-centered' panels like this added to Fireworks 8 that I could talk more about, if you're interested. See you tomorrow for FOTD #14!

Posted by sfegette at 11:53 AM | Comments (13)

August 23, 2005

FOTD 12: Flash 8 - Enhanced Strokes

Flash has made some significant strides to become more expressive with version 8, and both today and Friday's FOTD will look at two specific features in this category- todays focus on updates to Strokes that should make Flash 8 much more flexible in the design department.
(Note- these enhanced stroke features are only available when publishing to Flash Player 8.)

The first little enhancement is called 'stroke hinting' which means, in a nutshell, you won't see blurry vertical or horizontal lines anymore, as Flash now does a much better job of seeing when an anchor point is positioned at a subpixel level and adjusting for it accordingly. Just check this feature 'on' in the Property Inspector for your selected stroke (if you're publishing to Flash Player 8), and it'll take care of the rest.

You can also now control how your strokes scale via a popup menu in the Property Inspector- there are certainly cases when you wouldn't want a stroke to scale relatively when the container movie clip is scaled (for example, a user interface that, when expanded, needs to grow horizontally but keep a consistent height vertically). Flash 8 supports 4 different modes to control how and when your strokes are resized:


Joins
Along with the default round join available in Flash MX 2004 and earlier, you can now specify bevelled and mitered joins in your Flash 8 strokes. Also, you can specify the miter size to further customize stroke corners. Sharp corners - something you couldn't really achieve without trickery in previous versions of Flash - are now available. Here's a visual example of the differences between the join styles:

joins_diagram.jpg


Caps
Round caps, Square caps (as well as No caps) are available for your stroke ends in Flash 8- which will make stroke (and more importantly, dashed stroke) endpoints look a whole lot better. Here's how these styles differ visually:

caps_diagram.jpg


You can access these features within the Properties Inspector, for any selected stroke- the settings are located over on the right:

property_inspector_strokes.jpg
The new Stroke property controls (highlighted)


The combined result of these updates is significant, affording you far more control over strokes in your Flash movies and applications than ever before. And they represent just one of many 'expressive' features in Flash 8 that will help you get a lot more work done directly in the Flash authoring environment, without needing to downshift to external illustration applications. Enjoy!

Posted by sfegette at 11:54 AM | Comments (36)

August 22, 2005

FOTD 11: Dreamweaver & Flash 8 - Mac Tabs

This will definitely be a quicker FOTD post than Friday's- but for those on the Mac platform, quite likely a long-awaited one. Tabbed documents are now available on OS X, in both Dreamweaver 8 and Flash 8! That's right- it's not a Windows-only UI convention anymore- and should help out immensely in managing your Dreamweaver and Flash workspaces.

Here's a trimmed, scaled screenshot of the top of the document windows in both Dreamweaver 8 and Flash 8, showing the new Document Tabs prominently:

dw_tabs.png
Dreamweaver 8 - Document Tabs



fl_tabs.png

Flash 8 - Document Tabs

Let's highlight a few specifics of this feature so you can really dive into it when your copy of Studio 8 ships. First up, Command + ` will cycle left-to-right through your currently-open tabs (for those of you, like myself, who don't always have your hand on a mouse). To reverse direction (right-to-left), just use Command + Shift + ` - the combination of the two provides a very simple way to jump back and forth between documents like, say your (X)HTML docs and the related CSS stylesheet without multiple windows cluttering your screen.

If you have more tabs open than the width of your window will support, an 'overflow' menu will appear at the right of the tab bar, allowing you to select any of the tabs that are offscreen. You can also use the keyboard shortcut noted above to navigate through these, as well.

Joining the 'Cascade' and 'Tile' functions in the 'Windows' menu (which will 'explode' a tabbed view into the old 'multiple-window' views accordingly) is a new menu item - 'Combine as Tabs'. If you've 'exploded' your documents into separate windows with either 'Cascade' or 'Tile' (or don't have your preferences set to display tabs at all), this simply combines them all your open document windows into a single window, with tabs for each document. You can specify whether you want to use tabs at all in the 'General' section of each application's Preferences panel- Flash also provides the option to open the test player in a tab, as an additional bonus.

I can't imagine browsing without tabs in Firefox and Safari, and pretty soon you'll be feeling the same way about document windows in Dreamweaver and Flash. In my opinion it's just a far better way to manage my workflow and workspace- and now it's a universal experience, no matter which platform you're working on. Sorry for the Mac-specific focus today- but in the interest of parity between the two platforms, this was an important update to note. See you again for tomorrow's Feature of the Day (which will definitely be a cross-platform one).

Posted by sfegette at 11:09 AM | Comments (12)

August 19, 2005

FOTD 10: Flash 8 - Custom Easing

This feature of Flash 8 is a personal favorite of mine- as I've never been a fan of 'percentage-based' easing when animating in Flash, and always wished I had a more control than just a '10% ease-out' or a '5% ease-in' in Flash MX 2004 and earlier. Patience pays off, however- Flash 8 features a new Custom Easing panel that, to be quite blunt, rocks quite hard indeed.

I'll cop to it- my biases here are based on prior experience in 3D applications such as Maya and Lightwave, which all use some form of function curve editor to support very precise, bezier curve-based motion paths without an undue amount of keyframe-wrangling. And the Custom Easing in Flash 8 delivers the goods for me here. You can still use the quickie, percentage-based eases in Flash 8 - but the real fun happens when you select a range of keyframes and click that big ol' Edit button in the Property Inspector next to the Easing controls and bring up the new Custom Easing panel.

(quickie disclaimer- the example SWF files in this FOTD are published to v6.0.0 to avoid having to add detection to this blog entry- let me know if you have problems viewing them.)


A default, linear motion tween in the timeline appears like... curve_default.jpg
... this in the new Custom Easing dialog.


At first glance (particularly if you've not used F-curve editors before), the Custom Easing panel can appear a bit daunting- but it's surprisingly simple once you've learned the basics. Your tween's frame range is displayed horizontally across the X axis, and velocity (easing percentages, translating the old terminology) is displayed vertically across the Y axis. The 'curve' at this point is a straight line going from the bottom left corner to the upper right corner of the graph. What this means, in animator's terms, is that the velocity of the object does not change from frame to frame, and it moves linearly from 0% of the tween (starting point) to 100% of the tween (ending point) at a constant velocity. Exactly what you'd expect in a default motion tween, in fact.

Now let's tweak that basic tween out. By clicking on the Custom Ease curve itself, you can add control points at various stages, and control the velocity of your animation at any point by both moving the control points and their bezier 'handles' appropriately to affect the velocity of your object. For example, I want to move a simple object across the stage, easing in AND out, but pausing for a second in the middle (accomplished by flattening the curve - i.e. the frames keep moving forward, but the velocity/motion becomes a constant value). In Flash MX 2004 and earlier, this required breaking the animation into multiple tweens with separate easing percentages for each, and if you wanted to edit the animation after the fact, you were stuck with cutting/pasting keyframes and manually 'reconstructing' the animation - quite painful. The Custom Easing dialog lets you do it all in one step with the following curve:


curve_in-pause-out.jpg
Easing in AND out - with a pause in the middle to boot.


For visualization's sake, here's an 'ease-in' (velocity starting out flat, then curving up to an even velocity thru the end of the tween range):


curve_ease-in.jpg
Easing In with curves


The reverse of that curve, as you'd expect, is an 'ease-out':


curve_ease-out.jpg
Easing Out with curves


And if you want to get complex, you can take this to many extremes (having the curve go negative - i.e. curve downwards going left-to-right - will even reverse the motion along the tweened path) such as this example:


curve_insanity.jpg
A more complex animation created from the same linear tween


But that's not all- position is only one type of motion that can be tweened, by unchecking the 'Use one setting for all properties' checkbox, you can then use the 'Filters' menu to choose and specify different velocity curves for Position, Rotation, Scaling, Color and Filters (no examples for all these due to time constraints, but I'm sure your mind is churning on the possibilities by now!). Add this to the power of the curve editing alone, and you've got unprecedented control over the characteristics and expressiveness of your animations. And you'll find yourself spending much less time cutting/pasting keyframes and retweening- much of those tasks can be performed right here in the Custom Ease interface instead of the Timeline in Flash 8.

Now on the subject of increased control, there are some custom keyboard shortcuts you'll want to be aware of while using the new Custom Ease interface:

The other controls in the Custom Ease dialog include Start and Stop 'VCR-style' buttons in the lower left to let you preview the animation before confirming your curve edits, and of course the expected 'OK', 'Cancel' and 'Reset' options. All things told, Custom Easing is a very flexible and powerful addition to Flash 8- you can now perform a healthy chunk of your animating right here in this panel, without breaking up sections of a complex tween, or juggling keyframes unnecessarily.

I can't wait to see how animators take the ball and run with this feature once it releases!

Posted by sfegette at 01:51 PM | Comments (8)

Flash Lite - Online Seminars

If you're interested in learning more about mobile Flash development with the Flash Lite 1.1 CDK and the new mobile authoring features in Flash Professional 8, then you'll want to catch this online seminars Wednesday (8/24) from either 9AM - 10:30AM EST, or 9PM - 10:30PM EST. All attendees will have the chance to win a free copy of Flash Professional 8, so run - don't walk, they're filling up fast - to the registration URL and get a seat:

http://www.macromedia.com/cfusion/event/index.cfm?event=detail&id=127144

The 90-minute seminar(s) will be held via Breeze live, so you'll only need a computer with a current browser and the Flash Player installed, and a live network connection to attend. Voice will be provided via VoIP (thru Breeze), or an alternate phone connection for the bandwidth-challenged. ;-)

Posted by sfegette at 10:49 AM | Comments (1)

August 18, 2005

FOTD 09: Dreamweaver 8 - Coder's Toolbar

Dreamweaver is becoming much more friendly to hand-coders these days- with v8 introducing a new Coder’s Toolbar that runs vertically along the left of your document window in Code View. Sure, toolbars like this have been a staple of many other code-centric editors for some time, but given a large theme of the Studio 8 release has been expressiveness and workflow improvement, it makes sense for Dreamweaver to start shoring up gaps in this respect. Let's take a look.

Little exploration is required to find the Coder's Toolbar, just open a document and switch into either Split View or Code View- and you'll find it running right down the left margin of your window. You can, of course, hide and display this toolbar as needed- and on a window-by-window basis.

coder_toolbar.jpg


Let's step through the buttons that are displayed by default (starting from top to bottom) to give you an idea of what you can do with this toolbar out of the box.

And as you’d expect- the Coder's Toolbar is fully customizable and extensible as is just about every other aspect of Dreamweaver. You can find the XML configuration file for the Coder's Toolbar at the following location:

(Dreamweaver Application Directory)/Configuration/Toolbars/Toolbars.xml

Once you open up this Toolbars.xml config file and scroll down to the 'Code view toolbar' section, you'll see some 'hidden features' as well- commented out in the XML source. There were so many feature candidates for this toolbar, the product engineers couldn't fit them all in- so had to make some choices for real-estate's sake. But you can re-enable as you see fit. The 'hidden' buttons are as follows:


By simply editing the Toolbars.xml file (always make a backup first just in case you screw up!) you can reorder the buttons as you see fit, add new ones, uncomment the 'hidden' options to expand the features- customizing the toolbar is a snap. Seriously. If you add some really cool custom features of your own, you can always package 'em up as an MXP to be distributed and installed via the Extension Manager, too. Share and share alike!

So if you're a hand-coder like me, who prefers having more options close at hand while typing in Code View than were available in earlier versions of Dreamweaver- the new Coder's Toolbar will be helpful and flexible indeed- and quite a familiar sight if you're jumping in from other code-centric applications. A long awaited, much needed, and very much appreciated addition, in my opinion. Hope you like it too.

Posted by sfegette at 11:19 AM | Comments (10)

August 17, 2005

FOTD 08: Fireworks 8 - Save to Bitmap

Sometimes small updates can be important ones to note. Have you ever just wanted to open an image up in Fireworks and save it out as another format? If so, you've noted this requires an export step in earlier versions of Fireworks- not particularly intuitive for those familiar with other image-editing applications. In Fireworks 8, however, you can simply open an image and select "File > Save As..."?, choose from the variety of export filetypes that Fireworks supports, and you’re done converting the format. Sure, this isn’t exactly a huge new feature, but for adding more options to your image editing workflow, it could be a timesaver nonetheless- and a great example of the strong focus on expanded/improved workflow in Studio 8.

Now this workflow tweak might be a bit confusing to Fireworks old-timers, however- where the Fireworks PNG file was always treated as sacred property- the holy source from which all 'flat copies' were created. So how does this new Save As feature actually affect you in practice?

Well, if you open a PNG source file, the default Save option still saves back to PNG- no change there. You can still treat your PNGs as your 'clean source' files, and export them to other formats if/when needed. If you use Save As... to save the original PNG image as another format, however- your open, working image will then change to the newly-specified format, and any Fireworks-specific edits made since you either opened or last saved the original PNG file will be lost.

If you've opened a non-PNG format file such as GIF, JPEG, PSD, TIFF (et al), Save As... will default to the image's original format- not PNG (key change of note from prior versions of Fireworks, which would save any edited non-PNG source file to PNG by default). In case you're concerned that this new 'Save As' functionality could result in losing work, here's what the 'Save As' dialog looks like if your open document is not in the PNG format, and you've made changes that aren't supported by that format:

save_as_warning.jpg
'Save As...' message, when the source is not PNG format


As such, I'd recommend using your existing PNG workflow (exporting) for key asset files in your project (to maintain a clean PNG source to work from), and using the 'Save As...' feature to quickly convert and/or flatten a specific image (watch that 'warning' section for format mismatch alerts, of course!). Now you may be wondering what happens if you open, for example, a GIF image, make edits and hit command (control)-S to Save the document instead of 'Save All'. This scenario (which honestly, I find the most frequent in my own day-to-day usage) provides even more verbose feedback before committing anything to disk- you'll be presented with the following dialog and options:

save_warning_dialog.jpg
Save options, when the source file is not PNG format


This makes it reasonably certain that if you're starting from a non-PNG format and make a bunch of Fireworks-specific edits to it, hitting "command(control) + S" (or choosing "File > Save" won't assume you want to lose the editability of your changes by saving back to the original format, and gives you the option to choose which format to save back into- select PNG if you want to preserve all your edits, of course. However, for those times where you quickly want to open a file, add a quick change and save it back, you can also cut out that export step here too, if you really want to. Personally I like having source PNG files for everything, this just gives me a few options I didn't have before in case the extra 'save as PNG'/export steps aren't necessary. You choose what's best for your own workflow.

Note that 'Save As...' always saves a copy of the currently-opened file- so if you open a PNG file, add some layers and text, then use the new 'Save As...' functionality to save the image to JPEG, for example- you won't have modified anything in your original PNG file, and will have instead saved a flattened, JPEG version of that PNG file reflecting all the changes you've made- and losing any chance of editing the newchanges you've made. Key point to note- just to be on the safe side.

So as with any feature that changes established workflows, I'd recommend stepping carefully into your exploration and use of this new 'Save As...' functionality in Fireworks 8 to get a handle on it before diving into complex projects- but for all those instances where you've wished Fireworks was as quick at basic image conversion as it is deep for involved design and asset generation, this little v8 feature update could help quite a bit. Although I was a bit apprehensive at first in regards to how it would affect my own workflow (and any potential for data loss), honestly- I've grown to rely on this particular FW8 feature much more than I would have expected. Hope you do too!

Enjoy!

(side note: keep posted to Greg Rewis' blog for Captivate simulations of these daily features, too- he's a little backlogged now due to his travel schedule but will be putting more up shortly!)

Posted by sfegette at 11:54 AM | Comments (6)

August 16, 2005

Flash 8's Undo behavior

I know I already posted a FOTD today- so consider this a bonus. Simply put- in Flash 8 you can select, as a global preference, either document-level undo (introduced in MX 2004) as well as good 'ol object-level undo. If you preferred the old Flash MX (and earlier) style, where there was an undo queue maintained for each symbol, well- it's back (object-level undo). If you got comfortable with the newer Flash MX 2004 style of document-level undos - well, it's still there too. Preferences > General Tab is where the pref is located now- pick one and run, y'all. Tres cool.

Posted by sfegette at 05:12 PM | Comments (5)

Studio 8 Launch Seminars

Want to see a live demo of Studio 8? If so (and you're in the North America and/or Asia/Pacific regions), you'll want to check out the Studio 8 launch seminar schedule for a city near you on the tour:

These 3-hour launch seminars are a great opportunity to get a first-hand peek at the new Studio products before they start shipping- so if you're located in either geographic region, definitely check it out!

Posted by sfegette at 04:37 PM | Comments (0)

Upcoming Macrochats - CF/Verity and Flash Video

If you've got some free time to sharpen your skillsets a bit, there are two free public Macrochats on Verity in ColdFusion MX 7 (tomorrow) and Flash Video bandwidth detection and scaling (next Tuesday) coming up you might want to catch. Note: pre-registration is required for both, links to follow.

If you'd like to browse the archive of previously-recorded Macrochats, make sure to bookmark this URL for future reference, too:
http://www.macromedia.com/community/macrochats.html

Posted by sfegette at 02:52 PM | Comments (1)

FOTD 07: Flash 8 - Object Drawing Mode

Although Flash old-timers have undoubtedly become comfortable with the way Flash handles object drawing on the stage - strokes and fills as separate entities, having objects ‘cut away’ from one another when drawing overlapping shapes, etc - Flash 8 now supports both the traditional Flash object drawing mode (now dubbed 'Merge' mode) and a more Freehand/Illustrator behavior familiar to vector designers ('Object' mode) that treats objects more like traditional vector applications- fill and stroke acting as a single object when moving or transforming, and no ‘cutting out’ of objects behind other objects on the same layer.

Now I really love this- as I grew up in vector applications like FreeHand where objects were really independent objects- they didn't cut each other out by default when drawing over each other. Admittedly, as I got more comfortable with Flash, there were definitely some benefits to its default 'Merge' mode- particularly when creating complex shapes. But I always secretly wished that Flash would work both ways. And now it does!

First, note the all-important Object Drawing mode toggle key- 'J'. Just hit J when you've got any of the drawing tools up (Pencil, Line, Polygon, Pen, Brush, Oval and Rectangle tools, for the nitpicky), and you'll toggle in and out of Object Drawing Mode. For the icon-lovers, you've also got a new little icon in the Toolbar to toggle Object/Merge modes, as shown here:

object_icon_toolbox.jpg
The Object Mode toggle icon


The basics are pretty self-explanatory- when drawing an oval atop another oval on the same layer in good 'ol Merge mode - and then selecting/moving the second shape away, you essentially cut the overlapping areas out of the lower (first) object. Good if that's what you want, but sometimes annoying if you don't. It looks like so, if you're not painfully familiar with the basics here:

merge_diagram.jpg
Merge Mode, after drawing and moving a second object
object_diagram.jpg
Object Mode, after drawing and moving a second object


Pretty straightforward! Now as opposed to stroke and fill showing their selected state separately with that old familiar 'stippled' background selection state (and being separate objects) in Merge Mode- in Object Mode, a blue 'selected' rectangle shows up around the entire object, allowing you to move stroke and fill as a complete entity, without affecting other objects on the layer. Nice, eh?

If you want to perform boolean operations (unions, intersects, crops, punches) on the new Objects, there's a new "Modify > Combine Shapes..." menu that allows for all of those operations to be performed as well. Note that if you add other types of objects (for example, text objects) into an Object shape, it will try to group them and give you a warning dialog as so:

group_alert.jpg
Autoconversion warning from drawing object to group


When selecting objects in Object mode, you don’t need to marquee the entire object to select both stroke and fill anymore- much more intuitive to vector illustrators. You can select your drawing mode as a preference as well (or just hit ‘J’ to switch to Object mode on the fly), so moving between the two modes should present no problem whatsoever if you prefer one or the other for specific tasks. And on a side note- there are also several new API calls that allow access to both deleting envelopes and the boolean functions (union, intersect, punch, crop) mentioned earlier, developers- show us what you can do with 'em!

So that's pretty much it- Object Drawing Mode is really that simple, as you'll notice when you start using it yourselves. It's a small update that really makes a big difference, in my opinion- another great 'expressive' feature of Flash 8 that makes it a much more flexible and approachable toolset for creative pros. As a result- old school vector-heads picking up Flash 8 for the first time should become productive much, much faster than ever before, and veteran FLAnimators have a new way to work- win/win situation all the way around. Enjoy it, y'all- and I'll see you tomorrow, for the next Fireworks feature of the day.

Posted by sfegette at 10:49 AM | Comments (4)

August 15, 2005

FOTD 06: Dreamweaver 8 - Zoom and Guides

How many times have you been working a CSS-driven design and had to strain at your monitor from inches away to resolve those 1-3 pixel shifts? With Dreamweaver 8, you can zoom in on the area of your page in question and make your changes easily. Or, zoom out of a large, complex page design to get a better view of your layout without scrollbars. With the new Guides feature, you can also now drag guide marks out just like in your favorite image editing application, to help visualize alignment and placement better (and guides even carry through to Dreamweaver templates!). Save the Lasik surgery for when it’s really needed, get your designs laser-accurate right now. Here's the scoop.

Let's start with the Zoom tool- as you may be wondering why, given the Web is displayed at screen resolution anyway, this is a handy feature. If you're mostly a hand-coder, then you're used to tweaking CSS and then re-rendering your page in a browser. However, when pixel-level alignment of elements on your page is tricky to visualize at normal screen resolutions - I've had times myself where I really wished I could zoom in for a second to see exactly how much that rendering gap was... one pixel? Two? Now I have pretty sharp eyes (20/10 and 20/15 vision right to left accordingly), but with complex and/or complementary color schemes, seeing small gaps and differences can be difficult if you're only talking a pixel here and there.

How do you use the zooming feature? Well, for starters, there's a new 'View > Magnification' menu that allows you to access all the functionality I'm about to describe, and the right of your Dreamweaver document 'status bar' window area now has four new elements- the Pointer, Pan (Hand) and Zoom tools, and the Zoom combo box (allowing you to select preset zoom resolutions from 6% all the way up to 6400% of the default resolution). Here's how it looks:

toolbar.jpg
The new Zooming tools


Let's start with the Zoom tool (magnifying glass icon), which does exactly as you'd expect- zooms in and out of your document. When the Zoom tool is active (icon depressed), your cursor inside Design View will turn to a magnifying glass, and allow to zoom in on a region by clicking, or zoom out by holding down either Alt (Windows) or Option (Mac) and clicking- you'll see the plus (+) sign in the icon change to a minus (-) sign, noting the difference. If there's neither a plus nor minus sign in the icon, you're zoomed in or out as far as you can go. You can also click-drag a marquee in your document to zoom into that specific selection, if there's a specific region you want to zoom to. And as you'd expect (or at leat hope)- when zoomed in and using the document toolbar, scrolling speed/distance is based on the zoomed resolution, not on the actual document resolution (making it much more intuitive to get started with).

Note: when the Zoom tool is active, it's really active- you can't click to select items in your document or make changes. Deactivate it to go back to 'editing mode', of course.

The Pan (Hand) tool (which will likely be familiar to Fireworks or other graphics application veterans) allows you to grab, drag and scroll the Design View window when zoomed, without needing to use the document scrollbars. Very handy for getting around quickly in your document when you're not at default (100%) resolution.

The Pointer tool simply allows you to drop out of zoom/pan modes and back to document editing. Click this icon when you're ready to start editing again (or one of the extensive keyboard shortcuts available for zooming). It's that simple. With zooming, you get a lot more flexibility in Design View to help make those complex designs fall into place as you'd expect. Sure, you'll still have to proof in browsers as usual to make sure your final design's integrity is solid, but this should help you get a much better leg up before doing so.

Now while on the subject of the Zooming tools, another design aid added in Dreamweaver 8 is the new Smart Guides. If you're an image editing or page layout veteran, you're used to dragging out guides to help position your layouts in those types of applications. Dreamweaver 8's implementation of Guides is very similar. To use Guides, you need to have the Rulers visible- then just drag out horizontally or vertically to create a new guide. As with image editing applications, you'll get visible feedback on exactly where your guide is at on the rulers themselves, making pixel-perfect placement easier. Removing a guide is equally simple- just grab it and drag it off the document. Very familiar if you've used similar Guide features in other applications.

position_feedback_basic.jpg
Guides - Dragging w/Feedback


As with other implementation of onscreen Guides, you can also reset the origin point of the rulers to provide relative distances within your layout. Just click in the upper-left-hand corner where the rulers intersect, and drag the new x/y 'Origin point' out to the location in your document where you want zero to fall. You may not care about what's 100 pixels to the right of the left-hand side of the document window, and be more interested in what's 100 pixels to the right of the left edge of your content div, however. This way you can set the rulers accurately, and relative to your design.

You can also lock (and unlock) guides to prevent unwanted tampering, as well as double-clicking on the guide itself to move it relatively from it's current position.

move_guide.jpg
Moving a guide


The visual feedback provided by Guides is, however (in my opinion), the most useful part of the feature. When dragging (or mousing over) a guide, you can see both the guide's position and relative distance shown in a tool-tip-esque yellow panel. If the guide is relatively positioned, then the percentage will be shown- with absolute position shown in brackets. If the guide is an absolutely positioned guide, then just the position is shown (no brackets or relative distance). Pretty familiar if you've used Design Mode with tables in Dreamweaver MX 2004- but the best part of the feature is when you hold down Control (Windows) or Command (Mac) when clicking or mousing over guides. When doing so, you can also see the distance to the next closes guide in both directions- helping greatly when calculating cumulative widths or heights, particularly in CSS designs. If either 'neighbor' guide is a relatively-positioned guide, then you'll get both absolute and relative positions for the guides, if all are absolute, you'll just get the distances.



distance_tracking.jpg

Visual Feedback for Guides


As you may expect, you can also turn on snapping to snap page elements to guides (great aid in quickly iterating a design from comps), as well as snapping guides (as you drag them out) to page elements, should you be a little further along in the design process. And if you use Dreamweaver templates heavily on your sites, you'll be interested to know that guides set into a template will be available for any page made from that template. And of course, in Dreamweaver's Preferences you can set default colors for guides, as well as default visibility and snapping settings. If you're a Fireworks (or Photoshop) user, the key command for showing/hiding guides is exactly what you'd expect - Control(Command) + ";" (semicolon).

Now if your primary Dreamweaver mode is Code View, you may not otherwise unearth these new features for some time- but if you're a designer (or spend a lot of time building page layouts based on comps you recieve from a creative department and/or visual artist/designer) then you'll likely find more and more handy uses for these features as you dive deeper into Dreamweaver 8. However- technically-minded Dreamweaver developers will be happy to know there's a whole slew of new API calls to access both zooming and guide functionality in Dreamweaver 8, so you'll undoubtedly come up with inventive new uses of both features the product team hasn't thought of yet. If so, by all means make sure and drop a comment here and let us know about it!

(and as always, make sure to check Greg Rewis' blog for Captivate simulations of these features as he releases them!)

See you tomorrow for the next Feature of the Day - which will be Flash 8's new Object Drawing Mode!

Posted by sfegette at 12:36 PM | Comments (7)

August 12, 2005

FOTD 05: Flash 8 - Script Assist

In Flash MX 2004, the 'Normal' mode for Actionscript was removed in favor of behaviors, and the Flash community arose to let the Flash team know how exactly much it was missed. And they listened. Now, I can’t say that Normal Mode is back, per se- but I can say that Flash 8's Script Assist feature is a logical evolution of Normal Mode (in my opinion) you'll find welcome if you missed the functionality last time around.

Now what’s the difference between Normal Mode and Flash 8's new "Script Assist" feature, you say?

On opening the Flash 8 Actions panel, there’s a new button in the upper right labelled (as you'd guess) ‘Script Assist’- which when clicked, actually looks an awful lot like the old tried-and-true Normal mode. When entering Script Assist mode, your code will be compiled- and unless there are pre-existing bugs in your code, you should be presented with the Script Assist user interface.

Tip: you can also enter Script Assist mode by the keyboard shortcut control-shift-E (Win) or command-shift-E (Mac).

script_assist_sm.jpg
Script Assist Interface


Now you may be thinking this could be the shortest Feature of the Day, given the familiarity of that screenshot to Flash MX (and earlier) veterans- but there are a few slight changes and updates between Flash MX Normal Mode and Flash 8 Script Assist to note. First, editing your AS code does not generate the familiar “Your script will be reformatted�? dialog box that Normal mode AS used to.

Secondly (and in my opinion, far more importantly), parameters now have their own edit fields (no more entering parameters as a comma-delimited list into a single input field!), which will greatly help less technical scripters get things right the first time. Note in the screenshot above that the loadSound() method is highlighted, and there are edit fields for both the 'URL' and 'isStreaming' parameters. Far more intuitive an experience for those who don't have the Actionscript Dictionary imprinted on their cerebral cortexes, or care to.

Although error messages/highlighting were removed, the bottom ‘status bar’ area of the UI will now show errors and/or player version mismatches quite clearly as so:

script_assist_err_sm.jpg
Script Assist Error Messages

For those who love to modify their experience- method/AS editing dialogs, which were fixed and static in the old Normal Mode, are now driven by an XML file, so developers can create custom method editing UIs as necessary. This lets you tweak the UI as you like- as noted earlier, no more comma-delimited parameters in a single entry box. You can provide a separate entry field for each method/parameter and cut down on the probability of annoying bugs based on incorrectly ordered params, etc. Handy AND flexible- definitely two qualities of a feature I love to see. :)

So yes- this may just be the shortest Feature of the Day I post, as if you're one of those folks who've been missing Normal Mode during Flash MX 2004's reign then most of what you'll find in Script Assist will take little explanation. It’s true - Normal Mode Actionscript isn’t just back in it's old form, Script Assist is Normal Mode and then some. Hope you find it even more useful than before! And as always, make sure to check Greg Rewis' blog today for a Captivate simulation of this feature, to provide some audiovisual depth to my text-and-image ramblings here. See you again on Monday for Studio 8 Feature of the Day #5!

Enjoy!

Posted by sfegette at 10:23 AM | Comments (5)

August 11, 2005

FOTD 04: Dreamweaver 8 - Background File Transfer

If you're a seasoned Dreamweaver user, you've undoubtedly encountered more than a few file transfer-related roadblocks when uploading/downloading large batches of files, checking in/checking out en masse, synchronizing sites, and so on. Once you started a file transfer in DWMX 2004 or earlier, you were essentially locked out of Dreamweaver until all the files had been transferred- essentially stuck twirling your thumbs as the progress bar made that tedious left-to-right march. Well, as you probably already guessed from the title of this post, file transfers are now a background task in Dreamweaver 8.

Kicking off a file transfer in Dreamweaver 8 nets you this new, modeless dialog box:

ft_collapsed_sm.jpg
collapsed Background File Activity dialog


While the new Background File Activity dialog is active, you can minimize it, move it behind other windows, basically do what you couldn't do in prior versions of Dreamweaver - GET BACK TO WORK! But there are some other little niceties to this updated feature that you'll want to know about, first of which involves clicking the little 'details triangle' and expanding the dialog to it's fully-expanded state, where you can watch a running list of the files being transferred and their status as so:

ft_expanded_sm.jpg
expanded Background File Activity dialog


Along with making the Background File Activity window modeless, with the expanded view you now get a much better idea of what's happening in real-time. The old File Transfer dialog simply showed you what was being transferred at that moment, but this gives more context to where you're at in the process and what's occurred most recently. You can also save the transfer log after everything's completed for a more definitive record of what's changed- probably not as useful for smaller sites, but on large or group-maintained sites where change logs are commonly shared this can be a very timesaving feature, indeed.

Now it should be noted that there are some tasks in Dreamweaver that aren't supported while files are transferring, particularly the following:

As you probably guessed about half-way down that list (if not earlier), all of these operations in Dreamweaver could potentially affect or change either your current site definition or site cache, so they aren't allowed until the transfer is complete (for example, can you imagine the havoc potential if you were allowed to change your remote site address mid-transfer and half your files got sent to the wrong location?). Outside of the list above, however- pretty much everything else is fair game while files are flying between your local and remote servers.

And as a final touch- just in case you've minimized or hidden your transfer window and gotten back to productive pursuits, you can always eyeball the status of your transfer down at the lower left of the Files panel.

file_panel_controls.jpg
the File Panel visual interface

A little animated Dreamweaver icon on the left provides visual feedback that the transfer is chugging along, and the file that's currently being transferred is shown to the immediate right of the icon. The 'Log...' button over to the right of the icon will jump you back to the Background File Activity window for a deeper view on your progress. Simple and easy!

Extension developers side note: there's a new DW API method - site.serverActivity() - which returns true if DW is currently interacting with a server. In the past this wasn't as much of an issue as users couldn't work in Dreamweaver while a file transfer was active, but for certain types of extensions you may want to check for an active transfer first before performing your extension's action- that's how you'll do so in the DW8 extensibility layer.

I'd elaborate further, but really- that's all there is to it! Make sure to check out Greg Rewis' most excellent Captivate simulation of this feature here for a visual walkthrough to complement my editorial ramblings, as well. Background File Transfer is absolutely a long-needed (and invaluable) addition to Dreamweaver, in my opinion. If you used to rely on Dreamweaver's onerous file transfer dialog as a coffee break alarm, you'll probably need to work on some new excuses before the DW8 upgrade hits your doorstep. ;-)

Posted by sfegette at 12:13 PM | Comments (6)

August 10, 2005

FOTD 03: Fireworks 8 CSS Pop-Up Menus

One of the most popular features in previous versions of Fireworks had to be the pop-up menu generator. However, despite being handy and popular, these menus had a lot of inherent problems that became evident over time (not search engine friendly/indexable, difficult to customize after the fact, maintained links in JS files, etc.). The new CSS Popup Menus feature in Fireworks 8 is a much different story, however- much more robust than any prior 'stock' pop-up menu features in Fireworks or Dreamweaver (although I still recommend learning the basics of menu generation yourself as well- visual tools are great, but understanding the underlying principles is a skill worth cultivating). Here’s the basic rundown for creating pop-up menus in Fireworks 8.

So, we've got a plain-Jane navigation bar in Fireworks that needs some help- we want to add a drop-down menu to the 'Products' section to allow deeper navigation from the menu. Just select a slice or hotspot on your image (this demo made with hotspots for simplicity's sake), then choose “Modify > Pop-Up Menu > Insert Pop-Up Menu...�?. You’ll then be presented with the swanky new Pop-up Menu Editor interface, shown here:

content_tab_sm.jpg
Pop-up Menu Editor - Content Tab

Within the Pop-up Menu Editor interface, you'll find a preview pane at the top, and tabs for Content (manage your links, targets and text labels for the menu itself), Appearance (selection of the color and font themes, style and type of menu), ‘Advanced’ (width, height, padding, spacing, borders and their colors for the menu items themselves), and ‘Position’ (i.e. the x/y offset and placement of the menu in relation to the hotspot/slice that activates it). Let's step thru these options one by one.

First, we've added some entries to the pop-up menu (see above screenshot) by clicking the '+' icon at the top of the list box (or just double-click in the 'ghosted' first entry to start typing), and then entering the link, text label for the menu item, and (if necessary) a target for the link. I generally don't use target attributes, so will leave that column blank if you don't mind. ;-)
For submenus, enter and order your content, then use the two indent/outdent buttons (right underneath the Content tab, for the curious) to 'indent' a given line as a submenu item- it will eventually become a submenu underneath the next highest 'parent' entry. Next, let's click on the 'Appearance' tab, to give our pop-up menu a more custom look. Here's the options available within 'Appearance':

appearance_tab_sm.jpg
The Appearance tab

Within the Appearance tab, you'll find the following options:

For purposes of this demo I've just chosen the HTML style of menu, of course. Let's take a look at what you can specify in the 'Advanced' tab next:

advanced_tab_sm.jpg
The Advanced Tab


The Advanced tab lets you specify the menu's cell width/height, padding and spacing (width/height can be either a pixel value, or automatically generated), along with a default indent for your menu items and a delay (in closing the menu after a user's mouse has rolled off the 'hotspot'). You can also choose whether to show borders on your menu, a width and color for that border, and whether a shadow/highlight should be added to each menu entry. Next up, the 'Position' tab:

position_tab_sm.jpg
The Position Tab


Within the 'Position' tab, you'll tell Fireworks where you want the pop-up menu displayed, in relation to the hotspot/slice it's attached to. You can choose to have the menu pop up to the left, right, top or bottom of your hotspot/slice, and customize it as needed in pixel values to get things 'just so'.
You can also specify (and/or override) the offset value for your submenus, within the 'Submenu Position' section. Options include offset and aligned with the bottom of the parent menu item, offset and parallel with the parent menu item, or aligned with the bottom/center of the parent menu item. The checkbox can be toggled to make the submenu appear at the exact location of the parent item as well, if that's your intent.

Click "Done", and you’ve just created your pop-up menu! All you need to do now is select the "File > Export..." menu option, and click the 'Advanced' button next to the 'Export' drop-down menu (which should be set to "HTML and Images"). In the first (General) tab of the Options dialog, make sure 'Use CSS for Popup Menus' is selected, and 'Write CSS to an external file' if that's your preference.

export_options_sm.jpg
The Export Options dialog


Continue your Export process as usual, and you're done!
(Make sure to check out Greg Rewis' blog for a Captivate simulation of this feature, as well. He should have it live shortly after this post goes out- if it isn't live already, FYI.)

One caveat- this feature is in Fireworks and not in Dreamweaver, so you won't be able to round-trip Fireworks popup menus in DW 8 (but as always, you can dive into code mode and hand-tweak if you so desire). And although I strongly recommend learning how to build CSS pop-up menus by hand (and using lists to do so- which really helps both for keeping your (x)html clean and flexible), if you need quick and simple pop-up menus, this feature will definitely be of interest. Of course, there are a wide range of amazing third-party extensions and options for pop-up menus that can offer far more options (pop-up menus have proven VERY popular in the extension development community) - but it's nice to know there's a reasonable, default option available within Studio 8 right out of the box that doesn't rely solely on Javascript to get the job done. Enjoy!

Posted by sfegette at 11:15 AM | Comments (18)

August 09, 2005

FOTD 02 - Flash 8: Video Import Wizard

In Flash MX 2004, you had few options for importing Flash Video with fine control - unless you were already working in a third-party video editor or compositing tool that could take advantage of the direct export functionality from those applications. And for those new to video in general, not to mention Flash Video- understanding all the embedding/streaming/progressive download options and their repercussions to a project were even more daunting. Well, in Flash 8- FLV import (and conversion) just got a whole lot easier. I’ll step you through it in text/image form (and for a richer Captivate walkthru- make sure to check out Greg Rewis' simulation here as well)- and let us know what you think!

First, simply choose ‘File > Import > Import Video...’, and you’ll be presented with the “Select Video�? interface:

select_video.jpg
the Select Video step

... which, quite simply, allows you to select the video source file to be converted and/or imported, and it’s location (local/network). Easy enough! So you simply point at the right file, and click ‘Next...’- and then should be greeted by the “Deployment�? step of the wizard:

deploy.jpg
the Deployment step


The Deployment step, as you may have guessed, allows you to specify how you’d like to deploy your video- progressive download, streaming, embedded in the SWF timeline, a bundled video for devices, or as a linked QuickTime movie. (If you don't have access to a FlashCom or FVSS server, you'll probably want to choose progressive download.) If you're not sure- just click through the options and let the 'help text' on the right of the wizard fill you in on the specifics and help you make the right choice for your project.

Clicking ‘Next...’ after doing so brings you to the next step in the Wizard, either "Skinning" (if you haven't chosen Embedded Video), or if you've chosen Embedded Video, the “Embedding�? step. We'll start with the Embedding step, then move to Skinning.

embedding.jpg
the Embedding step

In the Embedding step (again, only displayed if you're creating embedded video as opposed to progressive/streaming video), you’ll specify how the video should be embedded in your FLA file. Just tell the Wizard what type of symbol to use, how to handle the audio and video in your video file, and how the stage and timeline should be handled (should the video clip be placed automatically on the stage? Should the timeline be expanded to show the full duration of the clip?). Clicking "Next" from here takes you to the next step of the wizard- Skinning.

the Skinning step
the Skinning step

In the Skinning step of the wizard you can choose the visual design of the playback controls presented to users. There are a whole slew of presets, or if you like, you can create your own in Flash as well. Choose a skin, preview it in the window, and move on by clicking "Next" again. (If you’ve chosen to split your video - i.e. cut it into chunks, you’ll be presented with a wizard to support that before moving to the next step, “Encoding�?- I won't cover that step here specifically however).

the Encoding step
the Encoding step

The Encoding step lets you choose a compression profile (including the ability to change any settings within, and create new profiles), and review all the settings associated to that profile. A profile simply encapsulates all the different encoding settings you’ve chosen - the video codec, size, bitrate and framerate along with audio codec and bitrate. If you’re not comfortable choosing all those advanced settings, you can just choose a preset - for example ‘Flash 8 - High Quality’, and let Flash 8 worry about the specifics.

The screenshot above, however, shows the 'Advanced Options' toggled open. You'll notice two additional tabs beyond the Encoding settings- 'Cue Points' and 'Crop and Trim'. Cue Points is a great feature that allows you to set exactly that- cue points within your video file to be used within Flash to jump directly to a location. For example, you may want to provide 'chapter markers', or perhaps jump directly to a particular quote within an interview clip. Very handy. The Crop and Trim tab allows you to crop your video, or trim a specific section within to be encoded (i.e. letting you trim off the excess). Considering these are features usually leveraged within your video editing or compositing package, it's a very handy step to have them here, directly within the import process.

As with the rest of the wizard steps, when you've gotten all these powerful settings right where you need them, hit "Next" to move on to the last step, the 'Finish Import' screen:

Finish Import Step
the Finish Import (summary) step

The 'Finish Import' step simply summarizes all the settings you’ve specified in all the previous steps before starting the process of conversion, and then - assuming everything is set as you expected - processes your video accordingly when you click the 'Next' button.

So... if the settings look good, just click 'Next', and that's it! You're up and running with a newly-encoded Flash Video file. All things considered, the new Import Wizard is a very painless process- and certainly easier than video import/conversion has been in prior versions of Flash. So - if you’re not a video pro but want to get your work done in one application - Flash - instead of bouncing to a dedicated video editing or compositing applications to encode your video source with fine-grained control, Flash 8 should fit the bill nicely. Time to break out those home movies and get to work!

Posted by sfegette at 10:39 AM | Comments (7)

August 08, 2005

FOTD 01: Dreamweaver 8 Code Collapse

This is the first of my Studio 8 'Features of the Day', I'll be posting these each weekday until Studio 8 ships, and the first is on Dreamweaver's long-awaited new feature- Code Collapse.
When working in complex code blocks, have you ever wished you could hide sections you aren't working on to make navigation a little easier? With Dreamweaver 8's code collapse feature, you can collapse any tag, function or block- saving valuable scrolling time and most importantly... your sanity.

Using Code Collapse is a snap- just select any fragment of code in Code view, and you'll see two 'triangle' markers in the gutter by the line numbers- just click one of them and your entire section rolls up out of view quickly, saving precious real-estate. If you're not a mouse-clicker, the keyboard shortcuts Control-Shift-C (Win) or Command-Shift-C (Mac) collapse your selection, and Control-Shift-E (Win) or Command-Shift-E (Mac) expand a collapsed selection. Here's a quick before/after shot of code collapse in practice- make sure to check out Greg Rewis' blog post here for a Captivate simulation of Code Collapse in action as well (Greg and I will be tag-teaming some of these daily posts for a richer description of the new features in Studio 8, so heads-up!).

code_collapse.gif

So what if you'd like to maintain your selection, but hide/collapse everything else? Control-Alt-C/Control-Alt-E (Win) and Command-Option-C/Command-Option-E (Mac) will correspondingly collapse and expand everything outside your selection. And if you don't have time to make a full selection, but want to collapse the tag your cursor's currently within- either select 'Collapse Full Tag...' from the 'Edit > Code Collapse' menu, or just hit Control-Shift-J (Win) or Command-Shift-J (Mac). You can also achieve the inverse - collapsing all the code outside the tag/function your cursor's currently within - by hitting Control-Alt-J (Win) or Command-Option-J (Mac).

Flexible and powerful, once you've embraced code collapse there's no reason to get buried in your own code anymore- unless you want to, of course.

Posted by sfegette at 10:02 AM | Comments (11)

August 07, 2005

Studio 8 - It's Official

That's right- Studio 8 has just been announced and I, for one, am really excited to see this release get out the door and into everyone's hands shortly. It's a big update, so I'd recommend kicking off your infosurfing at the Studio 8 product site (http://www.macromedia.com/software/studio/), and then following the links from there to more detail in the respective Studio 8 product sections (Flash 8, Dreamweaver 8, Fireworks 8, Contribute 3 and Flash Paper 2).

Now once you've read through all the shiny new features and updates- you'll want to get the official dirt on Studio 8 and it's development process right from the source- each of the Studio product managers have published articles on the new features in their respective products, with a peek into the overall development process courtesy of Jim Guerard, our VP of product management/marketing for Studio.

Also, to help shine some light on some of the new and updated functionality you can expect in Studio 8, I'll start publishing a single Studio product feature each weekday here on my weblog, counting down to the day Studio 8 starts shipping out. The first of these 'featurelets' will go out later today, so keep posted...

Posted by sfegette at 08:50 PM | Comments (3)

August 03, 2005

Pimp Your WebAssist Cart with an iPod

If you're using either the WA eCommerce Suite or WA eCart Dreamweaver extensions from WebAssist, and have built a slick shopping cart with either product, you'll definitely want to enter it into their 'Pimp My Cart' contest- top prize is a 60GB color iPod and $500 worth of software, with three runner-up prices of $300 worth of software. If your online store fits the requirements, hit that link and sign it up!

Posted by sfegette at 05:17 PM | Comments (0)

2005 MAX Awards

It's time again- the 2005 MAX awards, to be presented at the MAX '05 conference in Anaheim this year. But before your stellar online experience can win, you've got to submit it for consideration- which can be done here:

http://www.macromedia.com/bin/max2005award.cgi

The award categories this year are:

...and of course, the People's Choice winner, selected from the finalists by all of the conference attendees. You've got until September 9th, 2005 to enter your submissions (and although the awards will be presented at the conference October 16-18, they'll be announced on October 3rd), so get them keyboards rattling and submit your masterpieces for consideration!

Posted by sfegette at 05:02 PM | Comments (2)