Controlling Flex With Javascript

For work I had to do a proof of concept to show that I could control flex using javascript and here is is with the source, if you want to do it follow this article.

I did have one problem tho and that was i was using Flash Develop and there is no "Create Ajax Bridge." menu option, luckily this can be solved pretty simply just by copying the the files from you sdk directory to you project they are located in


[sdk]\frameworks\javascript\fabridge\src\bridge\.

The Eclipse IDE and Google App Engine

App Engine is Googles offering in the realm of cloud computing. The free service that Google offers should be more than enough to host small websites. If an application does need extra resources, there is the option to enable flexible billing which alows a web application to scale and only pay for resources used. see Googles Billing Docs Orginally the App Engine only supported the Python scripting language, though the Google team have recently anounced Java support. Google have released an SDK and set of plugins for the Eclipse IDE, together they provide an integrated developement and deployment environment.

How to set up Eclipse/App Engine

Software needed:

• Java SE Development Kit(JDK)
• The Eclipse IDE

Installation:

1. Install the Java SE DEvelopment Kit
2. Unpack the Eclipse IDE
3. Follow these steps to install the SDK and App engine plugin through the Eclipse software update service. You will likely need to reboot.

Further Information: App Engine Docs Sample applications

Free Flex IDE

Ok so flex is great but there is one small problem and thats the US$ 299 for the IDE from adobe. Yes there is a free trial available so you can at least spend 60 days trying the IDE but what happens after your 60 days are up and you still want to use flex but don't have US $299 laying around to buy yourself the full version. With Flash Develop and a two little plugins you can.

Installing First you need to download all the required files listed below:

• Flash Develop - "Release notes and download" link, then towards the bottom of the page redirected page.
• Java SE Runtime Environment (JRE) - download button under the table heading (Java SE Runtime Environment (JRE).
• Flex SDK - "Free Adobe Flex 3 SDK" link.
• Design View plugin - "Download Plugin" link.
• Design View Air Package - "designview.air" link.
• Debugger Plugin - "FlexDbg.zip" link.

Now you have a directory full of downloads it is time to start installing(please note [version] is a place holder for the current version of the file you downloaded):

1. Run the installer(FlashDevelop[version].exe) for Flash Develop and and leave everything as the defaults.
2. Install the Java SE Runtime Environment (jre-[number]-windows-i586.exe).
3. Extract the Flex SDK(flex_sdk_3.zip) to "C:\Flex\3\".
4. Install the Design View AIR app(designview.air) by double clicking it.
5. Open the Design View plugin(FlexDesignView-[version].zip) and copy the contents of "Data" to "C:\Program Files\FlashDevelop\Data\" and the contents of "Plugins" to "C:\Program Files\FlashDevelop\Plugins\".
6. Extract the Debugger Plugin(FlexDbg.zip) to "C:\Program Files\FlashDevelop\Plugins\"".

Now Everything is in installed all you need to do is set up flex in Flash Develop:

1. Open the Flash Develop(Start > Applications > Flex Develop > Flex Develop).
2. Once the application is opened press F10 or go to "Tool > Program Settings" to open the Program Settings.
3. Click on AS3Content button (1. in the image below).
4. Then set the "Flex SDK Location" (2. in the image below) to "C:\Flex\3\".
5. Click Close, and enjoy Flash Develop.

Program Settings

Update: as requested here are some screen shots with FlashDevelop in both Source and Design Views.

Solved It!

I have been having A LOT of trouble trying to get my Papervision3D to run a tween just after loading. I spent a good part of the weekend trying to get it to work with no avail. Today I decided that it was time to use a process of elimination with event listeners to work it out, luckly for me it was the third event FlashDevelop's drop down list. Here is the code "view" is a BasicView and "zoomCamera" is the function called after loading view:

view.addEventListener(Event.ADDED_TO_STAGE, zoomCamera);

Sexy touching machines

Adding Interactivity to Papervision 3D

There are two types of Interactivity in this demo the first is controlling the camera and the second the 3D Animation i.e. making the panels spin when you click them. Controlling the Camera Controlling the camera is pretty simple in this example all you need to do is track the mouse movement and translate it into camera movement. To do this simply add the following code into your Event.ENTER_FRAME listener, where view is the Papervision View you are using.

view.camera.x += (((stage.mouseX - (stage.stageWidth * .5)) * 2) - view.camera.x ) * .02;
view.camera.y += (((stage.mouseY - (stage.stageHeight * .5)) * 2) - view.camera.y ) * .02;

Controlling 3D Animation The easiest what to control 3D animation is to use tweener. Basically Tweener helps you move things around on the screen using only code, instead of the timeline. Tweener has no idea about Papervision 3D and in fact it only changes a variable over time which means that you can change any variable as long as it is a number.

To do this you first need to set the view to interactive, then add event listeners to the 3D objects.

var controlPlane:Plane = new Plane();
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane1Clicked);
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane1Rollover);
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane1Rollout);

Then create functions and use tweener to manipulate the 3D objects

private function plane1Rollover (myEvent:InteractiveScene3DEvent):void {     
    //moves the panel back on roll over
    Tweener.addTween(myEvent.currentTarget, { z:120, time:.5, transition:"easeInOutQuint" } );
}

private function plane1Rollout (myEvent:InteractiveScene3DEvent):void {
    //moves the panel froward to its original position on roll out.
    Tweener.addTween(myEvent.currentTarget, { z:100, time:.5, transition:"easeInOutQuint" } );
}
        
private function plane1Clicked (myEvent:InteractiveScene3DEvent):void {
    //Resets the panels X rotation
    myEvent.currentTarget.rotationX = 0;
    //Flips the panel 360
    Tweener.addTween(myEvent.currentTarget, { rotationX:360, time:1, transition:"easeInOutQuint" } );
}

Follow this link to view a demo and as usual to view the full source right click the demo.

Subverting Visual Studio

I have recently come across ankhsvn, a free plugin that allows you to use the Subversion version control system. This will be useful for further investigation into the Google .Net api. other useful links -> .Net Gdata online documentation