We Love FDT is Live!

There is a brand new community site for FDT, I am excited about this project as one website for everything FDT, no longer to you have to search for resources, bookmarks this site. This new site is your one stop for all your FDT resources. It is written by FDT users/bloggers for FDT users, and all the community blogs are listed here. it is filled with how to, tutorials, etc.

Continue reading “We Love FDT is Live!”

FDT is now a sponsor of HFUG!

I would like to thank Powerflasher FDT for their sponsoring of the Hawaii Flash User Group!

Powerflasher FDT is big on education, and is now a sponsor  of the Hawaii Flash User Group! They will be helping to  organize presentations on the latest innovations in Flex/Flash development from experienced and motivated speakers as well as other topics that HFUG members are looking for.

This works great for HFUG, as it already seems that most if not all of the members are FDT users!

For a limited time All HFUG member’s will receive a  free FDT  Pure licenses(normally valued at $129)!
Please email me for information regarding the free FDT  Pure License. Also, for anybody new to using FDT for AS 3 development, I can host a meeting, or I can get you up to speed personally! If anybody needs a workshop, please let me know.

FDT  turns Eclipse into a powerful Flex/Flash, ActionScript and MXML editor providing coders with sophisticated coding functions including:
•    Advanced Code Completion
•    Outline View
•    Jump to Declaration
•    Open Resource
•    AS3, Flex, and AIR support
•    Creation wizards
•    Switchable Flex SDKs
•    Flex SDK support
•    Flash IDE support (Flash CS 3, CS 4, CS 5)
•    Customizable and incremental compilation

Syntactic and Semantic HighlightingAlso, FDT Pure will allow you and your members to test-drive all the latest milestone features in the upcoming FDT4 release including:

Be sure to watch the video’s my Micheal Plank on the New Features of FDT 4:

FDT 4 Milestone 2 Live Preview
FDT 4 Milestone 3 Live Preview

Setting up FDT for Flash CS 5

If you are using FDT and you recently downloaded & installed Flash CS 5, you will noticed that your run configurations are now broke. This is an easy fix as all you have to do is to update FDT for Flash CS 5. I was able to fix everything except for the flash help!

This post is for Mac OS X only, as I don’t have access to windows, if you know the paths on windows, please leave a comment, and I will update this post! Click on the images for a bigger image.

first if you spaced out(like I did) and you routinely tried to run for application you would have got this error

In the preferences got to FDT>Tools>Flash

If you are having troubles seeing the text the paths on Mac OS X are

Flash IDE – /Applications/Adobe Flash CS5/Adobe Flash CS5.app
Flash Player – /Applications/Adobe Flash CS5/Players/Flash Player.app
ASO Directory – /Users/{username}/Library/Application Support/Adobe/Flash CS5/en_US/Configuration/Classes/aso

I am not sure what the ASO Directory is, but I think that it is related to AS 2

As far as the Flash Help for CS 5 this I was not able to update, and in fact it broke the flash help resources!

Flash Help – /Library/Application Support/Adobe/Help/en_US/Flash/CS5/AS3LR

No more help for Flash :(

Anybody know how to set up the flash help docs for Flash CS 5 for FDT 4? I am hoping that when FDT 4 is launched it will be updated for Flash CS 5 help

FDT Presentation

My good friend, Gabriel Peart who is the co-manger of the Hawaii Flash User Group gave an excellent presentation on FDT while at Flash Camp Brazil. You can download his presentation below, enjoy

fdt_presentation

quick tip- file associations in FDT

So this was the second time I heard somebody asking on twitter about why they don’t see the AS Class in the right click menu in FDT.
To include/remove items in this list is very easy in the customize perspectives in the tool bar.

I will use the example of adding the package to the right click menu


if you “rick click” on the tool bar you will see a sub menu to customize perspective.

This will give a new menu where you can add/remove file associations for the menu.

here I will add package so that when I right click on the project I can quickly add a new package.

this is the same place where you can add/remove items that show up in the top tool bar.

setting up FDT for Flex 4 SDK & Flash Player 10.1

Aiden Tailor wrote a great blog post on how to set up the Flex 4 SDK with FDT. You can check it out here

Read what he says, and follow the instructions, I did it and it works perfect, any problems just ask!

The point to this post is to take this one step more to configure the Flex 4 SDK to work with the Flash Player 10.1

Download Adobe Flash Player 10.1 beta 3 at Adobe Labs here

In the flex 4 SDK that you just set up from Aiden’s blog:

{SDKFolder}/frameworks/libs/player/10

replace the playerglobal.swc with the flash 10.1 that you just downloaded

open the flex-config.xml replace line 16 to read

 <target-player>10.1.0</target-player>

restart FDT

Now create a new project, “Flex 4 Test”
create a Main class

package {
	import flash.display.Sprite;
	import flash.events.AccelerometerEvent;
	import flash.sensors.Accelerometer;
	import flash.text.TextField;

	public class Main extends Sprite {
		private var myText:TextField = new TextField();
		private var acc:Accelerometer = new Accelerometer();
		private var isSupported:Boolean = Accelerometer.isSupported;

		public function Main() {
			myText.width = 200;
			addChild(myText);
			checksupport();
		}

		private function checksupport():void {
	    	if (isSupported) {
		    	myText.text = "Accelerometer feature supported";
			    acc.addEventListener(AccelerometerEvent.UPDATE, getInfo);
			} else {
			    myText.text = "Accelerometer feature not supported";

			}
		}

		private function getInfo(evt:AccelerometerEvent):void {
	    	myText.text = String("at: " + evt.timestamp + "n" + "acceleration X: " + evt.accelerationX + "n" + "acceleration Y: " +   evt.accelerationY + "n" + "acceleration Z: " + evt.accelerationZ);

		}
	}

}

Run file. I do get the following warning

This compilation unit did not have a factoryClass specified in Frame metadata to load the configured runtime shared libraries. To compile without runtime shared libraries either set the -static-link-runtime-shared-libraries option to true or remove the -runtime-shared-libraries option.

UPDATED
To fix this warning is an easy fix as it turns out, I had to search the flex-config.xml file to find it, but if you open the flex-config.xml file on line 385, you will see

<static-link-runtime-shared-libraries>true</static-link-runtime-shared-libraries>

make sure this property is set to true! it is set to false by default. This will get rid of the compiler warning when you run your projects using the Flex 4 SDK.

 

For some reason the text below in the swf file is very small, this is not the case! If you could like to see a version with larger text, lease go here.
The final swf
[kml_flashembed publishmethod=”static” fversion=”10.0.0″ movie=”http://blog.hawaiiflash.org/wp-content/uploads/2010/03/Main.swf” targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

Flash Components for FDT

Using the Flash IDE & FDT seems natural to me, and I think that it is the prefect work flow! While I enjoy working with the Flash IDE, as I use it daily, I much prefer writing all my code in FDT!

I will be showing how to set up everything in FDT for the Project, but will create the component in the Flash IDE, generating a .swc file and using that in FDT. This tutorial will have 2 parts. First I will  show how to just use the Flash IDE for the graphics and do everything else in FDT(my preferred work flow). The next one will first will be setting up FDT  but use Flash CS 4 to compile,

Part one will be using the FDT solution, and part #2 will show how to combine the Flash IDE with FDT.

when you open FDT 4 there is a nice welcome screen now!
click “create new project”

after you create a new project you will get a dialog. Give the project a name, and tell FDT how to compile. I am using the Flex SDK 3 for Flash Player 10.

FDT will create the project in your workspace. In the SCR folder create a new class(the green “C” button)

give the class a name of Main.as and extend Sprite

this will generate the base class

package {
	import flash.display.Sprite;

	public class Main extends Sprite {
		public function Main() {
		}
	}
}

Set up Flash
create a new Flash AS 3 file

call this file assets.fla and save it in the same directory as you Main.as
I will not be setting the document class, as we are just using flash to create the component swc for use in FDT

Drag an instance of the colorPicker & label to the library.
in the Publish settings, make sue you have “export swc”

Now in the “SRC” folder of the FDT project you will see the new files create by flash.
the only one we care about is the assets.swc(you can delete the rest of them)

right click on the assets.swc file, pick source folder, “add to classpath.

now you will have the classes that FDT will see for using the Color Picker

now in the main.as class ass the following code

package {

	import flash.display.Sprite;
	import fl.controls.ColorPicker;
	import fl.controls.Label;
	import fl.events.ColorPickerEvent;

	/**
	 *  uses the color picker from the Assets.swc(generated from Flash)
	 *
	 * @author johnbarrett
	 * @date Mar 27, 2010
	 */

	public class Main extends Sprite {

		//declare variables
		private var colorPicker:ColorPicker= new ColorPicker();
		private var label:Label = new Label();
		private var square:Sprite = new Sprite();

		public function Main() {
			init();
		}

		private function init() : void {
			//add box
			addChild(square);
			square.graphics.lineStyle(1,0x333333);
			square.graphics.beginFill(0xFFFFFF);
			square.graphics.drawRect(0,0,100,100);
			square.graphics.endFill();
			square.width = 300;
			square.height = 185;
			square.x = 10;
			square.y = 15;

			//add label propties
			label.text = "color is # "+ colorPicker.hexValue;
			label.width = 200;
			label.move(15, 55);
			addChild(label);

			//add color picker properties
			colorPicker:ColorPicker;
			colorPicker.move(30, 25);
			addChild(colorPicker);
			colorPicker.addEventListener(ColorPickerEvent.CHANGE, changeColor);
		}

		public function changeColor(evt:ColorPickerEvent):void {
			//update color properties when a new color is picked
			label.text = "color changed to # "+ colorPicker.hexValue;
		}
	}
}

Now run in FDT

final flash swf in FDT

that is it, easy right?
this is one way, next time I will show you another way
happy coding

Download Tutorial

FDT Remoting Template

This is meant to test a remoting connection with a ColdFusion back-end

The ColdFsuion Code has been tested and works. Here is the cfc that I am using


<cfcomponent displayName="getTest">
 <!--- Establish a  Flash Remoting Connection --->
     <cffunction  name="getTestConn" access="remote" returnType="string" output="true">
        <cfreturn "....connection successful">
     </cffunction>
 </cfcomponent>

The rest is actionscript!

import flash.net.*;

var gateway:NetConnection = new NetConnection();
var responder:Responder=new Responder(onResult,onFault);

function onResult(responds:Object):void {
    trace("cfc result"+":"+" "+responds.toString());
}

function onFault(responds:Object):void {
    //loop over the fault structure
    for (var i:String in responds) {
        trace( i + ":" + responds[i] );

    }
}

// name the default cf test server on this machine
gateway.connect("http://localhost/flashservices/gateway/");

// name of the cfc and the function in it that you want to hit in dot notation
gateway.call("com.cfcs.getTest.getTestConn", responder/*this is where any arguments to the remote call go*/)

Now I am attempting to make a template for this in FDT, it works fine in the Flash IDE, but I really don’t want to use the IDE for coding, as I really like FDT for coding!

Now this is the exact code, but I will try to figure out how to use the template propties in FDT to figure out how to change the names of the function, where the cfc is to varaibales, as these will not always be the same. This is just a test to see if you were able to connect to the gateway.

This does work when I dump it into my class, but I get a starnage error

the error panel tells me (click on image for bigger image)

the part besides the template I don’t get, if I have access to the flash.net package in FDT why would I recieve these errors? Works fine in the Flash IDE, but not in FDT.

You can see the post for setting this up for the Flash IDE here
http://hawaiiflash.net/blog/post.cfm/flash-remoting Download the code put the com folder in your CF webroot, open the fla and run just tested and works fine.

UPDATE

package {
    import flash.events.NetStatusEvent;
    //import flash.display.Sprite;
    import flash.net.NetConnection;
    import flash.net.Responder;

    /**
     * @author johnbarrett
     */

    public class Remoting extends NetConnection {

        //set up the variables for the connetion and the responder
        private static var _gateway : NetConnection = new NetConnection();
        private static var _responder : Responder =new Responder(onResult,onFault);

        //use protected to not get an error
        protected var responds : Object;

        private static function onFault(responds:Object) : void {
            //loop over the fault structure
            for (var i:String in responds) {
                trace( i + ":" + responds[i] );
            }
        }

        private static function onResult(event : NetStatusEvent) : void {
            var responds : Object;
            trace(responds.toString());
        }

        // name the default cf test server on this machine

        _gateway.connect("http://localhost/flashservices/gateway/");

        // name of the cfc and the function in it that you want to hit in dot notation
        _gateway.call("com.cfcs.getTest.getTestConn", _responder);
    }
}

this gets rid of the all the errors in FDT, but I do get an warning witht he .toString();

However, when I run the example I get the compile error:

[Info] Connection to player established.

Exception fault: Error: Error #2132: NetConnection.connect cannot be called from a netStatus event handler.

    at flash.net::NetConnection/connect()
    at Remoting$cinit()
    at global$init()[/Users/johnbarrett/Documents/workspace/Remoting/src/Remoting.as:13]

 

FDT on Linux

So on Twitter tonight there was talk on the fact that FDT works in Linux. Are you kidding me, is this real, WOW!

Why the excitement, I HATE WINDOWS! and at the place I work there is only a Linux box that I use for the development of the projects. Therefore I carry my macBook in from home, but since I have a bad back from an old surfing accident, I would prefer not to have to carry the Mac around with me.

I really like Linux, and we have set up a ColdFusion development machine there as well, this is where I do all the testing for the work projects. The one complaint I have is there has not been up to date any decent way of writing actionscript 3.0 or Flex code on Linux.

Now that I hear that there is a way to get FDT running on Linux, I am very excited,and this will the the first thing I will be doing at work in the morning! Stay tune for part two of this blog post, where I will let you know how I got FDT running in Ubuntu. I am stoked!

FDT Meeting is Tonight

The meeting on Setting up a Flash Development Envirnoment using FDT is tonight at 6:00 PM!

For more informatio about the Event with Michael Plank, please view the Adobe Groups Site for the Hawaii Flash User Group

The meeting will start with me given a brief overview on FDT, and then Michael will demostrate using FDT, and will go over the new features in FDT 3.5 Beta 2.

Also, be sure to enter the contest to wn a free licence for FDT, see detials