ScaleNine

At this year’s MAX North America Adobe showcased a number of new services. One of which was Adobe Share, which is currently in beta. The premise is pretty simple. Adobe Share allows you to upload files, including ZIPs, image files, PDFs, etc., and share them in a number of ways. You can share files with only certain people, make it available publicly, embed the file in a web page, or share a link to the file. It also acts as a handy viewer for PDFs and other files. Pretty straight forward.

I thought I’d check it out, so I signed up and started using it. It’s come in pretty handy and I’ve started using it regularly. One thing I’d like to be able to do is share something with someone and give that person the ability to share it with other people. I tried doing that and it didn’t work. Maybe I missed something.

Anyway, the more I played around with it I started thinking about the other services Adobe is going to be rolling out soon and the services that they already have out there. Of course my mind started to wander and I put together a some directions I could see Adobe Share going. I might be way off, but I think about stuff like this.

Online Version of Bridge
If you’re not familiar with Adobe Bridge, it’s a desktop application that integrates with Adobe’s CS3 products and allows you to manage files on your desktop. Well, Adobe is gradually adding online application offerings, including Photoshop Express, Premiere Express, Kuler and now Buzzword, and I’m thinking more are on the way.

Imagine being in Adobe Share and able to open/edit an image in Photoshop Express which then goes back into Share or on to your desktop. Or maybe open some video clips and merge them together in Premiere Express, or save a video to Share from YouTube. Adobe Share would be an online repository for any media you might want to keep track of and share.

Expandable File Repository
What if there was an option to bring all my Flickr photos, or some of them, into Share to use in other ways. Like bring them into Photoshop Express. Maybe import my YouTube videos in to share to remix in Premier Express. Basically options to bring in files from any other location to be managed in one place.

Then I could create media “groupings” and share that with other people. On a blog it might be something like a slide show, or have a navigator to view different files. You could embed something that would allow you to share, say files regarding a snowboard trip you just took. Images of the mountain, video of you in the halfpipe, an itinerary, maybe an audio clip of you on an ambulance ride after breaking your ankle, could all be shared via one embedded object.

Remote Access
How about the ability to access items in your Adobe Share account from your desktop. Like open an image from your Share account in Photoshop. Maybe even a tab in Bridge called “Share” where you could grab your files. I know one of the reasons for Share is to reduce using bandwidth to share files, so something like this would definitely defeat that purpose.

Maybe I could view shared images and video on my desktop using Adobe Media Player. Then, someone could almost create their own “channel” using Visual Communicator and Premiere. Viewers could watch the videos that person created by accessing that person’s Share account.

Add Some Voice
Another service mentioned at MAX was “Pacifica”, a VoIP solution for Flash. It might be cool to see “Pacifica” integrated some how, maybe in the file viewer portion.

Anyway, it’s really great seeing some of the directions the web is going, not just Adobe. It’s definitely a great time to be involved with all this stuff.

I was getting tired of using some of the images I had on my iPhone as wallpapers, so I thought, “I wonder if anyone’s made some iPhone wallpapers based on the CS3 background artwork?” All I could really find were wallpapers for the desktop, but nothing for the iPhone. Granted I didn’t look that long, but I decided to make some.

Initially I was going to only make some based on those CS3 backgrounds you see on Adobe software boxes, but one thing led to another. Before I knew it I got Doug McCune to throw some Adobe icons into TileUI and send me some screencaps. I also threw in a Photoshop Runner wallpaper (for the EffectiveUI guys), a Kuler wallpaper and an Adobe icon arrangement reminiscent of the mugs they had for sale at MAX.

You can get them all from here, or click on the image below.

In my search I also came across these cool iPhone wallpapers.

At MAX Peter Flynn of Adobe demoed how to make skins with transitions using Flash CS3 and some pre-created templates. For those who didn’t get to see the walk-through, or even for those who have, I thought I’d put together a little walk-through of my own.

What you need to get going is Flash CS3 and the Flex Skin Design Extension for Flash, which includes the templates. Download the Flex Skin Design Extension for Flash and install it. Once installed, fire up Flash CS3. You should see a “Flex Skins” option under the “Create from Template” column in the Getting Started window.

When you click on the “Flex Skins” option you’ll get a window with a list of available Flex Component skins. For this example I’ll select the Button skin.

When you first open the file you’ll see 4 layers: information, symbols, labels, background. Double-click on the Button symbol to reveal the timeline within.

If you scrub through the timeline you’ll notice the artwork changes to reflect the different states. This coincides with the frame labels: up, over, down, disabled. These frame labels match the state names for this Button component. Each of the other component skins may have different frame labels.

You may also notice the other frames with labels that are right next to each other. These are the transition starting and ending frames. The reason they are right next to each other is to prevent a time delay between the states. So, the first thing you want to do is spread those frames apart. For this example I’ll be working with the up-over transition.

If you look at the frame labels for that particular transition you’ll notice they’re named up-over:start and up-over:end. This is necessary for the transition to work properly in Flex.

With the frames spread apart I’ll create an under-glow transition where the Button will appear to be lit from the bottom as the user rolls over. Here’s a snapshot of the work area after I’ve created my transition:

I’ve got my skin all set up, so now I’ll export it for use in Flex. For this example I’ll just publish the SWF/SWC to my Desktop.

Once those are published I switch over to Flex Builder 3. In Flex Builder I’ll create a new Flex Project called “ButtonTransitionSkin”. Now it’s time to bring in my Button skin.

To bring in the Button skin got up to the File > Import > Skin Artwork menu item in Flex Builder. When you select “Skin Artwork” there are a few options. At the top select the “SWC or SWF file” radio button and then browse for the SWC that was published. I had put mine on my Desktop. Make sure you select the SWC and not the SWF.

I’ll change the default CSS entry for “Create skin style rules in:” to style.css and just leave the default selection for the “Attach style sheet to application:” option. Usually I’ll put my skin assets into a subfolder called something like “style” or “skins”, but in this case I’m not. After doing that the window looks like this:

When I hit the “Next” button I get a list of check box items to select the skins I want to include in my style sheet. I’ll leave “Button_skin” checked and click “Finish”. When I do that the style.css file is created and the skin is assigned to that component.

Now all that’s left is to add a Button to my Application layout and I get something like this:

Click here to view in new window (View Source enabled). Or download the project (including FLA) here.

If you’re looking for another method of creating “stateful” skins without using Flash, check out a post Nahuel of AsFusion wrote.

I never really thought about getting credits on a piece of Adobe software, but it’s definitely cool to see (middle, right). Yes, I realize my name is a common one, but I swear it’s me. In case your wondering what I did, you can check out NJ’s post for some insight.

Going back and forth between Flex 2 and the new Flex 3 Beta 2, there are a few things I’ve immediately noticed that have changed. This may result in former styling/skinning properties not appearing or possibly errors showing up. Another thing to note is that there are some styling/skinning properties that have been added. Here’s a list of a few things I’ve noticed so far:

Combo Box
Padding for top and bottom can be set on a ComboBox: paddingTop, paddingBottom. Option to specify a color for the arrow icon: iconColor.

Data Grid
A skin can be specified for a DataGrid header: headerBackgroundSkin.

Effects
You can now specify effects for data items in a List and TileList. There are effects for instances of data changing: dataChangeEffect. This works with the added DefaultListEffect and DefaultTileListEffect (part of effects like ResizeEffect, MoveEffect, etc.). A property has also been added that allows for the creation of itemRenderers when the effect is played: offscreenExtraRowsOrColumns.

PopUpButton
Skin states that were called overRightSkin and downRightSkin are now called popUpOverSkin and popUpDownSkin. Skin states overLeftSkin and downLeftSkin are just overSkin and downSkin.

In Flex 3 you can now replace the arrow icon by specifying a graphic for popUpIcon. You can also specify a color for the default arrow icon.

Some of these things may or may not affect some of the previously released ScaleNine themes. Moving forward, the themes I create will be built for use in Flex 3. I’ll try to add to this list as I notice more things or as others let me know of what changes they’ve noticed. Be sure to check out Narciso Jaramillo’s post on some other workflow features that are available along with the new Flex Builder 3 Beta 2.

For now, I’m referring to the new and improved Live Docs for Flex 3 Beta 2 for anything I run into.

Now that I’m back from Chicago I thought I’d put together a list of features I took away from the “Thermo” demo that was given at MAX. Imagine creating Flex UIs and experience using the very familiar toolsets in Photoshop, Illustrator and Flash. Adobe’s “Thermo” project does that and more with strict emphasis on a tool for a designer to create the front-end of an application. This is the answer to so many questions and issues people have had with the designer/developer workflow. There’s an Abobe Labs page where you can learn a bit more, which includes images.

There were a number of features shown, including the ability to import a Photoshop file and then easily convert artwork into working components. Once the artwork is imported a designer can go through and convert the artwork to working components. When this is done, everything that is selected is converted to MXML with reference to external image assets. One example that was shown was a graphic that was designed to be used as a text input was selected and then from a menu item was converted into a functional TextInput, skins and all. One thing I’m hoping is if you import vector art, the vector properties are maintained and converted to MXML path data and colors, alphas, etc. values remain editable.

For more complex components, like a scrollbar, you work within layers to specify which artwork is which part of the component. For example, you can designate which artwork is a scrollbar thumb by simply dragging the artwork within a layers palette into a folder called “thumb”. I imagine this feature may evolve to support custom components where a developer might specify the different parts of a component, which would translate into folders inside of the Thermo component/skin palette.

Another thing that was shown was the ability to create a relationship between a List and a ScrollBar. So, the List was separate from the ScrollBar, but there was an icon that was dragged to point to the List and a relationship was created. Once those items were linked the ScrollBar now controlled the List.

You can easily work with transitions and effects on different portions of the UI using layers and simplified timelines to do what traditionally may have taken a good understanding of writing those out in MXML. Once you felt your effect was where you’d like it, you could scrub through the timeline back and forth to preview your work.

Additionally, it is really easy to make a dummy data set for mockup purposes. What was traditionally a more elaborate process of creating a dummy XML file and assets has transitioned into a seamless process of using a very visually approach to defining data, editing data and simulating data populating your UI. The data can be worked with via a data grid based structure.

“Thermo” is great because Adobe has focused on patterns and tools a designer is already familiar with from other products and made a really familiar workspace for a designer to create user interfaces for Flex and AIR. The features that were presented were awesome and there’s already people talking about additional features they’d like to see. “Thermo” is an awesome tool, but from what I’ve heard we might have to wait a while, but it’ll be worth it.

The second part of the “Creating a Visual Experience in Flex” that Andy McIntosh and I did at 360Flex is now available for download. This is the hands-on portion of the “Skinning Mega-Session” and the supporting code and assets can be found here.

Check out the video here.

One of the things I often talk about is trying to separate any styling from MXML. What I mean is preventing the need to go into the MXML to change styling and doing as much as possible from an external CSS file.

Typically I might assign a style to a Button by assigning a class selector for the styleName:

<mx:Button styleName=”blueButton”/>

That works just fine, but let’s say I want to change the Button to use a class selector called “redButton” instead. That is, to make the Button have red styling instead of blue. One option would be to change the styleName above to a “redButton” class selector I create. Or reassign the styling properties in my CSS file for “blueButton”, which could cause confusion.

Another scenario might be using a “task specific” class selector for the styleName. For example, loginButton, addButton, emailButton, etc. However, I may run into an issue if a slight variation is needed in another part of the user interface. Or if the class selector name of “uploadButton” no longer makes sense. Then I’d have to go into the MXML and change the class selector for the styleName.

A great way to avoid having to go into the MXML is using the getStyle method inside of the assignment of the styleName. The MXML for a Button in a Login component might look like this:

<mx:Button label=”Login” styleName=”{getStyle(’loginButtonStyleName’)}”/>

And in my CSS file I have the following:

Login
{
loginButtonStyleName: ‘blueButton’;
}

.blueButton
{
fillColors: #A9DBFF, #0095C6;
fillAlphas: 1,1;
}

With this implemented I can change the style of the login button without having to go into the MXML. For example, if I decide I want the login button to now be grey, I just create a new class selector and assign it to the loginButtonStyleName. Like this:

Login
{
loginButtonStyleName: ‘greyButton’;
}

.greyButton
{
fillColors: #EEEEEE, #AAAAAA;
fillAlphas: 1,1;
}

.blueButton
{
fillColors: #A9DBFF, #0095C6;
fillAlphas: 1,1;
}

If you’re tied to the Design View, this technique may take some getting used to because you’ll only see the results at compile time. One way to get around that might be to do the styling inline and then once you get things looking the way you want to, go and externalize the styling. Then again, the Design View doesn’t really offer as much as it could.

I don’t always use this technique, because it can be a bit overkill for some instances. I use it wherever I think it makes sense and I know it will come in handy in the long run. There’s a few other techniques that I use as well that I’ll try to share. Thanks to Andy McIntosh for sharing the power of this use of the getStyle method.

I think anyone who has been a part of the development of an application has questions concerning user experience, especially when working with all that can be done in Flex. If you have any questions along those lines, be sure to check out the newly launched site for Adobe’s Experience Design Team.

The new site was presented during during the “XD: Adobe’s approach to Application Design” and we got a quick overview of the features. There’s great case studies, discussions of principles and patterns, and other content areas that will grow in the coming months.

As mentioned in the session, a site like this has been something that developers have asked for and it’s great to see it all coming together. The new XD site and the newly revamped Adobe Developer Connection are two great sites to add your resources.

With the announcement of the Flex Builder 3 Beta 2 being now available, I though I’d share some of the styling tools that will make styling your application a bit easier.

Additional Style and Skin Options
Now, in the Flex Properties panel in CSS Design View, you can access a variety of options for Styling and Skinning. The Styling portion adds more visual indicators to things like alpha, fillColors and there are inputs for things like padding, icon specifications, rollOver text colors, selected text colors, etc. The Skinning portion allows for easy selection of a skin. Once selected the CSS embed code is dropped into your CSS file.

Scale Grid Guides
You can now set/edit the scale9 grids right inside of the CSS design view. Whenever you change the values, your CSS file is updated. No more having to guess on the values or using another application to get the exact pixel perfect values.

Auto-Embed of Fonts
I’ve heard of a number of issues people have had embedding fonts for use in an application. Either a font weight wasn’t available, a wrong guess for a fontFamily name was made, etc. Now, when you creating a style you can select a local font from a drop down and, once a font is selected, you can click an option to embed the font. The proper CSS code is written to your CSS file and you’re ready to go.

One thing I did notice is that if you select a font and then select a different font, the former font embed code stays in your CSS file. When changing fonts in Design View to find one you like, make sure when you do find one that you go back to CSS file and remove the unnecessary font embed code.

Auto-Embed of Icons
Just like fonts, you can select an icon to be used from two options: Flash symbols and image files. When you select either Flash or image files you can browse for a SWC, SWF or image file and select your icon. Then, like the fonts, the embed code is written for you.

Additional Styling Navigation
In the CSS Design View there are additional features to help navigate through your styling. Rather than using the Outline panel to navigate through your styles, there is now style selector combo box next to the Source/Design toggle buttons. This is great for quickly switching between styles.

Also, there now some buttons for adding a new style or deleting the currently selected style. There’s also a color picker for selecting the background color that your skins sit on while you’re editing a style.

These are some of the immediate features I noticed and they’re all great for productivity. I think these additions will definitely help people get through skinning/styling their applications with fewer headaches. Nice!