Using FDT 5.6 AIR for iOS Project Template

Hello Everyone,

I know my blog posting has been kind of slow this last months but I promise I’ll make it up for all my readers, part of my latest work  have  included  a few Starling projects for mobile devices and can’t wait to share my findings with You all.
That said, let’s move on to the subject of this post.

In this blog post I’m going to show You how easy is to set up and publish an AIR for iOS project in FDT 5.6, in previous versions of FDT if You wanted to publish Your AIR application for iOS (.ipa file) You needed to create Your own ANT task file or use some custom project template, FDT 5.5 introduced new mobile project templates, one of them is the AIR for iOS Project Template that let’s You easily create, set up, debug and publish Your AIR for iOS projects.

So let’s get started!

Step 1.

First You need to create a new FDT Project, You can do so by going to the upper menu  then File > New > New FDT Project (see Fig .1  below) this will open the New FDT Project panel which leads us to step 2.

New Project
Fig.1

Step 2.

The New FDT Project panel (See Fig.2 below) is where You set your project’s name, it’s location, kind of project template, SDK, etc. For my project’s name I choose AIRForIOSExample and used the default location in the template selection part You must choose AIR > iOS this will setup a basic project targeting the iOS platform.

In the Application Setup  for  Application ID I used a reverse domain name of com.swfgeek.examples for  this will set Your package structure so give it the “path” that you’ll be using in your project. for Application Title I used AIR For IOS Template  and leaved Application Version as is.

In the Project Setup part choose the Flex SDK that You’ll be using, if You want to taget iOS 5.1 You’ll be needing at least AIR 3.3 included in your SDK.

You can download this combined version of the Flex and AIR SDKs (Flex SDK 4.6.0.23201 and AIR 3.4.0.2710 SDK) from Adobe’s Gaming Site  if You want to save the trouble of finding and merging SDKs.

Once done with these settings click the finish button.

New FDT Project Panel
Fig.2

Step 3.

Open Your main class ActionScript file, mine is located at “com.swfgeek.examples” and it’s named AIRforIOSExample for this example we  will be only adding some text in order to display something on screen once we are testing our project. You can copy the ActionScript below or add your own.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.swfgeek.examples {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
 
	public class AIRforIOSExample extends Sprite {
		public function AIRforIOSExample() {
			var tFormat : TextFormat = new TextFormat();
			tFormat.align = TextFormatAlign.CENTER;
			tFormat.color = 0xFF0000;
			tFormat.size = 45;
 
			var tField : TextField = new TextField();
			tField.x = stage.stageWidth * .5 - tField.width * .5;
			tField.y = stage.stageHeight * .5 - tField.height * .5;
			tField.autoSize = TextFieldAutoSize.CENTER;
			tField.text = "Hello iOS!";
 
			addChild(tField);
			tField.setTextFormat(tFormat);
		}
	}
}

If You used this script You’ll see a text in red saying “Hello iOS!” centered on screen once you test your application, how to test and publish? keep reading below.

 

Step 4.

Time for testing, to test/debug Your application on the AIR Debug Launcher (ADL for short) you must create a new debug/run configuration, you can do so by going to Menu>Run>Debug Configurations or clicking on the little bug icon on the upper toolbar  ( see Fig.3 below) and select Debug Configurations.

Fig.3

Here You will select FDT AIR Application from the left and click on the new icon on the upper left, this will  create a new debug configuration with Your project’s name ( see Fig.4 below). You can give it a different name and select a different class as your main application class, i’ll leave the one we just created so i can see the text we created in the previous step.

The Debug Configurations Panel
Fig.4

Now You must choose your primary Target Platform which is Apple iOS. On the Launch Method section You must select the launch method this will be either Desktop or on Device we will be focusing on Desktop for now.

You can select Custom size and  set Your device dimensions manually or select one of the included Mobile Presets i will select Apple iPhone  but you can also choose a different size  depending on  what device you need to simulate, the options are: Apple iPad 1/2, Apple iPad 3, Apple iPhoneApple iPhoneRetina and Apple iPhone.  See Fig.5 below.

Launch Method
Fig.5

With all set hit the Debug button (down left corner) give it a few seconds to compile and you should be seeing the ADL opening Your application on the selected simulator size (Apple iPhone) like Fig.6 below.

Fig.6

Step 5.

Ok so You’ve got your application running nice and smooth on your Desktop, you wrote a few traces to see the debugger pop those messages in the console, everything is working great but now you need to actually test your app on a physical device. Let’s setup things to do so.

To compile and export Your application to an .ipa file You need to be enrolled in the Apple iOS Developer Program, have a certificate in .p12 and the mobile provisioning profile of Your application, how to do so it’s outside of the scope of this tutorial and You can find plenty of examples on the web on getting your certificate ready for AIR development.  

So now that You have your Apple certificate and your application provisioning profile ready You must set AIR Properties for Your project, You can do this by opening the Launch Configuration window (check Step 4.) scroll down and click on the Configure project properties button or by right clicking in your project’s main folder and click on the Properties button located at the very bottom of the contextual menu ( see Fig.7).

Fig.7

Either way You choose will open up the Project Properties panel once is open click on the FDT AIR Properties on the left side and click the iOS button ( see Fig. 8 below).

FDT AIR Properties Panel
Fig.8

The first tab you’ll see once iOS is selected is the Building tab here you can set Your Application Description file ( FDT created one for You when You started Your project) You can browse to locate your descriptor in your system or click the create button and let FDT create it for you. Just below that box is the SWF File Name box where you enter your application’s main .SWF file.

Next to the right is the Properties tab ( see Fig. 9 below).

Properties tab.
Fig.9

In this window You must set:

Application Name ( the one that will appear below your application icon once is on the iPad/iPhone) the File Name (the name of the .ipa file).

The Application ID (This is the ID You gave to Your application in Apple’s Developer Center when You created your provisioning profile) Note: It’s important to remember that this might differ from the package structure that you gave to your project if You enter an ID different from the one you specified in Apple’s Developer Center Your application will fail to install on your device. 

The Air SDK Namespace is the version of AIR that will be defined in your descriptor file You can leave it as is ( it will use the number of the AIR SDK that you defined when creating your project).

The Version number of your project.

The Aspect Ratio here you can choose between portrait, lanscape or default depending on the aspect ratio of your application.

There are two checkboxes to choose if your application will be Full Screen and support Auto Orientation

Next is the Rendering Mode selector, you can select auto, gpu, direct or cpu depending on the rendering mode you want the application to run.

The Devices selector let’s you choose the iOS devices in which your application is supported the options are: iPhone/iPod, iPad and iPhone/iPod/iPad .

And the last one is the Resolution to choose high or standard resolution. Note: If you choose high but not prepare Your files (graphics) for the iOS higher resolution your application can look pixelated/blurry when running in an iOS retina device.

Digital Signature Tab
Fig.10

The next tab is the Digital Signature ( See Fig. 10) where you need to add the files provided to You by Apple in the Developer Center.

The first section of that panel in the Development Profile in the Certificate enter the path to where you have your iOs certificate .p12 file or use the button next to it to browse your system and find that file.

The second section is the Password field and here you need to enter the password you generated when creating you .p12 file yo can use the checkbox so FDT remembers it in the current development session.

Next is the Provisioning Profile field, the same as the development profile, enter directly on the field or use the Browse button to set the path to your .movileprovision file.

Below that section You can enter a different  iOS certificate and Distribution  profile (That will be a different one than the provisioning one) in order to publish a Release/Ad Hoc distribution file.

The next tab is the Icons one ( see Fig. 11 ) here you must browse for each one of the icon files in the corresponding size.

Fig.11

 

The next tab Package Contents (Fig.12 ) is where you can browse and add any additional file required by your application: images, xml, swf, swc, audio files, etc. In the Add Directory section you can also choose a folder and all files in it will be included in your .ipa file.

Fig.12

 

Next is the Extensions tab (Fig. 13) where You can add ANE (Short for Application Native Extension) files in case your application uses one.

Fig.13

 

And the last one is the Deploy tab (See Fig.4 below)

Deploy Tab
Fig.14

The first thing on that tab is the Pre package launcher where you must select the last run configuration before building the .IPA  file here you must select one of the “Run Configurations” to make sure the final file does not include a debug version of your .SWF.

In the Package Type  you get to select if is a final distribution release (the one that goes to Apple for approval and release on the App Store) or an Ad hoc package for testing and limited distribution.

Next is the Platform SDK where You can select and use the iOS SDK that Your application will be using.

And finally the Export Application section where you choose the place in your hard drive where your .IPA file will be saved.

 

Step 6.

Time to package and deploy.

Now You’re ready to package and export your application  in orded to do so you need to open up the Run configuration window ( See Fig.5) but this time instead of choosing On desktop as Launch Method you will select On Device (See Fig. 15 below) and here you can select two different package methods Standard (packaging takes longer & application performance is similar to deploy build) or Fast (packaging is quick & runs slower  than a deploy build) for testing is ok to use the Fast method but if you need to measure performance on the device is best to go with the Standard method.

 

On Device Launch Method
Fig.15

Then hit The Apply button and then click on the Run button, you will see the AIR compile process in your Console window ( See. Fig. 16)

Console Window
Fig.16

 

If you packaged it for debug you will see a pop-up window (See Fig. 17)  it will wait for you to install the application in your device and when ready hit the Start Debugger button to begin debugging Your application( Note: There are quite a few methods of installing an application on an iOS device without the cumbersome process of installing it via iTunes, you can install it directly via ADL using the Terminal for example but that will be matter that we’ll takle in another tutorial .

If You packaged your .IPA for deploy  your work is ready to install (See Fig. 18).

Fig.18

 

Hope it clears out how to use the AIR Project Template for iOS on FDT5.6 , write any issues of this process or further questions in the comments below  or You can always reach me on twitter as @swfgeek.

 

Thanks for reading and Happy Coding.
Dave

 

 

 

Quicktip: Uninstall Your Android App from the AVD Emulator

This post is more of a self-remainder but hopefully it will help other mobile developers with the same issue, when working with the Android Emulator You might be in the situation that You’ll need to wipe Your app entirely and there’s no drag and drop in thrash when using the emulator, so in order to delete Your app without erasing Your AVD image just follow the next steps:

1.- Start Your Eclipse IDE (FDT or Flash Builder).

2.- Run the emulator.

3.- Using the terminal navigate to the Android SDK “platform-tools” directory, mine is located at:

/Users/dave/development/flash/SDKs/android-sdk-mac_x86_r12 /platform-tools

 

4.- Do the command “./adb shell” remember that commands must have the “./” before the command name otherwise You’ll get a bash error (-bash: adb: command not found).

5.- Navigate to the app directory using the cd command  ” cd /data/app/”.

6.- Then list the apps using the list command “ls” (This will display the names of the .APKs installed in Your emulator.

 

7.- Then use the remove command “rm YourApp.apk”

8.- You can now type “Exit” to leave the adb shell, relaunch the emulator and Your app will be gone for good.

Happy Coding.

Quickguide: Using AIR 2.6 in FDT 4

So finally I got some free time to write this post about using the new Adobe AIR 2.6 in your FDT 4 environment, so let’s get to it:

As you know Adobe recently released the Adobe 2.6 runtime and SDK with significant improvements including iOS support bringing feature parity for Android and iOS platforms, more info on Adobe AIR team’s blog.

Some of the new features are:

AIR for iOS

  • Updated AIR for iOS support with improved performance. Developers can take advantage of new features in iOS 4 like multitasking, Retina display for higher screen resolutions, and front and back camera support. Developers can now build application that capture audio with the microphone and take advantage of the same graphics hardware method used in AIR for Android using OpenGL ES2 for fast graphics.
  • Packager for iPhone (PFI) is now replaced with and the functionality integrated with AIR Developer Tool (ADT) a comand line tool for compiling application in the AIR SDK. ADT can now be used to package AIR files, native desktop installers, AIR applications for Android and iOS.

AIR for Android

  • Submit apps to be included in the Amazon Appstore for Android when the store launches.  Companies now have an additional distribution option with one of the largest online shopping destinations on the web.
  • USB debugging was added as an additional debugging option to WiFi.

So what do You need to start testing this new capabilities in AIR SDK 2.6, if You’re part of Adobe’s Flex SDK and Flash Builder private pre-release program You can start testing this right away. If You like to start working with the Adobe AIR 2.6 SDK inside of FDT4 the following guide should be a good start.

1.-Download the SDKs.

Download The Adobe AIR SDK 2.6 and Flex 4.1 latest stable release.

2.- Merge the SDKs

To start using the AIR 2.6 specific features You need to merge the AIR SDK with your flex sdk to do that I created a new copy of my flex SDK renamed it to “flex_sdk_4.1.0.16076_AIR_2.6” and then copy the entire contents of the AIR SDK in there it will ask You to replace files and folders  just click ok and move on to next step.

3.- Adding the SDK to FDT


Fire up Your copy of FDT then go to “Preferences->FDT->Installed SDKs “ click the Add button located in the top right of the panel this will open a new panel asking for the “Path:”  select the folder path to Your newly created SDK, mine is located in “C:\SDKs\flex_sdk_4.1.0.16076_AIR_2.6” give it a name I called mine: “Flex 4.1 AIR 2.6 SDK” hit Ok and  now You’re ready to build a project using AIR 2.6 features, on to next step.

4.- Create a project.

Create a new Flash project by going to “File->New->New Flash Project” give Your project a name, set the project type to Desktop and in the options section of the window change the Flex version to  Flex 4 AIR click the “next” button it will take You to the SDK configuration panel, select the one You created in the last step in my case it was “Flex 4.1 AIR 2.6 SDK” then click finish.

5.- Change the compiler settings.


Right click the project You just created select Properties–>FDT Compiler and change the target player from “-target-player={playerVersion}” to “-target-player={11}” this will let You compile and debug Your project without any errors. Remember to set the version of  your application to “2.6” in Your descriptor file.

 

I will make a full example on how to deploy and debug both to Android and iOS using an ANT file in another post, until then, happy coding.

 

 

 

 

 

 

Targeting Flash Player 11(Incubator Build) in FDT 4.2.

I know this might be old news by now but this post will help as a reminder on how to get the new Flash Player 11 (Incubator Build) working in Your FDT 4.2 installation. Ok let’s get started.

1.- Download the files.

2.- Update the playerglobal.swc


First thing You need to do is replace the playerglobal.swc included in the Flex SDK because it isn’t Flash Player 11 ready.

  • Back up the playerglobal.swc  included in  your Flex SDK location “/frameworks/libs/player/10.2 in the Flex SDK”.
  • Copy the flashplayer_inc_playerglobal_022711.swc to the location mentioned above and rename it to playerglobal.swc.

3.- Setting up FDT.

Setting up the FDT IDE (I’m using FDT 4.20.1272  installed on top Eclipse Indigo Version: 3.7.0) for working with the Flex SDK is easy just follow the steps below.

 

  • Add the Flex 4.5 SDK You just downloaded to the list of installed SDKs via: Preferences > FDT > Installed SDKs and press Add.
  • Rename  Your SDK to something significant ( Believe Me you can get lost when using several SDKs) I named mine Flex 4.5 Flash Player (Incubator).
  • The next step is creating a new project go to File > New > New Flash Project in the popup window select new AS3 Project and give your project a name.
  • Click next and select the Flex SDK You just added.
  • You will notice that You get a warning on top of that window saying:  “Some classpath libraries are missing …” that’s because the latest Flex SDK nightly builds does not include the flex.swc, on to next step to get rid of that warning.
  • Click next and You’ll be on the SK Library tab select the flex.swc (marked with an X) and click the Remove SWCs button that will remove any warnings about the missing .swc and since we are building an AS3 project we wont be using the flex.swc anyway.
  • The last step is clicking the finish button then go to the project You just created right click and select Properties ( Alt + Enter for shortcuts lovers like myself)  this will open your project’s Properties window  select FDT Compiler from the list and add the flag -swf-version=13 to your compiler arguments..
  • Hit the OK button and You’re set to go now You’re ready to push the Flash Player 11 to it’s limits abusing of it’s new “Molehill” 3D APIs.Happy Coding.

Using Flash Player 10.2 in FDT4

In this post I will tell You how you can start playing with the new features of the Flash Player 10.2 Beta in FDT 4. I started using “Flash Builder Burrito” for the examples that I’ve been posting but I really missed the quick code hints and mostly the auto-import features of FDT4 that let me explore the new SDK without leaving my code to read the documentation, that said let’s move on.

Figure 1.

1.- The first thing You need to do is go to the Hero Stable Builds table and download the Flex SDK  build 18623 from there.

I usually have all my SDKs located in the same place in my disk “C:\SDKs” but You can put it on the desktop for easy location, once you have downloaded it decompress the zip in the location you chose. (Note: These builds do not contain any Hero mobile features or runtimes but it appears that the flex.swc that should be located in \frameworks\libs  is also missing you’ll need to include this from a previous build or FDT will output errors when adding the SDK to your project ).

Figure 2.

2.- Open FDT4 and go to >Window>Preferences and open the FDT tab and select Installed SDKs from that menu as shown in figure 3.

Figure 3.

Click on the Add  button and the SDK definition Panel will pop up select the directory where You have downloaded the Flex Hero SDK, if you have a previous Flex Hero SDK installed be sure to give a different name I called mine Flex Hero ( Flash Player 10.2  Beta).

Figure 4.

3.- Go to >File>New>New Flash Project select Empty AS3 project give your project a name and click the next button that will take You to the Flash Project Settings  in the SDK Configuration select your newly added SDK( see figure 5.) you will see that the Player Version changes to 10.2, click finish.

Figure 5.

4.- Right click in the project You just created select properties, go to the FDT Compiler menu and change the -target-player from “playerVersion” to “11”  this will let you test your projects without getting any version errors.

EDIT:   In this step You don’t need to change the “-target-player” argument leave it as is it will use the 10.2 version but you need to add the “-swf-version=11” argument, that way it won’t show errors when compiling.( Thanks to John Olson for pointing it out).

Figure 6.

5.- That’s it now You can test and compile the features including in the beta of  the Flash Player 10.2 and get  all the coding comfort of FDT4.

Figure 7.

Flash Player 10.2 Beta (Native bitmap-based cursors)

One of the new features of the Adobe Flash Player 10.2 is the Native bitmap-based cursors this will let You get rid of the Mouse.hide(), onMouseMove() handler  or starDrag() to display a custom cursor in your Flash projects. You can now directly assign your own custom cursors. So here’s a sample extending Thibault Imbert’s

1.- First we embed the assets( the images that we will be using as our custom cursors) and  an int var that we will be using to switch our cursors.

[Embed (source="/assets/126.gif" )]
public static const NativeCursor:Class;
[Embed (source="/assets/cat1.png" )]
public static const CursorFrame1:Class;
[Embed (source="/assets/cat2.png" )]
public static const CursorFrame2:Class;
[Embed (source="/assets/cat3.png" )]
public static const CursorFrame3:Class;
[Embed (source="/assets/cat4.png" )]
public static const CursorFrame4:Class;
[Embed (source="/assets/cat5.png" )]
public static const CursorFrame5:Class
protected var _state : int = 0;

2.- Then on the class constructor we add the click mouse event listener so on each user click we toggle the cursor.

public function NativeCursorTest() {
  stage.addEventListener(MouseEvent.CLICK, _onClick);
  toggle();
}

3.- The methods that create our cursors this is exactly the same code that Thibault’s sample just divided in two methods so You can see the animated and static cursor working.

private function createNativeCursor() : void {
   // we create a MouseCursorData object
   var cursorData:MouseCursorData = new MouseCursorData();
   // we specify the hotspot
   cursorData.hotSpot = new Point(15,15);
   // we pass the cursor bitmap to a BitmapData Vector
   var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(1, true);
   // we create the bitmap cursor (bitmaps should not be bigger than 32x32 pixels, this is an OS limitation)
   var bitmap:Bitmap = new NativeCursor();
   // we pass it to the bitmapDatas vector
   bitmapDatas[0] = bitmap.bitmapData;
   // we assign the bitmap to the MouseCursor object
   cursorData.data = bitmapDatas;
   // we register the MouseCursorData to the Mouse with an alias
   Mouse.registerCursor("myCursor", cursorData);
   // whenever we neeed to show it, we pass the alias to the existing cursor property
   Mouse.cursor = "myCursor";
}

private function createAnimatedCursor() : void	{
   // we create a MouseCursorData object
   var cursorData:MouseCursorData = new MouseCursorData();
   // we specify the hotspot
   cursorData.hotSpot = new Point(15,15);
   // we pass the cursors bitmap to a BitmapData Vector
   var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(5, true);
   // we create the bitmap cursor frames (bitmaps should not be bigger than 32x32 pixels, this is an OS limitation)
   var frame1Bitmap:Bitmap = new CursorFrame1();
   var frame2Bitmap:Bitmap = new CursorFrame2();
   var frame3Bitmap:Bitmap = new CursorFrame3();
   var frame4Bitmap:Bitmap = new CursorFrame4();
   var frame5Bitmap:Bitmap = new CursorFrame5();
  // we pass it to the bitmapDatas vector
   bitmapDatas[0] = frame1Bitmap.bitmapData;
   bitmapDatas[1] = frame2Bitmap.bitmapData;
   bitmapDatas[2] = frame3Bitmap.bitmapData;
   bitmapDatas[3] = frame4Bitmap.bitmapData;
   bitmapDatas[4] = frame5Bitmap.bitmapData;
   // we assign the bitmap to the MouseCursor object
   cursorData.data = bitmapDatas;
   // we register the MouseCursorData to the Mouse
   Mouse.registerCursor("myAnimatedCursor", cursorData);
   // we just pass a frame rate
   cursorData.frameRate = 5;
   // whenever we neeed to show it, we pass the alias to the existing cursor property
   Mouse.cursor = "myAnimatedCursor";
}

4.- And finally our Mouse event listener and the toggle method that makes all that cursor magic switch happens.

private function _onClick(event : MouseEvent) : void {
	// we call the toggle function to switch between our mouse cursors
	toggle();
}

private function toggle() : void {
	switch (_state) {
	   case 0:
		// we set the static cursor
		createNativeCursor();
		_state = 1;
		break;
	   case 1:
		// we set the animated cursor
		createAnimatedCursor();
		trace(_state);
		_state = 0;
		break;
		default:
	}
}

Hope this helps You and in case you haven’t already go to adobe labs and download the Flash Player 10.2 beta.

Almost forgot here’s the example: ( You’ll need Flash Player 10.2 in your browser to see it).

Multicast Streaming in Flash Player 10.1 revisited

Yesterday a student from my class ask me to help him solve a problem that was getting when testing Tom Krcha’s example files of his Multicast Streaming tutorial. Here’s the fix.

Yesterday a student from my class ask me to help him solve a problem that was getting when testing Tom Krcha’s example files of his Multicast Streaming tutorial, the files he was using were the same included in Tom’s tutorial except for the Stratus Developer Key so after looking at the video tutorial included and testing the examples files You’ll get this error:

?View Code ACTIONSCRIPT3
1
2
3
4
5
Error: Error #2154: The NetStream Object is invalid.  This may be due to a failed NetConnection.
	at flash.net::NetStream/invoke()
	at flash.net::NetStream/attachCamera()
	at Broadcaster/setupStream()[C:\Users\Dave\Adobe Flash Builder 4\Broadcaster\src\Broadcaster.mxml:67]
	at Broadcaster/netStatus()[C:\Users\Dave\Adobe Flash Builder 4\Broadcaster\src\Broadcaster.mxml:50]

The error is pretty descriptive and what is saying is that was the NetStream was not getting the Camera signal or received a null value when trying to attach it.

The reason that this was happening is because in the NetStatusEvent Listener inside the switch statement we are using the event.info.code = “NetConnection.Connect.Success”; both for the Connection and the Stream

?View Code ACTIONSCRIPT3
1
2
netConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
stream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
private function netStatus(event:NetStatusEvent):void{
	   writeText(event.info.code);
 
	   switch(event.info.code){
	            case "NetConnection.Connect.Success":
		    setupStream();
                    break;
		}
 
}

And on the setupStream() function we are trying to attach the camera and thats what throws the error cause we are using the “NetConnection.Connect.Success” to call this function.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private function setupStream():void
{
      var groupspec:GroupSpecifier = new GroupSpecifier("myGroup/multicastOne");
      groupspec.serverChannelEnabled = true;
      groupspec.multicastEnabled = true;
 
      stream = new NetStream(netConnection,groupspec.groupspecWithAuthorizations());
      stream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
 
       var cam:Camera = Camera.getCamera();
 
       stream.attachCamera(cam);
       stream.publish("multicast");
 
	video.attachCamera(cam);
}

The fix is pretty straightforward all You have to do is include a case for the event.info.code: “NetStream.Connect.Success” and thats where we attach the camera to our stream.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
switch(event.info.code){
	case "NetConnection.Connect.Success":
	        setupStream();
	break;
	case "NetStream.Connect.Success":
	        var cam:Camera = Camera.getCamera();
	        stream.attachCamera(cam);
	        stream.publish("multicast");
	        video.attachCamera(cam);
	break;
}

And our setupStream() function will only define the GroupSpecifier and the NetStream:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
private function setupStream():void{	
	var groupspec:GroupSpecifier = new GroupSpecifier("myGroup/multicastOne");
	groupspec.serverChannelEnabled = true;
	groupspec.multicastEnabled = true;
 
	stream = new NetStream(netConnection,groupspec.groupspecWithAuthorizations());
	stream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
}

Attaching camera / microphone after NetStream is connected, prevents you from following:

?View Code ACTIONSCRIPT3
1
Error #2154: The NetStream Object is invalid. This may be due to a failed NetConnection.

Click here to open my example, or here to download the flex project.

You should see Your Broadcaster and your Receiver getting along just fine.

Using HYPE Framework’s ContextSavePNG

One of the first things You want to do when playing with the HYPE framework is to output your creations to a printable file and guess what?  Joshua and Branden have already think on that, hype includes a the class ContextSavePNG that will let you output your hype generated images to a printable .png. Here’s a simple example on how to use the ContextSavePNG class of the hype framework.

For this short example i’m using one of the files included in the hype framework zip that You can download here “\hype-hype-605a391\examples\Flash\SimpleBallistic\02_simpleBallistic.fla”

Here’s the ActionScript code of that file:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/***********************************************
 
	HYPE
	http://www.hypeframework.org
	developed by Branden Hall and Joshua Davis.
 
************************************************/
 
import hype.extended.behavior.SimpleBallistic;
import hype.extended.color.ColorPool;
import hype.extended.trigger.ExitShapeTrigger;
import hype.extended.trigger.RandomTrigger;
import hype.framework.core.ObjectPool;
import hype.framework.core.TimeType;
import hype.framework.display.BitmapCanvas;
import hype.framework.rhythm.SimpleRhythm;
 
MyExitShape.visible = false;
 
var myWidth = stage.stageWidth;
var myHeight = stage.stageHeight;
 
var bmc:BitmapCanvas = new BitmapCanvas(myWidth, myHeight);
addChild(bmc)
 
var clipContainer:Sprite = new Sprite();
 
var color1:ColorPool = new ColorPool(
	0x587b7C, 0x719b9E, 0x9FC1BE, 0xE0D9BB, 0xDACB94, 0xCABA88, 0xDABD55, 0xC49F32, 0xA97409
);
 
var color2:ColorPool = new ColorPool(
	0xFFFFFF, 0xCCCCCC, 0x999999, 0x666666
);
 
var pool:ObjectPool = new ObjectPool(MyCircle, 800);
 
function addNextClip(r:SimpleRhythm) {
	var clip:MyCircle = pool.request() as MyCircle;
 
	if (clip != null) {
		clip.x = myWidth / 2;
		clip.y = 100;
 
		clip.scaleX = clip.scaleY = 0.05 + (Math.floor(Math.random() * 3) * 0.3);
 
		color1.colorChildren(clip);
 
		// target Object, drag, minForce, maxForce, gravity, gravityAngle
 
		var ballistic:SimpleBallistic = new SimpleBallistic(clip, 0.97, 2, 3, 0.25, 90);
		ballistic.start();
 
		// exit callback function, target Object, shape, shapeFlag
 
		var onExit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, MyExitShape, true);
		onExit.start();
 
		var randomSplit:RandomTrigger = new RandomTrigger(onSplit, clip, 50);
		randomSplit.start();
	}
}
 
function onExitShape(clip):void {
	clipContainer.removeChild(clip);
	pool.release(clip);
}
 
function onSplit(parentClip):void {
	var clip:MyCircle = pool.request() as MyCircle;
 
	if (clip) {
		clip.x = parentClip.x;
		clip.y = parentClip.y;
 
		clip.scaleX = clip.scaleY = 0.05 + (Math.floor(Math.random() * 3) * 0.05);
 
		color2.colorChildren(clip);
 
		// target Object, drag, minForce, maxForce, gravity, gravityAngle
 
		var ballistic:SimpleBallistic = new SimpleBallistic(clip, 0.97, 4, 6, 0.2, 90);
		ballistic.start();
 
		// exit callback function, target Object, shape, shapeFlag
 
		var onExit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, MyExitShape, true);
		onExit.start();
	}
}
 
var rhythm:SimpleRhythm = new SimpleRhythm(addNextClip);
rhythm.start(TimeType.TIME, 1);
 
pool.onRequestObject = function(clip) {
	clipContainer.addChild(clip);
}
 
bmc.startCapture(clipContainer, false);

The first thing you need to save your actionscript generated visuals to an image file is to import the ContextSavePNG class.

?View Code ACTIONSCRIPT3
1
import hype.extended.util.ContextSavePNG;

Then just before the line were you start capturing your clip into the bitmap canvas you call the setupLargeCanvas method of the BitmapCanvas class, by setting the argument to 10 you are telling hype that the output image will be the orginal size of your swf times 10, so in this example the original .fla size is 640 px width x 360 px height the exported .png will be 6400 px width x 3600 px height, pretty cool right ? with a file this size you could print a poster once you export the file to. png that in other form will be very hard to output an image that size.

?View Code ACTIONSCRIPT3
1
bmc.setupLargeCanvas(10);

Next you need to create an instance of the ContextPNG class and pass it the parameter of the BitmapCanvas you want to encode in this case the bmc. Now at the time that you run your .swf and hit the right click you will get the EncodePNG button when you click it your hype animation will pause and a small progress bar will appear in the center of your .swf indicating that the bmc is being encoded after that the button will change to SavePNG and when you hit that button vuala you have an scaled up transparent .png file out of your .swf.

?View Code ACTIONSCRIPT3
1
2
var savePNG:ContextSavePNG = new ContextSavePNG(bmc);
bmc.startCapture(clipContainer, false);

Don’t forget to check out http://www.hypeframework.org/blog for more information and the latest updates on HYPE.

See You around and happy coding.

Using Flex PMD in FlashDevelop 3

FlashDevelop 3

Adobe recently made available Flex PMD a tool that lets you keep track of your code bad practices and helps you  by auditing your source directory and displaying  common errors such as:

  • Unused code (functions, variables, constants, etc.)
  • Inefficient code (misuse of dynamic filters, heavy constructors, etc.)
  • Over-complex code (nested loops, too many conditionals, etc.)
  • Over-long code (classes, methods, etc.)
  • Incorrect use of the Flex component lifecycle (commitProperties, etc).

A report is produced describing the violations of a given rule set. FlexPMD includes a rule set that is broad ranging and continually growing. It is also straightforward to create your own new rules.

Originally Flex PMD can be called from: Ant, The Command Line and Maven, but thanks to the FlashDevelop (FD3 from now on ) community a plugin has been made available that lets you use FlexPMD in the FD3 IDE and throws the result right in the Output and Results window of FD3.

flexpmdinfd3

Installation

1. Download flashdevelopPMD from http://www.kemelyon.com/flashdevelop/flashdevelopPMD.zip

2. Copy PMD.dll into the plugins folder of your FD Application Files.

fdsettings

fdplugins

3. Download flexPMD from Adobe Labs (http://opensource.adobe.com/wiki/displa … /Downloads) and extract to your disk.

adobeos

Set “PMD jar Location” in Tools -> Settings -> FlexPMD to your “flex-pmd-command-line-1.0.RC3.jar”

flexpmdlocation

Usage

Press Ctrl-Shift-A to run FlexPMD in current Project. This version only checks code inside the “src” folder, so you don’t see warnings in your libraries.

To use your own ruleset, set “PMD Ruleset” in Tools -> Settings -> FlexPMD

Thanks again to the FlashDevelop community for spending time in making this useful plugins.

Flint Actionscript 3 Particle System Example

.swfgeek Logo Particles

Richard Lord has recently released the Version 0.9.4 of Flint.

I made this example
using Flint particle system is an Actionscript 3.0 Open Source project with the aim of create a library that handles the common functionality for all particle systems. To see it work just click anywhere on stage and it will make a nice Firework out of my “Logo”

I just tried it myself and i must say it’s super easy to use and to extend. You can find Flint source on the google code page of Flint with working examples in the downloads section there’s also some very good examples and tutorials on Flint Particle System Site and you can keep track of Richard on his blog.

The latest version comes packed with all kind of particles goodies like:

* Access all properties in Actions, Initializers, Counters and Activities so they can be modified while the emitter is running.
* AlphaInit initializer sets the initial alpha value for all particles
* ImageClasses and SharedImages initializers set the particle image to one selected from a group, with weighting to adjust the selection
* MouseExplosion action pushes particles away from the mouse
* MouseGravity action pulls particles towards the mouse
* TurnAwayFromMouse action causes particles to turn away from the mouse
* GreyscaleZone uses a greyscale image to define a zone, with weighting based on the luminence of each pixel
* Pulse counter emits particles in regular bursts
* PerformanceAdjusted counter adjusts the rate of particle emission if the frame-rate drops
* TwoWay energyEasing functions have an energy peak half-way through the particle’s lifetime

Heres the link to my example using Flint, and Flex 3 as much as I would love to add the code right below my post the IG Syntax HighLighter seems to not be getting very well with the latest update of wordpress so to get the code just right click on my example and it will take you there.

Update you can now view the code right here:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
package {
 
    import flash.display.Bitmap;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.filters.BlurFilter;
    import flash.filters.ColorMatrixFilter;
    import flash.geom.Point;
 
    import org.flintparticles.actions.*;
    import org.flintparticles.counters.*;
    import org.flintparticles.emitters.*;
    import org.flintparticles.energyEasing.Quadratic;
    import org.flintparticles.events.FlintEvent;
    import org.flintparticles.initializers.*;
    import org.flintparticles.zones.*;
 
    [SWF( frameRate='61', backgroundColor='#000000')]
 
    public class LogoFireworks extends Sprite
    {
        [Embed(source="assets/sgw.png")]
 
        public var Logo:Class;
        public var bitmap:Bitmap = new Logo();
        public var ev:FlintEvent;
        private var emitter:PixelEmitter = new PixelEmitter();
 
        public function LogoFireworks()
        {
            ViewSource.addMenuItem(this, "srcview/index.html");
            stage.scaleMode = "noScale";
            stage.align ="TL";
            init();
        }
 
        public function init():void
        {
            stage.addEventListener(MouseEvent.MOUSE_DOWN,startFlint);
            stage.addEventListener(MouseEvent.MOUSE_UP,stopFlint)
        }
        public function prepareToFlint(event:MouseEvent):void
         {
          stage.addEventListener(MouseEvent.MOUSE_DOWN,startFlint);
          stage.addEventListener(MouseEvent.MOUSE_UP,stopFlint)
 
         }
 
        public function startFlint(Event:MouseEvent):void
        {
            emitter.addFilter( new BlurFilter( 2, 2, 1 ) );
            emitter.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,
                                                        0,1,0,0,0,
                                                        0,0,1,0,0,
                                                        0,0,0,0.96,0 ] ) );
            emitter.setCounter( new Blast( 1500 ) );
            emitter.addInitializer( new ColorInit(Math.random()* 0xFFFF3300,Math.random()* 0xFFFFFF00 ) );
            emitter.addInitializer( new Lifetime( 7) );
            emitter.addInitializer( new Position( new DiscZone( new Point( 0, 0 ), 10 ) ) );
            emitter.addInitializer( new Velocity( new BitmapDataZone( bitmap.bitmapData,-211, -550 ) ) );
            emitter.addAction( new Age( Quadratic.easeIn ) );
            emitter.addAction( new Fade( 1.0, 0 ) );
            emitter.addAction( new Move() );
            emitter.addAction( new LinearDrag( 0.5 ) );
            emitter.addAction( new Accelerate( 0, 70 ) );
            addChild( emitter );
            emitter.x = stage.stageWidth/2;
            emitter.y = stage.stageHeight -(5);
            emitter.start( );
            emitter.addEventListener( FlintEvent.EMITTER_EMPTY, restart);
        }
 
        public function stopFlint(Event:MouseEvent):void
        {
            stage.removeEventListener(MouseEvent.MOUSE_DOWN,startFlint)
        }
 
        public function restart( ev:FlintEvent ):void
        {
            mouseEn();
        }
 
        public function mouseEn():void
        {
            stage.addEventListener(MouseEvent.MOUSE_DOWN,startFlint);
        }
    }
}