Design


Adobe & Design & Flash02 Oct 2007 12:43 pm

Yesterday, Emmy Huang and I announced some of the new features that will be going into Astro (The next version of Flash Player). We got a great response from attendees, and I hope you will be equally excited by what is coming next. If you’d like to see the video, take a look at Aral Balkan’s recording.

So what’s new?

Text:
Astro will have a new text layout engine that will expose low-level primitives. This means that we aren’t adding a new TextField, but instead, we are providing hooks that ActionScript 3.0 components will be written on. Adobe is working on a nice set of components that support bi-directional text (also known as right to left text) and layout flows like columns, inline HTML tables, and improved inline image support.

This demo shows a simple paragraph with some not-so-simple elements. The paragraph shows 10 languages including arabic, hebrew and thai. Emmy then demonstrated that as she re-sized the window, the hebrew text break as it should with the left most word dropping down to the next line when it had to wrap. She also demoed the same example translated in to japanese which has a different line breaking rule system (oh! and it was also fully justified text).

3D Effects
Astro will also be adding support for 3D effects focusing on ease of use. Any display object will be able to be positioned and rotated in 3D space by using new DisplayObject APIs like rotationX, rotationY, and rotationZ (which is just an alternate access to existing rotation property). x and y are going to be joined by the new z property that will resize a display object to be in correct size.

The first example I showed was a video of Natzke running in the FLV playback component. By adjusting sliders, I started the video spinning in the X,Y, and Z axes. I swear I wasn’t trying to condemn Eric to to superman’s prison dimension! I also demonstrated a 3D animation tween API by clicking a button and showing the video animating from any starting orientation to a pre-defined location.

The last part of the example was showing that the playback component skin was still fully functional. I could still click on the play/pause button and even drag the seek slider while the video is transformed. Any display object will be able to be rotated with the interactivity still intact.

To show off the APIs a bit, I also showed a more creative example in the form of a galaxy animation made of three movie clips rotating in 3D space. I thought the effect turned out pretty well, but I learned a lot about even more capabilities of the feature that I am looking forward to demonstrating at future conferences.

Custom Filters
While the first two demos were pretty exciting to me, I think the big feature is Hydra. Hydra is a new programming language that Adobe is working on for pixel shading. With this you can write your own filters to be used alongside the existing built-in filters.

Emmy introduced this feature by bringing back Chris Georgenes’s monkey that we used to demo the original filter. We showed the monkey but now looking a bit warped by a new twirl filter. I then demoed the Adobe Image Foundation toolkit which was posted to Adobe labs yesterday! The toolkit let’s you develop Hydra filters and comes with several great samples. Once you compile the filter it will preview it with live adjustable parameters that will apply the filters to any image that you load into the tool.

Already we’ve recieved feedback from develoeprs that are developing some great filters in less than a day of the toolkit being available. If you develop one, post an image of the filter effect online or send it my way, I’d love to see them!

Cattiness & Design18 May 2007 09:25 am

sqlxml logo

I’m so sorry. I would normally hope that my blog postings live up to some editorial standards. Today I prove otherwise with a bit of toilet humor.

I was doing a search and ended up at blogs.sqlxml.org. The logo for the site is a stick figure as the base of a nice green tree. Unfortuantely, it took me a few moments to see that interpretation. When I arrived at the page, my first thought was “Why is their logo a man being killed by a cloud of fart?” The really iconic figure does look like it should be on a warning sign.

Maybe he is running away from the cloud in terror. Maybe he is being eaten by space amoebas. Perhaps this is the alien that bleached Michael Jackson. You decide.

Note to self: get a second opinion before launching new designs.

Edit: I was wrong. The design does not belong to SQLXML. It belongs to CommunityServer2007. The SQLXML blog just runs on it. Community Server is an actual product. *shakes head*

Design & Flex & Yahoo!16 May 2007 09:48 am

topographic Yahoo! Maps

The new Yahoo! Maps tile engine Galileo is beautiful. Beauty in this case is very readable text labels, color coded neighborhoods, county line markings, icons for things like hospitals, and on regional views, a shaded topographic mapping.

The thing that impresses me most about this release is that you get a lot more information without feeling like you are in information overload. All of the new features are subtle and intuitive drawing from everything people already know from using a paper map. I’m used to the pastel fields of color with an all caps word in the middle that defines it. I’m used to the little blue square with an H in it for hospital.

zoomed view of new tiles

I’m also impressed at how well they blended the level of detail across zoom levels. Topography would be very hard to past at the fully zoomed in level just as color coding neighborhoods wouldn’t make sense at larger views. That seems pretty obvious, but what I think was trickier are the many levels of zoom between that aren’t obvious about how much detail is needed. So far I think it strikes a great balance.

My last kudos is on the text. it is very readable with a sub-pixel stroke of white to accentuate it. It is also a pretty font. This one change alone makes the map go from functional to designed in my humble opinion.

Now that I have paid homage the lovely, rich simplicity of the map, I hope they do extend their maps even further. When there are icons for hospitals and airports, I’d love to be able to click on them and route to them. In the case of a hospital, I have had the need to find one quickly and it was a real horror. I can at least see where they are, but I would still have to route myself to them or figure out the intersection and enter it myself. I know this isn’t trivially easy to do since putting to many interactive markers would interfere with dragging, but it would still be cool.

This would be especially interesting since the tiles for Yahoo! Maps are in SWF format. You could actual bake in fully interactive elements to the tiles themselves rather than just relying on painted pixels.

While they haven’t put a post up about the new tiles yet on the Y! Local and Maps blog, you should still check it out for lots of other interesting features that are available.

Design & Flash15 May 2007 02:00 pm

Cadbury adams pixelated Flash images

A lot of Flash work I’ve seen recently has had really choppy looking images in Flash. This is especially true in images that are rotated. Today I was randomly searching around for the maker of Chiclets (whole different story) and ran across the Cadbury Adams site (pictured above). Someone did some pretty significant tweening there to get the effect of the brands going along the animated rope, but as the images go around all of the boxes get really mangled.

There is a very easy fix that would have made the SWF look many times better, but I’ve been discovering that the feature isn’t well known about by people starting with Flash in the last few versions. To let your images to be cleanly smoothed as they are resized and/or rotated go to the bitmap in your library, right mouse click and select properties. From there select “Allow Smoothing.”

I’m trying to figure out if the default in the past was to have the image smooth since I don’t really remember seeing as many sites having issues like this one. Otherwise it could be a feature that has been lost to the ages (though I’m sure YOU know about it!) :D.

Also if you want to have your image smooth in some cases, but not smooth in others, you can always take an instance of the image and use break apart (not trace as bitmap!) which will take the image, remove it and replace it with a vector shape of the same size and position and give it a fill with the bitmap. This will always allow smoothing. Any non-broken-apart images then will remain crisp.

Cattiness & Design & Flash17 Oct 2006 04:00 pm

I’m being haunted by an ad, from site to site. Is it Flash? Nope. Was it made in Flash? Maybe.

bad ad

Notice anything familiar? If the ad were actually Flash and not a badly compressed JPG, I would have been waiting for one of the default audio clips that was included with Flash.

For those that aren’t seeing what is amusing in the ad, it is the blue arcade style button in the picture. If I put on my black turtleneck, I could criticize it in many ways, but there is a pretty simple one. The button is a default asset that comes with Flash, for demonstrating how to make and use a button. For Flash people it is the equivalent of seeing some of the default Microsoft clip art in an ad. Its just strange.

Design & Flash & General & Yahoo!31 Jul 2006 08:00 am

Y! Finance Flash charts

If you haven’t seen it yet, check out the new Yahoo! Finance (Beta) including the new charts built in Flash. I think the finance team did a beautiful job on the new Flash charts. At the beginning of the project, Finance didn’t have any Flash developers. Rather than going down the hiring route for getting Flash expertise, they trained themselves and really knocked everyone’s socks off here.

You may also notice that the side panel of the charts is HTML-based. The finance group decided to go with a hybrid AJAX/Flash application. While I prefer Flash solutions overall for a variety of reasons, I think the overall feel is excellent. Without right clicking I wouldn’t know where one technology stopped and the other begins, just as it should be.

To check out some of the features of the charts, try comparing some different stock symbols, the graphing styles and most importantly the technical indicators. The technical indicators are very interesting modules that provide different perspectives on the displayed data. In addition though, they actually give information for novices such as me to know just what the heck I am looking at.

Next Page »