Spelling checking feature in flex by Using ’squiggly.

Today I explore the spell checking feature in flex using ’squiggly’.Now we can easily get the spell checking feature in our Application which are more concerned about Text Entries. Its really really nice. Its an spelling checking engine for flash Player and Adobe AIR.

Please explore the link below for details about ’squiggly’.
http://labs.adobe.com/technologies/squiggly/

You can download ’squiggly’ from here.
http://labs.adobe.com/downloads/squiggly.html

You can easily use it in your flex application. And live demo is here at adobe’s site.
http://labs.adobe.com/technologies/squiggly/demo/

Enjoy Flexing………….

Shardul Singh Bartwal

Play and Stop Swf in Flex
Many of times I have seen people to looking for requirement when they want to stop and play the swf out side the swf. This becomes more important when you  want  to  play or stop the swf’s which are not created by you.Below is the code  for  the  same  requirement.  In  this  demo  Application ,  I   am  using a Loader for playing the swf. Hope it will be helpful for you if you require.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="OnCreationComplete()">
<mx:Script>
<![CDATA[
		import mx.core.UIComponent;
		private var loader:Loader; 

		private function OnCreationComplete():void
		{
			var url : String ="assets/MyanimatedSwf.swf";
			loader = new Loader();
			var request:URLRequest = new URLRequest(url);
			loader.load(request);
			loaderHolder.rawChildren.addChild(loader as DisplayObject);
		}

		private function onStop():void
		{
		var mc : MovieClip = loader.content as MovieClip;
		mc.stop();
		}

		private function onPlay():void
		{
		var mc : MovieClip = loader.content as MovieClip;
		mc.play();
		}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%" horizontalAlign="center"
	verticalAlign="middle">
		<mx:Canvas id="loaderHolder" width="500" height="500"/>
		<mx:Button label="Stop" click="onStop()"/>
		<mx:Button label="Play" click="onPlay()"/>
</mx:VBox>
</mx:Application>

Enjoy Flexing………….

Using Image Inside the Sprite in Flex

If we want to add any Image inside the Sprite class in flex,then It is not possible to add image inside the sprite. But if your requirement is as such in that case you can achieve this by adding the Loader inside the sprite. Below is the code for the same.

MainApplication.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="createSpriteWithBitmap()">
	<mx:Script>
	<![CDATA[
	import mx.controls.Image;
	private function createSpriteWithBitmap():void
	{
	var sp : SpriteWithBitmap = new SpriteWithBitmap();
	can.rawChildren.addChild( sp );
	}
	]]>
	</mx:Script>
	<mx:Canvas id="can" x="200" y="200"/>
</mx:Application>

SpriteWithBitmap

package
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.*;
import flash.net.URLRequest;

import mx.controls.Alert;

public class SpriteWithBitmap extends Sprite
{
	//Pass the source path or url here.
	private var url:String = "http://shardulbartwal.files.wordpress.com/2009/09/ssbrose.jpg";

	public function SpriteWithBitmap()
	{
		loadImg();
	}
	private function loadImg():void
	{
		var loader:Loader = new Loader();
		loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadFailure);
		var request:URLRequest = new URLRequest(url);
		loader.load(request);
		this.addChild(loader);
	}

	private function loadFailure(event:IOErrorEvent):void
	{
		Alert.show("Can't load :" + url);
	}
}

}

Enjoy Flexing………….

Zooming in Flex

I saw many people searching for the finding solution for zooming functionality. They are normally trying it with the zoom effect or scaling which is very true. But the case is bit sensitive when you have to zoom all the components inside a component and so on. So surly this will be achieved through a recursive function which will zoom each and every control inside a container unto the nth level where a container will not have any more child. Below is the demo application for achieving this. Hope this will be useful for all those who are having such requirement.

For code click on the link below.
ZoomDemo Source Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.Container;
import mx.core.UIComponent;
private function doZoom(component:UIComponent,val:Number):void
{
component.scaleX = val;
component.scaleY = val;
if(component is Container)
{
var children:Array = Container(component).getChildren();
for(var i:int = 0; i < children.length; i++)
{
doZoom(children[i], val);
}
}
}
public function applyZoom():void
{
if(pnl == null)
{
return;
}
doZoom(pnl,zoomSlider.value);
}
]]>
</mx:Script>
<mx:HBox horizontalAlign="right">
<mx:VBox width="700" height="100%">
<mx:Panel id="pnl" width="400" height="400" title="Panel">
<mx:HBox width="100%" height="100%">
<mx:Button label="B1"/>
<mx:Button label="B2"/>
<mx:Button label="B3"/>
</mx:HBox>
<mx:HBox width="100%" height="100%">
<mx:Button label="B11"/>
<mx:Button label="B21"/>
<mx:Button label="B31"/>
</mx:HBox>
</mx:Panel>
</mx:VBox>
<mx:VBox>
<mx:HSlider id="zoomSlider" minimum=".1" value="1"
maximum="2" change="applyZoom()" width="180"/>
<mx:Label text="Apply Zoom"/>
</mx:VBox>
</mx:HBox>
</mx:Application>

Hope you will like this………Enjoy Flexing…

If you want to support a large number of the languages,then you will require to embed the ‘arial unicode ms’ font,but the embedding of this font is something different. If you will try to embed this font normally then it will give you compile time error. For embedding this font you will require to pass the compiler argument. Just go to the your compiler setting and add there
‘-managers=flash.fonts.AFEFontManager’ it will resolved your compile time error,and now you can use the wide range of the fonts from the different languages.

If you are using the Loader for loading the images,and you want to play with the bitmap of the image.May be couples fo times an issue can be occur with you. If you will host your application on any machine and your images will be on other machine then you will not able to load the images. And the bad thing is that you will also not find this Error without the debuger version of the flash player,and also it will work perfectly inside your flex builder i.e. development environment. I am assuming here that you have already used the cross domain file. Then to outcome from this problem you will require to add two more lines in the code.

I was written the code earlier like this.

var context: LoaderContext = new LoaderContext()
context.checkPolicyFile = true;
loader.load( new URLRequest( mineUrl ), context )

For out coming to this problem we have to add two more line here.

context.securityDomain = SecurityDomain.currentDomain;
context.applicationDomain = ApplicationDomain.currentDomain;

Hence your overall code will be something like this.

var context: LoaderContext = new LoaderContext()
context.checkPolicyFile = true;
context.securityDomain = SecurityDomain.currentDomain;
context.applicationDomain = ApplicationDomain.currentDomain;
loader.load( new URLRequest( mineUrl ), context )

Please don’t forgot to add the line below which is for adding the crossdomain file.If you have not already added this.

Security.loadPolicyFile( crossDomainPath );

Hope you will like this.

invalidateDisplayList vs invalidateList

I found a very nice link about the difference between these two, and want to share with you .

http://stackoverflow.com/questions/74269/what-is-the-difference-between-invalidatelist-and-invalidatedisplaylist

 Many Many thnx to mike chambers for providing this important information.

Shardul Singh Bartwal

Sometimes back I was looking for how to rotate any component from its Center.But I don’t got any proper solution for that.As all of us know the registration point of the any display object are its top left point i.e (0,0).Hence I used the ‘Rotation Effect’,and used the originX and originY for finding the center of the Display object.But I know that it was not proper solution.Currently I am here with the proper solution.Its very simple to acheive.You can also get the source code from here.Below is the Link.
Click Here For RotationDemo Source Code.

Masking in Flex 3

Using the masking in flex is very simple as there is already a property mask with each UIComponet.Just assing this property of the component to that visual display object by which you want to mask it.In most cases you will require to draw the different shapes and mask with them your display object.
You can check it out from here with code.
Hope you will like this.

Shardul Singh Bartwal

If we are require to pass any variable from outside into a popup window in flex,the way
is slightly different then creating Popup in a classic way.Actully its not the different
instead there is a type casting into the same class which we are going to display in popup.
Let suppose you want to pass a string value into the popup then inside the popup you need
to create a public varible, like I am creating ‘urlValue’ string type variable inside the popup.

Now pass the value inside the popup as below:-

var myPopUp:MyPopup= MyPopup(PopUpManager.createPopUp(this, MyPopup, true));

myPopUp.move(((Application.application.width/2)-(myPopUp.width/2)),((Application.application.h

eight/2)-(myPopUp.height/2)));

myPopUp.urlValue = “value from outside”;

Here the MyPopUp is the class which we are going to show in popup.

Hope it will be helpfull for you.