Trigonometry is a sine of the times

Recently I’ve developed a deep affinity for the often left out circle and it seems the saturation of new multi-touch devices has given birth to a wide variety of uses (finally).

Everyone Loves a Spinner Loader

Was playing around with Arc’s and made this nice little spinner class, I do confess with the animations running in separate directions I do not see an optimal way of taking a snapshot as you would with say a Snake spinner but CPU seems marginally happy.

View Source

And as usual source is provided, feel free to use it as you wish (change it, crunch it, sell it to feed a crack addiction).

Also might be worth mentioning, if anybody sees any potential performance enhancements, code formatting enhancements please don’t be afraid to criticize!

There you are slowly progressing as a kick-ass ninja code guru and suddenly you become more interested in the formatting of your lovely code and the lines taken to write a particular function than the actual project itself, ever so slightly with each line we write we breathe our methods no?

I would think this is the trait of many a well trained masters of the code, since moving into the finance sector and working with some very talented souls I noticed a common appreciation for finding/using new operators and been hooked to the little gems.

The OR EQUALS Operator (||=)

private var _myCollection:ArrayCollection;
 
private function myMethod( item:Object ) : void
{
	_myCollection ||= new ArrayCollection();
 
	_myCollection.addItem(item);
}

Each time the above method is called the OR EQUALS (||=) operator will check if _myCollection is NULL and if it is it will create a new ArrayCollection thus ensuring never a big fat Error, and it appears to be prettier than the usual chunky if(!_myCollection) { _myCollection = new ArrayCollection }.

Adobe definition: ||= logical OR assignment Assigns expression1 the value of expression1 || expression2.

As a side note it would be interesting to see performance differences between the two (I would think they would be identical.

PS. Credit to Shaun Smith (Robotlegs) for introducing this to me.

The WITH Operator

private function myMethod( item:Object ) : void
{
	with( item as String )
	{
		item.text = 'Hello World';
	}
}

Stumbled upon this while looking at some code dragged down off some Adobe server, seems like a great way to avoid doing strict object checking if(item == String) { };

more information can be found here:
http://flassari.is/2010/07/as3-with-keyword-and-casting/

Many a good developer seems to have a few of these up his/her sleeve, it would be great to get some more into the bowl?

Giving back, as of this fine year I think it is time I start giving back (or at least trying) to the many hard at work code monkeys thrashing away at keyboards and drinking loads of coffee, I decided any component worth discussing or any bug that took more than a couple hours to squeesh should be blogged about, so as a salute to all the people who have provided me with great help over my development years.

The Bug

Age: A couple years old, started his life inside the Halo components

Location: Has been know to agitate the AdvancedDataGrid in the HierarchicalData , Sort and Cursor regions

Other notes: Bug was found when using an AdvancedDataGrid with HeirarchicalData and custom sort functions.

Stack trace: Error: Bookmark no longer valid.
at ListCollectionViewCursor/seek()[C:\autobuild\3.5.0\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:2125]
at mx.collections::HierarchicalCollectionViewCursor/get current()[C:\work\flex\dmv_automation\projects\datavisualisation\src\mx\collections\HierarchicalCollectionViewCursor.as:198]
at mx.collections::HierarchicalCollectionViewCursor/collectionChangeHandler()[C:\work\flex\dmv_automation\projects\datavisualisation\src\mx\collections\HierarchicalCollectionViewCursor.as:1056]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()

override public function set selectedIndex(value:int):void
{
	super.selectedIndex = value;
 
	try
	{
		collectionIterator.seek(CursorBookmark.FIRST, 0);
	}
	catch (e:ItemPendingError)
	{
		//Handle Error here
	}
}

While digging through the AdvancedDataGrid I had noticed when setting the selectedIndex the collectionIterator is not reset as it is with SelectedItem.

Hopefully this will reduce someone’s pain out in the flex world.

More buggies to follow…

It may be a bit early for new year resolutions though it has been bugging me lately and about time to set out some goals, so with nothing left to do here is my top 10 list for 2011.

1. Learn some magic – Someone said recently you seem like the type of person who would do magic, I guess it hit home and been wanting to have something more to add in a social setting than general “What do you do for a living” with my usual response of “am a total nerd etc…” and just maybe with a few cheap tricks up my sleeve can also bring a small bit of real magic to other peoples lives (cheesey but…).
2. Learn another human speaking language – never really had a reason for learning one but maybe that is not the reason to do it, Swahili maybe? at least it would have comedy factor.
3. Learn another machine language – spending the last year only learning bits and pieces (frameworks etc…) have only concentrated on a specialized field, maybe to get excited again in the nerd industry it is time to focus in a completely separate angle, possible Java or C++.
4. Build a coffee table – It is the year of DIY (will for me anyway), everyone has a vision of life past working the usual 9 – 5 grind and then what will actually make them happy, I choose the coffee table as how wrong could I get it and at worst it collapses and a mug and magazines might get destroyed but imagine if it was a sofa, bed or anything hanging from a wall!!!
5. Do not start smoking again – finally I’m not smoking, for the first time in years have kicked the tobacco in the southern regions, feels great to have a more acute sense of smell and taste. At a guess I suppose all those years of sucking on those critters was used to dull senses and made up silly excuses constantly not to quit and finally now have more reasons to stay away than to carry on. So if I am re-reading this later and have started I want you Mr Neill to forcefully bring back corporal punishment on myself and if you have stayed off it then Congrats!!!!
6. Read more, lots more – spent a lot of time reading as of late and hope to keep it up: Tom Robbins, Paulo Coelho, Wilbur Smith etc… seems most of the authors I read have been recommended by friends and this year would like to explore my own tastes in literature.
7. Study Greek mythology - always had an interest in the field but not once ever read a book on it.
8. Focus – the power to change, spent a lot of time asking everyone else questions instead of asking myself, why all of a sudden a boredom with life and only recently when rather asking myself these questions progression has started happening, no more boredom and no more losing focus (it happens in life and you can only hope when everything is happy again you can keep it that way).
9. Study la – back to the books get excited about the differences in the world.
10. Be Happy – “The notion of life implies a certain absoluteness of self-enjoyment” – Tom Robbins, hmmm maybe I been reading to much of his work, I suppose it can be summed up by saying “Dance like nobody is watching you”.

Usually I would not want to express these on my blog, always thought this is an area to only communicate topics on work related gibberish, times are changing and change is good and this is a reminder for myself through 2011 what was wanted in 2010.

“Frame accurate” playback in flash 10.1 (or not so much), recently Adobe annonced “Frame accurate stepping” in side the spiffy new release though this feature did not get as much attention as the performance features for obvious reasons though it would be nieve not to realise the types of applications that could be built with it.

I may have read into the bold statement incorrectly the first time round assuming this meant we could finally build a fancy frame accurate player (HH:MM:SS:FF – SMPTE time code) and potentially create a rough cut editor leveraging the ByteArray access in the NetStream object (http://www.bytearray.org/?p=1689) but of course my dreams have been pushed to the side while trying to figure out a way to have consistant frame accuracy using the NetStream object.

Some information needed to get started

Two get going you will need a FMS 3.5+ server with “Smart Seeking” configured to an ON state and secondly a client that supports stepping, sadly the popular OSMF player has not integrated this yet but since it is an open source product it is “easy” enough to tear out the guts and add step capabilities or of course create your own player (no small feat for one man) by setting the inBufferSeek setting to true and calling the netstream.step() methods.

Needed background information

In FMS terms it is refered to as “Smart Seeking“, not sure why they have resorted to this on the server and stepping in the client but keeps you on your toes remembering all the lingo:

Flash Media Server 3.5.3 and Flash Player 10.1 work together to support smart seeking in VOD streams and in live streams that have a buffer. Smart seeking uses back and forward buffers to seek without requesting data from the server. You can step forward and backward a specified number of frames. (Standard seeking flushes buffered data and asks the server to send new data based on the seek time.) Smart seeking reduces server load and improves seeking performance.

This next picture shows some of my sad moments testing frame accuracy using an asset with a burnt in time code:

Not so frame accurate

As you can see we are not only out by a few frames but even a second, at first I initially thought my calculations were off and double/triple checked them:

* 24 frame/sec (film, ATSC, 2k, 4k, 6k)
* 25 frame/sec (PAL (Europe, Argentina), SECAM, DVB, ATSC)
* 29.97 (30 ÷ 1.001) frame/sec (NTSC American System (US, Canada, Mexico, Colombia, etc.), ATSC, PAL-M (Brazil))
* 30 frame/sec (ATSC)

If you are not sure what framerate you currently dealing with you could always use the callback onMetadata to rerieve, frames are simply calculated on the second and therefore ” framerate / 60 seconds”.

when building a player one thing should be thought of at all times, frame accuracy is only inside the Buffer and any action forcing the buffer to clear (seek() etc…) would ultimately cause you to lose the accuracy until the player can start sampling data from the buffer (that I am assuming on some of my discoveries), this makes true playback frame accuracy a bit of a dream.

So naturally I have done what any developer would do and pull apart each and ever piece of code I can find looking for the differences in accuracy.

Some of my current findings:

1. It appears frame accuracy is only available while inside the buffer.
2. If you use the seek() method at all for scrubbing the Netstream.time (used to get the current position) is in-accurate.
3. After a seek has complete and playback accuracy is incorrect the Netstream object will correct itself over time (+-20 seconds)
4. If you set the buffer size to ’0′ the player is in-accurate all the way through.

It seems seek() is the biggest culprit at present and this is most likely to do with the buffer being emptied completly, on initial tests it seems if you call a few step( 1 ) a few times after a seek (giving the NetStream object a chance to sample buffer data) the player will correct itself.

more to follow on my quest to build the frame accurate player hopefully removing the little voices telling me it is not possible and being given a gold star

A handy Windows 32 File name validator, recently I have been working with media files being saved from a Flex app and creating directories on windows machines for export for some Avid use, Windows has some funny constrains for file names, some examples include using the words [COM/n, CLOCK, CON], these are all included in the follwoing custom Validator with the usual ‘[$, *, etc]‘, hope it is useful to someone out in the wild.

The basic RegExp of the validator

internal function validateWin32( target:String ):Boolean
		{
			//Check name is not blank
			if( target.length < 1 ) {
 
				return false;
			}
			// Leading, trailing space, dot
			if (target.charAt( 0 ) == "." || target.charAt( 0 ) == " " ||
				target.charAt( target.length ) == "." || target.charAt( target.length ) == " ") {
				return false;
			}
			// Multiple spaces
			if ( matchPart( target, "\\s\\s+" ) ) {
 
				return false;
			}
			// Explicitly illegal Windows characters
			if ( matchPart( target, "[$*\"/\\\\\\[\\]:;|=,]" ) ) {
 
				return false;
			}
			// Control characters
			if ( matchPart( target, "[\\x00-\\x1f]" ) ) {
 
				return false;
			}
			// Reserved names. DOS compatibility means that AUX.txt
			// is just as bad as AUX.
			if ( matchPart( target, "^(?i:CON|PRN|AUX|CLOCK\$|NUL|COM\\d|LPT\\d)(?:\\..*)?$" ) ) {
 
				return false;
			}
			return true;
		}

View Source

Now, more than ever, is the time to cease adding components to itemrenderers on the whim and start really thinking about what should be included; what  the minimalist components are that will do the job right.

If you are interested in performance and memory issues in AS3 I would highly recommend reading the following:

Fast Integer math:
http://lab.polygonal.de/2007/05/10/bitwise-gems-fast-integer-math/

If you constantly have to measure items for display (positions etc…) it can have a lot of benefit using ‘Bitwise Operators’ (x << 1) as they are incredibly faster than your typical native operators (x * 2)

Optimizing Mobile Content:
http://www.bytearray.org/?p=1363

This is by far the greatest white paper I have found so far about generally optimizing AS3.  Do not let the mobile part detour you -  a very good read for flash overall

Using Vectors in Actionscript:
Mike Chambers Article ->

The new Vector class is simply a typed ‘Array’ with huge performance benefits (Kick ass and chew bubblegum)

On to some more Item Renderer specific guidelines

____________________________________________________________________________________

Extract the common visual elements

It is a good starting point to extract all the common visual items from the itemrenderers. Particularly useful if you use ‘on mouseOver show’ controls as illustrated below:

As you can see the controls are only required when a user rolls over an Item and therefore these controls (play && download buttons) only need to be instantiated once == Yippie much better performance + lower memory usage.

How to create the above TileList example:

Each Item Renderer will only have the Image and associated text (in this case album/artist name) and the controls will be created and added to the parent item (List – Gumbo, TileList-Flex3 etc…), we can then listen to the ITEM_ROLL_OUT && ITEM_ROLL_OVER events and position/show our controls accordingly using the X & Y coordinates of the event.target which will be each Item in the list.

View Source

As you scroll through the above list you can see the RED square following the items in the list (I am using tweener to follow the list but this can be popped up in the correct position instantly), it is not so apparently beneficial with so little items though start to increase the numbers and watch the render time lower and physical memory usage drop off.

Using images inside an itemrenderer

The approach to take is dependant on if the images are static or dynamic/remote, I’ll cover remote images in detail though by doing this it should answer any query’s you may have about static ones.

Remote/Dynamic Images

The easiest and heavy approach is to simply use the “Image” component (mx.controls.Image), the Image is great to use outside of an itemrender though you when you look into the image class you realize it extends SWFLoader (hence why all the loading is done for you), this can be extremely expensive in memory.

Solution: Use the new BitmapImage (spark.primitives.BitmapImage) component in junction with a static loader class (Simple static class external where all loading is handled for you).

You could also make use of current ‘Bulk Loaders‘ such as http://code.google.com/p/bulk-loader/, It is almost always better to build these types of things yourself though (in terms of performance), if anybody needs some more details please just Twitter/Hola/Email/Touch-Me

Text

When building Flex 4 Applications you should use the Spark controls where possible, the spark controls are lighter and have better font embedding, if you are NOT using “Right to Left” text you should NOT be using RichText (made the mistake early on).

The spark label (spark.components.Label) field is light enough to use with large data providers

nothing more to say here….

Events

As much as we would like ‘Events’ not to be used inside item renderers we simply can not survive without them, one of the key things to remember is that if we do not REMOVE/DISPOSE the EventListeners when the itemrenderer is destroyed (removed from stage, data changed in list) the flash Garbage Collector may not be able to completely destroy it.

/**
* Dispose Item
* @public
* */
public function dispose( ):void
{
	removeEventListeners( );
	//Destroy Children && Elements
}
 
/**
* Activate Deactivate Component
* @private
* */
private function activateDeactivate( evt:Event ):void
{
	switch( evt.type )
	{
		case Event.ADDED_TO_STAGE:
			addEventListeners( );
			break;
		case Event.REMOVED_FROM_STAGE:
			dispose( );
			break;
	}
}
/**
* Add Event Listeners
* @private
* */
private function addEventListeners( ):void
{
	addEventListener( Event.REMOVED_FROM_STAGE, activateDeactivate, false, 0, true );
}
/**
* Remove Event Listeners
* @private
* */
private function removeEventListeners( ):void
{
	removeEventListener( Event.REMOVED_FROM_STAGE, activateDeactiveHandler, false );
 
       //Remove all other event listeners here
}

This example shows how you could handle adding and removing events from the renderer, when the renderer is destroyed it is removed from the stage causing the Event.REMOVED_FROM_STAGE to dispatch, we can not remove all events and make sure all children/elements are destroyed correctly (Garbage Collector == Happy).

Typical I create an interface (IDisposable) and implement this with function destroy( ):void.

It would be worth noting this applies to any custom component, it is good to clean up after yourself (remember wifey giving you a hard time about the dishes!)

Timers VS EnterFrame

I have no idea why somebody would need either of these in Itemrenderer’s, perhaps some Photoshop ninja requires an animated swirl every couple of seconds to tempt users to interact.  I would personally  fight this off as much as possible, though if  unavoidable it is good to understand the differences between these two approaches.

The facts:

1. Timers are more expensive than the EnterFrame event (more CPU intensive).
2. Timers are more accurate than the EnterFrame as the EnterFrame event relies heavily on a users CPU (a slower CPU == less times EnterFrame fired) though it is not true that the Timer is 100% accurate itself, more information can be found here http://www.bit-101.com/blog/?p=910

This is getting long and bloated which is exactly what I wanted to avoid, maybe this should be done in parts (see you in part II)

So Flex 4 is in Beta and we should accept that quirks will occure but this one is driving me a little loopy to the point of even cursing my friend Flex.

The day started like any other until I noticed this unnecessary gap between each of my vertically stacked list’s using the TileLayout, yes it is very possible to take the approach of creating my own layout (that’s why the new Flex 4 Framework is so good) though I opted for looking for a property that might remove this, disaster! disaster! nothing works so next step is to extend tile list and look for this weird occurance.

Best I could do (though not completly happy with) is override the measure() and change the explicit height of the component as it seems explicit height is forcing the constant height.

Hopefully this helps somebody out or even better can direct me to a better fix

package com.skysongs.mediaplayer.view.layouts
{
	import mx.core.ILayoutElement;
 
	import spark.components.supportClasses.GroupBase;
	import spark.layouts.TileLayout;
 
	public class MusicTileLayout extends TileLayout
	{
		/**
		 * Constructor
		 * */
		public function MusicTileLayout()
		{
			super( );
		}
 
		/**
		 * Measure
		 * @inheritDoc
		 */
		override public function measure():void
		{
			var layoutTarget:GroupBase = target;
			layoutTarget.explicitHeight = Math.ceil(rowCount * (rowHeight + verticalGap) - verticalGap);
			super.measure( );
		}
	}
}

Please hurry up Adobe, I want the final release now…

ADDED!!! in case the measure property is not called when resizing is done you can override updateDisplayList and call the measure() function.

/**
		 * Update Display List
		 * @inheritDoc
		 * */
		override public function updateDisplayList(width:Number, height:Number) : void
		{
			super.updateDisplayList( width, height );
 
			/* Force remeasure */
			measure();
		}

Again I would not recommend this as a final solution (will most likely be fixed in an upcoming version of the SDK)

ps.. Logged an issue with Adobe (http://forums.adobe.com/thread/565055)

A bit sick of good old Simon Cowells mass generated money making chart? here are some artists I put together over months of working on Sky Songs (http://www.skysongs.com).

This is also to remind myself what music I like

The Happy Artists 2010:

Nellie Mckay (Different and fun with some intresting political views)

Regina Spektor (Brilliant, absolutely )

The Ditty Bops

Amanda Palmer (Will ok maybe not always this happy but a good listen)

The Eels (blocked out many annoying brats on the tube)

Mumford & Sons (If you have never heard it, it’s a must)

Shakespears Sister (New album after yonks)

Nightmared on Wax (Different to say the least)

Look at this I am just getting started and not once have I had to mention Lady boo boo and Joe Mck-something, I think it is high time we start to share real music with the world and not this teenage inspired chart (oh to rant on)

More music posts will be coming soon…

Welcome to very own spiffy new blog, no idea what fruitless topics I will be talking about though hope to keep myself amused (the little people inside my head)