And another one – CollapsableTitleWindow grows up

Hi folks,

Thanks to everybody who commented on the CollapsableTitleWindow, I really appreciate that 🙂
I just wanted to let you know the current work in progress reagarding the CollapsableTitleWindow, the following things are being implemented at the moment:

  • Adding a max/min width and height (already done, but I will let you see the code with the update)
  • Fix the annoying bug when compiling for Flex 3 (there might be two versions in the future – I appologize but adobe has changed the BorderMetrics calculation)
  • Let the window push forward if clicked anywhere – not only the titlebar.

I think the update might be ready this weekend, we’ll see. Stay tuned.

Advertisements

Using Flex Image events to show a preloader

Today I wanted to show a simple preloader in an itemRenderer that just contained one Image. The problem was to get the image’s events before it was too late since you just can’t catch the OPEN, PROGRESS or COMPLETE event via MXML (Why did’t they just add the metadata for that?). I have seen quite a few approaches which extended the Image class but I wanted to use a custom Image class (SuperImage) to use it’s caching capabilities. So here is the example, I’m using a normal Image here but you can use any derived class you want, it just has to use the 3 events: (You might use the following as an ItemRenderer)

(Argh! WordPress destroyed the source code, I’ll repost it soon)

That’s it, using states it isn’t too hard to change the UI. If you need cool preloaders go checkout http://www.ajaxload.info – they will generate a gif which you can easily import into the Flash IDE to convert it to swf.

Another Update to CollapsableTitleWindow

I have fixed the bug issued that it would close all other windows if closed (as I said, they were only invisible) and added CustomEvents and 2 properties most of you will like – startMaximized and startCollapsed. You can guess what the will do =) The events are resize, collapse, expand, maximize and minimize (opposite of maximize). They are all encapsulated in CollapsableTitleWindowEvent.

Source is the same as in the previous entry here

[Update] Resizable Collapsable TitleWindow (RE-UPLOADED!)

I have come around the Post regarding SuperPanel and was kind of upset it wasn’t that what I have been searching for. Also the perfomance is a little sucky (never mind 😉 ) So I thought I have to do it better – this is what I made out of it

Check the demo here (Currently down, get the files here)

You can add new Windows by Pressing the button, it will react exactly as you would expect it from a windows window. Double clicking the header will expand/shrink the window. If you collapse it it will set down to the bottom of it’s container. Please let me know what you think of it and I will release the source code. As you might guessed you can also resize the window by dragging the right lower corner. Al l graphics are drawn via code but this can be easily changed. There are Methods to let it come up expanded or shrinked, an initial size and position and much more. I’ll post the sources this weekend, if there is need for it.

[Update]

The source view is available now, I don’t know why but it doesn’t work using the contextual menu – but who cares use this link:

Download and View it HERE

See the documentation HERE

Temporary only downloadable (no demo online), my webspace is down at the moment – but get it here at Depositfiles

Here are some more examples on those implementations, none of them met my requirements:

http://manish.revise.org/archives/2005/01/09/resizable-titlewindow-in-flex/

http://dev.jessewarden.com/flex/collapsablepanel/

http://www.coenraets.com/

(All down :-O )

And the best one I found, but with to much overhead:

http://www.flexdaddy.info/2005/03/06/resizable-and-collapsable-titlewindow-flex-15/

License

This component is licensed under the MIT license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About Hex Color Codes in Flex (AS3)

Hi folks,

I recognized a lot of views on the last post I made came from users searching for stuff like 0xFFFFFFFF color code or something in that manner. This made me suggest there are a lot of people who do not understand what this means to Flex/Flash using Actionscript 3. So here is a little explanation:

Imagine you’d have a color code like this:

0xFFFF0000

This means a full opaque red for Flex, because the whole color code can be splitted into 4 regions (called channels) : Alpha, Red, Green and Blue

So for our example above this means you’re having the following channel options:

Alpha = FF (100%)
Red = FF (100%)
Green = 00
Blue = 00

So if you want to have a full opaque Blue you would write:

0xFF0000FF

Alpha = FF (100%)
Red = 00
Green = 00
Blue = FF (100%)

Now if you want to bring in lesser opacity you just have to reduce the alpha value. So to get a half opaque Green you would write:

0x8800FF00

Alpha = 88 (50%)
Red = 00
Green = FF ( 100%)
Blue = 00

So the conclusion out of this is that you will get a bright fully opaque white with writing:

0xFFFFFFFF

And a fully transparent “black” (transparent is transparent, no matter which color you take) with the following:

0x00000000

Some people who have a good understanding of colors (not me) can mix nearly every color just by mixing the colors in their head. If you are not interested in that (like me) just take a color picker and look at the Hexadecimal Code of the color.

The above will help you to get deeper into making effects using the Bitmap and BitmapData class and their methods. You can see a really simple example in the last tutorial – it shows you how to take out specific colors from an Bitmap in Flex / Flash using Actionscript 3. So go and have some fun with Bitmaps and Colors !

How to extract specific colors from an image in Flex 2 (AS3)

Some time ago I was fronted by a problem in one of my problems, I needed to set a mask to a dynamic image – not very tough, the problem was that the mask had to be taken from a greyscale Image which was also dynamically loaded. The mask image was seperated into a black and a white area, the white area could be some sort of irregular form – and that made it tough ( I thought 😉 )

After a while of testing and writing code I dropped right after writing it I ended up with the Bitmap Class introduced with Flash 8 way ago. The thing I didn’t know was that there is a little but great function most people are using for creating nice effects:

BitmapData.threshold

Note that this isn’t a method from Bitmap, this goes for BitmapData.

Here is the explanation from the Adobe Docs for Flex 2.01:

threshold () method  

public function threshold(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, operation:String, threshold:uint, color:uint = 0, mask:uint = 0xFFFFFFFF, copySource:Boolean = false):uint Tests pixel values in an image against a specified threshold and sets pixels that pass the test to new color values. Using the threshold() method, you can isolate and replace color ranges in an image and perform other logical operations on image pixels.

The threshold() method’s test logic is as follows:

  1. If ((pixelValue & mask) operation (threshold & mask)), then set the pixel to color;
  2. Otherwise, if copySource == true, then set the pixel to corresponding pixel value from sourceBitmap.

The operation parameter specifies the comparison operator to use for the threshold test. For example, by using “==” as the operation parameter, you can isolate a specific color value in an image. Or by using {operation: "<", mask: 0xFF000000, threshold: 0x7F000000, color: 0x00000000}, you can set all destination pixels to be fully transparent when the source image pixel’s alpha is less than 0x7F. You can use this technique for animated transitions and other effects.

Parameters

  sourceBitmapData:BitmapData — The input bitmap image to use. The source image can be a different BitmapData object or it can refer to the current BitmapData instance.
 
  sourceRect:Rectangle — A rectangle that defines the area of the source image to use as input.
 
  destPoint:Point — The point within the destination image (the current BitmapData instance) that corresponds to the upper-left corner of the source rectangle.
 
  operation:String — One of the following comparison operators, passed as a String: “<“, “<=”, “>”, “>=”, “==”, “!=”
 
  threshold:uint — The value that each pixel is tested against to see if it meets or exceeds the threshhold.
 
  color:uint (default = 0) — The color value that a pixel is set to if the threshold test succeeds. The default value is 0x00000000.
 
  mask:uint (default = 0xFFFFFFFF) — The mask to use to isolate a color component.
 
  copySource:Boolean (default = false) — If the value is true, pixel values from the source image are copied to the destination when the threshold test fails. If the value is false, the source image is not copied when the threshold test fails.

Returns

  uint — The number of pixels that were changed.

Throws

  TypeError — The sourceBitmapData, sourceRect destPoint or operation are null.
 
  ArgumentError — The operation string is not a valid operation

The full documentation can be found here

So if you look at this function it is commonly used to test all pixels in a BitmapData object for a certain color range and copy them (transformed) to another BitmapData object. But my intention was to extract a specific color range which isn’t too difficult:

// myImage is a completely loaded mx:Image
var sourceBitmapData:BitmapData = (myImage.content as Bitmap).bitmapData;

// The last parameter is important to make the target bitmap fully transparent
var targetBitmapData:BitmapData = new BitmapData(sourceBitmapData.width,
sourceBitmapData.height, 0x00000000);

targetBitmapData.threshold(sourceBitmapData, sourceBitmapData.rect,
new Point(0,0), "==", 0xFFFFFFFF, 0xFFFFFFFF, 0xFFFFFFFF, false);

This will look at every pixel in sourceBitmapData, if the pixel is white it is copied as white pixel to the targetBitmapData, else it is dropped.

And that’s all, it’s amazingly easy to key out a specific color – you wouldn’t even need to generate a second BitmapData object, it can take it self as the target parameter (I don’t know if it will work, never tested that).

The best thing is that this is a native C method which works lightning fast even on big Bitmaps. Some people use this function to key out the background color from a webcam video or whatever you can imagine. So now go out and key some color 🙂

How to use AMFphp 1.9 beta with Flex

One of the main reasons for using Flex is web application development, let’s take out the whole Apollo / AIR thing for a moment, so let’s have a look at fetching dynamic data from your Database. This could be done via SOAP, REST or a thousand different ways but my personal favorite is remoting best through using AMFphp. For all those of you who never heard of that take a look at their homepage an give yourself a quick start of the idea. Most important thing to know is – it is damn fast, works with php4 and 5 and is very very easy to learn. So let’s get it on …

Step 1: Get the files

First thing to do is downloading all the files you’ll need for AMFphp – get them from 5 1/2 blog.

Good, if you haven’t found them for some reason – go and get them from somewhere else damn it ! This tutorial is, like mentioned in the heading, for AMFphp 1.9 beta – if you’re working with another version don’t blame me if you can’t do exactly the same to get it running.

Step 2: Set it up

Now have a look at the zip folder, it should look like that:

Folder structure of AMFphp 1.9 beta

Step 3: Your first Service

Extract the files in a folder of your choice – now you’ll have to create a new service. A service is basically a php class containing functions to catch data from your database – but it’s not limited to that. Services go into the services folder, naming follows php class naming so the filename has to match the class name and should start capitalized. So the filename might be Products.php and it could like this:


<span style="color: #000000;"><?php

class Products
{</span>

<span style="color: #000000;">	//For people from earlier amfphp - the method table is gone finally :)</span>

<span style="color: #000000;">    	//Database connect helper function - if you don't have php5 take out the private</span>

<span style="color: #000000;">	private function connect(){</span>

<span style="color: #000000;">		//Insert your credentials here</span>

<span style="color: #000000;">		$mysql = mysql_connect(your_db_host, your_db_user, your_db_password);</span>

<span style="color: #000000;">		mysql_select_db( your_db_name );

	}

	function getProducts(){

		 //Connect to the desired database

		$this->connect();

		//Fetch Products from the database

		$query  = "SELECT * FROM products ";

		$res    = mysql_query($query);

		$products = array();

		//Put them into an Array

 		while($obj = mysql_fetch_object($res)){

			$products[]  = $obj;

		}

		//Now return the array to Flex

		<strong>return</strong> $products;

	}

}
?></span>

<span style="color: #000000;">

 

Now this is what you have to do on the server side, setup classes an services. Upload the altered amfphp directory onto your web server. You can do far more with amfphp but for now let’s head further.

Step 4: Setup your Flex project

Open up a new Project if you haven’t done so yet, what you’ll need is this source – this is the RemotingConnection Class, ok you don’t implicitly need it – but this is my way so goddamn do it.


package{
    import flash.net.NetConnection;
    import flash.net.ObjectEncoding;
    public class RemotingConnection extends NetConnection
    {
   public function RemotingConnection( sURL:String )
        {
            objectEncoding = ObjectEncoding.AMF0;
            if(sURL) connect( sURL );
        }
        public function AppendToGatewayUrl( s : String ) : void
        {
            //
        }
    }
}

Copy this into a file named RemotingConnection.as in of your flex project source folders. This is an extended NetConnection class which I will not describe any further, use it – it works 🙂

Step 5: Do some magic

This is an example how it could be done very simple to connect to the amf gateway you’ll need to do the following:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" width="100%" height="100%">
	<mx:Script>
		<!&#91;CDATA&#91;

			import mx.collections.ArrayCollection;
			import mx.controls.Alert;

			//Binding for the test Datagrid
			Bindable&#93;
			private var products:ArrayCollection

			//Since the gateway doesn't have te be initialized on every call
			//Define it as class variable
			private var gateway:RemotingConnection;

			//on Application initialize
			private function init():void{

				//Connect to the gateway
				gateway = new RemotingConnection("http://yourserver.com/amf/gateway.php");
				//Call the service defined before
				gateway.call("Products.getProducts", new Responder(onProducts, onFault));

			}

			//When products arrive from database
			private function onProducts(arr:Array):void{
				products = new ArrayCollection(arr);
			}

			//Event if loading process failed
       			public function onFault( fault : Object ) : void
       			{
       				Alert.show(fault.description);
     				//trace(fault);
      			}
		&#93;&#93;>
	</mx:Script>
	<mx:DataGrid dataProvider="{products}" width="100%" height="100%" />
</mx:Application>

 

Now do it, test your flex application – this should work in a local environment. You could also deploy it on your web server and use a relative url for connecting to the gateway. If you have done everything right the DataGrid should show the result from the database, using the field names as column headers.

From here on start reading everything you find about it and try yourself. There’s lots of documentation on the net – I started with the adobe articles on it. There’s also a lot on the amfphp site So have fun with amfPHP !