Archive for August, 2011


This month Adobe gifted a new web animations tool called Edge to HTML5 world. This tool is for HTML5web designer for creating interactive graphics on website using HTML5. Currently this is a public preview release version of Edge. According to Adobe this new tool Edge will let web coders bring animation similar to that created in Flash Professional, to websites using standards like HTML5, JavaScript and CSS. The layout of this tool is like same as Adobe Flash tool. Content created with Edge is designed to work on modern browsers including those on Adobe EdgeAndroid, BlackBerry, Playbook, iOS, HP webOS, and other smartphone mobile devices as well as Firefox, Google Chrome, Safari, and Internet Explorer. Still, with HTML5 being a relatively new technology, it doesn’t today deliver a consistent experience across the widest range of devices and browsers. Adobe’s Edge is a first dedicated IDE for HTML5.

Adobe’s Edge Tool Interface Preview

Adobe’s Edge Tool interface preview

Edge Preview Highlights

This version of Edge focuses primarily on adding rich motion design to new or existing HTML projects, that runs beautifully on devices and desktops.

# Create new compositions with Edge’s drawing and text tools.
# Import popular web graphics such as SVG, PNG, JPG or GIF files.
# Easily choreograph animation with the timeline editor. Animate position, size, color, shape, rotation and more at the property level.
# Energize existing HTML files with motion, while preserving the integrity of CSS-based HTML layouts.
# Copy and paste transitions, invert them, and choose from over 25 built-in easing effects for added creativity.

Reference link for Adobe’s Edge

Adobe Lab for Edge – http://labs.adobe.com/technologies/edge/
Download Link – https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_edge
Sample file for preview – http://labs.adobe.com/technologies/edge/resources/

edge_adobe


We already know that ActionScript3 and FlashPlayer10 have a Vectors class for typed arrays. This Vector class is just an array in which all of its members have the same type and in addition to ensuring the collection is type safe, this can also provide performance improvements over using an Array. Apart from this Adobe Flex framework also introduced a metadata tag for typed array, called [ArrayElementType]. So for end-user developer can use any of these for typed array creation. Here I am penning my observation on this based on my experience. Before moving further I want to give you the official definition of these two terms.

ArrayElementType metadata tag

When you define an Array variable in ActionScript, you specify Array as the data type of the variable. However, you cannot specify the data type of the elements of the Array. To allow the Flex MXML compiler to perform type checking on Array elements, you can use the [ArrayElementType] metadata tag to specify the allowed data type of the Array elements.

Adobe Live doc – http://livedocs.adobe.com/flex/3/html/help.html?content=metadata_3.html

Vector Class

The Vector class lets you access and manipulate a vector, an array whose elements all have the same data type. The data type of a Vector’s elements is known as the Vector’s base type. The base type can be any class, including built in classes and custom classes. The base type is specified when declaring a Vector variable as well as when creating an instance by calling the class constructor. With an Array, you can use the array access operator ([]) to set or retrieve the value of a Vector element.

Adobe Live Doc – http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/Vector.html

Observation

By definition both are available for typed array creation. As per adobe documentation [ArrayElementType] metadata tag works properly in MXML code, so here I am going to give you the comparative example in both MXML and AS3 code for detail analysis.

ActionScript3 Codebase:
Code:
vector_array_01

Result:
vector_array_02

Summary:
In the above example you can see that the [ArrayElementType] metadata tag is not working as it should be. As this is stated in adobe documentation that, the MXML compiler checks for proper usage of the Array only in MXML code; it does not check Array usage in ActionScript code. So we are moving into the MXML implementation. In the above example you will not get any compile time error only the runtime output is diverse.

MXML Codebase:
In this example I have created on custom template component in AS3 codebase and implemented that in MXML code. For more info on template component please check adobe documentation.

Code: This is a custom template component code.
vector_array_03

Result:
vector_array_04

Summary:
In the above example you can see that the component implementation in MXML is throwing error as expected. But in these scenarios there are no specific deference in Vector and ArrayElementType.

On the basis of above example using Vector class we can achieve the entire typed array based requirement. We have already tested and found that Vector is more performance oriented then Array. So we don’t have any specific reason to use [ArrayElementType] metadata. Instead of using [ArrayElementType] we should use Vector class for better performance.


Adobe released a preview version of interesting code free website designer tool called Muse. This tool is 100% code free, without writing a single line of code you can build your stylish and attractive website. Adobe Muse LogoThis is really interesting, I downloaded the preview version from Adobe lab and really enjoyed working on this.

Adobe already have a powerful website editor called Dreamweaver then why they introduced another one? The reason behind is Dreamweaver is for programmer to build website by writing code and this Muse is specially targeted for designer group those are very much familiar with DTP and printing software like inDesign. By using Muse designers are able to create websites as easily as creating a layout for print. Design and publish original HTML pages using the latest web standards, and without writing code.

The main feature of Adobe Muse are:
# Plan your project — Easy-to-use sitemaps, master pages, and a host of flexible, site-wide tools make it fast and intuitive to get your site planned out and ready for design.

# Design your pages — Adobe Muse is a WYSIWYG type of tool and it helps to design web pages very effectively. Combine imagery, graphics and text with complete control, flexibility and power (almost as if you were using Adobe InDesign).

# Add interactivity — Drag and drop fully customizable widgets like navigation menus and slide shows, embed HTML code snippets to include things like Google Maps, enable tool tips, rollovers and much more.

# Publish your site — Preview your site with Muse to see how it looks and test how it works. Then convert to a live website using Adobe for hosting, or export the HTML for hosting with a provider of your choice.

Adobe Muse Tool

For getting more please visit Muse official website – http://muse.adobe.com/

This tool is built by using Adobe AIR technology. If you are looking for online brochures page then this is for you but this is not accommodate complex and data interactive website. If you are a designer and want to develop attractive website in lesser time then this is for you. Lets see how this tool is welcomed by web designers.

Overall this is very interesting tool just give a try for this.