« September 2008 | Main | November 2008 »

October 2008 Archives

October 6, 2008

Flex skinning with Adobe Illustrator CS3

There are different way to skin Flex components when you design an interface, but the easiest for me is doing it using Adobe Illustrator. I’ll tell you why.
The first thing is that, most of the time, the kind of graphic we create for an UI is vector-based and Illustrator is perfect as a software to create vector-graphics: really handy and with lots of useful tools to help you drawing. Then it’s even more simple if you install the Flex Skin Design Extension from Adobe, you can customize standard components already created with all the status you need. But even if you want to create symbols from the start you can do it in few minutes. Of course you can use all Adobe design software to create graphics to design Interfaces, I guess it depends on what is the one you like/know/use more, personally I use often Photoshop also but still I think that Illustrator is faster and it coops with Flash very well.
After you got the Flex extensions, with few steps you can create a movie with buttons and all the components you need. Let’s say that you want to create a button set for your UI, so you open Illustrator, go to File > Script > Create Flex Skin (sorry but the pictures here will show an Italian version:))

Illustrator window

Then from the list you see you can choose the component you need

Component list

And this is what you will get, if you go to see the Symbol list in the Symbol panel you will see all the Button components.

Symbol panel

You can custom every symbol just with one click, but if you want to create a new symbol from the start it’s as simple as customize the standard one. Let’s open a new document, with the shape tool create a button

Illustrator shape tool

Then go to the Symbol Panel and save this as a new symbol, a movie clip with the scale nine option

Save new symbol options

And you will have the firs status of you Button component, isn’t it simple?:) and if you clik on it you can adjust the scale nine guide if you need it.

Scale nine option

At the end of the work you can use the File > Script >Export Skin to generate the swf or you can select the symbols and with Copy&Paste bring them to a Flash file if you need to work with more properties. If you do that just remember that sometimes it happens that when you import a symbol from illustrator you must reset to zero the XY value because they change.

Flash window

So, don’t you agree with me that Adobe Illustrator is a really handy software to create graphics for User Interface?:)


October 22, 2008

Rich 3D ActionScript applications with Papervision3D

Papervision3D is an open source, real time, 3D engine for the Flash Player. It offers an intuitive Actionscript 3 API that provides access to advanced tridimensional functionalities in a relatively small time. The library is being developed by Carlos Ulloa, John Grden and Ralph Hauwert and the source code is available at the project homepage http://code.google.com/p/papervision3d/, together with the most recent SVN releases.

In this article we will see how to use some of the features offered by Papervision3D, such as using textures, shaders and bump textures. The example will create the planet Earth, apply a texture to it and use a bump map to simulate the different heights of the ground.

We begin by extending BasicView, which is a class provided by the Papervision3D library that already includes all those basic elements, such as the viewport or the camera, required for a 3D application. The texture, the light shader and the bump map will be using embedded images:

[Embed(source="/assets/earth512.jpg")]
public static var earthTexture:Class;
[Embed(source="/assets/earthBump.png")]
public static var earthBump:Class;
[Embed(source="/assets/envLight.png")]
public static var envmap:Class;

The bump map image is a blurred, black and white version of the texture image, it will be used internally to render the surface in a more realistic way. It has been modified with Photoshop and also has a text written on, that will gracefully render over the texture, as you can see in the example.

The images will then be loaded and used to create the materials for the planet:

private var light:PointLight3D;
private var bumpSphere:Sphere;
private var bumpSphereMaterial:ShadedMaterial;
private var bumpBitmapMaterial:BitmapMaterial;
private var bumpEnvmapShader:EnvMapShader;


private function init3D():void {
light = new PointLight3D(false, false);
var bitmapAsset:BitmapAsset = new earthTexture() as BitmapAsset;
var envmapAsset:BitmapAsset = new envmap() as BitmapAsset;
var bumpTexture:BitmapData = (new earthBump() as BitmapAsset).bitmapData;
bumpBitmapMaterial = new BitmapMaterial(bitmapAsset.bitmapData);
bumpEnvmapShader = new EnvMapShader(light, envmapAsset.bitmapData, envmapAsset.bitmapData, 0, bumpTexture);
bumpSphereMaterial = new ShadedMaterial(bumpBitmapMaterial, bumpEnvmapShader);
bumpSphere = new Sphere(bumpSphereMaterial, 300, 10, 10);
scene.addChild(bumpSphere);
}

The planet Earth is created as a sphere, that uses bumpSphereMaterial for rendering. The bumpSphereMaterial is built using the initial planet texture image and an environmental map shader: the shader mixes together a light source, an environment texture image and the bump map, that will be used to render the sphere in a fast and efficient way. The sphere is then added to the 3D scene and is ready for rendering.

At this point the planet is drawn on the screen, but motionless. We can easily make it move along it's y axis, by overriding a method that is called by Papervision3D whenever it is required to render the object again:

override protected function onRenderTick(event:Event=null):void {
bumpSphere.yaw(1);
super.onRenderTick(event);
}

The yaw() method, along with pitch() and roll(), is used to rotate the object around one of its axis. Other convenience methods, such as moveForward(), make it a lot more easy to move objects around the scene, which is a 3D space.

Papervision3D offers a complete set of 3D functionalities under an excellent performance, considering that all the rendering is done inside the flash player, without any hardware support. The performance is guaranteed by fast algorithms and the possibility to use culling, clipping for those objects that are outside the view frustum and can be always be enhanced by the developer. A careful design of the application can consider variations of the level of detail of the various objects on the scene, with regard to the number of polygons or number of objects visible at once; one should always keep in mind that the rendering is done with software emulation, in flash player 9, but will benefit from the new flash player 10, which also considers the z dimension. Flash player 10 however will not have complete support for 3D and Papervision3D will only benefit from its enhancements.

There is much more Papervision3D can do, such as object interactivity or support for third party textures. The library has complete support for the well known Collada file format, thus it is able to use textures and animations created by software like Maya, 3DS Max or Blender, as long as they export in a Collada format.

You can see the compiled example by following this link: Papervision3D example.

October 31, 2008

Livecycle Data Services and Flex Development Best Practices

techconnection.jpg
Adobe Italy and Comtaste are organizing a series of events about Enterprise Flex development with Livecycle Data Services and BlazeDS.
The next date is on 27 November at the Adobe office in Milan and it's titled:

Livecycle Data Services Best Practice Development

The event is free but it needs to be registered.
This is the agenda of the day:

09.30 - Registration
10.00 - Presentation
10.15 - LiveCycle Data Services installation Best Practice
10.30 - Architectures, Frameworks and Design Patterns
11.00 - J2EE and LiveCycle Data Services:a perfect wedding
11.30 - Coffee Break
11.45 - Debuggin tecniques for enterprise Flex applications
12.00 - Enterprise Desktop applications with Adobe AIR
12.15 - Integrating LiveCycle Data Services with AIR
12.30 Q&A

During the event a discount code for MAX Conference Milan will be distributed.

About October 2008

This page contains all entries posted to Comtaste Consulting | Enterprise RIA consulting and development in October 2008. They are listed from oldest to newest.

September 2008 is the previous archive.

November 2008 is the next archive.

Many more can be found on the main index page or by looking through the archives.

Powered by
Movable Type 3.33