Tree3D 2.0Tree3D 2.0 component
The tree3D component is developed by Zerofractal, a studio based in Bogotá, Colombia, Miami US and Toronto, Canada. Zerofractal is an award winning new media and creative company with eight years experience in the execution visual communication projects, 3D animation, web development, graphic design and even mobile content.
So, the tree3D component is as stated by the developer(s), a three dimensional tree component. This is in other words a component which allows you to build hierarchical menu systems as a simulated 3D environment. The image below can give you an idea of what to expect from the tree3D component.
Image 1: Tree menu structure example from Zerofractal
Before I go on, it is important to emphasize on two important prerequisites to using this component; it only works for Flash CS3 and the Flash CS3 component manager, and the component is ActionScript 3.0 based, thus knowing the ActionScript 3.0 syntax is required for being able to handle the tree3D component.
This being said, I now can focus on the component itself. Firstly, installation is very simple. If you’ve never installed a component, Zerofractal offers a great User Guide that is available with the component (.mxp file), which will thoroughly guide you through the process and more.
So how does it look like, well image 2 shows you the component on stage, with its related parameters and the component inspector. As you can see the component offers a wide range of customizable parameters, which allows for a huge amount of different component structures and behaviors in the simulated 3D space. Parameters to alter range from object size to z-axis depth positioning, to Papervison3D settings and properties.
Image 2: The component and it properties in flash
However this immense amount of tweaking possibilities makes it difficult for any developers to foresee the effect without testing the movie after each alteration of parameters. Thankfully there’s an acceptable solution for this, this is a flash movie which offers most of the properties to tweak in real time showing the effect on the menu and its objects. Image 3 shows that most of the component properties are available for real-time tweaking and preview windows which allows for immediate response to property changes. This is great addition for tree3d newcomers as testing the different effects and possibilities in flash may be time consuming and require a lot of trial and error at the beginning.
Image 3: The preview flash movie
Technical
Tree3D is a dynamic component which gives a broad amount of flexibility. Knowing the possibilities it offer, it’s time to move to a more technical point of view of the component. The greatest feature of this component apart from the more aesthetical power present above is its data driven power, also known as XML driven menu tree.
All objects in the flash movie are referenced using XML data. Data can be internal to the flash file, but most efficiently and dynamic is the use of external XML files. The graphical elements such as the icons, the captions, the breadcrumbs and URLs are all controlled using XML data, which again for larger systems can be generated by databases. Hence this is what makes this component very versatile and scalable.
The component can fit any flash movie size, as it is scalable without affecting the object it will contain. The component will support unlimited levels of hierarchy, however at some point at the cost of computer performance. The more the hierarchy is deep the heavier the 3D space will be thus requiring more CPU power. Again this is not the only problem occurring due to hierarchy size. The navigation may after a certain level, prove cumbersome, at some point impossible as the amount of items presented in the movie might be overwhelming, thus disappearing from movie borders. This is however not a huge problem as tree3d offers a customizable breadcrumb functionality, which allows for easy navigation and better user control, as well as a fog and dof (depth of field) effect that can make items in the back fade out or blur making navigation easier.
There are a few drawbacks that require some attention. One was mentioned above, at hierarchy grows larger, there is the problem of easy navigation even with support from breadcrumbs. Another problem regarding the size of hierarchy is if the hierarchy is wide, some menu items might be outside the movie borders.
Image 4 – Wrong settings may generate some problems.
Of course this can be avoided by changing the component settings; however this reduces the components ability to be flexible and scalable. By this if adding more object to render is required the component will not scale itself to avoid this problems.
These problems are of course possible to address, using the class references guide provided and adding functionality to the tree3D component classes. This again necessitates a higher level of knowledge and consciousness regarding ActionScript 3.0, OOP and classes.
Nevertheless, I have to say this component is robust, supports any level developer and provides a different and flexible way of presenting a menu hierarchy. It is very easy to get accustomed to, even if it requires a lot of playing with, but then again who says that’s a bad thing? Once you get a hang of it will work magic for you. It is magnificently customizable, from graphic elements that can be animated, text/captions that are dynamic and customizable and totally XML-driven.
The 3D effects are impressive and smooth, however take in consideration hierarchy size. The support file are well build and user centered, the user guide is clearly well planned and covers all necessary features and finally for those more dedicated developers a class reference guide is provided for added knowledge, thus giving even more freedom to customize the tree menu. Most importantly, not all features have been covered here, such as vertical navigation, customized scrollbar and more. So definitely consider the tree3d component, I on my side will.
by Zerofractal Studio
