Flex 4 includes the new Adobe Text Layout Framework (TLF) which is a fantastic new addition that allows greater control of text rendering and the flow of text through containers. You can view the demo material here.

I recently had to use the TLF to generate a whole bunch of links in a stream that flowed through several columns within a composition. The first problem I noticed was that all of the links when chained together were converted to one link. I lost track of how this was fixed but I think it had to do with the links not having href attributes. Anyway, that wasn’t the main problem I encountered. I managed to stream my links together into one long chain and had them nicely justified to the columns :

Uploaded with plasq‘s Skitch!

As you can see I was trying to create a nice wall of links. Eventually these will be names and the user will be able to click on a link for more information etc. Nice! So all it needs is a nice hover state on each link, right? So I add a hover format to the TextFlow and then fell off my chair and sobbed.

Check out the proof-of-concept I created here : http://lyraspace.com/transfer/tlf/TextFlow_POC.html and then read through the posts I wrote on the official forum :

http://forums.adobe.com/message/2682942#2682942
and
http://forums.adobe.com/thread/598789?tstart=0

As you can see, there’s a massive performance issue here with formatting links within a paragraph. It needs to re-draw the paragraph to format the link and with 500 links in the paragraph it’s going to get very sluggish.

The answer then is to create a paragraph for each link? No, this will create a new line for each link.

So I had to work out when a new link would sit on a new line and then create a new paragraph from that link.

And here’s how I did it …

programmatically creating a TextFlow stream of Link Elements

In the example above you have to assume that the names_arr ArrayCollection is loaded in via the Mate framework eventMap and that this collection is made up of objects with a firstName and lastName property that I can use to create the links.

The formatting of the TextFlow can be created in advance by setting up a Configuration object and adding it as an argument while instantiating the TextFlow.

Creating a TextFlow Configuration object

… and then to find the position of the element on the line I used this code :

Finding the position of an element within a TextFlow

As you can see I re-parent the element to a new ParagraphElement object if the LinkElement is at the start of the line.

The Text Layout Framework is still new and there are bugs, this highlights just how erratic the performance can be with it at the moment so handle cautiously and be sure to post your problems on the forum. The guys at Adobe were very helpful and as with all problems like this, you end up learning a hell of a lot about the framework when solving them!

Hey, you might have noticed I’m now using Snipplr to embed my code. I hope it doesn’t disappear any time soon.

Google Chrome’s new Developer Tools panel is really great but now it’s even better now that I’ve managed to log directly into it from Actionscript.

And it’s all thanks to this blog post : http://aut0poietic.us/2008/10/22/using-the-flex-3-logging-framework

All I had to do was create the ExternalConsoleTarget class from his example and then grab the code for the Console Logging wrapper. Then in my project import the Console class and log like this …

Console.debug("Hello Chrome");

It worked for me straight out of the box. Wonderful.

And because I’m a bloody nice bloke here’s my test project which includes a SWC I made so you can use the two classes in your own projects: http://lyraspace.com/tools/ConsoleLogger/Main.html

Today I received my lovely stainless steel UI Stencils for designing for the web and for the iPhone.

… so I decided to take the iPhone stencil for a spin in my Moleskine sketchbook.

Amazingly, the stencil fitted almost perfectly to the grid lines in my book. So I decided to map it out and publish it here so anyone out there using a gridded Moleskine sketchbook (let’s face it they’re the coolest) can use this guide to mock up there iPhone ideas.

You might have noticed that the stencil doesn’t fit perfectly so what I’ve done is rounded it up so you can use the grid as a reference if you don’t have one of the stencils.

This is a common mistake when trying to remove certain DisplayObject objects from a container in Actionscript. I fell into it again today and kicked myself around the office for five minutes afterward.

If you want to remove specific DisplayObjects from a container you may be tempted to do something like this …

This will work unless one of the Sprites is at the top of the stack in which case that object wont be removed. But WHY?!!!

Well because the numChildren property will reduce as the objects get removed so eventually it will stop before the last object. The solution is to compensate by adjusting the variable ‘i’ in the for loop. Like so …

Hope this helps someone and prevents any self-harm.

As an email addict I’ve been doing all I can to avoid having my gMail client open so I can be as productive as possible throughout my day. For ages I’ve been using Notify to show me when new mail arrives and give me a quick preview so I know whether to bother to opening my mail. This was without a doubt the most popular menu-bar app in my toolbox and has been invaluable.

I’ll admit to having a bit of a problem with email because I am addicted to checking it and have an OCD when it comes to making sure I never have unread mail for longer than 2 minutes. I’m obsessed. I get the sweats when I see other people’s inBoxes and they have like 10,000 unread emails … makes me really uncomfortable.

So today while obsessing over all the email notifications coming in via Basecamp I decided to look to see if there was an update to Notify. And there was! AND it’s awesome!

Uploaded with plasq‘s Skitch!

Uploaded with plasq‘s Skitch!

I’ve been busy busy busy playing working on some experimental Papervision/Hype mashups which are now live on the RezzyNet site.

The Hype framework was officially released on Halloween and I took the opportunity to plug it straight into the Papervision cube thingy that I’ve been prodding and hacking for over a year now. I started by taking out all the existing functionality and used the SoundAnalyzer class from Hype to initiate the cube ‘pops’. The results were amazing so I added a FixedVibration to give it some character. It performs really well although you’ll need a decent pipe for the audio stream.

http://rezzynet.com/cube/Main.html

So, this got me psyched and itching to see what else I could do. I wanted to mix up the SoundAnalyser and the Oscillator so I created a row of 256 cubes in 3D space, set them to oscillate on the Y axis and then adjust the zScale for the SoundAnalyser range. This took less than an hour to setup and the results, yet again were impressive.

http://rezzynet.com/oscillation/Main.html

The next thing to do was to position the row of cubes in a circular path. I kept the camera in the default position … I just moved it back slightly. I liked the surprise when you first click and drag within the viewport to rotate the view.

http://rezzynet.com/oscillation/Main2.html

Finally … well, for tonight anyway … I adjusted the Math that created the circular path and created a spiral.

http://rezzynet.com/oscillation/Main3.html

Wow! I’m impressed with Hype. What I’ve produced here using Papervision and Hype is by no means complicated and full credit goes to all the amazing talent behind the scenes of the Papervision project and to Branden Hall and Joshua Davis for an amazingly accessible framework that even idiots like myself can have fun with and I will be sure to share my experiences by releasing source and doing some screencasts in the coming weeks. In the meantime though I would urge anyone interested to go and play for themselves.

http://rezzynet.com
http://papervision.org
http://hype.joshuadavis.com

Ok … so I’ve always had a love/hate relationship with Apple Mice. When Apple release a new mouse I always ‘love’ the idea of them but using them has always left me ‘hating’ myself for yet again wasting my money on a sub-standard device and proclaiming ‘why oh why can’t Apple get it right!’

Apple have not fared well with mouses, meeces, mice over the years and who can forget the absolute atrocity that was the first generation iMac mouse … my god that thing stunk! If you weren’t adjusting the thing in your hand to get it to point in the right direction you were treating the unbearable RSI that had developed in your arm within the first 10 seconds of using it.

It’s this point that is my main gripe with Apple Mice. I’ve suffered from RSI over the many years of pixel-pushing I’ve put in and the only way to use a mouse painlessly is to minimise as much as possible the movement required to get your pointer from one corner of the screen to the other. For this reason I’ve always used rather expensive high-resolution mice that I can crank up to a super-fast speed. Mac mice have never been able to match the speed I require so my wrist hardly ever has to lift off the desktop. For anyone suffering from RSI this is my top tip … go into your mouse settings and crank that speed up as fast as it will go. If you have trouble adjusting do it very gradually over a period of a few weeks but aim for the top speed that will result in micro movements of the hand with no need to lift your wrist. You may also need to purchase an expensive mouse with a high-resolution … something with lasers and shit. You might also want to stick to a WIRED solution … yes, forget the wireless option if you need very fine control. I’ve tried Bluetooth mice in the past and they are way to erratic to provide the sensitivity you need.

Which brings me to my MacBook and the fact that I’m actually spending more of my time on the trackpad that I am with a mouse and I don’t mind at all. Multi-touch on my MacBook is like a breath of fresh air and has totally revolutionised the way I use my Mac. In fact I wish I could do more with it. I love the two-finger scrolls and the pinches and stuff but I want to change spaces with swipes for instance or select text with pinches. With this in mind you can understand why I’ve been quite excited (and skeptical) about the release of Apple’s new Magic Mouse. This mouse promises to incorporate some of the great new features of multi-touch into the shell of a mouse without any buttons. Will the multi-touch be programmable and allow me to use the swipe gestures to swap between spaces? Will the sensitivity and speed of the mouse be improved? Will the swiping on the mouse cause RSI as you try to hold the mouse in position while also swiping? Will it run on my Mac running Snow Leopard without a firmware update? If it requires the firmware update is that going to kill my Mac? Hmmm … questions indeed.

Well, it’s just arrived so here are the answers …

So, there you go. Firstly I’m quite disappointed about the left & right click being a normal ‘clicky’ click instead of a ‘tappy’ click … do you know what I mean? I was expecting to be able to just gently touch to the left or right over the mouse surface to get a click but this is not the case. You can click anywhere on the surface of the mouse however but it is an actual ‘click’ lazy fingers!

My other slight gripe is the swipe action. It’s really hard to do while holding the mouse as you’ll see in my video above. I guess time will tell if I find myself using it. I need to test it in PDF docs to see if I can mimic the three-finger swipe functionality on the trackpad for paging. I doubt this will work.

Another thing that you’ll find is now missing from your life is the middle-button on your mouse. It’s now completely gone. I had this setup as a cool shortcut for ‘spaces’ so I could quickly manage my desktop. I’ve found a way around this however and here’s a screencast explaining what I did:

Overall though, a nice mouse that fits nicely in your hand, the speed has improved and the tracking seems nice and smooth. Not quite the amazing technology I was expecting but hey, what do you want?!

A Reg review : http://www.reghardware.co.uk/2009/10/23/review_accessories_apple_mighty_mouse/

Check out the guts of the new Magic Mouse : http://www.reghardware.co.uk/2009/10/22/ifixit_magic_mouse/

And here’s a history of the Apple Mouse : http://vectronicsappleworld.com/macintosh/mouse.html

UPDATE: There’s a third-party utility that will give you loads of extra gestures and control over your Magic Mouse … including the elusive tap-click and middle mouse button click. I’ve tried it out and actually I think the tap-click is a bit fiddly on the mouse. It’s fine on the trackpad where you have the entire area to tap onto but on the mouse you have to be specific about where you tap and 50% of the time your taps don’t register. Maybe Apple will get this right later on. We’ll see. Try out the software for yourself for free for 10 days here.

Far from a proper official launch but an alpha release of my new site for all things experimental. The intention is to build a portal using the Adobe Open Source Media Framework so I can load SWF and FLV to showcase interactive work as well as movies and casts. At the moment I’m working on my old Papervision 3D cube that was on my official site last year but was removed when I changed to the WordPress version that is currently live. I intend to move on from this pretty quickly as I think I achieved what I wanted to do. I may add some decent lighting and change the bitmap material.

I’ll be updating it as and when and will be sure to include the source for some of the experiments as well. The PV3D Cube thingy source will be posted soon.

http://rezzynet.com
http://rezzy.net

So I finally got my invite through and signed in to Google Wave. It was cold and lonely in there.

Hello, I whispered. Is there anyone here? I noticed a list of contacts.
Hey, there are ‘others’ I thought. But how do I know if they are in here also?
I tried waving at one of them … nothing. I pinged one of them … and waited.

Eventually I noticed that one of my friends had replied to me so I continued the thread we had created and waited for their reply … and waited. You see here’s the first problem with Wave in these early days. It’s impossible to know if any of your Wave contacts are actually online and connected to the service. It was only after careful orchestration that I was able to converse with a friend of mine and that was after a round of emails and a couple of frustrating attempts at synchronisation.

I’m not sure why I found it so amazing that I could watch my friend as he typed in real-time. It’s something I’d seen many times before and in much richer ways. Still, it was impressive. The main thing my brain had trouble dealing with was whether the tool was an instant messaging device or an email alternative. It’s kind of both but with disadvantages in both camps. As an IM tool it is very easy to lose yourself in the thread and just as easy to insert your new messages elsewhere which completely loses the thread. For the same reasons it is confusing as an email alternative but this is perhaps where it’s strengths lie. What I mean by this is that despite being a bit confusing as an email alternative because of the way it allows you to insert messages anywhere in the thread this is why Google Wave will become a popular way to generate collaborative ‘conversations’ that sit somewhere between email and more static documents. How many times have you filled your in-box with small conversational emails between you and your friends? You could have used tweets or IM but needed a record of the thread and also needed something a bit richer … hey, who wants to see this YouTube video of a kitten being shot out of a cannon?! If this is you then you are going to love Google Wave.

There are some advancements I would like to see though. As mentioned, being able to draft your messages in IM mode would simply involve committing the draft after a carriage return instead of pressing the ‘done’ button, which is a pain when you are used to using your keyboard. Not sure of shortcuts as yet. Maybe IM mode should also prevent you from inserting messages mid-thread to maintain its temporal trait. I’d also like to be able to collapse the thread like a Tree structure. This will also help people transition to the non-linear dialogue that Google Wave proposes.

Another major headache in these early days is the lack of notification that your contacts are online. I have found a couple of options so far …

http://thatsmith.com/2009/10/google-wave-add-on-for-firefox – Thanks Chad.

and there’s an app for your OS X Menu bar but you need to build it yourself in XCode … which was great! Grab that here … http://github.com/hiroshi/unofficial-Google-Wave-Notifier/downloads

Overall I can see that GWave will definitely become an integral part of my intercourse especially in business. I can foresee a BaseCamp plugin that will allow me to publish and maintain messages and ToDo items as a Wave with annotated screengrabs and casts.

UPDATE: It looks like there will be a Google Wave extension for synching Waves to Basecamp … and it will be called ‘Campy’. All the extensions so far seem to follow this convention with ‘Growly’ also allowing Growl style notifications of updates to a wave. Read more on this here.

ANOTHER UPDATE: In answer to Seb’s question regarding new edits you can see if an edit is new and unread by the green border on the left side of the field. These tally to become the number of unread edits rather like unread emails in your in-box.

This video from a MAX session has an informative demonstration of the new touch/gesture events in 10.1. Also loads of really cool new features in the AIR 2.0 runtime.

What’s coming in Adobe AIR 2.0

Here’s a great article outlining all of the new events, classes and information on how to manage the input.

I’ve scraped the code off this article for my own reference below. Please do read the article though.


flash.ui.Multitouch
[static] inputMode:String
[static] maxTouchPoints:int
[static] supportedGestures:Vector
[static] supportsGestureEvents:Boolean
[static] supportsTouchEvents:Boolean


Touch Input mode

flash.events.MultitouchInputMode
Multitouch.inputMode
MultitouchInputMode.TOUCH_POINT
MultitouchInputMode.NONE
MultitouchInputMode.GESTURE


Mouse

MouseEvent.CLICK
MouseEvent.DOUBLE_CLICK
MouseEvent.MOUSE_DOWN
MouseEvent.MOUSE_UP
MouseEvent.MOUSE_MOVE
MouseEvent.MOUSE_OUT
MouseEvent.MOUSE_OVER
MouseEvent.ROLL_OUT
MouseEvent.ROLL_OVER


Touch

TouchEvent.TOUCH_BEGIN
TouchEvent.TOUCH_MOVE
TouchEvent.TOUCH_END
TouchEvent.TOUCH_TAP
TouchEvent.TOUCH_OUT
TouchEvent.TOUCH_OVER
TouchEvent.TOUCH_ROLL_OUT
TouchEvent.TOUCH_ROLL_OVER
TouchEvent.TOUCH_TAP


Touch management

Many multi-touch developers like to use an Object or Array of points to keep track of touch inputs (aka blobs) as well as an ID, and X/Y coordinatees for each point. It looks like Flash Player 10.1 will help you conform to these conventions, ActionScript-style.


flash.utils.Dictionary /* Used to track Arrays of Points */
flash.geom.Point /* One contact point */
TouchEvent.touchPointID /* Unique ID for each touch contact point */
TouchEvent.stageX
TouchEvent.stageY
TouchEvent.isPrimaryTouchPoint


Gestures

flash.events.GestureEvent;
flash.events.GesturePhase;
flash.events.GesturePhaseEvent;
flash.events.TransformGestureEvent;

/* GesturePhaseEvent */
GesturePhaseEvent.GESTURE_PAN
GesturePhaseEvent.GESTURE_PRESS_AND_TAP
GesturePhaseEvent.GESTURE_ROTATE
GesturePhaseEvent.GESTURE_ZOOM //Is the same thing as 'pinch'
GesturePhaseEvent.offsetX:Number
GesturePhaseEvent.offsetY:Number
GesturePhaseEvent.rotation:Number
GesturePhaseEvent.scaleX:Number
GesturePhaseEvent.scaleY:Number


Orientation recognition

flash.display.StageOrientation;
/* e.g. StageOrientation.DEFAULT */

flash.display.StageDisplayState;
/* e.g. stage.displayState = FULL_SCREEN_INTERACTIVE; */