In this week’s RIA industry news update we’ll take a look at Adobe’s Creative Suite 5.5, the Adobe Developer Center for Flash Builder and the latest Flash Player update.
Adobe Creative Suite 5.5 Released!
After announcing the plans to release a mid-term version of the Creative Suite a few weeks back, Adobe has now officially released CS5.5 and all associated products. This includes the release of Flash Builder 4.5, Flash Professional CS5.5, and Flash Catalyst CS5.5. Trial downloads and direct purchasing options are now available for all suites and individual products through Adobe.com.
Adobe Creative Suite 5.5 software keeps you ahead of the rapid proliferation of mobile devices. Develop rich interactive apps for Android, BlackBerry, and iOS. Design engaging browser content in HTML5, and create immersive digital magazines. Mobilize your creative vision with the suite edition that’s right for you.
Products receiving the full CS5.5 treatment include:
Along with Adobe CS5.5 comes a new section of the Adobe Developer Center for Flash Builder. There is already a great resource on DevNet dealing with the Flex framework, but having an area specifically devoted to Flash Builder is a great improvement- especially with the host of great new features available in Flash Builder 4.5!
There is a new Flash Player update on the Android Market that supports hardware accelerated H.264 video on Android 3.0.1+ (Honeycomb) devices. This is a feature that has definitely been anticipated by users of Honeycomb tablets such as the Motorola Xoom, as it will improve both battery life and performance with playback of H.264 encoded video. This update also provides tighter browser and display integration with embedded Flash objects in HTML. Both of these features require an operating system update for Honeycomb.
For all other versions of Android, this update is simply bug fixes and security enhancements.
In the SWF you’ll see a Start button.When you click on this button, your mouse becomes a crosshair ready to do some damage. As you click around on the stage, a gunshot sounds and a bullet hole graphic gets added to the stage at the point where you clicked with the mouse.
Not as smooth as the new Native Cursor in FP10.2 eh?
Step 1: Downloading and Setting up the Flex SDK
Before you can code the Native Cursor you need to make sure you have the correct Flex SDK. For this tutorial we will be using the cutting edge “Hero” SDK. I downloaded the one with a build date of Thu Feb 3, 2011(4.5.0.19786). Once you download it you will need to extract it; I extracted my copy to my C: drive.
Open Flash Builder and go to Menu > Window > Preferences. Choose “Flash Builder/Installed Flex SDKS” then click on the “Add” button.
Browse to the location where you extracted the SDK.Press the “OK” Button when you are finished.
You will be taken back to the installed SDK’s screen.Check the box next to the newly installed SDK and press “Apply”.We are now ready to use the new SDK.
Step 2: Setting Up the Flex Project
In Flash Builder, go to Menu > New > Flex Project. Set the following attributes
“Project Name”: NativeCursor
“Application Type”: Web (runs in Adobe Flash Player)
“Flex SDK Version”: Use Default SDK (currently “Flex 4.5″)
In the “Package Explorer” right click on the project folder and go to New > Folder.
Name this folder “assets”.
In the project download there is a source folder. In this folder are two .pngs and one .mp3 file; copy these files and paste them into the newly created “assets” folder.
Step 3: Setting Up the Button and Sprite Container
In the NativeCursor.mxml within the s:Application attribute change the minWidth to “500″ and the minHeight to “400″. Add a width and height attribute and set them to “500″ and “400″ respectively. Lastly add a creationComplete="Setup()" attribute.The creationComplete attribute sets a function to be called when the application first loads.
You can delete the fx:Declarations block; we don’t need it here.
Add the following code to the .mxml. The s:SpriteVisualElement is used as a container for a sprite in which we will place the button and bullet hole graphics:
Above the Button and SpriteVisualElement, add an fx:Script tag.
Within this tag, inside the ![CDATA[ section, add the following code:
import flash.ui.Mouse;
import flash.ui.MouseCursor;
import flash.ui.MouseCursorData;
import mx.core.BitmapAsset;
//The crosshair graphic
[Embed(source="assets/crosshair.png")]
[Bindable]
var CrossHair:Class;
//The Bullet Hole graphic
[Embed(source="assets/BulletHole.png")]
[Bindable]
var BulletHole:Class;
//Gunshot
[Embed(source="assets/GunShot.mp3")]
[Bindable]
var GunShot:Class;
//Container to hold button and bullet Holes
var sprite:Sprite;
//Used to test if this is the first time user shoots
var firstShot:Boolean = true;
//Creates a new gunshot sound
var gunshot:Sound = new GunShot();
//Needed for the gunshot sound
var soundChannel:SoundChannel = new SoundChannel;
Here we just imported the classes we need, and set up some variables.
Step 5: Coding the SetUp() function
The SetUp() function is called when the application first loads, much like a constructor function. Here we add our Sprite to the container, add the button to that Sprite and add an EventListener to the button.
sprite = new Sprite();
container.addChild(sprite);
container.addChild(startGame);
startGame.addEventListener(MouseEvent.CLICK,startTheGame);
Step 5: Coding the startGame() function
The startGame() function is called when the user clicks on the "Start" button.
Add the following code
private function startTheGame(e:MouseEvent):void{
//Remove the button from the stage
container.removeChild(startGame);
//MouseCursorData allows us to set the appearance of the Mouse Cursor
var cursorData:MouseCursorData = new MouseCursorData();
//Vector to hold the bitmapData of our image (the CrossHair)
var crossHairData:Vector.<BitmapData> = new Vector.<BitmapData>();
//Create a new CrossHair
var crossHair:Bitmap = new CrossHair();
//Set the vector to the bitmapData of the crossHair
crossHairData[0] = crossHair.bitmapData;
// Specify the hotspot
cursorData.hotSpot = new Point(0,0)
//set the cursorData to the vector which holds the crossHairs bitmapData
cursorData.data = crossHairData;
Mouse.registerCursor("crossHairCursor", cursorData)
Mouse.cursor = "crossHairCursor";
stage.addEventListener(MouseEvent.CLICK,fireShot);
}
The first thing we do is remove the button from the stage.
Next we create a new MouseCursorData() object. The MouseCursorData class lets you define the appearance of a "native" mouse cursor -- i.e., one that replaces your operating system's cursor. Then we code a Vector to hold the BitmapData of our "crossHair" PNG image, which we embedded earlier.
Next we set the hotspot for our cursorData. Think of the hotspot as a "registration" point; it defines where the "tip" of the cursor is. We also set the cursorData.data property to our crossHairData Vector, which holds the BitmapData of the "crossHair" image.
Lastly we register the cursor with the cursorData object we created, and set the Mouse.cursor property. We also add a MouseEvent.CLICK event listener to the stage.
Step 6: Coding the fireShot() function
The fireShot()function is called whenever the user clicks on the stage.
Add the following code below the startGame() function:
private function fireShot(e:MouseEvent):void{
//If they have clicked once then we do this
if(firstShot == false){
//create new BulletHole image
var bulletHole:Bitmap = new BulletHole();
//Add Bullet hole
container.addChild(bulletHole);
bulletHole.x = e.stageX-16;
bulletHole.y = e.stageY-16;
//Play the sound
soundChannel = gunshot.play();
}
firstShot = false;
}
We first check to see if this is the first time the user has clicked; if it is not the first time then we play the gunshot sound and add the bulletHole to the position on stage where the user clicked by using e.stageX ande.stageY. We actually subtract 16 from the stage.X and stage.Y so the image will be centered with the crosshair (the image is 32x32px). The event holds information about itself,you can see what it contains by using trace(e.toString())
If we did not check if this was the first time, then when the user first clicked on the Start button it would add a crosshair and play the gunshot sound -- and we don't want that.
Conclusion
One thing you should note about using Native Cursors is that the image cannot be bigger than 32 x 32px.
You can also use have an animated cursor with the Native Cursor by adding multiple Bitmaps (one per frame of animation) to the crossHairData Vector (let us know if you'd like a full Quick Tip explaining this).
Native Mouse Cursors are a welcome addition to the Flash Player (if not long overdue!)
Thanks for reading and I hope you found this tutorial useful.
No huge updates this week, but a few important small ones! Flash Player 10.3 beta 2 and Adobe AIR 2.7 were released, sharing a bunch of new features. PowerFlasher have also released the latest version of their hugely popular Flash code editor, FDT 4.3. Read on for the details…
New Runtime Betas on Adobe Labs
Adobe AIR 2.7 beta 1 and Flash Player 10.3 beta 2 dropped on Adobe Labs late last week.
Flash Player 10.3 is a point-release update that actually includes some rather large changes. This will be the first version of Flash Player to include a native settings panel. No longer will users need to visit an ancient-looking web page hosted off of the Macromedia domain to manage their personal settings.This version also includes much tighter integration with web browsers to allow the browser privacy control to manage internal Flash Player local storage objects.
New media measurement features are set to make information for analytics more robust with enhanced NetStreamInfo and NetStream monitoring. It will also be simpler to determine the page domain URL of which the Flash object is currently embedded. Certainly not least is an extension to the Microphone class that provides acoustic echo cancellation, noise suppression, voice activity detection, and automatic compensation for varying microphone input levels. Wow!
Adobe AIR 2.7 includes everything that Flash Player 10.3 does — aside from the native settings panel and access to the page domain, since these features are not applicable to installed applications. Some AIR-specific features include an enhanced HTMLLoader API which provides more control over how clickable links behave in HTML content displayed within an AIR application, and a streamlined interpreter mode for iOS in ADT to allow more efficient testing and debugging.
Another high profile release this week is PowerFlasher FDT 4.3! The major new feature for this release is project references, which allows a developer to share source code across multiple projects within FDT. This differs from the Flash Builder library project implementation in that you do not need to create a separate project for the shared source code. This feature also allows move and rename refactoring across project. Pretty nice!
Other features in this version of FDT include new class wizard improvements, a browse button for the project templates feature, and addition changes to a variety of interface elements and panels.
This week will see Flash Player 10.2 released for Android phones (with a beta version available for Honeycomb tablets). Plus, Ely Greenfield has developed a GPU-accelerated 2D framework for Molehill, named M2D. Read on to find out more…
Flash Player 10.2 on Android
Adobe has announced that a general availability release of Flash Player 10.2 for both Android 2.2 (FroYo) and Android 2.3 (Gingerbread) will be available in the Android Market on March 18th. There will also be a beta release made available for users running Android 3.0 (Honeycomb) for tablets such as the Motorola XOOM. Users of the XOOM must install the Android 3.0.1 update to take advantage of Flash 10.2 from the Android Market.
One of the main features of Flash Player 10.2 on mobile is the integration with multi-core CPUs and accelerated GPUs enabling hardware accelerated StageVideo on mobile devices running Android 3.0 and above. Additional highlights include:
Improved scrolling of web pages
Support for HTML is overlayed atop Flash content
Optimized soft keyboard support
New ActionScript API for soft keyboards
Overall performance improvements
Certain features are only available on Android 3.0 as that version of the operating system has an improved browser rendering model which allows such integrated features. Note to browser and OS makers: working with Adobe on improving (or even supporting) Flash Player on your platform is beneficial to all. Psst! That’s a hint for you guys and gals over at Apple.
With so many new Android devices equipped with multi-core processers and “Superchip” GPUs in preproduction right now, this is a great foundation for the next wave of both smartphone and tablet devices.
The First GPU Accelerated 2D Framework for “Molehill”
When the Flash “Incubator” build was announced a few weeks ago, developers were amazed at all of the cool tech demos showing the power and flexibility of the “Molehill” APIs within the upcoming Flash Player. Adobe is focusing on the very low level APIs for this release but has provided many popular 3D frameworks with advanced access to “Molehill” to enable them to build full, easy to use frameworks upon these base APIs for developers to use.
A number of Adobe employees have continued to point out that “Molehill” is not restricted to 3D acceleration, but that the APIs can used for all sorts of 2D implementations as well. We now have a glimpse at the first GPU Accelerated 2D Framework for “Molehill” called M2D, written by Ely Greenfield of Adobe. Some of the accelerated features of this 2D framework include render embeds, animated spritesheets, positioning and rotation of objects, and accelerated particles! Apparently, we will also be able to accelerate DislplayObjects using this framework.
This is great news for traditional Flash game developers as they are mostly used to working in 2D space. While 3D is great to have and is hugely welcomed by the community at large, sometimes it is best to start with something a little closer to what you are familiar with. I’m sure we will see more 2D specific frameworks based upon the “Molehill” APIs emerge for general use in the coming months. There are even some examples of the Box2D physics engine accelerated through M2D (see photo above). Very exciting times!
So… should we be bracing ourselves for an onslaught of GPU-accelerated “Angry Birds” clones?
Let’s take a look at two significant Flash Platform developments Adobe have recently made public: the Wallaby FLA to HTML5 convertor and the latest Flash Player beta release…
Adobe “Wallaby” Converts FLA Files to HTML5
During Adobe MAX 2010 in Los Angeles, Adobe engineers demonstrated an early experiment in Flash to HTML5 conversion. This technology is now available to the public in the form of “Wallaby”, an AIR application that will convert FLA files to HTML-based output to perform animations in the browser when Flash is not supported (iOS), or when HTML output is desired.
In my thinking, the initial users of Wallaby will probably be ad agencies who desire to target iOS and retain their Flash Professional tooling skills.
The process to convert a file is pretty straightforward: you basically point to an FLA file and hit the “Convert” button. There are definitely some important things to note though:
The application requires an FLA that is AS3 based. AS1/2 will not cut it!
There is no ActionScript conversion whatsoever.
Use of Filters, 3D Transforms, Blend Modes, and other advanced features that are simply not supported in HTML will not carry over.
Will this be an asset to those of us who have begun authoring animated content on HTML through the use of SVG, CSS, and JavaScript? Perhaps more importantly, how are browser “ad blocker” add-ons going to cope with a potential flurry of HTML-based advertisements online? One last thought: who will be the first major website to author a fully HTML based “Skip Intro”?
Adobe Flash Player 10.3 Beta on Labs
If I remember correctly; last year around this same time, a certain high-profile CEO had the audacity to call Adobe engineers “lazy”. Since that time, we have seen optimized releases for mobile and desktop of Flash Player 10.1 (with Flash Player 10.2 coming shortly!) and AIR 2.5 followed by AIR 2.6, along with the public release of the Flash Player 11 “Incubator Build” supporting “MoleHill” 3D APIs that make stuff like this possible.
Well, now we have the release of Flash Player 10.3 on Adobe Labs which includes the following enhancements:
Media Measurement
Acoustic Echo Cancellation
Integration with browser privacy control for local storage
Native Control Panel
Auto-Update Notification for Mac OS
This is obviously a very privacy-heavy release with the integration of browser privacy control for local shared objects (or Flash Super-Cookies) which have gained a lot of attention over the past couple of months. It is wonderful that Adobe was able to address these concerns so quickly along with the help of browser makers. Now, so long as the browser has the proper hooks built in, wiping for privacy can cascade down into Flash storage as well. Oh yeah — and say goodbye to that horrible Web-based Flash Global Settings panel. We are now native!
With all of the enhancements made over the past year regarding the accelerated production of Flash Player and AIR builds, the huge leaps in optimization across screens, and the recent public beta offerings Adobe has been providing… can Adobe truly be called "lazy"?
Hey there and welcome to "Flash Video Training Source", a resource for anybody interested in learning more about Adobe's great tool. We feature educational videos, which will help you master Adobe Flash and help you get to know all of its features. We at "Flash Video Training Source" believe that video training and video... more
Why don't you follow us on Twitter and get the latest video tutorials twitted to your account. Just click on the floating twitter bar to your right!
