Blue Flex

Today (not for the first time – but it’s been a while) I needed to create a custom class that took a custom itemRenderer.

Having used itemRenderers for ages I thought it was going to be straight forward, but I’d forgotten a few little bits of info needed to implement them from scratch (i.e. not using say a menu or datagrids itemRenderers). It’s all very well to just give a flex component a class name in the MXML but how does the class that contains the itemrenderer implement it?

Test app

So I created a very small test app to make sure that I could create a custom itemRenderer for my custom class.

• Step 1, create the custom itemRenderer.  For the test I just made this a Canvas and made it 100% * 100% and the background colour was red.
• step 2, display the class that you are going use as an itemRenderer as a normal display object (place custom class inside a Canvas)
• step 3, create a custom class that will take and display an itemRenderer. Once created assign your new custom itemRenderer to the new custom class.
• View the test app, all going well you should now see two instances of your itemRenderer. One is the actual class as a displayObject and the other as an itemRenderer inside your custom class.

I’ve placed my small test app here purely so that you can look at the source code (right click app).  The app does NOTHING and is not interactive, it’s just to show the source code and how to make sure you set things up correctly.

Once you’ve looked at the code this bit will make sense.

• step 1 & 2, display a canvas in the top left. This canvas contains only the custom class that is to be used as an itemRenderer.  This just proves that the itemRender will display what you think it should.
• step 3,  create a custom class that will contain your itemRenderer. Then place custom class into app and set the itemRenderer to your custom itemRenderer class.  

All you need to do now is create a itemRenderer slighty more complex than a red box, but as long as it’s a DisplayObject then its going to be the same.

That’s it, as ever feel free to comment (especially if you’ve found this helpful).

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/

Totally off topic this. But I had quite a bit of hassle trying to find info on how to do what I just did.

So if you look to your right you’ll see a nice search box with the Google brand inside it Nothing special there you may think… well.

Well it’s a custom search box from Google, and I’ve customised it by adding all of my favourite and preferred flex, AIR, and flash sites. So should you need to search on anything related to the mentioned categories just use the search box to the right.

How its done

If you are interested in adding something similar to your blog or web page then there is very little information out there about Google’s custom search page. 

There seems to be 2 ways to add it to wordpress.

1)       Add it as a page within your site so that it retains your sites look and feel, in order to do this you can find a plugin for custom google search and depending on what theme you have have this may or may not work. I tried out http://aleembawany.com/projects/wordpress/google-custom-search-plugin/ which as it happens didn’t work with my theme.  But I wasn’t really trying to get it to work inside my site, I wanted the custom search to retain the Google style as that is what people are used to when using Google.

2)      Add it as a hosted Google custom search. Now on this method I found absolutely zero information (actually the info I did find on the wordpress site said it wasn’t possible).  Not to be put off by this info as anything seems to be possible with wordpress (I’m just learning it really, my blog is only a few weeks old), I decided to hunt through the various php files etc that come with wordpress.

The file that is required is searchform.php and this can be found inside the theme folder that you are using ( something like ‘wp-content/themes/{your theme folder}/searchform.php’)

Open up the file and inside that you should find some php and some html code (a form).  Replace the html code with the code that Google has given you for your custom search.  Or if you would like to have a search that just does Flex, AIR and flash sites then feel free just to use the following code.

<form action="http://www.google.com/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-7396620608505330:xjbbr6-w0cu" />
    <input type="hidden" name="ie" value="ISO-8859-1" />
    <input type="text" name="q" size="23" />
    <input type="submit" name="sa" value="Search" />
 
  </div>
</form>
<script src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en" 
type="text/javascript">
</script>

When the user searches in this form then it will look up just a list of sites that only contain information on Flex, AIR, actionscript & flash.

You can also bookmark the following link

http://www.google.com/cse?cx=partner-pub-7396620608505330:xjbbr6-w0cu&ie=ISO-8859-1

This will link up to the specific Google search that I’ve set up just to look at relevant Flex, AS3, AIR & Flash sites.

Ages ago I worked on an accessibility tool that followed the mouse around the stage and magnified whatever the mouse was over. It never made it to the final stages of completion but after reading a question on flexcoders for a zooming tool, I thought I’d revisit the idea and create a simple magnification/zoom example.

Before

During

After

Right click the example for source code.

This isn’t for production, just a POC on how to do enlarging, enjoy.

Here is a list of various flex explorers that I’ve found handy, in no particular order.

• Graphics Explorer -

http://kennethsutherland.com/flex/graphic_explorer/graphicExplorer.html

• Chart Sampler - 

http://demo.quietlyscheming.com/ChartSampler/app.html

• Custom Easing Function Explorer -

 http://www.madeinflex.com/img/entries/2007/05/customeasingexplorer.html

http://www.jamesward.com/easingFunctionFun/easingFunctionFun.html

• CSS Style Explorer -

http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

• Filter Explorer (BlurFilter, GlowFilter etc) -

 http://merhl.com/flex2_samples/filterExplorer/

• Distortion effects (still nice, even though I’m trying to do the 3D stuff in flash 10, this was ahead of its time)

http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/

Others

These are ones I’ve seen but never had to use.

• Rounded, Enhanced button explorer

http://www.wabysabi.com/flex/enhancedbuttonskin/

• Reflection explorer

http://www.wietseveenstra.nl/files/flex/ReflectionExplorer/v1_0/ReflectionExplorer.html

• Perlin noise

http://www.bit-101.com/explorers/PerlinExplorer.swf

• Dual Slider

http://www.visualconcepts.ca/flex2/dualslider2/DualSlideTest.html

• Pixel Bender explorers

http://labs.adobe.com/technologies/flashplayer10/demos/pixelbender/
http://extjs.com/playpen/air/PixelBenderExplorer.air  (AIR application)

If you have any you’d like me to post, or if you know of any other good exlporers, let me know and I’ll add them into the list.

I recently checked out a page that was created using flexbuilder to see if it was indexed by Google and every time I checked it Googles results came up with

Error #2032. RSL Error 1 of 1.

I found virtually nothing out on the internet about this apart from a recent email or two on the flexcoders mail list. It turns out that Google will NOT index your SWF if you use an RSL to reduce the file size!

Now I try to keep up to date on as much flex as possible but I’ve never heard/read anyone say this before. All I’ve heard about it was great Google can now index SWFs, any SWFs and no mention of any exceptions.

I think this is a bit of a big thing, I always use the RSL feature to make my SWFs smaller with the one time hit of getting the framework RSL SWF so every SWF I’ve done will not be getting indexed by Google. As it happens the majority of the stuff I do is inside other pages that do get indexed or its not for public consumtion anyway, but that’s not the point. All info out there suggests Google will index any SWF, it will NOT.

So should you get an ‘Error #2032. RSL Error 1 of 1.’ when Google returns a search on your SWF then turn of the RSL feature. Google better sort this out before flex 4, as I think they’re going to turn on the RSL feature by default for flex 4.