Following up to my previous post about what's been going on with the development of an.tidote.us

Getting Started

an.tidote.us is the first full flash site I've developed in over a year, and working outside of the infrastructure that Evolving Media previously provided for me, our hosting account with Daily Razor has created a few issues that I've had to take into consideration. Namely the last of Flash Remoting Support.

The site uses a basic two level navigation component that's setup like this.

• Work
  • Print
  • Web
  • Identity
• About
  • Mission
  • History
  • Staff
• Contact

There is a third level that only exists for the Staff section, and we're going to let that section have it's own iteration of the nav component, instead of relying on extending the main navigational component further. Doing so lets me create an xml object with one very simple SQL statement.

No Remoting? Now What?

Looking into alternatives to remoting, I came across AMFPHP. Which would be a great solution if I wasn't hell bent on developing this site in ColdFusion. The last few projects that I've done, including my own site and this blog have been in PHP, and I really wanted to use the simplicity,flexibility and power of CFCs for this site instead of layers of mangled crap that would have come from a mixed Flash/ColdFusion/PHP implementation.

Ok, so there's this little thing that I remembered about it being pretty simple to connect to a webservice in flash and retrieve whatever data, in whatever format it sends. So this is where we get to our CFC.

The World's Simplest Web Service, WSWS...

I wrote a CFC that does two simple things, runs a query against the Sections table, and parses the results to XML.

This is what is returned, or you can check it out for yourself here.

Ok, So Now What?

So I now have my XML to build the nav from, now I need a quick way to build the nav itself, and of course keep to the specs outlined in the site's final comping design. That's where extending flash components, themes and styles comes in. I'll save that for my next post once I finish the nav in a day or two.

There are quite a few things that need to get done with an.tidote.us. But first some history...

For those who have no idea what an.tidote.us is...

an.tidote.us is the home of the Antidote Branding Consortium.
So you ask, what the hell is the Antidote Branding Consortium? Well, the ABC is an organization, design collective and identity that has been put together by yours truely and Jim Maximowicz. What we're most excited about at the ABC is The Antidote Project, a web-based initiative inspired by Jim Maximowicz's thesis project at SUNY New Paltz of the same name. But more on that later.

Ok, so onto the progress.

We have an identity

We put this together using Coolvetica by Ray Larabie. The logo uses a 1:1.2 ratio for lineheight to textheight. so if the font size is 24px, the line height is 20px.

We have a finalized color pallete

To keep things simple, we chose to go with a clean CMY based pallete, with C, M, and Y representing the three main categories of the site. One thing i noticed when putting it together is that the luminocity of true CMY vary to a great degree. This was before I began selecting additional color values in for each section to represent various states, actions, relationships, visual effects, etc. I asked myself if there was a color pallete or color theme that i was familiar with, that had good ratios and good luminocity out there. The answer was simple, Adobe's Halo Theme, which is what's used to set the color and feel to Adobe's Exchange.

Appying the luminocity and color value relationships used in Halo to our true CMY base pallete, this is what we ended up with.

Navigation Components

The development of the site's navigation will be in a soon-to-be-written post. So check back soon components can be found here.

So I just was reading this article written by David Talbot on Devx.com about Yahoo's UI libraries aiming to make crossbrowser development a bit easier for some folks.

The only notable feature that I could seem to find, was the simplification of setting the opacity of a DOM element in an elegant way. An entire library for that? I got a little curious and took a further look.

Here's an exerpt from the artile:

The DOM and Event Libraries
YUI's capabilities in regard to core DOM and event handling are incredibly rock-solid, perform as expected, and cover a broad range of capabilities. Most surprisingly, this API gives you simple cross-browser transparency control. Most developers aren't even aware that magic tricks even exist (via DirectX calls) to make semi-transparency work in IE, much less the Mozilla-based equivalents, but YUI enables access to most, if not all, of the CSS properties you'd ever want. Here's an example:

YAHOO.util.Dom.setStyle('MyDivID', 'opacity', .5);

Suprizingly? Are you kidding me? Maybe I just don't get what the big deal is. I've been developing crossbrowser DHTML in one way or another since the beginnings of the last browser wars. And back in 99-2000 when everyone was bitching about the diversity in W3C support between the version 4 browsers, I was just doing what needed to be done to make everything work the way it needed to.

So despite Mr. Talbot's enthusiasm for what I considered to be not much of a big deal at all I headed over to Yahoo's Developer Center poked around their lousy documentation and downloaded the most recent build here on Sourceforge. I took a peek at the source, and it turns out that Yahoo and I have almost the same exact approach, thing is, running their entire library is pretty needless.

Here's what I came up with to put together a fade in effect for the items being loaded into my portfolio via xmlHttpRequest.

here's the very simple browser check:

and here's an exerpt from my getPortfolioDetail function:

Pretty simple eh? One thing that you can't see is where I use the same approach to lower the opacity to 0.1 while loading, so there isn't any flashing of the loaded content before it fades in.

I know that there are tons of AJAX Frameworks out there that provide fade in type effects, but I'm not quite there on implementing one. Noteables include Dojo, MochiKit, and of course the ever popular script.aculo.us.

I'm still working on making it work a little more smoothly and efficient as the delay in setting the opacity while i'm doing the xmlHttpRequest is inconsistant at best.