Flash content on iPhone and the likes

7 10 2009

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

16 09 2009





Flash Builder 4 beta features

23 07 2009

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.

fb4_doc_reference

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>

fb4_app_1


fb4_app_2





New name for FlexBuilder

29 05 2009

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

13 04 2009

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

27 02 2009

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

13 02 2009

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. 

Quince - UX Patterns