Fun with Actionscript

var Cr:Array = new Array();
var Po:Array = new Array();
var sw = 1024;
var sh = 786;
var P0 = new Point(sw/2,sh/2);
var Pvx:Array = new Array();
var Pvy:Array = new Array();
var r:Array = new Array();
var angle:Array = new Array();
var l = 1200;
var rmax = 370;

for (var i = 0; i < 200; i++){ Cr[i] = new Circle(); r[i] = rmax * (0.01 + 0.99 * Math.random()); angle[i] = 2*Math.PI * Math.random(); for (var j = 0; j < i-1; j++){ if(Math.abs(r[i]-r[j])<0.05*rmax){ if(Math.abs(angle[i]*r[i]-angle[j]*r[j])<0.5*rmax*rmax/(rmax + 10*r[j])) {i--;break; } } } Po[i] = P0.add(Point.polar(r[i],angle[i])) Cr[i].x = Po[i].x; Cr[i].y = Po[i].y; Pvx[i]=0; Pvy[i]=0; var scale = 0.3 + 1.6 * Math.random()*rmax/(rmax + r[i]); Cr[i].scaleX = scale; Cr[i].scaleY = scale; addChild(Cr[i]); } addEventListener(Event.ENTER_FRAME, float); function float(e:Event):void{ for (var i = 0; i < 200; i++) { var dx:Number = mouseX - Cr[i].x; var dy:Number = mouseY - Cr[i].y; var sq:Number = Math.pow(dx, 2) + Math.pow(dy, 2); var force:Number = -50000 / (sq + 10); var dist:Number = Math.sqrt(sq); Pvx[i] += (force * dx / (0.4*dist+70)) + (Po[i].x - Cr[i].x) / 30; Pvy[i] += (force * dy / (0.4*dist+70)) + (Po[i].y - Cr[i].y) / 30; Pvx[i] *= 0.96; //play numbers to get various effects Pvy[i] *= 0.96; //play numbers to get various effects Cr[i].x += Pvx[i] / 30; Cr[i].y += Pvy[i] / 30; } } [/code] [kml_flashembed publishmethod="static" fversion="10.0.0" useexpressinstall="true" movie="http://johnbarrett.net/wp-content/uploads/2012/08/floating.swf" width="400" height="300" targetclass="flashmovie"] Get Adobe Flash player

[/kml_flashembed]

Flex 4 & Remoting

First the ColdFusion component has not changed

<cfcomponent displayName= "testConn">
	<!--- Establish a Flash Remoting Connection --->
	<cffunction name="getTestConn" access="remote" returnType="string">
        <cfreturn "connection to the ColdFusion 9 Server was successful">
   </cffunction>
</cfcomponent>

The Flex code is a little different and strangely I get quotes return here in the text field, but the same code ran in Flash or even Flex 3 returns no quotes.

The Flex Code with using the Flex 4 SDK & Spark

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.utils.ObjectUtil;

			private function getTestConn_handler( event:ResultEvent):void {
				Result.text = ObjectUtil.toString(event.result);
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<mx:RemoteObject id="testConn" destination="ColdFusion" source="testConn">
			<mx:method name="getTestConn" result="getTestConn_handler(event)" />
		</mx:RemoteObject>
	</fx:Declarations>

	<mx:Label id="Result" x="127" y="22" width="395" textAlign="left" fontFamily="Verdana" color="#655E5E"/>
	<mx:Button x="10" y="21" label="Test Connection" click="testConn.getTestConn()"  cornerRadius="5" focusColor="#E6EBF0" chromeColor="#F4F6FA" width="109"/>

</s:Application>

So what has changed in remoting in the new Flex SDk & Flash Builder 4? Not much really.

  • New namespaces
  • the script is wrapped in <fx:Script>
  • the mx:RemoteObject is placed in the  <fx:Declarations>
  • afterwards I have a button and a text field which gets the data from the cfc

okay everything is working, but for the life of me I can get rid of the quote:(


Any ideas to this?

FDT 4 & Project Templates

If you install the final release of FDT4 the location of the FDT folder, which included the project types & project templates on Mac OS X has changed.
In the past it was located in your main Users folder:

[box] /Users/{yourusersname}/FDT[/box]

Now it has changed to

[box] /Users/{yourusersname}/Library/Application Support/FDT[/box]

you will see this folder structure

So as an example if you want to change your output folder from bin to deploy in your Empty AS 3 project, you would use this new location

[box] /{yourusersname}/Library/Application Support/FDT/projectTemplates/Web/EmptyAS3/description.xml[/box]

Mine reads like so

<?xml version="1.0" encoding="UTF-8"?>
<tns:projectTemplate xmlns:tns="http://fdt.powerflasher.com/ProjectTemplate"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://fdt.powerflasher.com/ProjectTemplate ../../projectTemplate.xsd">

<name>Empty AS3 Project</name>
	<description>This template contains only the basic libraries to develop and compile a pure AS3 project.</description>
	<projectType>AS 3</projectType>
	<folders>
		<sourceFolder>src</sourceFolder>
		<outputFolder>deploy</outputFolder>
	</folders>
</tns:projectTemplate>

MySQL with FDT

Setting up FDT as a MySQL development environment using the Database Development perspective is quite easy. I assume that you have MySQL installed installed. The only other part you need is the J/Connector

Download the  Connector/J MySQL Database Driver.

The current version is 5.1.3, unzip the connectents of the file, and place it someplace. I put the file in my common libs folder, I was not sure if there was a place in the MySQL folder where drivers are located. The zip comes with a bunch of files but the only one you will need is the “mysql-connector-java-5.1.13-bin.jar”

Now in FDT, and switch to the “Database Development” perspective. (Window –> Open Perspective –> Other –> Database Development perspective)

[box] After you open the perspective choose a new connection [/box]

[box] On the pop-page of the Connection Profile Wizard, select the MySQL connection profile, name your connection, and then click next[/box]

[box] you will need to pick the type of driver that you want to use(we are using 5.1 here so pick that one)[/box]

[box] There are no drivers set up so click on the circle to the right of the pull down menu,and switch to the jar tab.[/box]

[box] there is a slight issue as the original driver here does not work, which is the reason for downloading the driver from MySQL, just delete the old one[/box]

[box] you should be left with only your driver, just point to the area where you saved it.[/box]

[box] set up your database information, and test the connection, you should see “ping succeeded”[/box]

[box] the original look of the newly created database[/box]

[box] to get to the data, right click on the database table and sample content or edit[/box]

[box] I went with edit,as it is a little cleaner I think, and there is also a window to write your own SQL! [/box]

That is all there is too it, you now how MySQL working inside of FDT.

You can also create database tables using this method.

[box] to start use the file menu, and create a new sql file, this allows you to include the sql file along with your project. this way is sloppy(sorry for that!) it is better to crate a new project and link it to the FDT project that you are working on, as this creates a new folder automatically for you. In my case I create a new sql file called meetings.sql and in it’s properties I link it to the project, and set up all the properties needed.[/box]

[box] In the newly created sql file you have the sql editor where you can create a new table with the properties you want, then just right click and execute. I did this in two steps to show that you can continue using the editor to do whatever you can do with sql. There is even sql code completion :)[/box]

[box] Each time you will be showed your results, and if you have any errors in your sql[/box]

[box] Now you can view the results in the Data Source Explorer, and then I show you can edit the data visually, or just sample the content. Below is a final image showing the results.[/box]

I hope you enjoyed the tutorial on setting up and working with MySQL with FDT

In part 3 of the series, we will set up the cross domain file, and create a flash remoting project with FDT 4 & ColdFusion 9 🙂

FDT & Coldfusion

Setting up the Environment

In the first part of the series of getting FDT & ColdFusion/MySQL to work for remoting we will focus on setting up the environment.

First I assume you have FDT, ColdFusion 9, and MySQL installed.

If you don’t:

Downloding CF Eclipse so you will have code completion, and some other goodies, it is free.

  • click next
  • agree to the license
  • wait for it to install and re start FDT

If you want to use cfeclipse open it’s perspective, but since we are just using it for writing cfcs for remoting that it not necessary.
The one thing that you will have to do if it bothered you as much as it did me, is to modify the top tollbar while in other perspectives not to show the tool bar from cfeclipse. this is easy to do.

right click on the tool bar, and pick customize perspective.

make sure CFEClipse and MXUnit is unchecked for the all other perspectives except cf eclipse. I don’t know why it does this, but it does, frusting!!

Also in the context menu there are new items, even in the FDT perspective.

I am not sure how I did it, but I got rid of the cfeclipse menus while working with the FDT prespective 🙂

to use cfeclipse in your FDT project just pick new file like you also do, but in this case pick other/cfeclipse

There is a nice wizard for creating the cfc. cfeclipse is a nice IDE for ColdFusion in Eclipse, if you are using ColdFusion I would recommend you check it out. Actually I just wanted something for the code hinting completion, but I will have to say that the features in cfeclipse are very nice!

You actually have everything you need to work with FDT & ColdFusion, but since we want database support that will be the next and final part of the set up.

I will update this post to show the set up with cfbuilder if you prefer using cfbuilder over cfeclipse.

Update: I got cfbuiulder installed and got RDS, and all the goodies working, however, the text editor did not! Also, to do this you need to uninstall cfeclipse first, it made such a mess of everything I had to re install FDT altogether! Stick with cfeclipse 🙂

Actually for the needs of working with flash remoting cfeclipse does more than what I  need, I wish I could just get the code editor with code completion, which is all I was really after. Yes a lot of work, but it is nice to be able to create & editor your ColdFusion files while in FDT and working with remoting.

In part 2 of the series I will show how to get MySQL working

Droid Does Flash meetup in San Francisco

There is a free upcoming event called DROID Does FLASH being hosted by Adobe at the Adobe Offices in San Francisco on September 16, 2010.

Event Details
Adobe Flash Player 10.1 is here on DROID smartphones by Motorola. Learn how you can get started creating and optimizing content for a great mobile Flash experience.

You can register by going to the website at http://flashmeetup.eventbrite.com/

Document Class in AS 3

A friend of mine from school send me an e-mail about how to set up the document class in Flash CS 5 & AS3. She is just starting out with flash, but I thought That I would write a blog about it as well in case anybody out their just starting out needs a demo.

Create a new AS 3 file in Flash CS 5

In the properties/publish panel settings click on the pencil to create a new actioscript class.

This window will pop u after you do this, call your class a name, I am calling it Main

Flash CS 5 will generate a as class for you that looks like:

package  {

	import flash.display.MovieClip;

	public class Main extends MovieClip {

		public function Main() {
			// constructor code
		}
	}

}

we will add a trace statement to the main function so the Main.as will become

package  {

	import flash.display.MovieClip;

	public class Main extends MovieClip {

		public function Main() {
			trace ("the main document class says hello");
		}
	}

}

Notice that thier is a default package, and that we imported the MovieClip class.
This is important as the Main Class extends the MovieClip class.
Document classes must either extend the MovieClip or Sprite class.

If they are animations with frames, or methods and functions of movie clips, the class will need to extend  the MovieClip class.
Otherwise, if you only need Sprite functionality, just use Sprite instaed.

in fact in this example I should have used Sprite instead of the MovieClip, but want to just use what Flash CS 5 generated.

save both files, and in the main fla use command +enter to test movie, and you will see the trace statement in the output window

Increasing memory in FDT Enterprise Standalone

To increase the memory in FDT Standalone go to your FDT Enterprise folder

/Applications/FDTEnterprise

right click on the FDT program to show package details

in the terminal Open the

Mac OS/ eclispe.ini

The eclipse.ini file consist of

-startup
../../../plugins/org.eclipse.equinox.launcher_1.0.200.v20090520.jar
--launcher.library
../../../plugins/org.eclipse.equinox.launcher.cocoa.macosx_1.0.0.v20090519
-product
com.powerflasher.fdt.product.product
--launcher.XXMaxPermSize
256m
-vmargs
-Dosgi.requiredJavaVersion=1.5
-XstartOnFirstThread
-Dorg.eclipse.swt.internal.carbon.smallFonts
-XX:MaxPermSize=256m
-Xms40m
-Xmx768m
-Xdock:icon=../Resources/Eclipse.icns
-XstartOnFirstThread
-Dorg.eclipse.swt.internal.carbon.smallFonts

On line 15 -Xmx768m this value is the memory currently,
I am going to try to change this to -Xmx1024m.
I will let you know how this works out.

I would like to thanks @LittleBuddha87 & @a_campitelli for their help on twitter!

adding flash player 10.1 support for Flash CS 5

When using Flash CS 5, and using the Actionscript 3 template there is only the option of targeting Flash Player 10.0. I am trying to add flash player 10.1.

I found that the playerglobal.swc for flash player is located at

/Applications/Adobe Flash CS5/Common/Configuration/ActionScript 3.0/FL10/playerglobal.swc

Therefore I thought that I would download the playerglobal.swc for flash player 10.1 and add the folder FP10.1 where

/Applications/Adobe Flash CS5/Common/Configuration/ActionScript 3.0/FL10.1/playerglobal.swc

then I would have the option to choice between an AS 3 file using either flash player 10.0 or flash player 10.1, but no luck. I could replace the  flash player 10.1 playerglobal.swc in the Fp10 folder and be able to use it, but I want both options.

I am looking into this today, as I don’t see where the players are for the older versions either.

If anybody knows a solution, please let me know.

I would like to thank Antonio Holguin very much for his help on this!
he posted a solution on his blog.

First read his post on updating Flash CS 5 to use Flash Player 10.1, this is done by replacing your current playerglobal.swc with the one for flash player 10.1. This works great, but I wanted a solution to have the option to use flash layer 10 and flash player 10.1.

There is another post on swfHead Swapping Between FP 10 and 10.1 playerglobal.swc in Flash CS5 a must read if you are interested in this!

Just follow the instructions on his post, and it works perfect.

I created a folder FL10.1 with the flash player 10.1 playerglobal.swc in

/Applications/Adobe Flash CS5/Common/Configuration/ActionScript 3.0

then open the file FlashPlayer10.xml located in

/Applications/Adobe Flash CS5/Common/Configuration/Players

change the following lines to this

<player id="FlashPlayer10.1" version="10" asversion="3">
<name>FlashPlayer10.1</name>

also change the path to your playerDefinitionPath for as3

<playerDefinitionPath as3="$(AppConfig)/ActionScript 3.0/FP10.1/playerglobal.swc" />

that is it, when you start a new flash AS 3 file, it is still flash player 10, but if you go to publish settings you will now see the option to target flash player 10.1

Now you can switch from flash player 10 & flash 10.1!

I did notice on snag, while targeting 10.1 and using the TLF text I got this error message, A strange error while suing flash player 10.1 as the error says ” supported with Flash Player 10 or higher!

This issue is fixed now, check out the post on swfHead.

you need to add the line

<feature name=”textLayoutFramework”       supported=”true” />

to the features node. Antonio has updated his xml file download!

thanks so much Antonio  for all your help on this!