Problem Finding and Downloading Flex Builder 3 and Flex 3 SDK’s

November 17, 2010

It has gotten difficult to find the download for Flex Builder 3 now that Adobe is pushing Flash Builder 4.

You can find the Flex Builder 3 download link on the M&S Consulting  blog.

You can also use Flash Builder 4 to work on Flex 3 projects, by pointing the compiler to a relevant sdk download, good tutorial and screencast on the Adobe Site by Andrew Shorten.

A list of Flex 3 SDK versions are available to download here. The FB3_Updater.exe (used for updating for flash 10 i think) is available here.

Advertisements

Flex: testing/running php proxy locally

October 15, 2010

When accessing URL’s through HttpServices from a remote domain, it often works fine on the local system but fails to connect when the swf is uploaded to the web (google searh ‘flex crossdomain.xml proxy’).

A common way around this is to place a PHP file on your web server that acts as a go-between for the remote site and the swf (an example discussed on Dennis Jaamaan’s site, with proxy code).

This article explains how to setup a local PHP server, and test your PHP proxy locally through Flex Builder 3

1. Download a PHP server: http://www.wampserver.com/en/download.php

2. Install it, leaving whatever default settings it suggests.

3. Click the WampServer taskbar icon, and go to PHP/PHP_extensions/ and click php_curl (need to enable this to use the example below). Then click Start All Services & Put Online.

4. Create a php file named flexProxy.php and put in the code below:

<?php
$ch = curl_init();
$timeout = 30;
$userAgent = $_SERVER['HTTP_USER_AGENT'];

$url = $_REQUEST['url'];
$place = $_REQUEST['place'];

$fullGoogleWeatherPath = $url . $place;

curl_setopt($ch, CURLOPT_URL,$fullGoogleWeatherPath);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
curl_setopt($ch, CURLOPT_USERAGENT, $userAgent);

$response = curl_exec($ch);

if (curl_errno($ch)) {
    echo curl_error($ch);
} else {
    curl_close($ch);
    echo $response;
}
?>

5. Save this file and put it in the localhost directory: C:\wamp\www\

Read the rest of this article…………….

Country – Capital XML List using GeoNames

October 15, 2010

Was looking around trying to find an XML file of countries and capital cities.

Initially came accross some rather incomplete xml files with the ISO two digit country codes, but so far the best info I found is from GeoNames.

If your using Flash/Flex, it doesnt matter that their crossdomain.xml is outdated, because they use REST web services.

e.g.  http://ws.geonames.org/countryInfo?

In flex, you can use a HttpService to specify request attributes, good example here. Very handy.

Flex web service, WSDL crossdomain.xml

October 15, 2010

If you’re building a Flex web app utilising wsdl webservices, dont bother using http://www.webservicex.net services, they hav’nt updated their crossdomain.xml file to include the necessary Flash 9/10 XML elements. Any web service calls will result in a URL FaultEvent error. I have contacted them, so hopefully they will update it. The crossdomain.xml file (of your site as well) should contain the following element:

<allow-http-request-headers-from domain="*" headers="*" />

Go to any sites root address to check it out e.g.  http://www.xignite.com/crossdomain.xml

AIR Packager for iPhone – work resumed!

September 13, 2010

Adobe are going to resume work on the Packager for iPhone, as Apple have lifted some of their licence restrictions: “This is great news for developers and we’re hearing from our developer community that new AIR applications for iOS devices are already being approved for the Apple App Store”.

This is a crucial development for Flex coders, as there was a lot of talk on the forums recently of Flash dying out as a mobile development environment in the coming years, given the market share of iPhones. Ive seen some good examples on Air on Android, and we should be seeing some for the iPhone pretty soon. Nice one!

Easing/tweened Flex Scrolling Canvas

July 27, 2010

I was looking to add some acceleration/easing to the scrolling of a Flex container.

I used Tweener API and applied it to a Flex Canvas (the canvas has its scrolling policies turned off, and scrolling is provided with an external/floating scrollbar).

You can see the Tweener trainsitions on their online documentation here (click on ‘transition types’).

Full code after the jump ………………

Example multidimensional / 3D indexed array in Flex AS3

July 26, 2010

Scenario: I recently created a Flex component that extended the Canvas, and was split into a large number of ‘cells’ using constraint rows/columns. In each of these cells could be placed any number of UIComponents.

Problem: At any time I could tell what cell I was mousing over e.g.  (0,1), but I also needed to get an array of the components in that cell. It was not optimal iterating accross all the UIComponents on the canvas to check their constraint row/column id’s to find the relevant ones.

Solution: Created a 3D indexed array with references to each cell’s UIComponents. To retrieve the components from cell (3, 5) I would simply use: resultsArray = _cellComponents[rowNum][columnNum];

The image below represents a basic 3D array, with each cell containing just random objects: ints, strings and an image object. The sample app code that follows shows you how to create and populate a 3D array, and has a simple interface so you can test retrieving the stored objects.

3D array visual

Simple UI for 3D Array


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Image;
			import mx.controls.Button;
			import mx.events.IndexChangedEvent;
			
			private var _array3D:Array = new Array();
			private var _numRows:int = 2;
			private var _numColumns:int = 4;
			
			private function init():void{
							
				for(var i:int = 0; i < _numRows; i++){
					
					var rowArray:Array = new Array();
					_array3D.push(rowArray);
					
					// Create a 3d array (basically a 2d array of array objects)
					for(var j:int = 0; j < _numColumns; j++){
						
						var columnArray:Array = new Array();						
						_array3D[i].push(columnArray);									
					} 
				}
				
				// Populate a 3d array
				_array3D[0][0].push(1, 2, 3, 4);
				_array3D[0][3].push("A", "B", "C", "D");
				_array3D[1][0].push(5, 6, 7);
				_array3D[1][1].push(8);
				_array3D[1][2].push(9, 10);				
				// You can add any type of Object to the array.
				var image:Image = new Image();
				image.name = "arrayImage";			
				_array3D[1][3].push(image);
															
			}
			
			private function getValues(row:String, col:String):void{
				
				var r:int = parseInt(row);
				var c:int = parseInt(col);
				
				var cell:Array = _array3D[r][c];
				var output:String = "";
				
				if(cell != null){
					
					for(var i:int = 0; i <cell.length; i++){
						output = output + " " + cell[i].toString();
					}
					
					if(output == ""){
						outputText.text = "No data in cell"
					}
					else{
						outputText.text = output;
					}					
				}
				else{
					outputText.text = "Not a valid row/column";			
				}					
			}			
			
		]]>
	</mx:Script>

	<mx:Canvas id="myCanvas" x="65" y="49" width="308" height="99" backgroundColor="#FFFFFF">
		<mx:ApplicationControlBar x="0" y="0" width="100%">
			<mx:Label text="Row"/>
			<mx:TextInput id="row" width="56"/>
			<mx:Label text="Col."/>
			<mx:TextInput id="col" width="56"/>
			<mx:Button label="Get Values" click="getValues(row.text, col.text)"/>
		</mx:ApplicationControlBar>
		<mx:Text id="outputText" x="0" y="52" width="100%" textAlign="center"/>
	</mx:Canvas>
</mx:Application>

Flex: Date.month is zero-based, Date.date is one-based!!

July 7, 2010

This little issue caught me out a bit when debugging an app: the month property of a Flex Date object is zero-based, whereas the Date.date property is an integer from 1 to 31. Crazy or what!

For 07/07/2010 (07/July/2010) at 09:33 GMT, the date object is shown below:

Flex Date for 07/July/2010 09:33 GMT

Rounded Corners on Highlight and Selection Indicators for TileList

April 8, 2010

The TileList class has to be extended, and the following methods in the the TileList class need to be overridden:

  • drawSelectionIndicator
  • drawHighlightIndicator

TileList inherits from ListBase, and the source functions to override can be viewed here.

Example of how to extend the TileList class can be viewed in this very helpful post by Charlie Key.

The code below adds rounded corners to the selection and highlight indicators of the tilelist.

Rounded Corners TileList Items

override protected function drawSelectionIndicator(indicator:Sprite, x:Number,
    y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
 {
    var g:Graphics = Sprite(indicator).graphics;
    g.clear();
    g.beginFill(color);
    g.drawRoundRect(0,0,width, height,20,20);
    g.endFill();

    indicator.x = x;
    indicator.y = y;
 }

 override protected function drawHighlightIndicator(indicator:Sprite, x:Number,
    y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void{

    var g:Graphics = Sprite(indicator).graphics;
    g.clear();
    g.beginFill(color);
    g.drawRoundRect(0,0,width, height,20,20);
    g.endFill();

    indicator.x = x;
    indicator.y = y;
 }

Deploying AIR Application and AIR Runtime (Redistributable) in Single Exe

March 10, 2010

In this article I show how to package an AIR application (.exe) with the AIR runtime redistributable in a setup file. Your end-users can then run a single setup.exe file to install both your app and the AIR runtime. Nice one! 

This is a follow-up from an article I wrote on packaging and AIR application as an EXE

What you’ll need: 

  • The myApp.exe file you created from your myApp.air file (detailed in article mentioned above)
  • The Adobe Air 2.0 beta (or 2.0 beta 2) runtime exe file you’re currently using (can be downloaded here).

1. You have to create a zip file containing the myApp.exe file and the Adobe Air Runtime Redistributable exe file. 

Note: I firstly renamed the Air runtime file to air2runtime.exe (just for handiness), and called the zip file installFiles.zip 

2. Install and open InstallJammer. 

3. Choose File/New/Project Wizard. Enter a project name and destination folder for your InstallJammer project, I named mine Air Install Project, click next. 

4. Enter some details for you apps’ name and version, next. 

5. Step 4 asks for your Application Directory, where your air files are. I just leave this blank, and add my files later. 

6. The next three steps are simple. Install wizard theme, os to install on (Windows for me), additional features (the default will do). 

7. Next we want to add our zip file to the project. 

  • Click on ‘Groups and Files’
  • Right click Program Files, and browse to your zip file (see pic below)

Groups and Files

Read the complete tutorial here (steps 8 – 12)………