Blue Flex

On more than one occasion in the past I’ve been wishing to create a custom component that is totally dynamic so that I don’t have to worry about hardcoding any sizes.
So lets just say I have a list/tilelist and it contains pictures. Normally what I’d do is make sure that the pictures are a set size and I’d just make the list dynamic in one direction so it may end up showing 4.5 tiles which is normally fine as it’s a scrollable list.

But what if you have a list that will only ever contain say 10 items and you wish to use as much of the users screen as possible then each time the user changes the screen size you need to work out the optimal size of a tile/item.

Check out the demo here. This actually took me quiet a while to figure out how to do, I think the function to work out the size has gone through several iterations. (the example is based on the Tile class as that handles the layout and lets me do the nice animation moves when one tile moves around the screen on resize)

Here is the actionscript code that will work out the optimal size. I know that this function can be optimised further, but this will do to show you how its done. (possible optimisations: SQRT is not a nice function to call for the processor, use it sparingly, reducing number by just -1 each time isn’t great either, could reduce it by larger amounts then swing back a forth until I get the best fit).

//total number of tiles
var tile_count : Number = numberOfSlides;
//height of rectangle
var b : Number = unscaledHeight;
//width of rectanlge
var a : Number = unscaledWidth;
 
//divide the area but the number of tiles to get the max area a tile could cover
//this optimal size for a tile will more often than not make the tiles overlap, but
//a tile can never be bigger than this size
var maxSize : Number = Math.sqrt((b * a) / tile_count);
//find the number of whole tiles that can fit into the height
var numberOfPossibleWholeTilesH : Number = Math.floor(b / maxSize);
//find the number of whole tiles that can fit into the width
var numberOfPossibleWholeTilesW : Number = Math.floor(a / maxSize);
//works out how many whole tiles this configuration can hold
var total : Number = numberOfPossibleWholeTilesH * numberOfPossibleWholeTilesW;
 
//if the number of number of whole tiles that the max size tile ends up with is less than the require number of
//tiles, make the maxSize smaller and recaluate
while(total < tile_count){
	maxSize--;
	numberOfPossibleWholeTilesH = Math.floor(b / maxSize);
	numberOfPossibleWholeTilesW = Math.floor(a / maxSize);
	total = numberOfPossibleWholeTilesH * numberOfPossibleWholeTilesW;
}
 
return maxSize;

If anyone else has a solution or knows of a better solution using actionscript (or anything else for that matter) I’d love to see it as although this works I’m thinking there must be a faster solution.

Looking at links like the following http://www.combinatorics.org/Surveys/ds7.html these problems can be pretty complicated!

I started to try out some flex with Google maps and it’s refreshingly straight forward.

Virtually all of the information to do the below can be found here http://code.google.com/apis/maps/documentation/flash/reference.html

So I’m just going to highlight a couple of things I did that were not in the docs.

Panning

• Panning, well there is an example on how to do panning in ‘tour de flex’ but it uses a very basic method to work out difference between 2 points, divide by 100 and just add difference to starting point using the timer function.

A much better way would be to use a Tween so that you can implement an easing function, but a tween will only do one value at a time and a point has two values.

So I used the Move class. It moves an object from point A to point B which is exactly what I was after, but I just wanted the values as I’m not moving an object.

 Here is the actionscript code to implement it

//The move effect needs a target  otherwise it will NOT tween
//so just create a temporary target
var uiTemp : UIComponent = new UIComponent();
moveEffect = new Move();
//set up the move effect
moveEffect.xFrom = currentLatLng.x;
moveEffect.yFrom = currentLatLng.y;
moveEffect.duration = 1500;
moveEffect.easingFunction = moveMap;
moveEffect.xTo = Number(mapDetails.lat);
moveEffect.yTo = Number(mapDetails.long);
 
//on each update move the map
//calls the map.setCenter method
moveEffect.addEventListener(TweenEvent.TWEEN_UPDATE, updateMapPosition, false, 0, true);
//at the end I open up the marker window
moveEffect.addEventListener(TweenEvent.TWEEN_END, showMarker, false, 0, true);
//Play effect, give it the target so that it actually plays
moveEffect.play([uiTemp]);

Marker Windows

• The information window that pops up beside the marker on the map needed to be an image with some text.  I never noticed any examples in the docs for this but I did see an example online so I thought I’d stick into this post as well to increase its coverage.

  Again very straight forward (Google really makes it easy for developers) check out the code below.

//In order to open a window beside a marker you need a InfoWindowOptions
var options:InfoWindowOptions = new InfoWindowOptions({
    //This is the key line for making it into a custom window
    //uiHolder is a Canvas (but it can be any UIComponent) and I'm sure you know what you can put into
    //a UIComponent, anything you like :)
    customContent: uiHolder,
 
    padding : 7,
    width: 262,
    height: 262,
    drawDefaultFrame: true
});
//Take the marker that you wish the window to appear above and
//call openInfoWindow and pass in the InfoWindowOptions you just created
currentOpenMarker.openInfoWindow(options);

Click to open app in new window

Click to open app2 in new window

Following on from my recent post on creating a specific flex search using Google I wanted to make it easier to flick between the main Google search and the flex collection Google search.
Well I’ve created an OpenSearch plugin (supported by Firefox 2+, Internet Explorer 7+, etc) so I can now easily flick to a specifc flex search whenever I wish now.

To use search plugin click here.

Community

I’d like it to contain as many helpful flex, AIR and flash sites as possible. I’m talking about sites that actually give you code hints, tips and samples without tonnes of text that get them up the page rankings without actually being of any real use.

Hopefully you’ll all like the search and find it useful.  I’d love it if this flex/AS/AIR search could be as comprehensive as possible.  It would help me (and others) when looking for appropriate information. (I know there are various aggregators out there but the search facilities on these sites aren’t normally great, but Google’s is — so go on, help me add to the list to make it better for everyone  )

Current List

http://blog.everythingflex.com/
http://dougmccune.com/
http://flexbox.mrinalwadhwa.com/
http://onflash.org/ted/
http://www.mikechambers.com/
http://www.scalenine.com/
http://dougmccune.com/
http://www.darronschall.com/
http://algorithmist.wordpress.com/
http://www.moock.org/blog/
http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=2
http://actionscriptexamples.com/
http://blogs.adobe.com/air/
http://blogs.adobe.com/flex/
http://www.degrafa.org/
http://flexbox.mrinalwadhwa.com/
http://www.webkitchen.be/
http://blog.flexexamples.com/
http://www.kennethsutherland.com/
http://www.gskinner.com/blog/
http://www.gotoandlearn.com/
http://polygeek.com/

If there are any links that you particularly like then leave a message with the link.  If it’s got some good examples etc then I’ll add it to the list.

Cheers.

Additional sites:

http://www.insideria.com/
http://userflex.wordpress.com/
http://www.riaforge.org/
http://www.quietlyscheming.com/

Having done close to 4 years of flex programming I’ve been asked frequently ‘why use flex?’.

My normal response is well flex is for programmers and flash is for designers (generally speaking). But having never created a proper flash project I’ve not had a proper insight into flash, but that’s changed a wee bit in the past few days. How? Well I’ve been doing an actionscript only project so that it could be imported into a flash project.

I’m really surpised about all the stuff I take and use in flex that I just couldn’t use in the project code that was just for flash.

Main Issues & work arounds (if possible)

Embedded assets (ByteArrayAsset & BitmapAsset etc issues)

• Why when you wish to use something from the start of your app should you have to load the asset. Well I’m sure if you’ve done flash for a while you’re used to either pulling something onto the stage or using the loader method if using actionscript.

Well I’m used to using the [Embed] metadata but try using that and you’ll find that it requires the flexSDK. Why!!! If you’re trying to do everything without flex then you’ll actually find that the reason it requires the flexSDK is as follows -

IFlexAsset is a marker interface with the following meaning: if a class declares that it implements IFlexAsset, then that class represents an asset — such as a bitmap, a font, or a sound — that has been embedded in a Flex application. This interface does not define any properties or methods that the class must actually implement.

So the reason you’ll find that you can’t use the [Embed] tag in a pure actionscript project is NO REASON. So should you get an error after using the [Embed] tag then all you need to do is create an empty class of whatever it can’t find and place it in a folder mx/core/ 

Tweens

• There is a considerable difference between tweens for flex and tweens for flash. The flash tween isn’t anywhere near as flexible as the flex version . If you wish to change a value from say 0 to 100 using an easing function then in flex you just tell the tween here is the start value ‘0’ and here is the end value ‘100’ and I want the duration to be say 700 milliseconds. Then every time this updates I can do other things and on the last call I can make sure that the end value is what I’m expecting (see previous post on fuzzyness after rotations for why this is a good thing).  But with the flash versioned Tween I can’t do this.  The property I change must be part of an object and it must be changed using either seconds! or the timeline.  The flash tween does have a update event that you could listen to but I like the flex version that has a function that gets called for each update and an end update function call for the last value update.

  So what can you do, well flex is open source, so just take a look at the flex tween class and copy/paste and remove all flexEvent references and change any mx_internal to private.  If you still wish to use the flexEvents then just create your own event and fire them. Job done

Code hinting

• Dammit why??? Surely they can put code hinting into CS4, why not? The lack of code hinting really must be to turn programmers away from CS4 and to use flexbuilder or simialr. No workaround for this other than if you want code hinting use flexbuilder.  You can edit your AS files that are in your flash project using flexbuilder, but why can’t you do this in CS4?

SWC’s

• I belive its possible to create a SWC in flexbuilder and then load it into flash CS but I’ve not managed it yet. (when I do I’ll blog that)

Conclusion

If you can develop in flex, the do. Your life will be sooo much easier.

If you need code for a flash project then use flexbuilder to make it, try to keep as much of it separate from your flash project as possible. e.g. In my case my actionscript project accepted a Sprite from whatever the designer was doing in CS4 and that’s all it cared about so I could develop it 100% in flexbuilder using an actionscript project. (Then just pass code over to flash project to insert into project – use of a SWC would make this process better, working on it)

If you know the flex libraries and flash doesn’t have something but flex does then chances are you can just remove any mx.* references or fudge it (as in the case of the or tween issues)

If your designing something, then sure stick to flash.

If you’ve ever set the martix3D & Z position for a flex object you’ll have noticed that as soon as you do it loses its sharpness.  This is especially noticeable if you’re container/object has text in it.

Well here are the few simple steps to make sure that when you need you’re object to get its ‘sharpness’ back you can.

1. Before you set the Z property and while the matrix3D is null take a copy of the objects matrix.  You can do this by accessing object.transform.matrix, note as soon as you set the Z property the matrix3D will go from being null to being set and the matrix value will end up becoming null.
2. If using a tween or similar to go between a certain value (rotation) and 0 then I found that unless you explicitly use the value 0 in the end tween function that it may set the end value as 0.0001 or something very close to 0.  This will not be enough, so in the end tween function I always explicitly set the value to whatever I want it to be at the end.  e.g. if my tween was something like Tween(this , 90, 0) then in the onTweenEnd() I make sure that the value is 0 (rather than just using the value passed into the end function – which may or may not be exaclty 0).
3. As soon as the rotation value is 0, then I set the Z property to NaN, then set the object.transform.martrix3D to null and finally I make the object.transform.matrix = the previously copied matrix.
4. As soon as you copy the matrix to the transform.matrix property you should see your object become sharp again.
5. Thats it .

Hope this helps a bit.

Well I’ve been working on creating some cube style effects at my work and in particular an actionscript project that will take any number of containers and then rotate them in a cube style using the new flash 10 libaries.

Anyway I got a Sin() mixed up for a Cos() and the following effect happened which I thought was quite a cool effect. Ignore the colours and its roughness it’s just a prototype swf but I thought I stick it up just to show the side effect that I never expected

Not Expected

Expected

I needed a quick/simple method to iterate through a collection of data and pull out just the unique values.

So if you had a collection that looked like

<data>

<info name=”B” />
<info name=”C” />

<info name=”B” />

<info name=”A” />

<info name=”B” />

<info name=”C” />

<info name=”C” />

<info name=”A” />

<info name=”B” />

<info name=”C” />

<info name=”B” />

</data>

Then you only have 3 unique values (A, B & C).

So I came up with a method that is effectively a single pass through the data.

It uses a dictionary, and the value of the objects inside the AC for the key.

So if you have a dictionary variable dict, then if you have a value of ‘XX’ and you use that as the key (dict[‘XX’] = ‘XX’) then if you have another value of ‘XX’ and assign that to dict[‘XX’] = ‘XX’ then the previous entry gets overwritten giving you a set of unique values.

Its just a case of then getting the value out of the dictionary and back into an AC. (dictionary’s are not Bindable like AC’s)

//takes an AC and the filters out all duplicate entries
public function getUniqueValues (collection : ArrayCollection) : ArrayCollection {
	var length : Number = collection.length;
	var dic : Dictionary = new Dictionary();
 
	//this should be whatever type of object you have inside your AC
	var value : Object;
	for(var i : Number = 0; i < length; i++){
		value = collection.getItemAt(i);
		dic[value] = value;
	}
 
	//this bit goes through the dictionary and puts data into a new AC
    var unique = new ArrayCollection();
    for(var prop :String in dic){
    	unique.addItem(dic[prop]);
    }
    return unique;
}

Flex is good, but see trying to get that last few bits out of it at times can be a pain. Take pie charts and the legends. What was required was a simple pie chart with the middle cut out (doughnut chart) and when you moused over the appropriate legend item it would expand the matching item in the pie chart. Surely that would be simple, yeah. Nope, it wasn’t and what I’ve done feels like a hack, but it works.

I’m not going to cover the creation of pie charts, if you want to know that then check out

http://blog.flexexamples.com/2007/10/13/creating-donut-shaped-pie-charts-using-the-innerradius-style/

and

http://blog.flexexamples.com/2007/11/06/exploding-wedges-in-a-flex-piechart-control/

So how did I do the exploding and keep it smooth?

Well first you must make sure the Lengend is listening for the itemMouseOver and Out event

<mx:Legend width="205"
      direction="vertical"
      backgroundColor="0xffffff"
      id="legendOne"
      dataProvider="{chartOne}"
      verticalCenter="0" 
      verticalAlign="middle" 
      left="168"
      itemMouseOver="explode(event)"
      itemMouseOut="implode(event)"
      >
</mx:Legend>

After that you implement the over and out functions. Although you can get the itemMouseOver event you do not actual get a reference/index to what you have just moused over that you can use, so you have to go through the PieSeries data and check its labels against the label that comes with the event. Once you have that you can set the wedge explode radius (perWedgeExplodeRadius).

I also change the alpha value just to make things look a bit better. I also set a over flag so that if you mouse over the label/marker then mouse over it again you stop any flickering. If you mouse over the marker -> label this will result in a item mouse out & over event even though its the same item.

At the same time if an itemMouseOut event occurs i start a short timer before resetting the exploded radius. Again this just helps things look a little smoother.
 

private var pieSeries : PieSeries;
 
//Boolean value to make sure that the animation is smooth and that the correct item is exploded.
//the item out event gets fired when the mouse moves from label to the marker
private var over : Boolean = false;
//explode the section of the chart that was just moused over in the legend
private function explode(event : LegendMouseEvent) : void {
  if(delayTimer){//this will stop the legend, pie chart flickering as the user moves mouse from the label to the marker
     delayTimer.stop();
     delayTimer.removeEventListener(TimerEvent.TIMER, callAfterDelay);
  }
 
  var len : Number = PieSeries(event.item.source).legendData.length;
  var index : Number = 0;
  var arr:Array = new Array(len);
  if(over){
    event.item.alpha = 0.70;
  } else {
    event.item.alpha = 0.70;
    for(var i : Number = 0; i < len ; i++){
      //set the explode radius on the item that fired the over event
      //and make sure that the rest of the exploded radii are 0
      if(event.item.label == event.item.source.legendData[i].label){
        index = i;
        arr[i] = 0.1;
      }else {
	arr[i] = 0;
      }
    }
    PieSeries(event.item.element).perWedgeExplodeRadius = arr;
    over = true;//set the flag to true
  }
}
 
//on the mouse out event this gets called, start a timer in case the user is just moving from label to marker or vice-versa
private function implode(event : LegendMouseEvent) : void {
  delayTimer = new Timer(200, 1);
  delayTimer.addEventListener(TimerEvent.TIMER, callAfterDelay, false, 0, true);
  delayTimer.start();
  pieSeries = PieSeries(event.item.element);
  over = false;//if you don't reset this then when the user moves the mouse down the list nothing will happen
}
 
//This gets called if the timer has finished (mouse has been of legend for a set amount of time)
private function callAfterDelay(event : TimerEvent) : void {
  var arr : Array = [];
  pieSeries.perWedgeExplodeRadius = arr;
}

Thats it, hopefully that will help someone.

Check out part 2 of this explanation here. Part 2 explains the circular effect and how to do the labels for the legend.