From flash to Moo

As many of you know,  Matt Cottam of  Tellart was my mentor while at RISD. I worked with Matt for over a year and a half on may projects. And he was nice enough to hire me for an inter position one summer… The same summer I was learning actionScript for my multi-touch table. That Summer Tellart + Zango worked to design a beautiful new site for tellart. After all the design was done they allowed me to work on the programming of it in flash. I actually did quite a bit of it, but then had to leave to go back to school before it was finished. After I left, I think they noticed how bad some of the code was, and redid most of. Though I did see some of my code in there latter (very little). – That was summer of 2008.

Fast forward to spring 2009. Im reading the Mootools Documentation and found a class I thought I could have used to re-create the site in JavaScript. It worked. In about 50 lines of code I had made a mock-up that functioned very similer to original. It only took me a few hours. I sent it over to the guys at tellart to show them it could be done if they ever wanted it to. But why?

<rant>

So here is my flash rant. I love flash and ActionScript. But not for making web pages. 90% of the time flash is used on a site, it could have been done with out it. But many who say “Who cares?”. I do. And you should too.

Flash ruines page searchability, navigation, SEO, and a lot more. Not to mention that poorly done it is a CPU HOG!

</rant>

Then, just a few months ago, Matt asks me if I still had that code, and if I would be interested in completing it for their site. When am I not interested in more javaScript work?

So the deal was. The site needed to work on the iPhone, retain all the movies/slideshows, have all the portions be bookmarkable, and make it easier to add more content.

I did it. And my code is now in use on their site.

I kept all the flash for the videos and slideShows, and I used mootools to check for flash. If it was not there, replace all the flash, with jpg images.

I made all the elements on the page dynamically generated in PHP. Using some simple arrays, they can now add a new project with a single line of code. And it will resize everything, and create all the parts needed for it to work without modification.

I enabled bookmarking. This is a lot harder than it sounds. There is one page. One. So what do you bookmark? Well there are 7 projects and an info page with a lot of info. Each project position is boorkmarkable. So if you go to the link, the page will load, and it will auto scroll to that project. If you bookmark a person on the info page. It will auto scroll to the info slide, and do a nice ajax call to grab the info on the right person.

Another part was … if a user is watching a video on a slide 0r slideshow, and moves to a different slide, we needed to stop the current slide, and return to the teaser frame. Because the moving part is all javaScript, there a language problem. How do you talk to a flash movie from JS? With mootools. It’s Swiff class is wonderful (though incorrectly documented). I just had to render all the flash to include the JS connect. Worked really well.

It took a full weekend to do (I had thought less) but it came out really nicely. And on a javaScript friendly browser, it is actually a bit faster than the flash version.

From Flash to Flex

Just over a year ago I started learning ActionScript. At the time it was actually to develop multi-touch applications for the table I had made. Back then, I did everything in code, and there was no real interface aside from the black background. For this, flash was great, I just did all my code in a document class, and it worked very smoothly.

Well nowadays Im building AIR applications and have been using flash for it. Building an interface in flash it like doing it with cutout pieces of paper. Seriously. But like that, you can never get everything in the perfect location. It drives me crazy coming from a web development background. Things in flash have no structure. Things can easily overlap. If you move one element it does not affect the elements next to it,  meaning you now need to change all of them. And there is no super simple way to do it numerically (all done with the mouse), making it even harder. (if you change the size of a movie clip you stretch it’s contents so you can’t just readjust size from the info box)

So the company I am with just bought Adobe Flex  and I am starting over in it. I really like building interfaces in it a lot more than flash, except coding in it is not as easy. This is what I find really funny. Adobe creates a program for flash developers, who want to just code everything. But in the end, you need to do a lot more before you can start coding.

Someone at adobe needs to take a closer look at how javaScript works. Let me have my interface in one document, and my code in an other. Let me name elements and directly talk to them from code. In flex, you can do either one of these, but not both, and that’s not cool. Even flash let me do that, and you claim it is for designers. Well I guess that’s it. I am a designer, but I also like hard structure.

Then again, I have used flex for 1 day. Give me some time.

But if I had to say, I still think flash is the worst applications from adobe now. It tries to be like illustrator, but does not act the same. The key combos are not the same as all their other applications. And it wont behave in the OS like it should (mainly hiding).