EaselJS: An Open source JavaScript library

Problems or what is missing in HTML5 Canvas : I’m looking into HTML 5 canvas API to make some small HTML5 games or Interactive apps, I found that it is difficult and time taking if we need to manage, update or animate multiple shapes and bitmaps inside Html5 Canvas, because HTML5 Canvas element does not have a concept/API of a display list to have multiple interactive/display object(s) in side Canvas. Instead, it provides a single Canvas on which to draw, and it is up to the developer to determine what needs to be rendered and when.

Solution or Good news for action script/RIA developers : Very easy to stat working with HTML5 canvas and developed some interactive canvas based app or game very quickly because EaselJS provides all most same display list as we have in ActionScript for example Stage, Sprite, addChild, Bitmap … etc.

What is most attractive about EaselJS: Library is lightweight and easy to set up written by Grant Skinner, a session on EaselJS is given by Grant Skinner in Adobe Max 2011 (MAX 2011 Develop) on Day 3 : Building Interactive Content Using HTML5 Canvas.

Some of the examples are : from Mike Chambers, game, sparkles, drag & drop, localToGlobal, sprites, graphics, bar graph, filter effects

Image

“Pirates loves daisies”

EaselJS API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers.

The key classes are:

DisplayObject

Abstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, skewX, skewY, alpha, shadow, etc) that are common to all display objects.

Stage

The root level display container for display elements. Each time update() is called on Stage, it will update and render the display list to its associated canvas.

Container

A nestable display container, which lets you aggregate display objects and manipulate them as a group.

Text

Renders text in the context of the display list.

Bitmap

Draws an image, video or canvas to the canvas according to its display properties.

BitmapAnimation

Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.

Graphics

Provides a simple but powerful API for rendering retained vector graphics to a canvas.

Shape

Renders vector art via the Graphics object within the context of the display list.

DOMElement

An experimental display object that allows you to manage an HTML element as a part of the display list.

Filter

The base filter class that other filters (ex. BoxBlurFilter, ColorMatrixFilter, etc) extend.

There are also helper classes for working with sprite sheets, managing interactions, and dealing with geometry. Have a look at the full API documentation for more info.

While in alpha, the project is not accepting contributions. However, once it is in beta the project will migrate to Google Code or Github and will then be open for contributions.

Advertisements

I’m using CS 5 trial which will expire in next few days, so i was trying to use PFI with flex Builder 3, PFI works fine with Flex Builder 3 :), here are the steps……….

1. Download PFI from Adobe.
2. Make hello world AIR app in Flex builder (Use AIR SDK ver 2 or Above, App using AIR SDK 1.5 or less doesn’t work for PFI)
2. Use below command line to make ipa from your AIR App.

pfi -package -target ipa-app-store -provisioning-profile [path of provisioning profile here] -storetype pkcs12 -keystore [path of certificate.p12 here] -storepass [certificate password here] [path of target (yournew.ipa) file here] [path of yourApplication-app.xml here] -C [path of yourApplication.swf here] [path of Default.png (app initial image/splash screen) here] [put path of Icon_57.png here]

3. Deploy .ipf to iphone (more details https://flexyria.wordpress.com/2010/09/25/steps-for-using-packeger-for-iphone-pfi/) .

Steps for using packager for iPhone (PFI)

Posted: September 25, 2010 by Natwar Garg in AIR, CS 5, iphone, Packager for iPhone
Tags: , , , ,

Steps for Adobe AIR apps(swf) to iPhone apps(ipa) using Packager for iPhone feature of Flash CS 5
I tried PFI feature and did few sample apps with successful deployment on iPhone , iPod (touch), iPad

here are the basic steps :

1. Get developer certificate (.p12) and Provisioning profile from Apple (http://developer.apple.com/devcenter/ios/index.action)

2. Make a simple helloworld AIR (desktop) app in Flash CS 5.
3. Goto the iPhone Settings dialog box : Choose File > iPhone Settings

set the following :

General tab
•Output file – output filename (yourApp.ipa).
•App name – your app name.
•Version-your app ver no.
•Aspect ratio (portrait or landscape).
•Full screen(true/false)
•Auto orientation – true/false
•Rendering – CPU/GPU/Auto
•Included files—
– SWF file (.swf)
– Application descriptor file (.xml)
– Initial screen art file (Default.png)
Deployment tab
•iPhone digital signature—set P12 certificate and the password for the certificate.
•Provisioning file—set provisioning file for this application.
•App ID – unique ID for your app.
Choose your deployment type from following :
•Quick publishing for device testing
•Quick publishing for device debugging
•Deployment – Ad Hoc (I’m using Ad Hoc option, Please note there is two kind of certificate (Adhoc and dev), you need ad hoc certificate for choosing this option)
•Deployment – Apple App Store
Icons tab
On the Icons tab, specify the location of 29 x 29-pixel, 57 x 57-pixel and the 512 x 512-pixel icon image.

6. Click Publish and wait for publishing IPA file.

7. Download latest iTunes version from Apple, run iTunes, connect your device (iPhone), put your published file (yourapp.ipa) with its provisioning profile into app section in iTunes and sync this new app with your device, wait for synchronization completion, now all done your app is deployed in your connected device 🙂 .


Breaking news for all flash platform developers ……..

Special Update: September 9, 2010
Apple’s recent announcement that it has lifted restrictions on its third-party developer guidelines has direct implications for the Packager for iPhone. Which was banned by Apple in April 2010.

It means deployment of Action-script 3.0/AIR Apps into Apple device [IOS (.ipa)] using Adobe CS5 Packager for iPhone is back in action :).
Flash app into IOS
for more details :
http://blogs.adobe.com/conversations/2010/09/great-news-for-developers.html
http://labs.adobe.com/technologies/packagerforiphone/
http://www.apple.com/pr/library/2010/09/09statement.html
http://www.pcmag.com/article2/0,2817,2368965,00.asp
http://www.toptechnews.com/story.xhtml?story_id=023002AKJH94

There are many AIR applications built using Actionscript 3 for iOS devices that have been created by the Flash Platform developer community, including the following, which are now available for you to download from the Apple App Store.
Boost Your Brain
RED Hood

get more example application from http://labs.adobe.com/technologies/packagerforiphone/# —-> Example Section


Good news for all flash platform lovers that new Samsung tablet with Android 2.2 (Froyo) and will have Flash Player 10.1. This looks gorgeous.

Samsung Galaxy Tab

for more details –
http://galaxytab.samsungmobile.com/press/pressrelease.html

http://www.informationweek.com/news/hardware/handheld/showArticle.jhtml?articleID=227300251&subSection=News

Flash on WePad

Posted: September 8, 2010 by flexyria in ActionScript3.0, Adobe Flex, CS 5, Flash, Flex, Flex RIA

Flash on WePad– WOW good news for all flash/flex fans that “We”Pad have support for Flash and AIR Apps …………………………… because it is a product for all ………………..  its a “We”Pad not only “i”Pad” (iPad dosn’t support Flash/AIR)

Check out this cool tablet – Neofonie WePad; a potential iPad killer!

Just as the name suggests WePad is another tablet PC, which boasts of being far powerful than the Apple iPad, and being the true iPad killer; see what the WePad has got!

The Neofonie WePad will be German production boasting of 11.6″ display, 1.66GHz Intel Atom N450 processor (indeed faster than the iPad), and even a 1.3MP webcam!

And, that’s not all, the WePad features a bigger and better display, and looks superior to the Apple iPad in just about every way.

The new WePad also features ambient light & motion sensor, optional GPS, and an internal microfan to kick some serious asses (iPad is on TOP of the list!)

WePad is better in many area than iPad …… below is the complete comparison details

http://wepad.mobi/en


Flash-iPhone, very soon flash developer can develop Apple iPhone native application using next version of Flash IDE (CS 5), Action script developer need not to learn objective-c for developing iPhone application, they can write the code in action script 3.0 and just need to set the publishing settings for iPhone, Flash developer can also upload their iphone application (developed using CS 5) at apple store (same as other iphone native application) for iPhone Users to download and use into iphone.

Announcement made by Adobe in Adobe Max 2009. many other announcement for Flash and mobile are made by adobe like next ver. of flash player (10.1) can run on all most all popular mobile platforms, including RIM®, Android™, and Nokia phones.

for more details :

http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/

http://max.adobe.com/online


Here I want to list out and discuss about advantages of using Flex for developing any Rich Internet Application, why most of the software companies are migrating their RIA development in Flex.

In my knowledge below are the some advantages

  1. Cross Platform – to run Flex/Flash Application client(end user) just need flash player 9 installed in his/her machine (Currently installed on 98.8% of the world’s computers), Flex RIA application run/ behave same in different browsers, where there are many different popular browsers available in different version, most of the time of RIA application development is gone in different browser compatibility issues in development of RIA other than Flex RIA.
  2. AIR Application– Development of desktop version of any Flex application is very easy and less time taken than others (using AIR).
  3. Multimedia support (audio, video, 2D, 3D animation , images)
  4. Server side support for Multiplayer application development.
  5. Charting components (for Reporting large data reports in graphical presentation )

these are just few of many other advantages, I’m looking forward by making this blog to enhance/increase this list

Everyone welcome here for adding or sharing their views