Now a days, RIA developers having high expectations from the new tool introduced by Adobe with the named ‘Adobe Edge’, for RIA interactive applications. Some people even say that the new change or trend in HTML5 can compete with great RIA tool like Adobe Flash. As I understand, Flash capabilities are more powerful and more extendable then the current versions of HTML5. At the moment, I don’t see any competition between Flash and HTML5. I think both will have their own place in the market.
Adobe Edge is new promising tool that provides an environment to create HTML5 animations through a timeline (something like flash timeline) and interface using interactive methods and functionalities. It can makes HTML5 animations very easy for designers who do not have experience with coding, and allows them to create HTML5 animation without writing a single line of code.
In this post, I would like to show you how to create a simple HTML5 banner animation using Adobe Edge. Before staring the tutorial, you can download Adobe Edge latest from Adobe Labs.
Assuming that you have some basic idea about animations with Adobe’s other tools.
Step 1
Let’s start by opening Adobe Edge. Open New File from File menu. Set document width and height properties from Properties panel on left side. Here set Width to 600 px and Height to 200 px. Also you can set title of the document from the Properties panel.
Now from the Properties panel, open the background color picker and set the background color. And set the Overflow to Hidden to hide the objects that are off screen and also you can set Autoplay options.
Choose Import from the File menu and open Edge icon type image and place it in the banner as shown below and set the Edge icon image Width to 180 px and Height to 160 px.
Step 4
Use Text tool, type “Adobe Edge” and set dimension and font size of the text area.
Step 5
Now you will animate the Adobe Edge icon and text through the timeline. The timeline in Adobe Edge is similar to other Adobe applications, such as After Effects. When you create an object on the stage you will find that a separate layer is created for it in the timeline. Each layer has sub layer that includes the properties of each layer. In order to create the animation, we will need to create keyframes that represent the change in layers content properties like position. As shown in below screen you can change the translate X and Y position of object.
Now the time line indicator positioned at the beginning of the timeline, move the Adobe Edge icon image to top of the stage and moves the timeline indicator by a few frames and drag the Adobe Edge icon image to its final position in the stage. Apply same thing with text object. Also you will get the animation area of object by different color.
There is an interesting panel known as Elements Panel. It simultaneously servers two purpose. It exposes the document’s DOM and acts as a Library for the items or objects used in your application. The order in which elements appears in this panel is the order in which they appear in the timeline. If you move a timeline layer up or down in the layering order, that change is instantly reflected the Elements panel and vice versa.
Save the file and you can preview it in browser by selecting “Preview in Browser” from File menu.
In this post just show how to create a simple HTML5 animation using Adobe Edge. I think the tool is very simple, it would be helpful for creating animation, especially because in HTML5, it would be more complex to create animation using manual coding.
You will get a quick overview of the output folder from below screen. It contains the Adobe Edge included JavaScript files in “edge_includes” folder, application related JavaScript files and “images” folder contains assets used in the application.
No comments:
Post a Comment