Flash content on iPhone and the likes

Finally, Flash developed content can be viewed on iPod, Android, Blackberry, and many more such devices. The new version of Flash Player – 10.1 will have support on a broader set of devices.

Read announcement from Adobe MAX.

MAXwidget

Flash Builder 4 beta features

Today, I made my first sample application in Flash Builder 4 beta.

The first thing that caught my eye is that when you place the mouse cursor over syntax a tooltip/popup containing document reference appears. This is really helpful.

The Canvas component has been discontinued and instead we have a Group component. I wanted to give a background color to the Group component, which turned out to be quite a painful experience. I had to add a Rect component and give it a fill. Check the code below:

<s:Group width="220" height="250">

<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">

<s:fill>

<mx:LinearGradient>

<mx:entries>

<mx:GradientEntry color="0xeedd33"/>

</mx:entries>

</mx:LinearGradient>

</s:fill>

</s:Rect>

</s:Group>

I like the way states are handled now. Much better. No need to do the addchild, removechild routine. Just declare the states and for each UI component specify the state(s) in which the component has to be included. Check this:

<s:DropDownList width="90%" dataProvider="{_ar}" includeIn="st1" left="10" top="50" />

<s:states>

<mx:State name="st1"/>

<mx:State name="st2"/>

</s:states>

Also, if you notice we have a mix of Spark (namespace s) and Halo (namespace mx) components.  Here is the complete code for the sample app I created.

<?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/halo"

applicationComplete="init()">

<s:layout>

<s:VerticalLayout horizontalAlign="center"/>

</s:layout>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var _ar:ArrayCollection;

private function init():void

{

_ar = new ArrayCollection(["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8"])

}

]]>

</fx:Script>

<s:Group width="220" height="250" contentBackgroundColor="#CCEE00" y.st1="0" x.st1="0" fontFamily.st1="Courier New" color.st1="#0068DC" y.st2="0" x.st2="0">

<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">

<s:fill>

<mx:LinearGradient>

<mx:entries>

<mx:GradientEntry color="0xeedd33"/>

</mx:entries>

</mx:LinearGradient>

</s:fill>

</s:Rect>

<s:SimpleText text="Initial State - st1" text.st2="New State - st2" fontSize.st2="24" left="10" top="10"/>

<s:Line width="100%" includeIn="st2"/>

<s:List dataProvider="{_ar}" width="90%" left="10" top="50" includeIn="st2">

<s:layout>

<s:HorizontalLayout useVirtualLayout="true"/>

</s:layout>

</s:List>

<s:DropDownList width="90%" dataProvider="{_ar}" includeIn="st1" left="10" top="50" />

<s:Button label="Change" click="{currentState = currentState == 'st1' ? 'st2' : 'st1'}"

left="70" bottom="5" label.st2="Back"/>

</s:Group>

<s:states>

<mx:State name="st1"/>

<mx:State name="st2"/>

</s:states>

</s:Application>

New name for FlexBuilder

Interesting news!! FlexBuilder is being rebranded to a new name – FlashBuilder. I feel this is more intuitive than earlier. Basically FlexBuilder is a tool for creating flash applications only. Whether you use Flex SDK or just plain actionscript, that’s upto you.

Check this article by Lee Brimelow.

Access properties of loaded SWF file in Flex

I had a requirement of loading a Flash CS3 SWF file into my Flex application and access its properties. I tried to follow the recommended way using the SystemManager class by Adobe.

This did not work for me. The file loaded but when I tried to access the properties of the loaded SWF, it always gave me an error.

I discussed this with my colleague, Sumant Mishra. He gave me a simple hack which actually worked like charm. Check out the code below:

private function onSWFInit(e:Event):void
{
	var fl:FlexLoader = e.target.getChildAt(0) as FlexLoader;
	var loadedSWF:* = fl.getChildAt(0);
	loadedSWF.init(); //init() funciton is on the main timeline of loaded SWF
}
<mx:SWFLoader id="previewLoader"
                complete="onSWFInit(event)"/>

Flex and Flash workflow integration

This is good news! We can use some of the exclusive Flex SDK classes in a Flash project using Flash CS4. All we need to do is:

1. create a library project (SWC) in Flex
2. in the library class constructor create an object of the class you want to use in Flash ( example:  new StringUtil() )
3. create a new Actionscript 3.0 file in Flash CS4.
4. goto Publish Settings > Flash > Settings… > Library Path tab.
5. click the red icon button and browse to the SWC file and add it to library path. You can also add multiple SWC files.

There you go. You can use the required Flex SDK class in Flash CS4. Though, not all of the classes can be used this way, esp. the framework classes (controls, containers, etc.) Still looking for the exact list of classes that can be used. I was successful with StringUtil but could not utilize my favorite ArrayCollection this way.

Check out Tareq AlJaber’s blog for a detailed tutorial…

http://flashauthoring.blogspot.com/2009/02/using-class-stringutil-in-flash.html

Quince – UX Patterns Resource

Here’s a very interesting application made in silverlight. It is kind of a bank of UX patterns – common user experience problem and solutions we face while creating applications. This is definitly a useful resource worth visiting regularly. 

Generate PDF on client side

I just came across this link which is an open source library for generating PDFs on client side using actionscript 3.0. Wow! it is, obviously, a fantastic utility!

http://alivepdf.bytearray.org/?page_id=2

Alive PDF

Flex and ASDocs

Flex builder offers a very easy way to generate documentation for your actionscript classes API. There are basically 2 steps involved:

- Comment your actionscript class as per ASDoc guidelines. You can refer the instructions in the Flex documentation.

- Use ASDoc external tool from within your Flex builder to generate the documentation. You can do this using commandline as well. However, I found it much more convenient using Flex builder.

Here’s what I did for my project:

Tool used: Flex Builder 3, SDK 3.2.0

1. Add comments to my custom UniConverter class (plz note this is not the complete class) as follows:

package com.bs.uni
{
	import fl.core.UIComponent;

	/**
	* This component class can be used to convert different
	* special characters to unicode characters for a given string.
	*
	*/
	public class UniConverter extends UIComponent
	{
		private var _strResult:String;

		/**
		* Convert basic latin special characters to unicode for a
		* given string.
		*
		* @param src The source string that contains basic latin
		* special characters which needs to be converted to unicode.
		*
		* @return The source string with basic latin
		* special characters converted to unicode.
		*/
		public function basicLatin(src:String):String
		{
			if (src == null)
			{
				throw("Invalid source string.");
			}
			else
			{
				_strResult = src;
				convert(BasicLatinXML.getXML());

				return _strResult;
			}
		}

2. Select Run > External Tools > Open External Tools Dialog

3. Add a program and name it ASDoc_Uni. You can give any name.

4. Location: field — add C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\bin\asdoc.exe

5. Working Directory: field — browse to my project folder. The field shows ${workspace_loc:/UniConverter} which points to my working directory.

6. Arguments: field — add the following command

-source-path "C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\Component Source\ActionScript 3.0\User Interface"
${workspace_loc:/UniConverter} 
-doc-classes fl.core.UIComponent
com.bs.uni.UniConverter 
-exclude-classes fl.core.UIComponent
-exclude-dependencies=true
-main-title "Unicode Converter" 
-window-title "Unicode Converter"

The above command adds 2 source paths for the classes that have been used – my project directory and the current actionscript API. It specifies 2 classes – my custom class and the UIcomponent class which it inherits. Now, I only want my custom class in the documentation and not the flash inbuilt UIComponent class. To exclude the UIComponent class, specify it next to -exclude-classes and also set -exclude-dependencies=true. Finally, I just set the documentation title and the window title as “Unicode Converter”. There’s more you can do, just check the ASDoc documentation.

7. Once through, click Run. A new folder named asdoc-output is created in project folder. Open the folder and launch index.html. There you go, documentation is all set.

 

Flex ASDoc Tool

Handle XML with namespaces

Yesterday, I faced an issue while working with an xml file in Flash. I was unable to parse the xml data using the normal E4X syntax such as xml.node1.node2. It would give an error. The only thing different about this particular xml is that it has a lot of namespaces declared in it. After going through the documentation I found out a way to handle this issue. Check the following code:

var xml:XML = <Workbook xmlns:c="urn:schemas-microsoft-com:office:component:spreadsheet" xmlns:html="http://www.w3.org/TR/REC-html40" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x2="http://schemas.microsoft.com/office/excel/2003/xml" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel">
	<ss:Worksheet ss:Name="Sheet1">
	<Table ss:StyleID="ta1">
		<Row ss:AutoFitHeight="0" ss:Height="13.4064">
			<Cell>
				<Data ss:Type="String">Preview</Data>
			</Cell>
			<Cell>
				<Data ss:Type="String">unicode</Data>
			</Cell>
			<Cell>
				<Data ss:Type="String">htmlcode</Data>
			</Cell>
			<Cell>
				<Data ss:Type="String">htmlalt</Data>
			</Cell>
			<Cell>
				<Data ss:Type="String">utfcode</Data>
			</Cell>
			<Cell>
				<Data ss:Type="String">utfalt</Data>
			</Cell>
		</Row>
	</Table>
	</ss:Worksheet>
</Workbook>

namespace ns1 = "urn:schemas-microsoft-com:office:spreadsheet";
use namespace ns1;

trace(xml..*::Table.Row[0].Cell[0].Data); //Preview

Here, I just declared the default namespace for the above xml. Try this code without the namespace statement and you will get an error. The namespace declared without a prefix is the default namespace for the xml. For this xml the default namespace is xmlns=”urn:schemas-microsoft-com:office:spreadsheet”.

In this case what I’ve done is declared the default namespace in actionscript. And to reference a deeply nested node I’ve used “..*::” instead of a simple ” ..”

Also, in case you want to remove all the namespaces mentioned in the xml, you can try doing something like this:

var arNS:Array = xml.inScopeNamespaces();
for each (var item:Namespace in arNS)
{
	xml.removeNamespace(item);
}

However, do note that this will not remove the default namespace.