I had been playing with this for one of a project requirement.

Description of scenario:

• Embedded fonts ‘Times New Roman’ both, using default font manager (Batik) as well as AFE
• The application consists of two text area components
• For 1st textarea, I am setting text using ‘text’ property and setting font family, size and color using setStyle().
• For second, I am providing text related information via ‘htmlText’ property.
• Using a slider I should be able to change alpha value of both textArea components.

Behavioral problems:

• When I change value using slider, the alpha effect is applied and visible for 1st textarea, but in case of second, alpha value gets applied but text has no visible impact of alpha.
• When I rotate both textArea components using, 1st gets rotated, but not second. In case of both textareas, I am referring and using embedded font only. (font family ‘TNR’ in example)

I expect both textAreas behave identical.

As far as I know and received primary feedback from a famous flexer guy, my code is right. If I consider this, there is definitely a limitation / bug in flex SDK. Hence I suggested a new task in SDK.

Here is a code I had written to simulate the SDK limitation / bug:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Style>
		@font-face
		{
			src: url('/assets/fonts/times-new-roman.ttf');
			fontFamily: "TNR";
			font-weight:normal;
			font-style:normal;

			advancedAntiAliasing: true;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.events.SliderEvent;

			private function init():void
			{
				basicTxt.text = "This is a sample text!";
			}

			private function onChange(event:SliderEvent):void
			{
				basicTxt.alpha = event.value;
				htmlTxt.alpha = event.value;
			}

			private function doRotate(event:MouseEvent):void
			{
				basicTxt.rotation = 20;
				htmlTxt.rotation = 20;
			}
		]]>
	</mx:Script>
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="70%" height="50%">
			<mx:TextArea id="basicTxt" width="80%" backgroundColor="blue" fontSize="36" height="100%" fontFamily="TNR"/>
			<mx:TextArea id="htmlTxt" width="80%" backgroundColor="blue" height="100%">
			<mx:htmlText>
					<![CDATA[<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="TNR" SIZE="36" COLOR="#000000" LETTERSPACING="0" KERNING="0">This is a sample text!</FONT></P></TEXTFORMAT>]]>
				</mx:htmlText>
			</mx:TextArea>
		</mx:HBox>
		<mx:HSlider minimum="0" maximum="1" value="1" change="onChange(event)" />
		<mx:Button label="Rotate" click="doRotate(event)" />
	</mx:VBox>
</mx:Application>

I will appreciate if anyone can give some ideas / pointers to work around.

It’s been very difficult to achieve WUSIWUG in Flex 3 (Flash Player 9) and InDesign Server, at least for Text viz, font family, font size etc. In other words, a character with Arial font and size 12 in flash player will look differently from other non flash applications like text editors, design tools etc, having the same character specification. Therefore it is difficult to achieve the same output what you see in flash player, with InDesign Server and so in output PDF! Albeit, both are Adobe products!!!

Speaking to Serge Jespers about this he accepted that Flash player is built differently. Also, Anand added that the new Text Layout Framework, available with Flex 4, runs with Flash Player 10 has addressed many such issues. It has many changes as compared to traditional TextArea component available with Flex 3.

However, Text Layout Framework is not 100% compatible with Flex 3.2. It is not possible to embed and use font in Flex 3.2 (or 3.3) with TLF. The release notes from adobe clearly mentions this, considering root level change in embedded font structure. My experiment also failed to show an embedded font with TLF under Flex 3.3.

However, a point communicated by Jespers, that the TLF is made with the help of InDesign team is a ray of hope to go forward WUSIWUG. But is long way to migrate from Flex 3 to Flex 4, waiting for Flex 4 to be mature from its beta release.

A typical requirement was to provide some means so that anyone can upload / add new font(s) and the same can be used by Flex application. The Flex project should not require recompilation process.

Font, as a TTF or FON file cannot be used unless embedded, but that requires recompilation.

Searching around net gave me a way to solve this gave me a reasonable good solution.

Instead of specifying external styles such as <mx:Style source=”assets/styles/fonts.css”/> I used StyleManager.

Any change in fonts.css requires project recompilation to get the change in effect.

So, I compiled fonts.css using mxmlc fonts.css . This compiled CSS to SWF.

Then I loaded fonts at runtime using StyleManager.loadStyleDeclarations(“fonts.swf”, true, true);

And that’s it….! The font(s) inside fonts.swf can be used and that gives the same effect as embedded.

Adobe Flash Builder, formerly Flex Builder is already out with beta tag at present. Personally, I dislike the renamed brand as Flash Builder. Already, many have misconception that Flash and Flex are similar! The only common point is that both supports ActionScript (ECMA 335), but so what? Application of both suits are totally different. Of course, the SDK brand remains same, Flex SDK version 4, Gumbo.

It is near to Adobe’s Creative Suite family. In Flash Builder 4, you can work with Flash MovieClip, import designs from Catalyst. So is pointer in that direction.

Data centric features are really attractive, be it data binding or data object like Hibrnate in java, representing data as POJO. But, this is limited to CRUD only. Flex 4 has backward compatibility – with halo components!

Features with newer IDE is welcomed, especially network monitor. This eliminates need of httpfox and such third party browser plug-in!

Overall, Flex 4 seems to be reached to the community expectations! Here is something more. Tim Buntel says this.

DPI is often confused with screen resolution. Actually when screen resolution changes (in pixel height x width) the DPI rate is not necessarily changed.

In most cases DPI remains same, unless changed intentionally. In simple language, increasing screen resolution will allow more dots to be displayed on screen, by decreasing distance between each dot. Increasing DPI rate of screen but keeping resolution will increase number of dots per inch; by decreasing dot thickness, and that will eventually result into more dots in whole screen, with unchanged resolution.

When image resolution comes into picture, DPI plays role to consider depth of an Image. More the DPIs, better is the image – depth.
Two similar looking image (at its original size) may have different DPIs. The image with higher DPI rate, if zoomed in, will not get blurred or distorted very easily.

DPI is the somewhat similar concept of mega pixel – the camera term.

This term and its effect came into picture when I started input and output to real wprld from Flex application!
Flex application (or flash player) accepts width, height, x, y or such dimension properties in pixels only. The real world deals with inch, foot, centimeter or any such unit.

So where the game is?

Above simple question puzzles many.
widthInch = widthPixels/DPI is the key!

Say you have image with 500 pixels, width in inch will be 500/DPI. So if DPI is 96, then width is 500/96inches.

In case of flash player, DPI rate is 96.
So if I want to display an image in 2 inches width, I need to set image width to 2*96 pixels. This ignores Image (physical image file) and its DPI rate as I am going to display in flash player, not any image editor.

Also, this bug post is strange upto my knowledge. Flash Player’s DPI seems constant, ignoring screen DPI.

<mx:Script>
	<![CDATA[
		private function fill(event:MouseEvent):void
		{
			var data:BitmapData = Bitmap(imageObject.content).bitmapData;
			data.floodFill(event.localX,event.localY,0x00ffff);  // replace 0x00ffff with your choice of color
		}
	]]>
</mx:Script>
<mx:Image id="imageObject" source="...." click="fill(event)" />

This few lines simply fills selected or defined color to DisplayObject / Image like fill tool of any Paint tool.

Apparently, creating customized RichTextEditor component in flex was looking time consuming. The rich APIs that flex provides made this task easier.

I retrieved reference of different styling controls from a hidden richTextEditor object, arranged them as per my requirement, and its done!

I thought to make a custom editor with customized control positions is a big task, but is not what I thought!

<?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.Button;
			import mx.controls.TextArea;
			import mx.controls.TextInput;
			import mx.controls.RichTextEditor;

			private function init():void
			{
				var textInput:TextInput = rte.linkTextInput;
				textInput.visible = false;

				var bulletsButton:Button = rte.bulletButton;
				bulletsButton.visible = false;

				var fontFamily:DisplayObject = rte.fontFamilyCombo;
				font.addChild(fontFamily);
				var fontSize:DisplayObject = rte.fontSizeCombo;
				font.addChild(fontSize);

				var alignBtns:DisplayObject = rte.alignButtons;
				effects.addChild(alignBtns);

				var boldBtn:DisplayObject = rte.boldButton;
				var italicBtn:DisplayObject = rte.italicButton;
				var underlineBtn:DisplayObject = rte.underlineButton;
				var colorPicker:DisplayObject = rte.colorPicker;
				var styles:HBox = new HBox();
				styles.addChild(boldBtn);
				styles.addChild(italicBtn);
				styles.addChild(underlineBtn);
				styles.addChild(colorPicker);
				effects.addChild(styles);

				var textArea:TextArea = rte.textArea;
				editor1.addChild(textArea);
			}
		]]>
	</mx:Script>
	<mx:VBox id="controls" width="250" height="100">
		<mx:HBox id="font" />
		<mx:HBox id="effects" />
	</mx:VBox>
	<mx:Panel id="editor1" x="300" width="300" height="300"/>
	<mx:RichTextEditor id="rte" visible="false" />
</mx:Application>

1. Use of restrict property. The following example allows only numeric input

<mx:TextInput id="textInput" restrict="0-9\-" />

2. Use of unicodeRange style property inside CSS (stylesheet) while embedding fonts. The following example restricts all special symbols except period sign(.).

@font-face
{
src:url("../assets/myFont.ttf");
fontFamily: myFontFamily;
flashType: true;
unicodeRange:
U 0041-U 005A, /* Upper-Case [A..Z] */
U 0061-U 007A, /* Lower-Case a-z */
U 0030-U 0039, /* Numbers [0..9] */
U 002E-U 002E; /* Period [.] */
}

3. Use of Flex built in validator components. Following example calls handleValid and makes it sure that user does not leave inputComponent blank.

<mx:Validator id="reqValid" required="true" source="{inputComponent}" property="text" valid="handleValid(event)" invalid="handleValid(event)"/>

Flex SDK has rich set of font managers. Those 3 (Batik, AFE, JRE) manage and transcode to flash player fonts.
However, using following code in CSS caused comile time exception.

“exception during transcoding: Font for alias ‘Arial Bold’ with plain weight and style was not found at…”

@font-face
{
src: url('/assets/fonts/arial-bold.ttf');
fontFamily: "Arial Bold";
}

@font-face
{
src: url('/assets/fonts/arial-bold-italic.ttf');
fontFamily: "Arial Bold Italic";
}

The perfect solution that I could find was that I also need to specify font weight & style in CSS, as per the type of font, I am embedding.

Here is the perfect solution:

@font-face
{
src: url('/assets/fonts/arial-bold.ttf');
fontFamily: "Arial Bold";
font-weight:bold;
}

@font-face
{
src: url('/assets/fonts/arial-bold-italic.ttf');
fontFamily: "Arial Bold Italic";
font-weight:bold;
font-style:italic;
}

Flex SDK is really very smart in this case. It actually detects that the font supplied is of which type effect – bold, italics or both.
More on font managers is here.

I implemented an application in Flex that used web service, written in PHP with NuSOAP library. The WSDL file that was available for Web Service is as under:

<?xml version="1.0" encoding="ISO-8859-1"?>
<definitions xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xmlns:tns="http://server" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns="http://schemas.xmlsoap.org/wsdl/" targetNamespace="http://server">
<types>
<xsd:schema targetNamespace="http://server" >
 <xsd:import namespace="http://schemas.xmlsoap.org/soap/encoding/" />
 <xsd:import namespace="http://schemas.xmlsoap.org/wsdl/" />
</xsd:schema>
</types>
<message name="saveImgRequest">
<part name="id" type="xsd:string" />
<part name="data" type="xsd:string" />
<part name="emailId" type="xsd:string" />
<part name="notes" type="xsd:string" /></message>
<message name="saveImgResponse">
<part name="return" type="xsd:boolean" /></message>
<message name="purchaseRequest">
<part name="id" type="xsd:string" />
<part name="data" type="xsd:string" /></message>
<message name="purchaseResponse">
<part name="return" type="xsd:boolean" /></message>
<portType name="purchasePortType">
  <operation name="saveImg">
    <input message="tns:saveImgRequest"/>
    <output message="tns:saveImgResponse"/>
  </operation>
  <operation name="purchase">
    <input message="tns:purchaseRequest"/>
    <output message="tns:purchaseResponse"/>
  </operation>
</portType>
<binding name="purchaseBinding" type="tns:purchasePortType">
  <soap:binding style="rpc" transport="http://schemas.xmlsoap.org/soap/http"/>
  <operation name="saveImg">
    <soap:operation soapAction="http://server/webservice.php/saveImg" style="rpc"/>
    <input><soap:body use="encoded" namespace="http://server" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></input>
    <output><soap:body use="encoded" namespace="http://server" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></output>
  </operation>
  <operation name="purchase">
    <soap:operation soapAction="http://server/webservice.php/purchase" style="rpc"/>
    <input><soap:body use="encoded" namespace="http://server" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></input>
    <output><soap:body use="encoded" namespace="http://server" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></output>
  </operation>
</binding>
<service name="purchase">
<port name="purchasePort" binding="tns:purchaseBinding">
    <soap:address location="http://server/webservice.php"/>
  </port>
</service>
</definitions>

After carefully considering the sequence of parameters in web service method call, I tried to import Web Service through Flex Builder’s Import web service wizard.

Surprisingly, methods that are served by the Web Service have been detected with all parameters. But, with a surprise:

Why is the sequence of parameters been changed? Neither parameters are in ascending/descending order of alphabets nor are in original sequence as are declared!

Can anyone give reason?

Ignoring unwanted sequence through import wizard, I finally implemented Web Service with parameters as are there in WSDL, and it worked fine for me!

private function initAndCallWS():void
{
    saveImageWebService = new WebService();               
    saveImageWebService.wsdl = "http://server/webservice.php?wsdl";
    saveImageWebService.saveImg.addEventListener("result", resultHandler);
    saveImageWebService.saveImg.addEventListener("fault", faultHandler);
    saveImageWebService.addEventListener(LoadEvent.LOAD,loadHandler);
    saveImageWebService.loadWSDL();
}

private function loadHandler(event:LoadEvent):void
{
    saveImageWebService.saveImg("userID","image_content", "email@server.com", "notes");
}

This makes very generic sense – this is about my experience in terms of software programming.

My team was facing big pain to solve a very small – simple looking issue. Everything was logically simple and correct.

In flex 3, I disabled TextInput something like under:

objTextInput.enabled = false;

After that I tried to change color through stylesheet (CSS) and it did not work. Contradictory I was able to change font-family and font size of the same component in same fashion, and was working fine.

Changing to objTextInput.enabled = true; worked perfectly fine as expected!

What can I consider this as? A bug in Flex 3 SDK or bug in my understanding?

A typical requirement to create custom closed shape was a big pain till now at my workplace. Many were working to create some run time changeable shape and through that, mask an image. I achieved this; finally, after visiting a blog and a forum for Flash programming. Also, my colleague Mayur helped to organize once I was ready and I explained like Proof of Concept.

For custom shape, you will require a reference to public property of any DisplayObject / UIComponent – that is graphics (flash.display.Graphics)

Now is the real crux.

The next steps work just like you draw something on paper (or Canvas)

// Create and initialize Sprite object
var spriteObj:Sprite = new Sprite();

// Clear graphics
spriteObj.graphics.clear();

// Define style of line (border of the shape)
spriteObj.graphics.lineStyle(1, 0xff00ff);

// Start filling with a selected color
spriteObj.graphics.beginFill(0x00ff00);

// Move to a position to start from (without actually drawing)
spriteObj.graphics.moveTo(x, y);

// Draw a line / curve or anything that is supported by graphics
// This may be used in a loop or recursive manner to draw lines / curves passing through n points
for(...;...;...)
{
	spriteObj.graphics.curveTo(handlerX, handlerY, x, y);
}

// End filling process, just like you put pen aside!
spriteObj.graphics.endFill();

// Define a new canvas and initialize it
var canObj:Canvas = new Canvas();

// Add the just created Sprite object as a raw (not direct UIComponent child) child
canObj.rawChildren.addChild(spriteObj);

// Use over image as a mask, if required
imgComp.mask =  canObj;

Flex SDK is Free & Open Source but Flex Builder is neither free nor open source.

I googled if there is any way to use Flex SDK with Eclipse (because Flex Builder is built on Eclipse too) for development purpose.I found 2 useful results; Of course I haven’t tried yet.

http://cfsilence.com/blog/client/index.cfm/2007/3/26/Setting-Up-Eclipse-For-Flex-2

http://www.darronschall.com/weblog/archives/000182.cfm

Hoy me desayune la grata noticia de que google ya sabe crawlear paginas hechas con flash. Cae una de las barreras mas importantes de flex y flash en general.

http://googleblog.blogspot.com/2008/06/google-learns-to-crawl-flash.html

Parece ser entonces que lo que hicieron para explorar los swf los muchachos de google es usar los controles de usuario. Sacando conjeturas, supongo que habran hecho bots capaces de reconocer los controles y sabiendo usarlos.

Lo que mejor indexa el google de los sitios y widgets flash es el texto que ve el usuario (despues de todo la indexación esta basada en el escaneo de la interface).

Lo que todavía no indexa (02/07/2008 dd/mm/aaaa) son las imagenes incluidas en dentro de los swf.

Una piedra importante sale del camino de las aplicaciones RIA.