Use swc in flex

May 5, 2008 by maohao

Scenario 1: You need to compile ActionScript code as a reusable component in Flex Builder.

Solutions: Follow the steps (FB plugin v3):

Step 1. Compile swc. First you will need to create a new “Flex Library Project”. Then copy all the actionscript code into the top folder of your project file, retaining the package/namespace structure (fig. 1)

The file structure and xml manifest file in Flex Library Project

In “src” folder, you would need a xml-manifest.xml file where you declare the class and id (optional, default to the class name anyways) (fig 1). Thirdly, you would need to define your namespace for the class that’s going to be referenced in MXML (or Flash?) like so: In the AS class fine, inside the class definition, just like the way as you declare a variable, add “public namespace fc;” (substitue “fc” with whatever your choice of namespace). If you’ve enabled “build automatically” (under “Project” menu command), FB will instantaneously build the deploy files for you the time you save the AS file. The result is the complied .swc file, which you can find in the “bin” folder in your library project.

Step 2. Use swc in your Flex project. You either need to copy the swc file(s) into the library-path folders as defined in your flex-config.xml, or explicitly tell Flex to use the swc you want in your current project. To do so, go to “Project properties”->”Flex Build Path”->”Library Path”->”Add SWC”. You can simply navigate to the swc file in the Flex library project as defined in Step 1. After Flex compiled the project, you can use the component as defined in your ActionScript code. Here is an extract:

<mx:HBox>
<mx:Label text=”Search by last name: “/>
<fc:AutoComplete id=”lastNameSrchAC” dataProvider=”{listInfo}” labelField=”lastName”/>
</mx:HBox>

See also: Namespaces in Flex and Soprano

How to update everyone’s profile page at facebook (same content for everyone)?

May 2, 2008 by maohao

scroll datagrid by actionscript (flex 3)

April 30, 2008 by maohao

//Highlight the itemrender
dgPeopleList.selectedIndex = 212;

//validateNow needs to be called before verticalScrollPosition is set.
dgPeopleList.validateNow();

dgPeopleList.verticalScrollPosition = 212;

ScrollPane doesn’t clip loaded content

April 17, 2008 by maohao

When a ScrollPane is used to load media (Flash 8 IDE), sometimes the loaded content didn’t get clipped (it either sits on top of the scrollpane or goes underneath it).

Cause: An absolute URL is used (such as “myScrollPane.contentPath = ‘http://www.mydomain.com/img/image.jpg’”) for the loaded content.

Solution: Change the absolute URL to relative URL (”img/image.jpg”). Of course you should be able to put the loading swf file and the loaded contents on the same domain.

Mouse hitTest (collision test) in AS 2

April 6, 2008 by maohao

As a spatially challenged person (easily lost in a street/inside an office building/mall, etc.), I am always confused by the maths that is required when converting a spatial point from one coordinate space into another (localToGlobal, globalTolocal, etc. in Flash).

But hitTest for mouse cursor (collision test to see if mouse cursor collide with movieclip/subclass instances) is much more straightforward ;) You always test the mouse coordinates at the _root; this also holds true when you load the swf as an external file using MovieClip.loadMovie or MovieClipLoader.loadClip.

var bigMC:MovieClip;
var cir:MovieClip = bigMC.cir;
var rec:MovieClip = bigMC.rec;


var lsnr:Object = new Object();
lsnr.onMouseMove = function(evt:Object)
{
var tof:Boolean = cir.hitTest(_root._xmouse, _root._ymouse, true);
if(tof)trace(tof);
}
Mouse.addListener(lsnr);

In actionScript 3, the cumbersome way of using onMouseMove is gone because of the added event types such as MOUSE_OVER and MOUSE_OUT.

Set Reply-To in pine

March 24, 2008 by maohao

1.  Main menu->S (Set-up)

2.  C (Config)

3.  Shift-W (Search for “customized-hdrs”)

4. C (to set values. Each field should be separated by comma [,] like this “From: me@somewhere.com, Reply-To:me@here.com”

5. Return to  accept. E to exit.

Stop event propagation

March 5, 2008 by maohao

I was coding a small control. When it’s clicked, it unfolds itself and starts to respond to user input; when the user clicks anywhere after this, it folds back and stops responding to user input.

Basically there are two sources for the click event: the object itself and the Stage. Based on which state the object is in, it behaves differently. Here is what the mouse click handler looks like:

if(_state==FOLDED)
{
unfold();
stepper["registerSource"](stage);
removeEventListener(MouseEvent.CLICK, handleClick);
stage.addEventListener(MouseEvent.CLICK, handleClick);
}else if(_state==UNFOLDED)
{
fold();
stepper["unregisterSource"](stage);
stage.removeEventListener(MouseEvent.CLICK, handleClick); addEventListener(MouseEvent.CLICK, handleClick);
_state = (_state == FOLDED)? UNFOLDED: FOLDED;

The control didn’t seem to change its state with just this code. The reason is that once one source is removed from the event listeners list, another one is added to the list. Since the click event continues to bubble through, and the two sources are executing the same code (as shown above), so the switch between states seems to ultimately cancel each other.

Solution:

To make it work, just add one line on top of the code, like this:

evt.stopImmediatePropagation();

This eventually makes the state transfer smooth.

Full-screen mode in Flash 8

February 19, 2008 by maohao

How to create true fullscreen movies with Flash

Exploring full-screen mode in Flash Player 9

Quick facts:

  1. Only supported with Flash Player 9.0.28  or above;
  2. Can be implemented in Flash 8 IDE by modifying the Stage class;
  3. Can only be initiated with  user inputs such as mouse click or keypres;
  4. An overlay dialog box will appear when the movie enters full-screen mode, instructing the user how to exit and return to normal mode.

TortoiseSVN (UI client) cheat sheet

January 6, 2008 by maohao
  • Starting a new project
  1. Create a new repository at server side. E.g., myserver.com/codesnippets;
  2. At the client side set up an empty folder with all the necessary structures inside it. E.g., codesnippets/trunk. Right click the folder->TortoiseSVN->Import to get the empty folders up to the destination repository;
  3. Once the structure is ready at the repository, select the folder of contents you need to import to the repository and import the content to the destination repository;
  4. Now with the repository set up at the SVN server, we would need to keep a working copy at the client side to keep version control in synchronization. We do this by “checking out” from the repository. To do this, create a clean folder (or select a folder that has no previous SVN checkout history) and right click->SVN Checkout and specify myserver.com/codesnippets as the URL of the repository. This downloads the contents inside the repository to the folder.
  • Sending Your Changes To The Repository
  1. Use TortoiseSVN → Update or TortoiseSVN → Check for Modifications to see if there are any conflicts first;
  2. If there are no conflicts and your working copy is up to date, select any file and/or folders you want to commit, then TortoiseSVN → Commit…;
  3. If you need to rename, delete or move a file, use the SVN dialog menu to make the changes as to keep SVN aware of them. (TortoiseSVN is capable of detecting drag-drop to the files within a working copy of a repository.) Then repeat step 1, 2 to commit your changes to the repository.
  • Updating Your Working Copy With Changes From Others/The Repository
  1. The process of getting changes from the server to your local copy is known as updating. To update, select the files and/or directories you want, right click and select TortoiseSVN → Update in the explorer context menu.

E4X in ActionScript 3 and Flex 3

January 1, 2008 by maohao

The following top AS3 classes, in conjunction with HTTPService and mx.rpc.events.ResultEvent classes are used in Flex (2+) to handle XML:

XML/XMLList/Namespace/QName

XMLList Class can be considered a collection of XML objects. It is a native ActionScript class that is advised to handle XML such as data binding. XMLNode has become the legacy class in AS 2.

So the first step of handling XML data is to deserialize an XML document or object into XMLList objects.

<mx:HTTPService id="dataFetcher" url="http://mysite/myData.xml" resultFormat="e4x" result="onData(event)" />

Remember you will almost always need to initialize the call by adding the following code to the “creationComplete” event handler of the mx:Application node:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”dataFetcher.send()”/>

To deserialize the an XML object (sample shown as follows), use ResultEvent Class, like so:

<delSum Test="1" timestamp="2007-12-10T21:07:48Z">
<del pId=”Dem” dNeed=”2029″ dTot=”4056″ dChosen=”991″ dToBeChosen=”3237″>
<Cand cId=”1746″ cName=”Clinton” dTot=”290″ d1=”+290″ d7=”+290″ d30=”+150″/>
<Cand cId=”1918″ cName=”Obama” dTot=”194″ d1=”+194″ d7=”+194″ d30=”+55″/>
</del>
<del pId=”GOP” dNeed=”1113″ dTot=”2225″ dChosen=”251″ dToBeChosen=”2153″>
<Cand cId=”893″ cName=”Romney” dTot=”109″ d1=”+109″ d7=”+109″ d30=”+1″/>
<Cand cId=”302″ cName=”Paul” dTot=”47″ d1=”+47″ d7=”+47″ d30=”0″/>
</del>
</delSum>

private function onData(event:ResultEvent):void
{
demData = event.result.del.(@pId==”Dem”).Cand.(@cName!=”Uncommitted”);
gopData = event.result.del.(@pId==”GOP”).Cand.(@cName!=”Uncommitted”);
}

Note that event.result represents the top node, which is <delSum> node in the XML document.

XML filtering:

To locate a set of XML objects that represents similar characteristics, use the parenthesis () to include sets of boolean statements, following a dot after the node you want to carry out the filtering against, like so:

var product1:XMLList = catalog.product.(@id==1);//Returning the product node or nodes if there are multiple products whose id is equal to 1

or

var productName:String = catalog.product.(price<50).name;//Returns the name node

or

var manufName:String = catalog.product.(price<50).@manufacturer;//Returns the manufacturer attribute under the name node

To get list of candidate names:

var _tst:XMLList = event.result.del.(@pId=="GOP").Cand.(@cName!="Uncommitted").@cName
trace((_tst[0] is XML)+”; “+_tst[0].nodeKind() )//Returns “true; attribute”
trace(gopData[0].@cName+”; “+(gopData[0].nodeKind())//Returns “Romney; element”

Types of node include: text, comment, processing-instruction, attribute, or element.