ScaleNine

Flex.org got a new look today that’s definitely for the better. Things are much easier to find with sub pages broken down by topic, easy to read text and a cleaner page design. It would be nice to see some of the icon/graphics from the homepage trickle into some of the subpages, but the content is all there including a new Showcase, Jobs and easy to navigate Community section.

Check it out and fill out the “Thanks!” form to get a free set of Actionscript and Flex posters.

Recently several people have inquired about the need to create a mailing list (similar to the FlexCoders Group) dedicated to the customization of UIs for Flex and Apollo. While I think this is a good idea I need to evaluate how great this need is and whether there are enough people who would be willing to contribute. As it is right now it seems new community information pools are popping up more frequently (almost once a week it seems) and in some cases contain redundant information. In some cases it makes it hard to find the information you’re looking for.

Obviously I don’t want to overlap other resources that might be gathering this information, so before I put together a Yahoo Group dedicated to UI customization I also need to make sure there isn’t something out there already that people feel is adequate. The last thing I want to do is fragment the information sources already established.

The topics to be covered would include: app skinning, styling, extending components to get a visual look you want, UI design practices, patterns, etc. for Apollo and Flex. Essentially the goal would be to answer questions from “Why can’t I get a drop shadow to show up on my canvas?” to “How can I make the ComboBox drop down go up instead of down?” to “How do I implement this component I found to distort my application to work?.” Also, the group should be centered on advanced customization of applications either visual or in terms of behavior. What i mean, is that the topic of the group shouldn’t be only about skinning, but about everything related to creating richer interfaces. From very beginner levels to advanced.

Just in case this idea flies (and the name), I created a ScaleNine Yahoo Group. However, I’m looking for ideas for what the name of this group should be and whether or not people feel there is a need for this. If not, hey, it was just a thought

Thoughts, questions, concerns?

UPDATE: I’ve changed the ScaleNine Group to FlexApolloUI Group.

So, the other day I went to upload some images to my Flickr account via the Flickr Uploadr utility and after I clicked the “Go to Flickr” button the uploader froze as did my browser. How peculiar I thought. I forced quit my browser, restarted it, then went to Flickr to make sure my images uploaded successfully. I couldn’t login and I got this message:

We’re sorry, but there’s a problem.
Here’s what going on:

Your potentialunfounded Yahoo! ID uses the email address juan[at]scalenine.com. That email address is already associated with the scalenine account on Flickr.
Here’s what to do:

* If you are trying to create a new Flickr account for your potentialunfounded Yahoo! ID, you need to either:
o Remove the juan[at]scalenine.com email address from your scalenine Flickr account. (You’ll need to sign in to Flickr with your potentialunfounded Yahoo! ID to do this.) Or,
o Change the primary email address for your potentialunfounded Yahoo! ID. (Your potentialunfounded Yahoo! preferences.)
* If you are trying to access your scalenine Flickr account, please sign in to Yahoo! again with your potentialunfounded Yahoo! ID.

I tried doing all the things recommended by the message above, but still no success. All I got was a screen asking me to create a new Flickr account or merge an existing account. Tried merging but got the same message above.

I racked my brain trying to remember if I had done something that would have caused this. Nope, been logging in the same way since I created my Flickr account. But wait, I did try out the new My Yahoo Beta. Could that have done it?

I went through Flickr customer support and was finally told that it must be on Yahoo’s end. My only choices are to download all my pictures, let them delete my Flickr account and then create a new one.

What’s weird is the following:

1. The picture I uploaded when Flickr Uploader froze did go through. It’s the most recent image that’s up there.

2. All my Yahoo Groups got cleared from my account, yet I still recieve email updates from those groups.

3. At one point when I went to the Yahoo home page it once said “Hi juan” and another time said “Hi potentialunfounded.” Which, unless there is some randomness to that greeting, I find rather odd.

4. I went to the FlexCoders group, which I joined a while ago, and went to one of my former posts. There are details on the right of the post regarding the user who posted it and one of the details is online status. It said my status was “Offline” when I was clearly logged in looking at my own former post.

It’s as if my accounts were separated at some point.

Now I’m trying to get in touch with Yahoo, but in the mean time I’m downloading all my pics and preparing for the worst. I guess that’s what happens when mergers occur, users can slip through the cracks.

As more people have been visiting ScaleNine, I wonder how many people are using the ScaleNine themes? What are they using them for? Learning, quick theme options to apply to their applications, or maybe a base on top of which they build their own themes?

I’ve come across a few instances where the themes are being used in a variety of ways and it’s great seeing how people are repurposing them to fit their needs. Jason Rubenstein mentioned on Flexcursion how he used the ScaleNine Shadow CSS theme.

How are others using the ScaleNine themes?

Here’s a few examples of some themes being used:

http://flex.maroo.info/

http://www.mikebritton.com/

Aside from being a UI designer, I ocassionally partake in the textile arts (aka screenprinting). I’ve got a 4 color screen printer in the garage, so I thought I’d make an Apollo tshirt. I’ve got the front down (simple). But what should the back say? Hmmmm…

Maybe:

apollo. browser? what browser?

we don’t need no stinkin’ browser.

your/the desktop will never be the same.

get your cursors ready.

get apollo.

design, code, deploy. anywhere.

Those were the first that came to mind. I’m waiting for a blank screen to get here, so I’ve got time to figure it out.

UPDATE: It appears “The web is not enough…” posted by Stefan le Roux and “Desktop 2.0″ posted by Faisal Abid are in the lead with 2 votes each.

I’m going to leave the voting open until Friday the 9th, so it isn’t too late to put your 2 cents in or vote for your favorite.

Also, the winner will get a free shirt (thanks for the suggestion Brent) in dark grey or red.

Now taking orders: http://scalenine.bigcartel.com 

If you’re looking for some fire, smoke and water effects, check out Doug McCune’s blog. As a self-proclaimed Flex Machine, he’s also got some great components put together which you can also find over at flexlib.net. Good stuff.

After hearing about the newest version of Ning’s social network builder I thought I’d give it a try. The social network I made is called “Flexcursion” and it gives you the ability to put faces to the names of other Flex 2 developers, share video demos of your current Flex 2 projects, share screenshots, post articles and a lot more.

I have to say the user experience is really smooth and intuitive. There are limits to the amount of diskspace you can take up, but with the ability to embed videos right from YouTube and images right from Flickr there’s less of risk of taking up the diskspace too quickly.

You check out Flexcursion or join at:

http://www.flexcursion.com

or direct to Ning at:

http://flexcursion.ning.com

With the release of Adobe’s CS3 Suite the workflow for getting graphics from Illustrator into Flex sounds like it’s going to get more streamlined and easier to deal with.

One thing I’d like to see has to do with the management of styles created for a Flex Project with a lot of graphic assets. Currently, after creating SWFs containing all my graphic assets, I create a CSS file which styles all my app’s components.

With larger apps there can be a lot of styled components and a lot of style names to remember. As a time saver I create an MXML file and use it as a “paste board” for all the styled components and icons I’ve made. These components are all stripped down and have styling attributes and a name attribute applied to it. That’s it.

The time saving comes in when I need a styled component. I go to my “paste board” MXML file and just copy and paste the styled component wherever I need it in my app. Then I’ll apply sizing and other attributes. It makes for a lot less things to remember and less keystrokes.

I know there is a style drop down in the “Flex Properties” panel of the Design View, but it only gets populated when your viewing an Application MXML file.

This tactic got me thinking. Wouldn’t it be great if there was a “Styles” palette like there is in Photoshop? It would load in visual representations of your created styles from CSS files inside your Flex Project. Then, when you need to style a component, just select a component and then click on a style inside the “Styles Palette” and your component gets styled. Or drag a style onto the component you want to style.

The other option would be a text based list of your created styles. You could expand each item to reveal the CSS attributes and edit them if necessary or apply a selected style to a component. I think there was something like this in Flex Builder 1.

I think this could help more designers warm up to Flex. There wouldn’t be a need to even look at the MXML, worry about where that component is in the MXML, or where to put that “roundedCorners” attribute. It’s all visual.

This might be wishful thinking and a bit overkill, but I know it would be a feature that could save me tons of time. Until then, I’ll keep using my “paste board” tactics.

Right on the heels of my previous post is information from Ryan Stewart regarding the Designer/Developer Workflow. He was able to attend the Adobe Engage event and describes some of the ways Adobe is addressing the Designer/Developer Workflow.

Some of the highlights include getting Illustrator and Flex to “talk to each other” as well as the ability to bring animations/transitions from Flash and use them right within Flex. This is all great news and I can’t wait to take advantage of these new features.

Check out Ryan Stewart’s full article for more details.

I’ll be posting more information as it becomes available.

A recent blog post I came across brought up some questions regarding the UI design workflow and bringing those designs into Flex 2. I replied to the post outlining my experiences and I thought it might be worth sharing that information here.

Initially, when I first got started with Flex 2 I spent time just getting to understand the default components and what attributes could be skinned. The Component Explorer helped a lot, as did the Style Explorer to begin understanding what could be done with just CSS.

With that knowledge I just jumped in and started experimenting and learning how to write MXML to get the layout I wanted. I made up some projects to give myself a direction/goal. I used XML files to populate all my data driven components. Sure, nothing really ended up being completely functional, but it looked nice and this knowledge would prove to be quite helpful.

Now, the first thing I do is create a design and get approvals. I create the initial vector art in Adobe Illustrator. Yes, Adobe Illustrator. Why not Photoshop or Flash you might be asking. Well, basically it’s just in case I ever need the icons, buttons, etc. for printed pieces. I’ve run into numerous occasions where a client has needed some graphic I created for the web to be scaled up to 5 times it’s original size and placed in some corporate documentation or instruction manual.

From Illustrator I’ll either go into Photoshop or right into Flash. I use Flash to hold all my graphical assets for buttons, backgrounds, drop downs, etc. in one SWF. It’s really easy to define the 9-slice or scale9 characteristics for scaling purposes. Also, it’s nice just to have everything in one place to insure design consistency. If file size becomes an issue, I’ll split things up.

After I have enough graphics to get going, I fire up Flex Builder. By this time I have a layout going. I create a new CSS file if I don’t have one already and start defining CSS styling globally (including embedded fonts, and embedded images/swfs) for components and CSS styling for other design variations (ie. .blueButtoon, .orangeButton). If there are single instances of a component that need certain styling I’ll do it in the MXML.

As I mentioned above, I use XML files to get data populating my components. If I need any Item Renderers or Item Editors I’ll create those and skin them. Basically create a visual prototype since sometimes it’s easier to show someone than explain it and Flex makes it easy to do that.

This is great for the programmers ’cause when they come in they’ve got the initial structure. They ditch my XML files and hook the components up to a database. They also implement everything else that I’m not able to do, like build custom Action Script components. Then it’s just me going back and forth with the programmers to get everything looking the way it should.

This is the way I have been working, but by no means am I saying it’s best practices. The worflow has worked great so far, but if anyone has any suggestions on how to improve it I, and I’m sure others, would love to hear about it.

This process will get easier and more simple as new releases and versions of Adobe software become available. So until then, if you can get designers to learn MXML and a little XML it can definitely speed up the work flow. There’s a bit of a learning curve to be sure, but it can be worth it.