You may be sick of hearing it, but Apple, and in particular their iPhone/Pod/Pad, are setting the standard for instinctive and usable interaction. And I’m sure the iPhone will influence the next generation of Flex components, but until then I’ve rolled one of my own.
My client was reporting the primary school children their app was aimed at were having trouble entering their (given) passwords, the logs showing some needing 20 or 30 tries. The iPhone way of entering passwords, showing the last letter typed, solves the issue of imprecise keying on a touchscreen. But it also serves as an accessible alternative for any user group who may need it.
I was going to post this as a Flash/Flex component, but it is so simple I may as well just post the code, then it is easily translatable into JavaScript, PHP, Processing or whatever is your flavour.
private var _passwordEntered:String = "";
// this will store the password as it is typed
passwordTI.addEventListener(Event.CHANGE, passwordEntry);
// the TextInput component - make sure "displayAsPassword" is turned OFF
private function passwordEntry(e:Event):void {
// update _passwordEntered with whatever has been typed
var newText:String = passwordTI.text;
if (newText.length < _passwordEntered.length) {
_passwordEntered = _passwordEntered.substr(0, newText.length);
} else if (newText.length > _passwordEntered.length) {
var diff:int = newText.length - _passwordEntered.length;
_passwordEntered += newText.substr(newText.length - diff, diff);
}
// hide the text in the field, apart from the last char
passwordTI.text = "";
for (var x:int = 0; x < _passwordEntered.length-1; x++) {
passwordTI.text += "•";
}
passwordTI.text += _passwordEntered.charAt(_passwordEntered.length-1);
}
as3.0 is like a strict german mistress. Very harsh but gets good results.
as2.0 is your stoner friend from college.
as1.0 is for script-kiddies, designers and other non-technical people
as2.0 is for girls
as3.0 is for real men
as3.0 is carefully crafted formulaic pop – predictable, slick, reliable, dull
as2.0 is glitchy electronica – some semblance of form, but playful with it
as1.0 is a child bashing saucepans – imprecise, messy, but lots of fun
as3.0 is a Japanese Chef’s knife. Finely crafted but requires care and technique in its use.
as2.0 is a Machete. Great for hacking things, but useless for anything requiring fine detail or control.
as1.0 is a plastic spoon.
Flex has been around a while now and is ramping up in terms of popularity. I had a handful of Flex projects last year, all of which were a positive experience, and I have more lined up for this year. But while Flex has been embraced quite happily by the Coders (mainly because it is the first decent ActionScript IDE) I’m not convinced it has penetrated our symbiotic co-species; the Designers.
For all Adobe’s claims about improving workflow with the use of Flex Builder, which it certainly has for writing code, I’m not sure the way of creating components and skins for Flex (which cannot be done easily without one of Adobe’s other products) is quite as instinctive. The reason I suspect this is because for every Flex project I have worked on we have had real difficulty finding a suitably skilled Designer.
One of the stigmas associated with Flex is that every Flex site you see on the web, looks like a Flex site. So many times you see the default loader, default buttons and even the default grey colour scheme, which suggests to me the Designers are nowhere to be seen on these projects.
So if you are a Flex Designer reading this, or a Flash Designer who isn’t scared off by Flex, please get in touch. Especially if you are in the Brighton or Birmingham area and are affordable. I have projects you can be helping me with right now.
And Adobe, listen up; Flex isn’t going to change the world until we can get the Designers on board. So perhaps you might want to make it a little easier for them to work with it.
When I started working as a Flash freelancer in Brighton I assumed the whole world and their wife were all out there doing the same thing too. But I have since come to realise that while there are plenty of freelance Flash professionals out there (not so many Flex Developers though), there are only a few whose ActionScript is worth their day rate. Also, the good ones tend to be booked up months ahead, so don’t have any particular need to advertise their talents.
So, for those of you who are looking for an ActionScript freelancer, below is my pick of the best of Brighton.
Naturally I’m putting myself at the top of the list, as I need your work just as much as anyone else. But if you have spoken to me and I am busy, or you owe me money, or you’ve taken offence to my haircut or something, try one of the other guys. My colleague Kris has a longer list here, but these are the people I will personally vouch for.
If you contact them do let them know you found them via me. Beer is very expensive in this town.
If it is a Flash Designer you are after, rather than an ActionScripter, they are much easier to come by. Your best bet may be to tap people randomly on the shoulder while wandering around Churchill Square. Roughly one in every five will be a Flash Designer.
Progress with my Isometric Engine has been slow to static, seeing how I only ever seem to spend a day every six months or so on it (damn you paid work). But every time I play with it I come up with something cool to share, so now, if you have five minutes to kill, you can have a play with my isometric world builder.
Within the cube you create your own isometric spaces and structures, and rotate and zoom around them. Click on the image to launch, and have a play around.
There will, inevitably, be a game built with this thing one day soon, so this will be the level editor. If you come up with anything cool-looking feel free to email the XML to me, or post it below. With any luck, if the credit crunch starts biting and the work dries up, I may find a day free to finish the physics sometime in the next year. Don’t hold your breath though.
This is going to take longer to explain than it did to build (literally 10 minutes, and 8 of those were spent googling for the image). Click above to see it in action.
Richard Lord was guest speaker at our Flash Brighton user group last night, presenting his Flint particle system. I think every creative coder has found themselves toying with particle effects at some point (do check out my generative stuff) but Rich’s system takes all the heavy lifting from the coding and just leaves the fun part. And it can create some really authentic looking smoke, in very few lines of code.
The movie above is my riff on a very old David Lynch photograph from his “Nudes and Smoke” collection (see here). A lot of Lynch’s “still” art work involves incorporating moving parts into paintings and sculpture, so I hope he would approve of this subtle animation.
Rich will be introducing Flint to a wider audience at FOTB08 next month.
The simplest ideas are always the best. I did a project a few months back with the very talented Paul Lloyd of FourTwo.net. We built a little Flash carousel component in AS3 for a corporate client. And it came out pretty well.
The data that runs it all came from a remotely hosted XML, so rather than use a fixed set of cards, a whole new application could be created just by pointing it at another XML. Which is what I have done here – making some of my blog posts look pretty.
Now here’s the cool bit – if instead of using a fixed URL I tell the swf file to read the path to the XML from the QueryString, it becomes reusable by anyone. Even you. Here’s an example:
… and, wahay, we have a slick looking carousel showcasing a selection from my portfolio.
The structure of the XML should be self explanatory, so feel free to try it. Except when you try it with your own URL it doesn’t work. Why is that?
There’s one more thing you need: you have to give permission for the Flash file to use data from your domain. Flash Player has very tight security features, and won’t let swfs grab data from other domains, unless that domain has said it’s okay by putting a crossdomain.xml file on the top level. This applies both to the URL of the XML and the URLs of any images specified inside that XML. For more info, see here. The crossdomain.xml I used for the example above is here, if you copy this and put it at the top level of the domain where you placed your XML/images it should do the trick.
There’s lots of fun to be had with Moo mini-cards, and I’ve been getting good feedback on the batch of fractal cards I made recently, which were created by taking snapshots of one of my flash experiments. The magic behind this was so simple I may as well share it with you. All you need to create your own set is the Flex/AIR app I created, which you can download here, and a Flickr account. This is how it works:
You give the app the path to your swf, and hit enter. It then runs a function to start a timed loop, as follows:
private var _saveDir:File;
private var _timer:Timer;
private var _counter:int;
private function startSnapshot(url:String, time:Number = 5):void {
// loadedSwf is the name of the mx:Image that
// will contain the swf
loadedSwf.source = url;
// create a directory to store our snapshots
var dirName:String = "snapshots";
_saveDir = File.desktopDirectory.resolvePath(dirName);
var x:Number = 1;
while (_saveDir.exists) {
_saveDir =
File.desktopDirectory.resolvePath(dirName + String(x++));
}
_saveDir.createDirectory();
// start loop
_counter = 1;
_timer = new Timer(time * 1000);
_timer.addEventListener(TimerEvent.TIMER, snapLoop);
_timer.start();
}
Then, while the swf plays, the timer loop fires this function every few seconds to take a snapshot:
private function snapLoop(e:TimerEvent):void {
// create a new BitmapData object based on the
// size of the loaded swf
var BMPData:BitmapData = new BitmapData(loadedSwf.width,
loadedSwf.height, true, 0xFFFFFF);
// take a snapshot of the swf, and store it in
// the BitmapData object
BMPData.draw(loadedSwf);
// encode it as a jpg
var jpgEncoder:JPEGEncoder = new JPEGEncoder(80);
var jpgBytes:ByteArray = jpgEncoder.encode(BMPData);
// save it
var ourFile:File = _saveDir.resolvePath("snap" +
_counter++ + ".jpg");
var fileStream:FileStream = new FileStream();
fileStream.open(ourFile, FileMode.WRITE);
fileStream.writeBytes(jpgBytes, 0, jpgBytes.length);
fileStream.close();
}
Note that the BitmapData snap may give unexpected results with transparent swfs, so it is best used with swfs that have a solid background.
To turn these into mini-cards, the final step is to use Moo’s Flickr import option. Point it at the Flickr set you have created, pay your money, and in 10 days or so a pack of groovy cards pop through the postbox. Simple.
The portfolio has just received a long overdue update, with some recent projects added to it, one of which being (slightly prematurely) the CD-Rom I am currently finishing off for Natural England, which I put together using Flex3 and AIR. I mention this because in the process of doing this project I have come to realise that I now owe Adobe a small apology.
A year ago O’Reilly books generously sent me a review copy of their Apollo For Adobe Flex Developers Pocket Guide. Apollo, or AIR as it has since been re-christened, was only at alpha stage when the book was released, and was full of bugs. I had spent a lot of time hacking away at both that and the documentation-less Flash 9 Alpha that had been released not long before. With AIR, even with the help from some of the development team, I couldn’t get even the most basic of applications to run. Because of my frustration (and because I thought I was oh-so big and clever) I wrote a deeply sarcastic review of the book for Blogcritics.
So this is my apology. I made my peace with Flash 9 and ActionScript 3.0 some time ago, and now, since AIR finally got it’s first 1.0 official release last month, I have had a complete u-turn in my opinion of that too. AIR is an utter delight to work with. And with Flex reaching version 3 to coincide with the release, they go together like Peters And Lee. Harmonious.
I’m sure this isn’t the first PaperVision game, but I might make claim on it being the simplest. But then I only really had a day free to do this, which doesn’t allow the time for any sexy 3D modelling or texturing. Otherwise, you’d be looking at day-glo Tron Light Cycles racing around the grid below, rather than blue blobs. The keys are A/D or Left/Right arrows, and the idea is to collect the green things. The rest you can work out for yourself. Fullscreen version here.
What you’re looking at is PaperVision 3D. Not the silly snake game, but the Flash 3D engine rendering all those polygons. PV3D is probably the greatest Flash Open Source success story to date. At my local nerd club, a recurring topic of conversation is the “Open Source question” – i.e. should I open source my code or not, and what exactly do I gain by giving away my work for nothing? The creators of PaperVision, Carlos Ulloa, John Grden and the rest of the crew, answer this question. Rather than being the authors of a great 3D engine no-one knows about, by setting their code free they have become the leading experts in a 3D engine that EVERYONE uses.
At November’s FOTB conference PV3D was on every developer’s lips, within six months even clients are asking for PaperVision. By giving away their work, the creators of PV3D have made themselves coding mega-stars. This is how Open Sourcing works, the trade is in kudos, not commodities. The Open Source movement is the economic paradigm shift of the 20th Century, it happened in software five years ago, last year it made it’s mark on music, this year it will be publishing. The year after that … who knows. As the Chili Peppers advised, give it away, give it away, give it away now…
Subscribe in a reader