This demo is a combination of the new drawing API features like drawTriangles combined with an object made from APE (ActionScript Physics Engine). The texture that is mapped across the shape in this demo can be an image, video, pixel bender or simple color.

In the color demo you can see that the cloth has two sides. This is done with the concept of backface culling. When drawing triangles, you can specify if positive or negative triangles should be bypassed in rendering. This means that for a 3D app, you don’t need to double render, but for this far simpler example you can draw the negative triangles with a different texture by doinga second fill process where you don’t draw the positive triangles.

more to come!

BTW, if you are using APE and want to export to for Flash Player 10, you will need to go through and rename the Vector Class to something else since it will conflict with the new Vector data type.

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!

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*

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.

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.

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!) .

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.

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.

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.

In addition to adding the circle elements, I am altering the alpha level of the non-highlighted elements of the menu. To make the menu work with any background color, the text elements are set at about 30% opacity. The Flash background I’ve been working on is a bit bold color-wise and the menu items are getting lost. By bumping the _alpha of /all/currentMenu up to 300%, you can make the text opaque.

Prior to doing a little more introspection I had previously been changing the alpha of the root, but that affects other UI elements like the translucent black overlay for system notifications like volume adjustments and connectivity. By more narrowly targeting the alpha setting, I can boost just menu text and arrows.

Another interesting thing that you can see when you start doing dynamic backgrounds is that the SWF is reloaded several times. If the backlight turns off, the background will redraw when the light comes back on. The same holds for when you change from portrait to landscape or launch and exit a game. The strange thing is that right before it redraws, you still see the old state. It isn’t that the background was ever unloaded; it was just reloaded.

Making games for the U10 is fun, but I also want to be able to customize the Flash Lite UI that runs the rest of the device. I’ve gotten pretty far, so I thought I’d share what I learned in hopes that others are looking into this and can share what they have learned.

The Problem
The Iriver does a really good job of protecting its UI SWF. When you hook the device up to your computer you can see some directories, but there must be some that are simply not exposed. There are two main directories on the device, media which holds the DRM audio/video and can’t be modified except through Windows media player. The other directory is Data that can be modified as you wish.

The Vulnerable Spot
When I got my U10, one of the first features that made me raise an eyebrow was picture viewing. You use a tool to transfer JPGs from your desktop to the device where they can magically be loaded. The thing is that as I have really good cause to know from my traffic cam viewer and Flickr tool, Flash Lite 1.1 can’t load JPGs. Looking at the files on the device (/data/system/pictures/) The files are .JFU and .JTH, which I assume stand for “JPG Full” and “JPG Thumbnail.”

If you transfer any of these files to your desktop and change the file extension to .SWF, the Flash Player can run the file. The image viewer works in a very similar way to my traffic cam viewer. Instead of loading a JPG, it relies on an external solution to wrap the JPG as a SWF. This isn’t a server solution like mine though. The transfer tool does the conversion as part of the transfer process.

Knowing that, it is pretty easy to make your own Flash Lite 1.1 files and start loading Flash files into the UI. The easiest way I’ve found is to export your file and take a screen shot and save it as a JPG. Move that file over using the transfer tool to make the placeholder (and thumbnail file), then replace the JFU with your SWF remembering to alter the file extension. When you disconnect your U10 and it re-boots, go to Settings>Extra>Background>Pictures>(your image directory) and select the thumbnail for your SWF.

Introspecting the UI
With a Flash background you can do some pretty cool design things, but not a whole lot technically. To do more, it is a matter of finding out more about the Flash file that loaded the background. In Flash 5 and higher, there are a lot of tools that let you introspect into a parent SWF that another is loaded into. With for...in you can find everything you could ever need to know.

Back in the reality of Flash Lite 1.1, we have a much more limited set of tools. The best tool in our small arsenal is _target. For the background it is /bgImg/photo/photoDown. It doesn’t get us as far as I’d like since you can’t find out what else is in each of the timelines. Luckily there are other places that the images appears. Some of these other locations are a bit more revealing.

  Full SWF as the Background:
    /bgImg/photo/photoDown

  Thumb SWF in the Background Selector:
    UI in landscape:
    /all/currentMenu/setupPhotoList/listBox/list2/photo
    UI in portrait:
    /all/currentMenu/setupPhotoList/listBox/list3/photo

  Full SWF viewed in the Photo Viewer:
      /all/nextMenu/photo/photo/photoDown

  Thumb SWF in the Photo Selector menu:
    UI in landscape:
    /all/currentMenu/PhotoList/listBox/list2/photo
    UI in portrait:
    /all/currentMenu/PhotoList/listBox/list3/photo

Also using _currentframe and _totalframes can reveal a little, but I haven’t had much chance to play with sending the various movie clips to different frames. The root does have 70 frames though, so there could be some interesting things there.

I’ve been spending my time exploring the other timelines, specifically the menu timelines. Strangely, every time I try to modify /all‘s properties, it really screws things up. I have no idea how, but setting the _y of the movie clip, often makes the buttons non-functional and can even shift the UI into portrait mode. No clue why. There are however some elements off-stage if you want to take a look.

Just be careful, you can seriously screw up your ability to interact with the device. If you mess things up you can still generally connect up to your PC and replace your malfunctioning file. When it asks you whether to do power only or power and data, you may have to try a variety of buttons. If you get seriously screwed up, you can always download the firmware update tool from iRiver and reformat the device (eep!).

Thanks to everyone that attended. I was really pleasantly surprised by the turnout. There were also some really good questions after the session. If you would like to see the PPT file and the related Flash files, please download the source here.

The major points of the session focused on one of two topics. The first part of the presentation was focused on what designers can do to optimize Flash Lite 1.1 performance. I used a couple of my old files like Pellet Pop and Aces High plus a maze game I made for the iRiver U10 to demonstrate some of the design techniques:

• Smoothly animate small elements the eye is focused on and roughly animate (or not at all) large elements. This gives user the perception of smooth moving content without the hit to performance.
• Use simple animations (scripted or tweened) to cover over processor intensive task. If you need to run a harsh loop over several items, animate a transition and run the the loop as a frame loop rather than a while loop. The example of this was using an explosion animation in Pellet Pop. The trig for digging out each column of a dynamically created terrain that has been exploded is run at one column per frame during each from of the explosion animation. The cumulative effect of the script is applied visually when the animation is finished.
• Consider whether to use vectors or bitmaps in your application. Scaling and rotation really require vectors, but otherwise you should use bitmaps for the performance benefits.
• Interaction differences in the devices make all the difference. Target specific devices, or classes of devices with your SWF. Flash does a great job of staying functional anywhere, but with varying screen sizes and pixel density, not to mention interaction patterns, each device is pretty unique. By tying your layout to variables that can easily be changed, it is pretty easy to create a base file then make some documented design changes to target a new device. I showed how by changing two variables, the stage size and one button event handler I was able to make a specific port of my U10 game for my Nokia that is consistent with the Nokia interactions.

From there I moved on to Flash Lite 2.0 to show how much better life is about to get. My original maze game was coded for Flash 6, and with only changing the stage size I was able to run the original game on my phone with only a very slight loss in performance. I also showed how using Flash Lite keeps you from having to implement server solutions for XML and loading JPGs. This ability really makes Flash Lite accessible to people that are purely focused on the client side.

I wrapped up my presentation by talking about how Flash Lite 2.0 is actually moving ahead of the desktop player in certain cases. In Flash Lite 2.0 you can use right to left languages and can support any media type that your phone supports. I showed an example from Adobe on how Flash can composite 3GP video straight into the Flash movie. I desperately wish Flash for the desktop had this capability.