Scott Fegette

« August 2005 | Main | October 2005 »

September 27, 2005

Scion F8 Contest (USA)

In case you missed the blog-rush on this yesterday, automakers Scion have a Flash 8 contest/competition running right now that will dish out a new car to the grand prize winner. As long as your site/application is exported to Flash 8 and compatible with both Windows XP and Mac OS X, includes at least 2 Scion creative assets (from a library made available after registering), is less than 2 minutes runtime and 10 megs size, and your own work- you can enter to win your choice of a swanky, new Scion xA, XB, or tC car. (side note, the contest is only open for permanent legal residents of the continental US.)

Contest judges include MXNA (and Flash) stalwarts like Guy Watson, Grant Skinner and Eric Dolecki- who'll be doling out up to 50 points respectively for both artistic vision (your expression of the Scion personality), and technical merit (your mastery of the Flash 8 toolset). If this sounds interesting (or you're sorely in need of a new set of wheels), check the contest rules and judging criteria, grab the official assets, roll up your sleeves and get cracking on your next F8 masterpiece.

Posted by sfegette at 01:29 PM | Comments (0)

Mint: yes, it IS fresh and tasty.

I must admit- the hype a few weeks back appears quite justified- Shaun Inman's new site analytical tool Mint is one of my favorite new toys- I've been using it to monitor a personal site for a few weeks now and am impressed well beyond my initial expectations. I haven't seen a more usable (not to mention aesthetically-pleasing) way to scan my current referrers, visits, page views and search terms to date. I really resisted the urge to post right after the release (as the Mint beta squad did a pretty thorough job of getting the message out on their own), but can't hold back any longer.

This yummy, minty morsel of site-statistical joy is implemented in Ajaxian PHP, MySQL and Javascript, and a compatibility test is also available for download to quickly verify if your server config will support Mint. Pepper (i.e. Mint plug-ins...) can also be written relatively easily to extend the system beyond it's core modules. Two extra Peppers are already available with Mint; User Agent 007 - which breaks down browser types, versions, platforms and Flash plug-in versions, and Local Search - which allows you to scope how users navigate via search terms once they reach your site. An RSS feed of the newest unique referrers is also available, which allows for a handy drop-down menu via Firefox's 'Live Bookmarks' of the last visitors who've wandered thru. Nice touch.

Even cooler- for Mac users like myself, there's an OS X Dashboard widget (appropriately named 'Junior Mint') which allows you to scan hit totals for the last hour, day and month without firing up a browser- and links right to the main Mint web app for more details. Sweet.

Now to be fair- Mint isn't really a replacement for long-term traffic analysis (or an iterative rev of Shaun's other site analytical tool, ShortStat), Mint's more geared towards a current view of what people are doing on your site *right now*, and is incredibly handy in this respect. For example, you may want to base tactical shifts on Mint data- like AdSense settings based on what your incoming search terms have been over the last day or two- or drop Flash 5 support for a page or two based on your current metrics. At $30 per domain, the price (although contested by some others) ain't too bad either, in my opinion. I spend more than $30 just taking my wife out to dinner, so have gotten more ROI out of Mint already than the last high-brow French dinner I ate, come to think of it.

If you're interested in writing Peppers to extend Mint, make sure to also check out Marc Garrett's tutorial here. You should also bookmark "Peppermint Tea" - an index of third-party Peppers maintained by Peter Parkes.

Your mileage may vary of course, but in my opinion- Mint's definitely worth a taste.

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

September 23, 2005

Dreamweaver Snippets- Import/Export Extension

Dreamweaver extension developer extraordinaire Massimo Foti has just released a new extension, which allows you to quickly and easily import and export your Dreamweaver snippets directly from the Snippets panel. As there's no out-of-the-box way to manage your custom code snippets in Dreamweaver save manually copying files out of your DW configuration directory, Massimo's extension is a very welcome addition, and a very slick and convenient way to manage Dreamweaver snippets in general. You can download the MXP extension file directly at Massimo's website, make sure to send him a good word if you find it handy. Nice!

Posted by sfegette at 03:41 PM | Comments (10)

Dreamweaver 8 - Template Path Changes

Stephanie Sullivan posted a great overview of recent changes in Dreamweaver 8 Templates you'll want to read through, specifically if you're noticing that template-based links to external files are getting transformed incorrectly when updating 'child' content. In a nutshell, you'll need to use either template expressions or template parameters to avoid having your link paths rewritten (note that this is primarily due to the fact that DW MX and DWMX 2004 were very lax in how paths like this were handled when publishing/updating template-driven content, and the fix in DW8 will certainly affect anyone who was relying on the prior behavior). Check out Steph's post at the link above for more details, as well as a similar post at Jesse Rodgers' blog, great info to have on hand if you've leveraged templates heavily in your sites.

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

September 21, 2005

Flash 8 - Updated Remoting Components

In case you haven't noticed already, the Flash Remoting component was updated yesterday to Flash 8 compatibility- and is now on the Macromedia web site for immediate download/installation. Make sure to read the release notes for specifics, of course. Alongside the Remoting connector itself, the installer will also include the NetConnection Debugger, support and help files for Flash 8 (i.e. updates to the Help panel in Flash 8), as well as AS2 API class source code. If you were wondering where the Remoting component was in the default Flash 8 install... wonder no more. :)

Posted by sfegette at 01:41 PM | Comments (2)

September 12, 2005

FOTD 25: Studio 8 - Good Clean Family Fun

Well, as you may have guessed by the title, Studio 8 just jumped free from it's crib- and is available now for poking, prodding and general fun up on Macromedia.com. Which means I can stop teasing you about it with these 'feature of the day' postings- and you can start showing us all what can be DONE WITH IT.

You can get all the shiny links and info from here:
http://www.macromedia.com/software/studio/

And don't forget all the new Developer Center content:
http://www.macromedia.com/devnet/

So alas, my 24-post FOTD series also comes to its close, but I'm certainly open to doing more - on a slightly relaxed schedule of course - if there's interest. What do YOU want to know more about in Studio 8 and it's products? Bang out a comment and let me know- and don't stay up too late playing with all the new toys... ;-)

Posted by sfegette at 09:44 PM | Comments (5)

September 09, 2005

FOTD 24: Dreamweaver 8 - CSS Improvements

Dreamweaver 8 recieved a lot of updates to the way it authors and displays CSS, and we've already looked at how the Unified CSS panel consolidates workflow on the authoring side. Let's take a peek today at how the rendering has changed- and first, some new visualization features that will make authoring much easier overall.

First up, you can now visualize your DIV-based layouts very effectively in Dreamweaver 8. In DWMX 2004, I got very comfortable using the Firefox "Web Developer's Extension" to help show me how my DIVs interacted with one another, but the DIV Visualization feature of Dreamweaver 8 makes that an option, not a necessity.

There are several new options in both the document toolbar and 'View > Visual Aids' menu that you'll want to note (in addition to the old-favorite Table visualization features and Invisible Elements "toggle switch"):

• CSS Layout Outlines
  Turns on simple outlines of your page elements.
  
  
• CSS Layout Box Model
  Turns on outlines/visualization of the box model properties for selected elements in your page.
  
  
• CSS Layout Backgrounds
  Turns on a 'colored' view of your page elements, helping visualize overlaps/collisions/etc.
  
  

If you've ever wondered whether margins, borders or padding (or all three) were conflicting between adjoining elements and confounding your design sense, the CSS Layout Box Model mode will help dramatically in pinpointing problem areas in your layouts. Let's start with a generic CSS layout and see how these visualization features will help you see what's going on in your page:

Now the view above has "CSS Layout Outlines" turned on, to get an idea of the boundaries of each (not just the border styles you've set - this is most noticeable above in the left-hand DIV). But you'd like to see exactly how your defined padding and border attributes play into the visual layout. Simply turn on the "CSS Layout Box Model" option, and you'll see a visual representation of the padding area within the DIV in question (diagonal 'crosshatched' lines), as well as the margin and border attributes:

As you can see, the 'Heading 2' DIV has a 200 pixel left margin that helps 'force' it right on the page (note the horizontal blue line stretching to the left-hand side of the layout), so that the left-hand column can stick cleanly to the left. Although my screen-capture utility won't let me snap them- hovering over any of the properties of your selected element will show their values - hovering over the left-margin will show a tooltip noting that it's set to 200px, hovering over the padding area will show that it's set to 1em (16px), hovering over the main area of the DIV will show the basic style information for the entire DIV itself. Heck of a lot better than jumping back and forth between your (X)HTML document and your CSS document and scrolling around. Very nice.

This feature alone has been a monstrous timesaver for me- toggling it on/off as I go helps dramatically in seeing the relationship between my page regions/DIVs and troubleshooting.

And finally, if the visual feedback from the Box Model view option doesn't give you enough of a distinction between the elements on your page, you can turn on the final "CSS Layout Backgrounds" view mode, and get this rather colorful display, helping to highlight exactly where your page elements overlap, push each other in various directions, collide, explode, etc. ;-)

For a quick scan of how your page elements interact, this mode is incredibly handy - although not exactly the option you'll want enabled when proofing your work with clients!

I also wanted to highlight some techie under-the-hood improvements and fixes to CSS rendering in Design View. Note that this comes from someone (myself) who hasn't used Design View much in the past in favor of Code view, but will likely be using the visual tools more in the near future given all these new improvements. ;)

• border-style
  As opposed to only rendering solid border-styles, all border styles are now rendered (none, hidden, dotted, dashed, solid, groove, ridge, inset and outset).
  
  
• Improved positioning
  Although CSS positioning of elements (text-align, float, position, margin, etc.) have mostly been supported in DWMX 2004, there were certain cases where rendering would not work as expected with certain combinations and nesting scenarios. This has been addressed in DW 8.
  
  
• Support for the overflow property
  Overflows are now rendered more accurately to your design intent, with a contextual menu item - "Full Element View" available so that you can toggle on/off the full view of the element in Design view for editing. Cool!
  
  
• first-letter and first-line pseudo elements
  Now rendered in Design View (these are very popular design properties, after all!).
  
  
• Inline Box support
  Dreamweaver MX 2004 only recognized a subset of inline tags. Dreamweaver 8 now recognizes all standard HTML text-formatting tags.
  
  
• Improved Horizontal Rule rendering
  HR color, background color/image, and margin/border/padding attributes are now rendered correctly.
  
  
• Overall Positioning improvements
  A literal snowstorm of issues related to alignment, floating, list rendering, margins, relative/absolute positioning and flow have been improved. If you've witnessed these in DWMX 2004, you'll be pleased with the updates in DW 8. ;-)
  
  
• Form Elements
  Support for margin/border/padding, form background and fonts, and a lot more were implemented in DW 8. If you were ever annoyed by the white backgrounds behind form elements, take a deep breath and let it go... ;-)
  

To be honest, that's just a few highlights of the rendering improvements- and there's a lot more (including more detail on the points above) that you'll be interested. But in the interest of posting this in a timely fashion, I'll simply close this thought by saying Design View is much, much more reliable in Dreamweaver 8.

The combination of small CSS rendering updates in this FOTD- in combination with the improved authoring experience the Unified CSS Panel provides - should give you a good idea of how your CSS workflow will continue to get better and smoother with Dreamweaver 8. I think you'll find these updates very welcome indeed. ;-)

Have a great weekend- and I'll see you again on Monday!

Posted by sfegette at 03:46 PM | Comments (5)

September 08, 2005

FOTD 23: Flash 8 - Flash Video Playback

In recent FOTDs I've covered encoding videos in Flash, both individually and in batch via the standalone encoder, but today we're going to actually do something with your FLV file- using the new FLV Playback component in Flash 8. If you've been holding out on integrating video assets into your sites and RIAs, then you really owe it to yourself to explore the possibilities with Studio 8. It's just too darn easy to ignore now.

I'm going to assume that we're starting this FOTD with a FLV file created either via the Flash 8 Video Import Wizard or Batch Encoder, or directly exported from an NLE/compositing application. Either way, I've got this 'talking head' video on hand I want to integrate quickly into a Flash movie. Let's look both at how you can quickly do this with the new FLV Playback component in Flash 8, as well as a very basic implementation with custom UI components and ActionScript- to give you an idea as to how much 'work' is really involved to get a FLV file playing in Flash 8.

First up- let's use the FLV playback component to embed a video clip into our Flash movie. Open up the Components panel ("Windows > Components" menu, FYI), open up the "FLV Playback - Player 8" category, and witness the shiny new FLVPlayback component. We'll just drag it to the stage, and rename the instance to 'myVideo' in the Property Inspector.

Now- just switch to the 'Parameters' tab of the Property Inspector, scroll down to the 'contentPath' parameter, and click the magnifying glass icon to point the Playback component to your FLV file as so:

... you can also scroll down to the 'skin' parameter and click the magnifying glass icon to choose one of the available preset controller 'skins' in the component's Parameters (complete with preview):

And after all that really hard work, just hit "Test Movie" - or publish your SWF - and you're done. One drag/drop of a component, two parameter updates, publish a SWF... that's all it takes to include FLV video clips in your Flash movies!

(FYI, that's our very own Team Macromedia member Tom Green waxing philosophic about Dreamweaver 8's new features...)

Now what if you want to create your own interface for the playback controls- for example if you were embedding this video into a larger multimedia piece? The FLV Playback component doesn't require the preset skins- as it's nearly as easy to bind custom playback controls to match your layout/design as well. You'll find the custom UI components in the Component panel as well- under the "FLV Playback Custom UI" component category:

To use them, just set up the FLV Playback component as described above, but leave out the step where you specify a player skin in the Property Inspector (after all, you'll be creating your own now). Then, drag out the components you need to the stage - where you want them to appear - and make sure to name each instance uniquely (and somewhat logically) in the Property Inspector so they can be accessed via ActionScript. Here's a basic layout using a Seek Bar, Play/Pause Button, Forward Button, Back Button, and Volume Bar:

... and the only coding required to bind these 5 custom UI components to the Playback component are these 5 lines of ActionScript:

The 'myVideo' parameter, as you'll recall, is the FLV Playback component we started with, and I'm simply assigning each of my new UI controls (by their instance name) to the myVideo component's respective functions. Place the playback component and point it at an FLV file, position the UI controls on the stage, bind them to the playback component, hit "Publish"- and you're done. Even the custom UI route is dead simple.

And there you have it- two easy ways to embed Flash video into your Flash 8 projects with varying degrees of control (and there's even more, should you dive into the ActionScript side of the equation). Best get your video clips ready for Flash 8 ASAP- and don't forget to swing back by tomorrow for FOTD 24!

Posted by sfegette at 04:07 PM | Comments (32)

September 07, 2005

FOTD 22: Dreamweaver 8 - XSLT Authoring

Syndication is one of the most rapidly-growing themes online these days, and I've personally used RSS and Atom feeds to browse and aggregate content from the blogosphere, news sites, podcast directories, TV listings and many other sources quickly and easily in Flash (using its XML features) as well as with some server-side tricks. And now with version 8, Dreamweaver speaks XSLT authoring- allowing you to really do something with all those XML documents and site feeds you've been collecting. Roll up your sleeves, this FOTD will be a doozy (and it's relatively certain I'm only going to scratch the tip of this iceberg).

An XSL document can be an entire document, or just an XSL 'fragment' that's included/embedded in an existing HTML page. If you look at XML (and it's derivative content types, such as RSS, RDF and Atom syndication feeds) as strictly your content, and XSLT as strictly your presentation, you've got the rote basics. Now let's say you want to provide users on your site with a listing of the most recent posts and FOTDs I've written here. Let's start by creating a new XSLT document (entire page) by choosing "File < New...", and noting the two new XSLT document types in the template list:

As noted earlier, an XSLT document is a fully-formed document that you create to display a particular XML schema, and an XSLT fragment is for small news pods, lists, etc. that are to be displayed in an existing HTML page. In this case we want to create an entire page listing the current entries from my weblog, as published via its XML-based RSS 2.0 feed.

Let's dive in. After creating my new XSLT (entire page) document, I'm immediately asked to show Dreamweaver a sample document- either locally (on my computer) or remotely via the network. I'll use the URL for my RSS 2.0 feed here as the basis for this new page:

After entering the URL and clicking 'OK', you'll note the 'Bindings' tab of the Application panel is now updated with the schema of my XML/RSS feed- much like dynamic application development, this represents the heirarchical levels of data in my feed- both 'global' data variables that represent my 'blog itself - its title, the link to it's home page, description, copyright information, etc. - along with variables that are different for each content 'item' in my 'blog, such as title, description, permalink, category, etc. The top-level container is 'RSS'- the actual schema used in my RSS 2 file.
Wanna see?

From here, let's do a quick test. I simply drag the channel 'title and 'lastBuildDate' into a sentence I've already typed into Dreamweaver's design view as so:

Nice and easy!
I've just dynamically updated the content in that page based on the 'blog description and last update time in my live RSS feed. Are the potentials here becoming obvious yet? If not, let's take it a step further.

We just updated the page itself with the singular title and 'last modified' date from my 'blog, but what about variables in my XML schema that repeat- i.e. the variables underneath the 'item' node, which represent data in the posts themselves? Well, they're handled much like repeating regions in your favorite Dreamweaver server models- you need to set up an area that repeats, and then populate it with the dynamic data. First, I'm going to create a table to hold the sequential 'blog postings themselves- but just build out one entry as a 'mockup' like so (table borders left in place to help clarify):

Now I'm assuming that these three table rows will repeat for each 'blog post (item) in my RSS feed, so we need to tell Dreamweaver what part of the page actually repeats so it can do the heavy lifting! Since the three consecutive table rows will repeat, I'll just drop into Code View, select all three <tr> rows, and then select the menu option "Insert < XSLT Objects < Repeat Region", which brings up the XPath Expression Builder (although I won't get into it in this FOTD, XPath is how you write expressions to conditionally interact with your XML data, very powerful):

This will simply tell Dreamweaver to write those three rows for each 'item' in our RSS file, using specific values from each post to do so. We just did the first part (set up the repeating 3-row region), now let's finish the job by dragging the appropriate variables (title, description, link, date) from our Bindings Panel into the comp we've created replacing our 'boilerplate' text- and hit Preview in Browser to see it in it's full glory:

And that's all there is to it- with Dreamweaver 8 you can quickly consume XML data, bind it to areas of your document, and display it dynamically on your site. A few points to note:

• This FOTD does not cover server-side transformations, which are possible as well w/DW 8, but require your server to be configured with XSLT support.
• Despite the above, Dreamweaver will still let you perform client-side XSLT transformations using an included Javascript file (DW 8 will provide it, no worries) that you simply upload to your web server alongside your XSL document/fragment.
• Although we just showed a very basic example here, with the power of XPath you can build very complex logic around your XML datasources, allowing very involved applications without a traditional 'server model'!

Anyway, as mentioned in the first paragraph, I'm barely scratching the surface of what you can do with XML and XSL in Dreamweaver 8- but the possibilities are endless. Don't forget you can also consume XML data in Flash 8 (but that's not necessarily news), too.

See you tomorrow for another FOTD!

Posted by sfegette at 05:53 PM | Comments (21)

September 06, 2005

FOTD 21: Fireworks 8 - Feature Frenzy

A week or so ago we took a look at one of the new/updated panels in Fireworks 8 (the Image Editing panel), and today I'm going to run down several more that you'll find useful once you get version 8 in hand- the Auto Shape Properties, Special Characters and Align panels, and the new Add Shadow command in Fireworks 8.

First up, if you were a fan of Auto Shapes in Fireworks MX 2004, you'll want to check out the added flexibility/precision the new Auto Shape Properties panel will afford you in Fireworks 8. Simply call it up from the "Window > Auto Shape Properties" menu option:

In a nutshell, the Auto Shape Properties panel gives you direct, numeric input control over the properties of your currently-selected Auto Shape - in this case an Arrow object, as well as allowing you to insert a new Auto Shape into your document at any time. It works directly with the Auto Shapes noted below:

• Arrow
• Beveled Rectangle
  
• Chamfer Rectangle
• Connector Line
• Doughnut
• L-Shape
• Pie
• Rounded Rectangle
• Smart Polygon
• Spiral
• Star
• Add Shadow (new Command- see below)

The editing interface presented in the Auto Shape Properties, of course, will differ based on the currently selected/inserted Auto Shape (all three Rectangle Auto Shapes share the same 'Rectangle' editing interface, however).

As an added bonus for the Rectangular shapes, you can also opt to either 'lock' the shape corners in order to edit their properties in synch with one another, or edit each corner's properties separately. The 'Corner Style' toggle buttons allow you to change between Rectangle styles (Standard, Bevel, Chamfer) either on a corner-by-corner basis (if the 'Lock' is disabled), or as a group.

For radial objects, you can even specify segments of the object- by degree (FAR easier than creating these types of cuts by hand!), illustrated here with a Doughnut shape:

And except for the Connector Line, all Auto Shapes still behave and act as they did in Fireworks MX 2004. On that note, the Connector Line Auto Shape was updated for Fireworks 8, however- it now snaps to an object, directly below a control point- making charting/wireframing/flowcharting much much easier as well! I honestly didn't use Auto Shapes much in the past, but can see myself using them much more now that I can quickly edit and/or initialize them to exact dimensions.

You may have noted that Fireworks has been rather limited in cases when you needed to set special characters in your image text- you usually had to copy the character from another application, then paste it into Fireworks directly (or use other, less pretty 'hacks') to get the extended characters inserted correctly. That little annoyance will plague you no more...

... with the new Special Characters panel in Fireworks 8.
Just click the appropriate button, and insert special/extended characters as needed. If this limitation ever got in the your way of your project workflow speed before (especially when doing international sites, in my experience), you'll know exactly what I'm talking about when I say this is a long-needed and very, very welcome new panel addition to Fireworks. ;-)

The Align panel also got a facelift, mostly to make it more consistent with the rest of the application:

... considering I use the Align panel constantly, the added consistency in Fireworks 8 is a very welcome aesthetic improvement. If you haven't explored the Align panel before, you should make a point of doing so when Fireworks 8 ships- it's a very flexible panel for getting your designs perfectly lined-up and crisp- the ability to 'cascade' alignment to downstream/upstream anchor points is very useful, for example.

Another new feature (actually, it's a specialized new Auto Shape, from my perspective), is the 'Add Shadow' command (found via the menu option "Commands < Creative < Add Shadow..."). Rather straightforward, simply select an object on your canvas and apply the command, and you'll get this new Auto Shape applied to it:

From there, simply manipulating the direction/perspective handles and gradient color/dispersion will let you quickly apply- and customize- a cast shadow on your Fireworks drawing objects. This is a serious timesaver- in vector apps I've gotten used to simply making a copy of the object, skewing and offsetting it, shifting it to a lower layer and then adding the gradient fill to simulate the shadow's falloff- but with this command it's a pretty point-and-click experience. For example, changing the perspective of the shadow is a one-click job:

You'll still want to use the Drop Shadow effect for drop shadows (even, isometric shadow simulating the object/layer 'hovering' above its background), this command/Auto Shape will cover the rest of your shadowing needs.

So as with the last two Fireworks FOTDs, this feature of the day is actually a few rolled into one- as there are really so many little (but important) updates that I fear they'll get overlooked once you see how much faster and expressive - especially on Macs - Fireworks 8 is. Hope you had a great 3-day weekend, and I'll see you back tomorrow for another feature highlight!

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

September 02, 2005

FOTD 20: Flash 8 - Mobile Emulator

If you haven't noticed a significant focus towards development on alternate phones/devices with Macromedia products lately, exactly how is the weather these days under your rock? ;-)
Seriously- Flash 8 includes a LOT of workflow improvements related to mobile development, and building on yesterday's FOTD covering the Style Rendering Toolbar in Dreamweaver, proofing and debugging your mobile applications with Flash 8 will also get easier. Today I'm going to step through a Flash 8 mobile workflow to show you just how easy it'll be to get into mobile development- once you get your hands on Studio 8, of course.

As with Flash MX 2004, when selecting 'File > New...' and creating a new Flash document, you can choose from a variety of template projects, including not just traditional document types, but specific templates for the various mobile device platforms you may want to target.

The default mobile development templates available in Flash 8 (by device category) include:

Global Phones
These templates are for full-screen development on supported, Symbian-based handsets.

• Flash Lite 1.1 - Symbian Series 60 Phones


• Flash Lite 1.1 - Symbial UIQ Phones

Japanese Phones
(Note: these templates may require resizing your stage, based on the specific handsets you're developing for.)

• Flash Lite 1.0 - Browser


• Flash Lite 1.0 - Ringtones


• Flash Lite 1.1 - Browser


• Flash Lite 1.1 - Ringtones


• Flash Lite 1.1 - Screensaver


• Flash Lite 1.1 - Wallpaper

PDAs
These templates cover development to PDAs in at least 2 modes (both full screen, and with the soft input panel opened), and an in-browser display size for Windows Mobile devices.

• Motorola A92X


• Nokia 7710


• Sony CLIE NX70 - Full Screen


• Sony CLIE NX70 - Soft Input Panel open


• Sony CLIE NZ90 - Full Screen


• Sony CLIE NZ90 - Soft Input Panel open


• Sony CLIE UX50 - Full Screen


• Sony CLIE UX50 - Soft Input Panel open


• Windows Mobile - Browser


• Windows Mobile - Full Screen


• Windows Mobile - Soft Input Panel open

Since I'm using a Series 60 phone (the painfully-spartan Nokia 6620), I'll choose the Series 60 template from the Global Phones category, and create a new document based on that profile- which pops up preconfigured for Flash Lite 1.1 development at the 176 x 208 screen dimensions for my phone. Nice! Now there are a few other little changes to Flash 8 you'll note, starting with the Property Inspector.

Property Inspector
The Property Inspector in Flash 8 has been updated to give quick access to your project defaults:

First, the PI now includes a Device 'Settings...' button that will let you review and change the list of supported devices (based on the templates currently available) in the new Device Settings dialog - which we'll cover in a second. You'll note that as we specified a Symbian Series 60 device template, the PI reflects that our target is the standalone Flash Lite 1.1 player. First up, let's see what the Device Settings lets you specify.

Device Settings
The Device Settings dialog lets you specify the handsets you'll target with your Flash Lite movie/application.

The first menu lets you set the content type you'll be building (although I'm targeting the basic standalone Flash Lite 1.1 player, some phones support other types of Flash resources such as ringtones, animated wallpaper and screensavers, and much more), and the current stage size is also displayed so you can verify aspect ratio/dimensions with your target device(s).

The left combo box allows you to browse the available handsets for the type of project you've selected (in our case, again- Series 60 Flash Lite 1.1 standalone player movies/applications). Blue entries are available for your current target, 'ghosted' or 'dimmed' selections are not- this helps you quickly scan the list of available devices for just the ones you're interested in, that support the target content/platform you've selected.

The right combo box is the set of test devices you have access to from within the Mobile emulator (more on that shortly- no worries!). You can of course add additional handsets/devices from the left-hand combo box and remove them from the right-hand combo box to get just the set of devices you're concerned with (make sure the stage size still matches up correctly, though- if it's not in the right-hand list to begin with it could very well be a different screen resolution). Pretty straightforward! Let's close this dialog and move on.

Publish Settings
Now that we've configured the devices we want to develop for, click the Publish 'Settings...' button in the Property Inspector, and you'll see a mobile-specific setting here, too:

First- note that (in the 'Flash' tab of the dialog) Flash Lite 1.0 and 1.1 are now available as Player versions in the first drop-down menu. The ActionScript version menu is also conveniently ghosted out, as only ActionScript 1.0 is supported in Flash Lite 1.1. The 'Formats' tab (where you specify which files are exported when publishing your movie/application) hasn't really changed, so we won't spend much time there. I'm just going to concentrate on developing my widget application from here, using my freshly-resharpened Flash 5 skills (!). I open the Actions panel...

... and immediately note that there's a line of AS already pre-entered for me- the fscommand2() function call that sets my movie to full-screen mode at startup - and that you can filter the left-hand browser based on ActionScript version- including Flash Lite 1.0 and 1.1, along with ActionScript 1.0/2.0 for standard development. Nice! So back to development, I place my assets, write my AS code as expected - but once I'm ready to test the movie, things get really interesting.

Mobile Emulator
So I've got my quickie Flash Lite 1.1 application sussed out in the Stage, Timeline and Actions panel- and hit Command/Control-Return to test the movie- and am immediately greeted by the plush new Mobile Emulator:

You can select from any of the devices you'd previously configured in the Device Settings 'chooser' (they'll be in the Test Device pull-down menu), confirm the dimensions and file size of your SWF, and choose whether or not you'll want to see trace information, general information (as to the system features the currently-selected handset supports), and/or warnings in the Output panel:

These device profiles are managed via a collection of XML 'property definitions' in your Flash 8 configuration folder (defining the characteristics/system feature support for each particular device), and a series of related PNG files that both define the visual 'skin' as well as the button functions/regions for that particular device- so that you can use the visual onscreen representation of your device and the soft/hard keys Flash Lite (or the Flash Player) can access directly are all clickable. Sweet!

With the new emulator, you now have an easy (and very flexible) way to proof your SWFs in context on the device of choice and make sure your key mappings are working as expected, without having to go through the Flash MX 2004 workflow of publishing the SWF, moving it to your phone, testing on the physical hardware- and then repeating the process (n) times until everything's tight and ready to roll. Trust me, that was a painful process indeed. You can even switch to different handsets within the emulator to test multiple devices in one fell swoop- which makes developing for carrier-specific handset groups or even personal/family handsets very easy to manage.

So... whaddaya think?

My take- outside of writing your AS code, configuring back-end data services and building your visual assets for you, Flash 8 will cover all the other nitpicky details and workflow snafus for your mobile projects in fine fashion, a very welcome set of features for new and old mobile developers alike. And if you've been hesitating to get started with mobile development due to complex or convoluted workflows and unclear deployment processes, you won't have much of an excuse anymore after Flash 8 launches.

A quick heads-up- I won't be posting a FOTD this coming Monday due to the US Labor Day holiday- so I hope you all have a fantastic 3-day weekend! I'll make up for the missing FOTD next week with some additional posts/surprises, no worries- just keep reading, I'll keep writing. :)

Posted by sfegette at 01:02 PM | Comments (24)

September 01, 2005

FOTD 19: Dreamweaver 8 - Style Rendering Toolbar

On Monday I introduced you to the new Unified CSS panel, but that's not the only CSS improvement included in Dreamweaver 8- today we'll take a peek at how the Style Rendering Toolbar can help you proof your CSS-based designs between media types. Because you've already started supporting at least screen, print and handheld media types, right? ;-)

If this is a new topic for you, we should probably step back for a second and look at why this feature exists. There are cases where you may want to specify different values for the various CSS properties in your page layout- specific to the type of device it's being displayed on (or by). For example, you could define one stylesheet to format your page for computer screens, another to format for TTY devices, another for handheld devices, or television, overhead projectors, etc. A crucial feature of CSS is the ability to send a specific stylesheet for each of these different "media types", based on the device browsing your page- helping make your layouts truly universal (well, within reason).

Now in previous versions of Dreamweaver, you could really only view the default/screen media type in Design View without manually juggling the stylesheets themselves in your document- and then rebuilding the <head> section of your document(s) with the appropriate rules/stylesheets again before deploying to the server. In Dreamweaver 8, you can just define all your media-type-specific stylesheets as you would in the live document- and forget all the juggling. If you haven't specified a media type, then all the options will appear the same. However, if you've specified two or more stylesheets, each targeted towards specific media types in your current document, you can use the brand-spanking-new Style Rendering Toolbar to switch Dreamweaver 8's Design View between the supported media types in your document. Easy!

First, you'll need to show the Style Rendering toolbar by selecting the "View > Toolbars > Style Rendering" menu option, and you'll bring out this little addition to your document toolbar (highlighted in red):

From left to right, the toggle buttons are:

• Screen media type (color CRT monitors, LCD flat-panel monitors, etc.)
• Print media type (paged/printed material or onscreen 'print preview' modes)
• Handheld media type (typically small screens, limited bandwidth, etc.)
• Projection media type (projected presentations, or prints on transparencies)
• TTY media type (for media using a fixed character grid like teletypes, terminals, etc.)
• TV media type (for televisions and similar devies- low resolution, color, limited scrolling, etc.)
• Toggle Displaying of CSS Styles

By simply clicking the appropriate media type button, Dreamweaver will - if you've specified a stylesheet for that particular media type - use the appropriate stylesheet to render Design view, allowing you to quickly proof the relative experience across your supported media types. Cool, eh? But that's not all.

Now obviously the first six buttons directly map to specific CSS media types, but the last button (Toggle Displaying of CSS Styles) is my personal favorite, allowing you to toggle all stylesheets on and off, and see exactly what your document will look like with no stylesheet attached. If you, like myself, are reasonably obsessed with the semantic markup in your document and the logical flow of elements within, this is a great way to see exactly what someone with a browser that has no CSS capabilities will see. Anyone remember lynx (ah, the memories)?

Pretty straightforward, huh? That's the idea- you shouldn't have to jump through cut-n-paste hoops to preview your content on the various devices you may need to support, and the Style Rendering Toolbar gives you a quick, easy way to do it. Just another feature of Dreamweaver 8 that will make your CSS-based life a much more productive one - and help you ease into developing for multiple devices and displays rather smoothly.
You like?

Posted by sfegette at 03:44 PM | Comments (6)