Archive

Archive for the ‘Open Source’ Category

HTML5 Banner Using Adobe Edge

February 5, 2012 2 comments

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.

AdobeEdge

Step 2

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.

AdobeEdge

Step 3

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.

AdobeEdge

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.

AdobeEdge

AdobeEdge

Step 6

Save the file and you can preview it in browser by selecting “Preview in Browser” from File menu.

AdobeEdge

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.

AdobeEdge

Advertisements

Features of Next Version of Flex… Hero

August 25, 2010 Leave a comment

It’s really rocking news for Flex Developers. Adobe introduces the next release of the Flex SDK, code-named Hero. The Hero release has three main base themes:

• Multi-Screen Development

It will be great for developers if have an single framework to build applications that target the web, desktop or mobile devices. The Hero release of Flex will enable developers to continue to create application experiences that translate well across platforms, in addition to making it easy to build applications that work well on a wide variety of mobile devices. Hero will augment a number of existing Flex components with mobile- and touch-optimized skins and functionality and will also add new components that support mobile-specific UI patterns. Developers already familiar with core Flex concepts like data binding, MXML and dynamic layout will be able to quickly leverage that knowledge into building applications that can target numerous mobile devices.

You can get more information about the new features in the upcoming release version of Flex from Flex and Mobile Whitepaper and feature specifications.

• Spark Maturation

In Flex 4 an interesting component called Spark was introduced which allows for designers and developers to separate component logic from behavior and visuals of the component. Spark has proven to be a key addition to the Flex framework, and the Hero release focuses on building more Spark-based components as well as providing new Spark capabilities to existing Flex features. Some of the new Spark components being offered in the Hero release include Spark Form, Spark Image and Spark DataGrid controls. These new Spark components not only provide parity with the previous MX versions, but also expose capabilities that allow for more modern component designs.

• Large-Application Development

As people use Flex to build much more complex interesting and mature applications so the framework should support these efforts. The next version of Flex aims to improve the compilation experience and memory consumptions for large applications. And also runtime shared libraries feature improvements introduce in Hero.

You can get more information from here.

So friends, Enjoy RIA… 🙂

Great features of Flash Player

January 11, 2010 Leave a comment

As a flashers we know that Multi-touch and gesture supports are great features of Adobe Flash Player. Developers are waiting, to deal with such superb features described in Flash Player 10 feature list.

Thanks, to Lee for sharing the great feature with an nice demo. You can see the superb video from here.

You can get more detailed information of these features from here, an superb article by Christian Cantrell.

Some of the good demos are here, for the excellent features.

Enjoy RIA… 🙂

Adobe Social Service To Develop Social Applications

October 31, 2009 Leave a comment

Adobe had released a service to use a single set of APIs to integrate your application with social networks including Facebook and MySpace. Developers can easily develop social applications by using the APIs and also these services are insulates developers against underlying social network changes, the service adopts to those changes so as a developers you need not have to take tension to update your application. 🙂

Developers can get information, to use the new API to develop social network application, from here.

You can download the Social Service Library from here.

And as usual environment provided by Adobe to share the social application development problem at here.

Enjoy RIA… 🙂

Flash, AIR Application Development Guide By Experts

October 21, 2009 Leave a comment

To develop any Flash, Flex or AIR application or game development there are lots of important factors like workflows of the application, for game application important techniques of for development. There are some interesting articles by experts are listed below :

1 ) An introduction to developing games on the Adobe Flash Platform by Samuel Asher Rivello

2) From black box to contextual applications by Eric Oldrin

3) The edge of Flash by Rob Ford

4) A guide to Adobe developer groups and resources online by Bryan Rinaldi

5) Unveiling WorkflowLab: A new tool for developing project workflows by Doug Winnie

6) Object Relational Mapping for the Adobe AIR developer by David Tucker

Enjoy RIA…. 🙂

Flash Builder And Flash Catalyst Help

October 15, 2009 Leave a comment


You can experience Adobe next-generation help, by Flash Builder and Flash Catalyst help application. The AIR application provides you reference content online and offline and some important features like:

• Access up-to-date definitive reference content online and offline
• Find the most relevant content contributed by experts from the Adobe community
• Comment on, rate, and contribute to content in the Adobe community
• Locate code examples with integrated code search
• Download Help content directly to your desktop to use and search offline
• Use dynamic navigation based on search results to find related content
• Enjoy content updates and feature enhancements without reinstalling the AIR app

You can install the AIR application from here.

Enjoy RIA 🙂

MAX Session Updates For RIA Developers

October 8, 2009 Leave a comment

MAX sessions updates are as below. There are some important discussion like important tips for web design, increasing performance of Flash, Flex, AIR applications and most important secrets behind Flash and so on .

1) CSS Tips and Tricks for Web Design
2) Tackling Memory and Performance in Flash, Flex, and Adobe AIR
3) SEO Secrets, Technology, and Magic Behind Flash

Enjoy RIA… 🙂