Designing User Interfaces has always been more exciting to me than traditional Art or traditional Print Design. The reason being, User Interfaces (U.I.’s) combine Graphic Design with Interactivity and Animation. Subjects I’ve studied, worked with, and loved for years. In my new article, I talk about my recent observations in the field of User Interface Animation and cover applying the traditional Principles of Animation to User Interfaces in a few experiments using Flex Builder and Flash. Click here to read the full article.
Author Archive
Pre-viz for Chat Application UI/User Experience (Login/Inbox)

(Play Quicktime Movie) Pre-viz for Chat Application User Interaction v01 by Dolores Joya 08
The practice of making a Pre-viz (lookup definition) to map out and think thru a complex sequence of events prior to executing them, has been around in Hollywood for awhile. Emerging RIA technologies like Adobe Flex and Silverlight are finally bridging Design and Development pipelines to blend 3D, Interaction, Animation and Applications into a rich seamless user experience.
This example is my creative thoughts on how the user experience for a Chat Application could be when a user is alerted to take an action and logs in to receive new messages. The bouncing icon indicates user action is required. Potentially, I believe the user would already be logged in. The background should really be the user desktop. I removed all the traditional chrome of the browser and application window (which I think may become a standard practice in the future for entertainment/social networking type apps. Video players already do this.). Just in doing this short pre-viz I had many realizations of what could and probably could not be done. Also, I had many more new ideas to wow and lull the user into interacting more with an interface.
With the help of Maya and After Effects, I’m finally able to get these thoughts down on screen. I did try to execute this concept with keyframed SWC’s embedded in Flex components, thru timeline animation in Photoshop and Flash. In the end, the Maya/After Effects combination seemed to offer the most direct route to executing my concept.
I believe the future of User Experience Design, Interactivity, RIA’s, User Interface Design and other interactive mediums will have the Designer move into pre-vizing the interactivity after or parallel to Photoshop mock-up stage. In my experience the static Photoshop mock-up doesn’t reflect the life or UX of the application and pre-viz can fill that void. Currently, many teams already do a pre-viz prior to development usually in Powerpoint or After Effects. The addition of Autodesk Maya will come into play when more user experiences are built Papervision 3D. Now that Flash Player 10 supports more 3D and Photoshop and After Effects support more 3D and Maya supports Photoshop files the pipeline seems to be linking up nicely.
3D Rose Shader Network & Collada Dae
I’ll forever be a student of 3D and continue to study Computer Graphics. It’s my belief that 3D will merge with Web/Devices/Interfaces and other Technologies we interact with in the future, so pursuing 3D has been part of my study for the last 10 years and will continue to be in the future. Software Applications, Processors, Bandwidth, and the Programming Capabilities that are coming to light in recent years has been amazing to watch.
Here’s a look at what I’m working on currently. This work includes concepts of Setting up Shader networks, Displacement maps, and Exporting Collada Maya FBX .DAE’s from Maya 2009.
I started with a platonic solid primitive from the polygon menu in Maya 2009. I left the shape with the default settings. My plan for this project is to doing nothing other than understand shader networks and connecting shader nodes within the Maya Hypershade window and to just HAVE FUN.
I applied a base shader to my platonic solid to start. In Maya there’s many shaders to start from. I use the “Layered Shader”.
PLEASE NOTE: Upon export to COLLADA.dae the Maya 2009 FBX.DAE exporter doesn’t support the Layered shader, so my platonic solid was stripped of this shader and assigned a default Lambert
= Weak. So the .DAE is just the solid with a basic shader.
Quoting from a book I am currently reading “Advanced Maya Texturing and Lighting” by Lee Lanier (Excellent).
A Definition of Shaders
A shader is a program used to determine the final surface quality of a 3D object. A shader uses a shading model, which is a mathematical algorithm that simulates the interaction of light with a surface.
Connecting Nodes in the Maya Hypershade Window
In the spirit of experimentation I add a Cloth texture and a Ramp Texture (a type of Gradient) with the type set to Tartan to the Layered Shader. I also add Cloth to serve as the Displacement Channel to the polygon object.
An explanation of nodes from Lee Lanier is very well put as follows…
The Hypershade window allows the connection of various Maya nodes. Technically speaking, a node is a construct that holds specific information plus any actions associated with that information. A node might be a curve, surface, material, texture, light, camera, joint, etc…
Here’s a look at my Shading Network in the Maya Hypershade Window.
Here’s a look at the render with some minor editing in Photoshop. You can download and work with this file for your own creative endeavors.
I exported the polygon object as a COLLADA fbx/dae out of Maya 2009. There’s not a COLLADA plugin available yet for this version so I use Maya’s built in exporter. Like I said the exporter didn’t keep my shader but here’s a look at the .DAE file in notepad.
COLLADA Dae Export from Maya 2009
<?xml version="1.0" encoding="utf-8"?>
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.0">
<asset>
<contributor>
<author></author>
<authoring_tool>FBX COLLADA exporter</authoring_tool>
<comments></comments>
</contributor>
<created>2008-11-25T16:06:42Z</created>
<modified>2008-11-25T16:06:42Z</modified>
<revision></revision>
<title></title>
<subject></subject>
<keywords></keywords>
<unit meter="0.010000"/>
<up_axis>Y_UP</up_axis>
</asset>
<library_materials>
<material id="layeredShader1" name="layeredShader1">
<instance_effect url="#layeredShader1-fx"/>
</material>
</library_materials>
<library_effects>
<effect id="layeredShader1-fx" name="layeredShader1">
<profile_COMMON>
<technique sid="standard">
<lambert>
<emission>
<color sid="emission">0.000000 0.000000 0.000000 1.000000</color>
</emission>
<ambient>
<color sid="ambient">0.500000 0.500000 0.500000 1.000000</color>
</ambient>
<diffuse>
<color sid="diffuse">0.500000 0.500000 0.500000 1.000000</color>
</diffuse>
<transparent>
<color sid="transparent">0.000000 0.000000 0.000000 1.000000</color>
</transparent>
<transparency>
<float sid="transparency">0.000000</float>
</transparency>
</lambert>
</technique>
</profile_COMMON>
</effect>
</library_effects>
<library_geometries>
<geometry id="pSolid1-lib" name="pSolid1Mesh">
<mesh>
<source id="pSolid1-lib-Position">
<float_array id="pSolid1-lib-Position-array" count="36">
0.850651 0.000000 -0.525731
0.850651 -0.000000 0.525731
-0.850651 -0.000000 0.525731
-0.850651 0.000000 -0.525731
0.000000 -0.525731 0.850651
0.000000 0.525731 0.850651
0.000000 0.525731 -0.850651
0.000000 -0.525731 -0.850651
-0.525731 -0.850651 -0.000000
0.525731 -0.850651 -0.000000
0.525731 0.850651 0.000000
-0.525731 0.850651 0.000000
</float_array>
<technique_common>
<accessor source="#pSolid1-lib-Position-array" count="12" stride="3">
<param name="X" type="float"/>
<param name="Y" type="float"/>
<param name="Z" type="float"/>
</accessor>
</technique_common>
</source>
<source id="pSolid1-lib-Normal0">
<float_array id="pSolid1-lib-Normal0-array" count="36">
0.850651 0.000000 -0.525731
0.850651 -0.000000 0.525731
-0.850651 0.000000 0.525731
-0.850651 0.000000 -0.525731
-0.000000 -0.525731 0.850651
-0.000000 0.525731 0.850651
0.000000 0.525731 -0.850651
-0.000000 -0.525731 -0.850651
-0.525731 -0.850651 0.000000
0.525731 -0.850651 -0.000000
0.525731 0.850651 0.000000
-0.525731 0.850651 0.000000
</float_array>
<technique_common>
<accessor source="#pSolid1-lib-Normal0-array" count="12" stride="3">
<param name="X" type="float"/>
<param name="Y" type="float"/>
<param name="Z" type="float"/>
</accessor>
</technique_common>
</source>
<vertices id="pSolid1-lib-Vertex">
<input semantic="POSITION" source="#pSolid1-lib-Position"/>
</vertices>
<polygons material="layeredShader1" count="20">
<input semantic="VERTEX" offset="0" source="#pSolid1-lib-Vertex"/>
<input semantic="NORMAL" offset="1" source="#pSolid1-lib-Normal0"/>
<p>1 1 9 9 0 0</p>
<p>0 0 10 10 1 1</p>
<p>0 0 7 7 6 6</p>
<p>0 0 6 6 10 10</p>
<p>0 0 9 9 7 7</p>
<p>4 4 1 1 5 5</p>
<p>9 9 1 1 4 4</p>
<p>1 1 10 10 5 5</p>
<p>3 3 8 8 2 2</p>
<p>2 2 11 11 3 3</p>
<p>4 4 5 5 2 2</p>
<p>2 2 8 8 4 4</p>
<p>5 5 11 11 2 2</p>
<p>6 6 7 7 3 3</p>
<p>3 3 11 11 6 6</p>
<p>3 3 7 7 8 8</p>
<p>4 4 8 8 9 9</p>
<p>5 5 10 10 11 11</p>
<p>6 6 11 11 10 10</p>
<p>7 7 9 9 8 8</p>
</polygons>
</mesh>
</geometry>
</library_geometries>
<library_lights>
<light id="pointLight1-lib" name="pointLight1Mesh">
<technique_common>
<point>
<color sid="color">1.000000 1.000000 1.000000</color>
</point>
</technique_common>
<technique profile="MAYA">
<intensity sid="intensity">1.000000</intensity>
</technique>
</light>
<light id="pointLight2-lib" name="pointLight2Mesh">
<technique_common>
<point>
<color sid="color">1.000000 1.000000 1.000000</color>
</point>
</technique_common>
<technique profile="MAYA">
<intensity sid="intensity">1.000000</intensity>
</technique>
</light>
</library_lights>
<library_visual_scenes>
<visual_scene id="RootNode" name="RootNode">
<node id="pSolid1" name="pSolid1">
<instance_geometry url="#pSolid1-lib">
<bind_material>
<technique_common>
<instance_material symbol="layeredShader1" target="#layeredShader1"/>
</technique_common>
</bind_material>
</instance_geometry>
</node>
<node id="pointLight1" name="pointLight1">
<instance_light url="#pointLight1-lib"/>
</node>
<node id="pointLight2" name="pointLight2">
<translate sid="translate">0.632895 0.000000 0.598610</translate>
<instance_light url="#pointLight2-lib"/>
</node>
</visual_scene>
</library_visual_scenes>
<scene>
<instance_visual_scene url="#RootNode"/>
</scene>
</COLLADA>
Download the zipped file containing the layered Photoshop file with the render and experiment yourself. Also in this file is the COLLADA dae.
Flex + Flash + Maya + zBrush
Here’s an experiment I did with some of my favorite Computer Graphics tools mashed up to together. I’ve been working heavily in Pixologic’s zBrush (Awesome 3D Sculpting) and Maya 2009 (Out of Control Animation) when I’m not creating out Flex UI Designs and Flash Skins. Ultimately, I want to push everything together to create innovative and inspirational user interface widgets and what-not. So here is the output from those pipelines melded into a wicked skull.
Here is the original zBrush Sculpt. This is the version I intended to use in my Maya Animation but I’m still figuring out Displacement Maps in Maya/zBrush.

zBrush Sculpt of Skull by dolores joya moore
Fixing the Flash CS3 Flex Skin Template classpath Bug
I’ve been using the Flex Component and the Flex Skinning Templates for Adobe Flash CS3 for awhile now. I couldn’t figure out why Flash CS3 would throw up this error at certain times:
“A definition for the base class could not be found in the classpath. Please enter the name of a class that is defined in the classpath, or enter the default base class ‘flash.display.MovieClip’.”
Today I found the answer in the comments of the Flex Community Blog post about “Turning Flash CS3 assets into Flex Components“.
If you’re using the Skinning Templates by Adobe to create new skins for your project you’ll want to pay attention to this little item during your workflow.
I usually open the Flex Skinning Template in Flash CS3 via the “New” dialog box.
In the example of skinning a Flex Button Component. Once I open the Flex skinning template, I duplicate the symbol in the library because more often than not I will be creating multiple Flex Skin’s for a single Flex Button Component.
If you’ll notice below in the “Symbol Properties” dialog box the default Base class for the component is “mx.flash.UIMovieClip”
If you duplicate the symbol (see below), Flash CS3 changes the Base class to “flash.display.MovieClip”.
The thing to note here is if you publish your file and import the new skin into Flex Builder, your skin states will automatically play like an animated gif. Also, if you try to type in the “mx.flash.UIMovieClip” Base class path you will get the error message above.
The admin on the Flex Community blog today resolved this for me in his comments on this post and quoted below for clarity.
“I’m sorry, It appears I have mislead you with an error. I went through my steps from the beginning, and found that you need to set the base class as flash.display.MovieClip. Flash then automatically changes it to mx.flash.UIMovieClip after you click commands -> convert symbol to Flex component. You can see this change if you go to the linkage window for the symbol after you create a Flex component from it. I’m sorry for the frustration, I try to keep these articles as error free as possible, but this one slipped through. Try this and let me know how it works for you.
If you still have a problem, let me know before googling your eyes out further (I know how that is), and I’ll help you get it. It’s a great tool.
P.S. I have corrected this in the article.”
So if you encounter this problem when you are trying to bring in an animated Flash skin into Flex, converting the symbol to a Flex component command could help. See below.
Thanks Admin, I’m not sure who you are but you helped me a lot today.








