on Flex

Flex- actionscript - Rotate a Image 360 Degree

2011-12-18T22:26:00.000-08:00

To view a product in 360 degree. We need series of images of the product in various degrees. The more the no of images taken the rotation view will be smooth. I have used the images of canon EOS1000D.

Screenshot of the example.

The code below

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    minWidth="955" minHeight="600"
    creationComplete="init()"
    backgroundColor="#FFFFFF"
    >

place the following in the script tag

   import mx.events.SliderEvent;
   
   [Bindable]
   public var imgCount:int = 1;
   
   public static const imgMaxCount:int = 20;
   
   
   public var imgTotCount:int = imgMaxCount;
   [Bindable]
   public var urlString:String = "360/N1-01.jpg";

   public var my_loader:Loader = new Loader();
   
   protected function hslider1_changeHandler(event:SliderEvent):void
   {
    if (event.currentTarget.value < 10)
    {
     urlString = "360/N1-0"+ event.currentTarget.value + ".jpg";
    }
    else
    {
     urlString = "360/N1-"+ event.currentTarget.value + ".jpg";
    }

    var request:URLRequest = new URLRequest(urlString)
    my_loader.load( request );    
   }
   
   protected function nextBtn_clickHandler(event:MouseEvent):void
   {
    imgCount = imgCount +1;
    if ( imgCount >imgMaxCount )
    {
     imgCount = 1;
    }
    
    if ( imgCount > imgTotCount )
    {
     imgCount = imgTotCount;
    }
    
    if (imgCount < 10)
    {
     urlString = "360/N1-0"+ imgCount + ".jpg";
    }
    else
    {
     urlString = "360/N1-"+ imgCount + ".jpg";
    } 

    var request:URLRequest = new URLRequest(urlString)
    my_loader.load( request );

    
   }

   protected function prevBtn_clickHandler(event:MouseEvent):void
   {
    imgCount = imgCount -1;
    if ( imgCount < 1 )
    {
     imgCount = imgMaxCount;
    }
    
    if (imgCount < 10)
    {
     urlString = "360/N1-0"+ imgCount + ".jpg";
    }
    else
    {
     urlString = "360/N1-"+ imgCount + ".jpg";
    } 

    var request:URLRequest = new URLRequest(urlString)
    my_loader.load( request );
   
   }
   
   private function init():void
   {     
    var request:URLRequest = new URLRequest(urlString)
    my_loader.load( request );

    my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, startListener);

   }
   
   private function startListener (e:Event):void
   {
    imgProduct.source = my_loader.content;
   }

The main UI part.

 <mx:Image id="imgProduct" 
     x="155" y="89"     
     width="400" height="400" />
 <mx:HSlider x="275" y="63"
    liveDragging="true"
    change="hslider1_changeHandler(event)" maximum="{imgMaxCount}" minimum="1"
    snapInterval="1"/>
 <mx:Button x="630" y="175" id="imgNextView" label="Next" click="nextBtn_clickHandler(event)" />
 <mx:Button x="68" y="175" id="imgBackView" label="Prev" click="prevBtn_clickHandler(event)"/>

</mx:Application>

Adobe Flex UITextField text formatting

2011-10-13T01:59:00.000-07:00

Recently worked on a project which uses UITextField and lot of formatting.

And there is no direct method of formatting the text of a UITextField.

Steps
1. Need to create a new TextFormat. apply style to the textformat.
2. Validate the UITextField and Set the textformat to the UITextField

Got the clue from http://stackoverflow.com/questions/791645/styling-uitextfield
See answer from John http://stackoverflow.com/questions/791645/styling-uitextfield/1081123#1081123

Sample look like the following Image.

Sample Code below.

<?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/mx" minWidth="955" minHeight="600"
      creationComplete="init()">
 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.core.UIComponent;
   import mx.core.UITextField;
   
   public var domainSprite:Sprite;
   public var auic:UIComponent;
   public var tf:TextFormat;
   public var aminolabel:UITextField
   
   private function init():void
   {
    var j:int = 0; 
    var m:int = 0;
    var l:int = 0;
    tf= new TextFormat();
    tf.size = 12;
    tf.bold = true;
    tf.font = "Arial";
    tf.align = "center";    
    for (var i:int=1; i<5;i++ )    
    {     
     domainSprite=new Sprite();
     aminolabel = new UITextField();
     auic = new UIComponent();  
     
     domainSprite.graphics.beginFill(0x6633cc,1);
     domainSprite.graphics.drawRect(0,0,300,20);
     domainSprite.graphics.endFill();
     
     domainSprite.x = l;
     domainSprite.y = j;    
     auic.addChild(domainSprite);  
    
     aminolabel.width = domainSprite.width;
     aminolabel.height = domainSprite.height;

     aminolabel.x = domainSprite.x ;
     aminolabel.y =  domainSprite.y ;
    
     aminolabel.text = "Sample Text" + i;    
     aminolabel.textColor = 0xffffff;

     auic.addChild(aminolabel);  
     graphicsContainer.addElement(auic);
     
     aminolabel.validateNow();  
     aminolabel.setTextFormat(tf);
     
     m=m+24
     l = l + 305;
    }
   }
  ]]>
 </fx:Script>
 <s:HGroup id="graphicsContainer" width="100%" height="100" />
</s:Application>

Flex Google+ API and Actionscript 3

2011-09-25T23:28:00.000-07:00

Got inspiration from http://lucamezzalira.com/2011/09/16/playingwithgoogleplusapiactionscript/

Google has published only public APIs that allow you to retrieve user’s informations and his activities list, all API are made in RESTful and JSON that are so easy to add in your project.

I made a simple example to retrieve data from my Google+ profile in Actionscript and Flex 4.5 for Android.

If you want to play with Google+ API, first of all you have to request your Google+ API key; to do that go to Google API console and activate Google+ service, then in the API Access page you can find your key.

Sample code pasted below:
Create a Android mobile application. and past the following the code in the Homeview. Run the application in simulator. Replace the api key with your api key

<?xml version="1.0" encoding="utf-8"?>

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 

		xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"

		creationComplete="init(event)">

	<fx:Declarations>

		<!-- Place non-visual elements (e.g., services, value objects) here -->

	</fx:Declarations>

	<fx:Style>

		@namespace s "library://ns.adobe.com/flex/spark";

		Label{

			fontSize:9;

		}

	</fx:Style>

	<fx:Script>

		<![CDATA[



				import com.adobe.serialization.json.JSON;

				

				import flash.display.Bitmap;

				import flash.display.Loader;

				import flash.display.Sprite;

				import flash.display.StageAlign;

				import flash.display.StageScaleMode;

				import flash.events.Event;

				import flash.events.MouseEvent;

				import flash.net.URLLoader;

				import flash.net.URLRequest;

				import flash.net.navigateToURL;

				import flash.text.TextField;

				import flash.text.TextFieldAutoSize;

				import flash.text.TextFieldType;

				import flash.text.TextFormat;



				private var city:String;

				private var iconLoader:Loader;

					

					

					private function init(e:Event):void

					{					

						var loadDataProfile:URLLoader = new URLLoader();

						loadDataProfile.addEventListener(Event.COMPLETE, showData);

						loadDataProfile.load(new URLRequest("https://www.googleapis.com/plus/v1/people/111822154474757777839?key=AIzaSyDyooUFU0mqEXvNu3mlvL4VdU5FK6V3KZw"));						

					}

					

					protected function showData(event:Event):void

					{

						var dataToRead:String = event.target.data as String;

						

						var data:Object= JSON.decode(dataToRead, true);

						

						city = data.placesLived[0].value;

						

						var icon:String = data.image.url;

						var name:String = data.displayName;

						var tagline:String = data.tagline;

						var description:String = data.aboutMe;




						userName.text = name;
						tagLine.text = tagline;
						desc.text = description;


						var mapLoader:Loader = new Loader();

						mapLoader.load(new URLRequest("http://maps.googleapis.com/maps/api/staticmap?center="+city+"&zoom=15&size=480x200&maptype=roadmap&sensor=true"));

						mapLoader.y = this.stage.stageHeight - 200;

						mapLoader.addEventListener(MouseEvent.CLICK, showMapOnWeb);

						mainSprite.addChild(mapLoader);

						

						iconLoader = new Loader();

						iconLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, resizeIcon);

						iconLoader.load(new URLRequest(icon));

						

					}

				

					protected function resizeIcon(event:Event):void

					{

						var delta:Number = 100/iconLoader.content.width;

						

						var bmp:Bitmap = iconLoader.content as Bitmap;
						bmp.smoothing = true;
						iconMain.source = bmp;
					}

					

					protected function showMapOnWeb(event:MouseEvent):void

					{

						navigateToURL(new URLRequest("http://maps.google.it/?q="+city+"&z=15"));

					}
		]]>

	</fx:Script>



	<s:VGroup x="1" y="3">

		<s:HGroup>

			<s:Image id="iconMain" width="100" height="100" top="5" />

			<s:Label id="userName" top="5" />

		</s:HGroup>

		<s:Label id="tagLine" />

		<s:Label id="desc" />

		<s:SpriteVisualElement id="mainSprite"></s:SpriteVisualElement>		

	</s:VGroup>	





</s:View>

Flex Builder Error: This component is based on Application, which is not a visual component. Switch to source mode to edit it

2010-04-21T01:58:00.000-07:00

Issue

When switching to design view in Flex Builder after installing 3.1 SDK update, you receive the following message:

* This component is based on Application, which is not a visual
component. Switch to source mode to edit it

Reason
You mustupdate to Flex Builder 3.0.1 to use design mode with Flex 3.1 SDK.
Solution

Doug McCune on Flex and Enterprise Development

2009-03-30T19:24:00.000-07:00

This post is reposted from Jon Rose's Blog. He is a editor in InfoQ.com I am posting her so more people can read this.

Some really interesting comments on UX within business applications:

Interview with Doug McCune

Enterprise software is almost uniformly horrible, but there’s no reason for that. We’re seeing a “UX revolution” in RIA design, and for all the buzzword nonsense surrounding “user experience, ” there’s something real happening in terms of the overall quality of the experience delivered by RIAs. We’ve seen some really great and innovative work in consumer RIAs, with a trend toward simple and intuitive interfaces. And yet in enterprise software this trend has barely even begun, it’s all still complex. I want to see enterprise applications treated like consumer apps, with the same attention to the user experience and with a consistent drive to simplify and make everything more intuitive. Complex systems don’t have to be presented with confusing software. But it takes more work to figure out the simple, elegant solution. It’s far cheaper and faster to make bad complex software than good simple software.

I also think there’s a business intelligence breakthrough afoot that will bring these same concepts of intuitive software specifically to the BI arena. Business intelligence is just a fancy way of saying that you’re extracting value from raw data in some way. This is typically limited to your mundane set of charts, gauges, and all the other normal dashboard UI elements that are the current standard. But I think thinking about BI problems from a fresh perspective, from the perspective of someone outside the enterprise space, will lead to the invention of new visualization methods. Maybe sales performance isn’t something best shown using a silly looking speedometer gauge. Maybe there’s an intuitive way to extract more value from that heap of raw data sitting on enterprise servers. But I don’t think enterprise developers have been willing enough to experiment with new concepts. People need to start inventing.

I have to agree that enterprise software is generally poor, particularly in the user interfaces. In addition, his comments on working toward the simple, elegant solution makes me want to scream, “Yes!” I think the only place I differ with him on is where the blame belongs for the overall low quality of enterprise systems. Developers do deserve some of the blame, but I think generally the challenges come from the organizations, project owners, and managers who do not understand what is now possible, or even worse never understood how to build software to begin with.

In years gone by, the platforms really limited the ability of developers to build cool user interfaces that still made sense on the budget. I was originally drawn to Flex because it can do things that simply weren’t possible on the web only a few short years ago. This probably factors into the decisions that even smart, experienced managers are still making today, as many of them have previous attempts at doing cool things that led to ballooned budgets and jeopardized projects.

So, there is the obvious onus on developers to sell their ideas and educate their organizations on what is possible now that the platforms have capabilities way beyond getting data in and out of the database. However, with that said, the real limitation of enterprise software will always be that the teams building most systems are part of companies that do not exist to build software, and often just don’t understand the processes, the platforms, the code, the users, etc. In those cases, it is unlikely that they will be able to overcome their limitations to build cool, highly usable systems. So, while I am optimistic that the advances that have come with the RIA revolution will trickle into the enterprise, it is unlikely that they will have the same impact on business applications as we are seeing in consumer applications built by companies that exist solely to build quality software.

If you enjoyed Doug in writing, check him out in this recent Flasher Magazine video interview. Also, look for him in a future DrunkOnSoftware.com interview.

Basic Actionscript 3 String Functions by Devaraj

2009-02-11T17:52:00.000-08:00

Devaraj has posted some useful Actionscript 3 string funcions in his blog post.

To view the full code do visit his blog.

public function replaceChars(str:String, Char:String, replace:String) : String
{

}

public function trimWhiteSpace(str:String) : String
{

}

public function containsAlphaNumeric(str:String) : Boolean
{

}

Tour de Flex home page

2008-12-17T00:10:00.000-08:00

The Tour de Flex home page is available now at http://flex.org/tour. There you will find the installer, user guide, and instructions on how to submit samples of your own custom components, effects, skins, etc.

Screen Shots

Eclipse plugin

Found about this from

http://gregsramblings.com/2008/11/23/tour-de-flex-how-to-add-your-components-effects-skins-etc/

Like the old Flex Component Explorer, Tour de Flex can be used to find components. But it goes way beyond just out-of-the-box Flex components. This first release contains 217 components and samples including popular Cloud APIs like Salesforce.com and Intuit, numerous community components from people like Doug McCune and Tink, commercial components from companies like ILog, and numerous other goodies. If you find something missing you can submit it!

Also in this release is an Eclipse / Flex Builder plugin which allows you to find components from inside Flex Builder!

Share Tour de Flex!

You can help spread the word about Tour de Flex by using the following HTML to embed the install badge in your website:

        <iframe width="216" height="182" frameborder=0 scrolling="no" 
                  src="http://tourdeflex.adobe.com/badge/"></iframe>

Optimizing Flex Applications

2008-12-03T10:30:00.000-08:00

from dcoletta

Optimizing Flex Applications

View SlideShare presentation or Upload your own. (tags: flex ria)

To reduce Flex SWF file size 2

2008-10-23T12:28:00.000-07:00

As given in Adobe Developer Connection videos.
On Day 5: Architecture and advanced topics

Video: Reducing the file size of your Flex application (4:58)

Check list

Check list

1. Check Build is release version / debug version [from flex 3]
Click release build button

2. Create common tasks into modules. (Say MenuModule.mxml)
Load module -

3. Make flex framework part of ur application.
[ . from 9.0.125 - caching mechanism ]

4. Project properties
a.flex build path
b.Library path
c. Change frameworklinkage dropdown from Merged into code to Runtime shared library.
Press Ok

5. Click Release Build.

6. Include the flex framework file on ur website.

[ Note: My swf File size is reduce from 600k 2 100k. ]

To reduce Flex SWF file size 1

2008-10-22T23:12:00.000-07:00

right click the project in Flex builder choose properties, choose compilers.

Paste the following.
-optimize=true -debug=false -strict=true

For me my swf of 600kb is reduced to 300k.

Flash Player 10 launched

2008-10-16T00:06:00.000-07:00

Flash Player 10 launched.

Flex communitywidget error , community widget error

2008-08-25T20:25:00.000-07:00

Can not resolve a multiname reference unambiguously. com.universalmind.community.events:ListEvent (from D:\Widget\src\com\universalmind\community\events\ListEvent.as) and mx.events:ListEvent (from C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\libs\framework.swc(mx/events/ListEvent)) are available. Widget/src/com/universalmind/community/widgets

Change all declaration and reference name of ListEvent class to any other name like UlistEvent.

Solved this with the help of Devaraj
his linkedin profile

Error #1034 cannot convert mx.utils ObjectProxy

2008-08-17T22:12:00.000-07:00

Array collection error when One XML node is returned
Or when one record is returned.
Error #1034 cannot convert mx utils ObjectProxy

when only one XML data is returned.

check whether single XML node is returned for example your xml output is as follows

<Books>
<Book>
<productId>1</productId>
<name>Hot Flat and Crowded</name>
</Book>
<Books>

then
if (event.result.Books.Book is ObjectProxy)
{
//M\for more than one recode
Ary = ArrayUtil.toArray(event.result.Books.Book)
AryCol = new ArrayCollection(Ary);
}
else
{
//for one recode

AryCol = event.result.Books.Book ;
}

Problem

http://bugs.adobe.com/jira/browse/SDK-13699

Solution
http://blogs.adobe.com/aharui/2007/03/arraycollection_arrays_and_ser.html

Dashboard example

2008-06-10T04:41:00.000-07:00

Dashboard example - Can be viewed in http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html with data due to flash player security reasons. Data is not displayed here.

Flickr Photo Search

2008-06-09T01:45:00.000-07:00

Flickr Photo Search from http://www.keaura.com/photosearch/FlickrMain.swf

Flickr API

2008-06-09T01:00:00.000-07:00

Flickr API http://learn.adobe.com/wiki/download/attachments/5701647/FlickrItemRendererComponent.swf?version=1

NOTE: the images displayed are coming from a public photo feed. The results may be unpredictable and Adobe is not responsible for the contents of the feed itself.

Type a search term, like "Adobe," into the text box and click the Submit button to retrieve and display photo data from the Flickr API.

Amazon.com API Interface

2008-06-04T21:39:00.000-07:00

Amazon.com API Interface from http://d-p.com/media/swf/amazon.swf

- from http://d-p.com

Flex Accordian example

2008-05-31T02:58:00.000-07:00

- from blog.flexexamples.com

Adobe Flex

2008-05-31T02:51:00.000-07:00

Started a seperate blog for Adobe Flex and related technologies today. Hope you will see more coming in ths blog.