BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Archive for the ‘Flex 3.0’ Category

Using Image Inside the Sprite in Flex

Posted by shardulbartwal on September 18, 2009

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………….

Posted in ActionScript 3.0, Flex, Flex 3.0 | Tagged: , , , | Leave a Comment »

Zoom Any container with children In Flex 3.0

Posted by shardulbartwal on September 15, 2009

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…

Posted in ActionScript 3.0, Flex 3.0 | Tagged: , , , | 2 Comments »

Rotating Display Object around its Center

Posted by shardulbartwal on July 19, 2009

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.

Posted in ActionScript 3.0, Flex 3.0 | 2 Comments »

Masking in Flex 3

Posted by shardulbartwal on June 21, 2009

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

Posted in ActionScript 3.0, Flex 3.0 | 1 Comment »

Managing Custom Events in Flex 3.0 in a easy way

Posted by shardulbartwal on April 15, 2009

As all of us require Custom Events in our Flex applications. Also we know the Event Life Cycle in Flex. I am sure that all of you will be familiar with event targating,bubling,capturing etc.Also we know that we are require to remove the Listeners which we adds. We all know that inside a flex application the event first goes to the application level and then from there back to the component which have to listen it. This issue becomes more critical if we are not using any particular architecture like Pure MVC or Cairngorm etc.So in this condition first you have to dispatch a event and listen it at application level and then again dispatch a event on its occurring and listen that at the desired place. The other ways are like by using the references of the Class from where the event is dispatched and where it is being listen in each other etc.I have created a CustomEventManager Class for managing custom event dispatching, and Listening it.Its very simple to use it. It is a static class.

For dispatching event simply write like this:

CustomEventManager.dispatchEvent(new YourCustomEvent(YourCustomEvent.YOUR_CUSTOM_EVENT));

and for Listioning the custom event write like this at right place in the event Listioning
class(e.g. at creationComplete of the class or constructor etc ):

CustomEventManager.addEventListener(YourCustomEvent.YOUR_CUSTOM_EVENT,yourCustomEventHandler);

I am also adding the code of the ‘CustomEventManager’ class.Hope it will be helpful for you.

For CustomEventManager Class click here.

Posted in ActionScript 3.0, Flex 3.0 | 4 Comments »

Smoothing the Bitmap

Posted by shardulbartwal on April 15, 2009

Normally when we are dealing with the ’smoothing’ property of the ‘Bitmap’ class it looks that its effect is not of the major aspect.But it plays a vital role.I found a very help full link related to understanding its value.If you are not getting the quality factor on the movement(by mean of rotation,skew,scale etc) on bitmap then you should check the ’smoothing’ property of the bitmap by tracing it whether it is true or false.The link below will clear you doubts and variations of the quality issue in Bitmap.Its value is more important if u are getting the bitmap of any Image which you are accessing through the url.
Please have a look at the link below to understand this issue and its solution.Thnx to Grant Skinner for this nice post.

The link is……….

http://www.gskinner.com/blog/archives/2007/08/minor_bug_with.html

Posted in ActionScript 3.0, Flex 3.0 | Leave a Comment »

Using updateDisplayList and invalidateDisplayList in creating custom Component

Posted by shardulbartwal on January 28, 2009

UpdateDisplayList and InvalidateDisplayList in Flex

I know that all of you have created custom components,and almost of you are very much comfortable with your own approach and logic for that. Here sometimes we create such components which are recreated during the applications. For example if we have simply a canvas and on a slider you have to resize it. I know that you have a multiple ways for achieving this. In flex every UI Component have a method called ‘updateDisplayList’.If we want to recreate our component at runtime then this method is very much supportive for us.We should put our that code inside this method which should be executed when we want to execute this method from somewhere outside. The important thing is that this method is not called with this name, i mean updateDisplayList(). If we want to call this method then we have to call the invalidateDisplayList() method of the instance of this class.On calling invalidateDisplayList() the updateDisplayList() method will be called. In the above example for example we should put the height and width of the component inside updateDisplayList() method. Now on change of slider the width and height will be changed and after that I have to call the invalidateDisplayList() so that the changes will be reflected inside the component.

For your comfort I am also putting the code here.

Example of Custom Component

MainApplication

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute

xmlns:local=”*” creationComplete=”onCreationComplete()”>

<mx:Script>

<![CDATA[

private function onCreationComplete():void

{

hSlider.value = 25;

}

private function onHSliderChange():void

{

can.w = hSlider.value;

can.invalidateDisplayList();

}

]]>

</mx:Script>

<mx:VBox width=”100%” horizontalAlign=”center” verticalAlign=”middle” top=”150” left=”150” right=”150>

<mx:Canvas width=”200” height=”150” borderColor=”#0000FF” borderStyle=”solid” backgroundColor=”0xCCCCCC” cornerRadius=”5>

<local:Can id=”can” w=”25/>

</mx:Canvas>

<mx:HSlider id=”hSlider” width=”150” maximum=”100” minimum=”0” liveDragging=”true” change=”onHSliderChange()”/>

</mx:VBox>

</mx:Application>

Can.as

package

{

import mx.containers.Canvas;

public class Can extends Canvas

{

public function Can()

{

super();

this.x = 50;

this.y = 25;

this.setStyle(“backgroundColor”,0xFF0000);

}

private var _w:Number;

public function set w( value:Number):void

{

_w = value;

}

public function get w():Number

{

return _w;

}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

{

super.updateDisplayList(unscaledWidth, unscaledHeight);

this.height = w;

this.width = w;

}

}

}


Hope you will enjoy this………………….Enjoy Flexing….

Posted in Flex 3.0 | 1 Comment »

Deep Linking In Flex 3.0

Posted by shardulbartwal on October 23, 2008

Deep Linking In Flex 3.0

Deep linking is one of the cool feature of the Flex 3.0.This is mainly for playing with the browser. As all of us know that if we are running any flex application then the url in the browser don’t get effected normally. This is the feature via which we are able to find the current position of the components in the url of the application. Also the changes in the url will effect the changes in the application. For example if you have selected the third item of any viewstack then it will be reflected in the url of your application. Now if you will change it from the url to 0 then the the first element of the viewstack will get selected in the application .This feature will be same as any webpage based application.

This feature is by default disable in any application. For enabling this feature just go the the properties of your application.Here select ‘Flex Compiler’.Here you will find a checkbox with label ‘Enable integration with browser navigation’ just check it to select,and click on ‘Apply’ and then on ‘OK’.Your deeplinking feature is enable now. Now at the end of your url in browser you will find ‘#’. Up to ‘#’ this will be your default setting of the application. And after this the selected container etc will be shown in the url of your application.

 

Pls don’t forget to explore

http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Deep_Linking

for more information.

 

Hope you will like this feature.

 

Enjoy Flexing………………..

 

Posted in Flex 3.0 | 1 Comment »

Encounter with services-config.xml in Adobe Flex

Posted by shardulbartwal on October 8, 2008

 services-config file is used by us for connection to the server side code.One important thing which should be noticed here is that this file is used at compile time (as we also includes {-services “services-config.xml”} under compiler settings). If you are using this file then there will be a block like below.

 <channels>

     <channel-definition id=”my-amfphp” class=”mx.messaging.channels.AMFChannel”>

           <endpoint uri=”http://IP of ur backend server/Project Name/amfphp/gateway.php”

           class=”flex.messaging.endpoints.AMFEndpoint”/>

     </channel-definition>

</channels>

The important thing here is ‘endpoint’ tag,Which have a uri field.This uri field is used to give

the path of backend server.But I will suggest not to put the this uri field here.As you know why?

Because if u will give this ip related information here then you can never change it because it will

be included in the build.So what we require to do when using this file,we should simply remove ‘uri’

from here and write it with your each and every remote object.And there you can get it from some

external xml,or by any other medium.

 

So the above block in services-config.xml should look like this only.

 

<channels>

<channel-definition id=”my-amfphp” class=”mx.messaging.channels.AMFChannel”>

<endpoint class=”flex.messaging.endpoints.AMFEndpoint”/>

</channel-definition>

</channels>

 

 

 

Hope you will enjoy it…………………..

 

Posted in Flex 3.0 | 4 Comments »

3D in Flex 3

Posted by shardulbartwal on June 20, 2008

Using Google SketchUp File into Flex 3

 

 3D in flex! Yes, we all know that it is possible but how to implement? Here I am with the solution for this. One thing more if we are going to use 3D in flex then hmmm… I think we should also go for the ‘Google SketchUp to pickup the 3d.By doing so we will also get the way to use the Google SketchUp with flex. So let start step by step for doing this.

1)      If you are not having the Google SketchUp you can get it from here. Just download it and install.

 

2)      Now simply create you 3D in Google SketchUp.

 

3)      After creating your 3D just go to ‘File’ Menu. Then ‘Export ’submenu and then ‘3D Model’.

File    >>   Export   >> 3D Model.

Then save you 3D with .kmz extension. Let I am giving my file the name ‘abc’ so it will be saved as ‘abc.kmz’.

 

4)      Now a very stylish step….just rename your abc.kmz to abc.zip. Now unzip    

Your ‘abc.zip’.There will be a folder ‘model’.Just open it and find your ‘abc.dae’ file.This .dae extension shows the file of collada type, which is supported by the flex. You can close the Google SketchUp now.

 

5)   Now you require the PaperVision 3D.Download it from here. Now unzip it and open the folder Papervision3D_1_5, inside it open PV3D_1_5.Here is a folder src also open it. Now just copy com and org folder from here and paste them into the src folder of your flex application.

 

6)  In your flex application create a folder asset and paste the abc.dae file of step 4 into it.

 

      7) Now…………just copy and paste the code below into your main mxml.

 

 

***********************************

 

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml

 creationComplete=”init(event)”

 >

<mx:Script>

<![CDATA[

import mx.core.UIComponent;

import org.papervision3d.scenes.Scene3D;

import org.papervision3d.cameras.Camera3D; 

import org.papervision3d.objects.DisplayObject3D;

import org.papervision3d.render.BasicRenderEngine;

import org.papervision3d.objects.parsers.DAE;

import org.papervision3d.view.Viewport3D;

 

 

private var myCam:Camera3D = new Camera3D(); 

private var objScene:Scene3D = new Scene3D();

private var objRenEngin:BasicRenderEngine = new BasicRenderEngine();

private var objViewport3D:Viewport3D = new Viewport3D(10,10,true,true);

 

[Embed(source="asset/abc.dae")]

private var objCls:Class;

 

private function init(event:Event): void

{

 var objUIComponent:UIComponent = new UIComponent();

 v1.addChild(objUIComponent );

 objUIComponent.addChild(objViewport3D);

 var objDAE:DAE = new DAE();

 objDAE.load(XML(new objCls() ) );

 var model:DisplayObject3D = objScene.addChild( objDAE );

 myCam.zoom=3;

 myCam.z=-500;

 myCam.lookAt(model);

 this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);

}

 

private function enterFrameHandler(event:Event):void

{

 objRenEngin.renderScene(objScene,myCam,objViewport3D);

}

]]>

</mx:Script>

<mx:VBox id=”v1” width=”100%” height=”100%/>

</mx:Application>

 

***********************************

 

 

Now run your application…………..and see 3D in flex 

 

 

 

Enjoy flexing………………

 

 

Posted in Flex 3.0 | Tagged: | Comments Off