It’s time for another Premium tutorial! This week, James Tyner will walk you through the process of building an HTML5 MP3 player, step by step, with the SoundManager 2 library, jQuery, and a little help from Flash (for extra audio functionality).
Premium Preview
Click for a demo.
In this tutorial I will show you how to create a JavaScript MP3 Player with jQuery and the SoundManager 2 JavaScript library that uses a hidden SWF file to play the sounds. (I could have used HTML5 Audio, but we would have lost the ID3 functionality, and so would have had to hard-code all of our artists and titles.)
You’ll use jQuery, jQuery UI, and jScroller to manage the UI, with graphics already provided for you, and learn how to use SoundManager 2, a cross-browser JavaScript audio library that even works on iOS (if you are willing to lose the extra features, such as ID3 functionality).
Everything is explained step by step as you build the player. Check out the demo to see the end result.
We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!
It’s time for another Premium tutorial! This week, James Tyner will walk you through the process of building an HTML5 MP3 player, step by step, with the SoundManager 2 library, jQuery, and a little help from Flash (for extra audio functionality).
Premium Preview
Click for a demo.
In this tutorial I will show you how to create a JavaScript MP3 Player with jQuery and the SoundManager 2 JavaScript library that uses a hidden SWF file to play the sounds. (I could have used HTML5 Audio, but we would have lost the ID3 functionality, and so would have had to hard-code all of our artists and titles.)
You’ll use jQuery, jQuery UI, and jScroller to manage the UI, with graphics already provided for you, and learn how to use SoundManager 2, a cross-browser JavaScript audio library that even works on iOS (if you are willing to lose the extra features, such as ID3 functionality).
Everything is explained step by step as you build the player. Check out the demo to see the end result.
We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!
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.
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!
