Nick Kuh - Freelance iPhone, iPad, iOS Developer, Trainer and Consultant - Brighton, UK » Adobe Flash, Flex and Air

Pitching the Microphone with Flash Player 10.1 Beta

Nick Kuh — Thu, 11 Mar 2010 12:09:35 +0000

I’ve been lucky enough to get some Research & Development work in over the last few weeks. The latest batch of work has included some experimental stuff with the the new Microphone features introduced in Flash Player 10.1 which is currently in beta. You can download the required Flash Player here.

In the example below the app will automatically record your voice until you stop talking and will playback the sound bytes as Barry White or a Chipmunk (adjust using the slider).

Prior to Flash 10.1 you could manipulate the sound bytearray from an mp3 at runtime but you couldn’t access the native incoming microphone data. I can see this modification to the Flash Player leading to some really cool future games and apps.

In my example there’s currently no encoding to mp3. I just save the incoming sound byte arrays in memory. I think there may be as3 mp3 encoders already written if this was a project requirement.

Microphone Fun

Alternative content

I’m also really intrigued by Didier Brun’s R&D work on voice recognition in Flash Player 10.1:

http://www.bytearray.org/?p=1151

http://vimeo.com/9780416

Looks like he’s really getting somewhere from those example videos. I guess one approach might be to render the sound data samples to bitmaps and run the sort of blend, colour threshold comparisons that you achieve with Flash WebCam motion detection.

Thanks to Andre Michelle’s shared work on pitching MP3s and Devon Wolfgang’s microphone code example I was able to get the above up and running.

Here’s the source

Algebra Meltdown: Flash 10 Maths Game

Nick Kuh — Thu, 11 Feb 2010 09:56:45 +0000

This game has been a while in the making but I was very happy to see it finally go live on Tuesday! I developed Algebra Meltdown for MangaHigh.com using some of the latest Flash 10 features. Here’s a video of it in action:

Enjoy!

New Promo Video for Prodigi App on YouTube

Nick Kuh — Wed, 18 Nov 2009 11:24:07 +0000

Prodigi is a Flex 4 application I developed for Mangahigh.com, – a powerful games-based math elearning system that features more than 12,000 questions with hints and worked solutions. Prodigi is adaptive, and increases question difficulty based on student performance. Take a look at the promotional video MH recently released on YouTube.com:

Behind the scenes Prodigi also deals with the question authoring and auditing workflow and has enabled Manga High’s teachers to rapidly develop an extensive database of challenging Maths GCSE questions that students all over the UK (and soon the US) can use for revision and GCSE learning.

Building native iPhone Apps with Flash: just what we didn’t need

Nick Kuh — Mon, 05 Oct 2009 21:39:32 +0000

There’s a lot of buzz in the Flash community today following Adobe’s big announcement at Max Keynote regarding their new up and coming Flash CS5 publish to iPhone feature.

In future versions of Flash, Flash Builder and ActionScript 3 you will be able to write Flash Applications that you can deploy to the iPhone as native iPhone Apps via a new Flash to iPhone compiler that the Adobe engineers have written.

Flash Developers will still need to apply/register and pay to become Apple iPhone Developers like all the other 1000s of iPhone Devs. They will also need to go through the same slow submission process.

What’s important to clarify is that NO, we still don’t have Flash Player on the iPhone. So websites containing Flash content will still not display in Safari on iPhone. This is really the missing feature that the iPhone would benefit from. This is the feature that Apple ultimately hold the key to as they build and own Safari, the default native web browser on iPhone. One alternative Adobe may have considered would have been to develop their own web browser iPhone App (including Flash Player) as earlier this year Apple has approved a bunch of web browser apps that compete with Safari and are available now in the App Store.

So, Apple won’t play ball with Adobe and won’t permit the Flash Player Plugin on iPhone. The main reason for this is that Flash Player is a memory hog and Flash Player in Safari would probably just lead to endless Safari crashes.

Contrary to this, however, in other Adobe news today Flash Player 10.1 was released. 10.1 is a major Flash Player upgrade and the biggest changes appear to be all the support added for Mobile Platforms (apart from the iPhone). Kevin Lynch, Adobe CTO, highlighted the major performance improvements introduced in the latest release of the Flash Player. He displayed test result figures that showed a number of popular Flash and Flex Applications running 100%+ more efficiently in Flash Player 10.1. This, without any changes to the Flash Applications themselves. Perhaps Adobe took note of Joa Ebert’s Leaving the Sandbox presentation at Flash on the Beach this year when he criticized the Adobe compiler and it’s optimization flaws.

With Adobe making big optimization changes to the Flash Player (and the compiler?) these are welcomed enhancements from a Flash Developer’s perspective. AS3 was such an improvement from an OOP coder’s standpoint but garbage collection was (and still is) pretty lousy. It’s very easy to create bloated SWFs – much easier than it ever was with AS2 or AS1. I guess that following all the new Flash Player features Adobe have introduced over the last 3 or 4 years the optimization fell behind on the priority list. My guess is that with Apple not permitting Flash Player on the iPhone this has helped to encourage Adobe to add these new optimizations to FP 10.1 and merge mobile and desktop versions of the Flash Player in this latest version of the player. I reckon Flash Player in Safari is not too far off with these improvements. Fingers crossed…

So, I’m a Flash / Flex Developer and have written native Objective-C applications for the iPhone. I’ve also presented my experiences of iPhone Development from a Flash Developer’s perspective at the Flash on the Beach ’09 Elevator Pitch. Will I now move to developing iPhone Apps using Flash? Well, probably not as I like the UI components that are included in the iPhone SDK as do the majority of the millions of exisiting Phone owers. Yep, that’s right – you develop iPhone Apps in Flash and you ain’t gonna get access to all the existing iPhone SDK components built by Apple. It’s the same problem as you may have experienced if you try to develop an iPhone App using existing technologies that compile to iPhone friendly binaries such as Unity 3D.

Personally, I just wish Flash Developers would get a bit more adventurous and try other programming languages rather then nagging Adobe to play middle man. Please Adobe, compile my dodgy ActionScript into Objective-C!

Objective-C is really not that hard folks, go on and take the plunge!

Prodigi – Manga High: Flex 4 Application

Nick Kuh — Sat, 03 Oct 2009 08:51:15 +0000

Prodigi, a key part of the new MangaHigh.com website, enables teachers to author GCSE Maths questions for every lesson of the National Curriculum. Then activities are dynamically generated for students in playback mode. Take a look at the promo video:

A lot of my work during 2009 has been the development of this Flex RIA Content Authoring System. Prodigi serves 3 purposes:

It dynamically generates interactive online Maths lessons for every topic and subtopic of the UK Maths GCSE National Curriculum. The student experience tracks student attainment and progress levels and adjusts it’s questions accordingly. It aims to help, challenge and improve student’s knowledge of GCSE Maths.
Prodigi sources it’s Maths questions from a database of hundreds of thousands of questions that have been submitted by Maths teachers. I had to develop an Author Mode for Prodigi to enable Teachers to create these questions. Author mode includes features such as multiple question templates and layouts, a complex equation editor, save and submission functions.
The third mode of Prodigi is Auditor Mode enabling the top Math’s Teachers/Professors at MangaHigh to quickly assess queued Maths questions, accept, reject, comment on them etc.

Prodigi is an example of an RIA that uses Flex for it’s strengths but doesn’t fall down by Flex overuse. The Flex app is a part of a larger PHP Application that is powered by the Zend Framework. The Flex part communicates with the PHP Application via Zend AMF (Flash’s Action Message Format).

I was commissioned by Manga High to:

Design/conceive the technical infrastructure of Prodigi
Specify the Data Transfer Objects (DTOs) and client/remote server communication protocols
Build the Flex 4 client-side of the RIA: Playback/Author/Auditor modes; Modular Question Templates/Layouts; the application architecture.

This project has been a big success with the client and MangaHigh.com launched 23rd September 2009. There’s been a lot of press coverage about the new site, highlights include Maths Guru Marcus du Sautoy interviewed on BBC’s The Today programme, a slot on Channel 4 news, a Guardian newspaper article to name but a few.

My 3 minutes on stage at Flash on the Beach 09

Nick Kuh — Mon, 28 Sep 2009 19:12:02 +0000

Thanks to Yezzer and Matt I managed to get hold of a video of my 3 minute “Elevator Pitch” at Flash on the Beach last week. Here it is!

The point I was trying to get across in my 3 minutes was that the differences between OOP programming languages such as ActionScript 3 and Objective-C really just boil down to syntax variants and not too much else really (memory handling aside which is a nightmare on the iPhone!). Flash runs in the browser (or desktop or mobile etc etc), Objective-C runs on the iPhone. Both languages contain classes, methods, static methods, constants, components etc etc.

The iPhone SDK has an MVC framework built in. MVC is a programmatic design pattern, it’s not unique to the iPhone and it’s not unique to PureMVC, Cairngorm or the other ActionScript Frameworks that Flash/Flex Developers often now use to build Apps.

ActionScript has matured so much since I started out as a Flash Dev 10 years ago. With it’s similarities to Java and other languages that have traditionally been considered more *hardcore* good OOP AS3 ActionScripters should no longer see themselves as just developers of Flash content – we now have skills that enable us to jump into other OOP languages quickly and easily (well not always!).

From a personal perspective I welcome Flex Builder and kiss goodbye to the timeline!

I guess the subject matter of my presentation – ActionScript to Objective-C (and everything in between!) was never going to appeal to all the 1000+ attendees of Flash on the Beach but it sounds like my point was taken by a few at least

Everything You Always Wanted to Know About Flex But Were Afraid to Ask

Nick Kuh — Sun, 27 Sep 2009 15:36:12 +0000

On Tuesday night I’m going to be talking about Flex at the next Flash Brighton event at the Werks in Hove. It’s an informal event and most of us usually end up in the pub for a few beers afterwards. So, if you’re interested in Adobe Flex SDK and want to know what all the fuss is about then why not come along and see if I can convince you to have a go! Sign up at upcoming here.

In the presentation I’m going to look at my favorite 10 Flex features, try a little Flex Builder coding, link up to a few cool Flex RIAs and give away a demo Flex app I’ve build that brings together some of the features I’ll cover.

Transparency for Flex 4/Spark Applications

Nick Kuh — Mon, 24 Aug 2009 10:18:59 +0000

This might save you some time if you’re building apps with Flex 4 Beta (Gumbo). In Spark Applications there is no backgroundAlpha property within you main MXML application file. To create a transparent Flex 4 background you’ll need to do the following:

1) Create a custom application skin MXML file.

2) Set the skinClass of your application MXML to the custom skin file: you can do this in the MXML for your app – eg. skinClass=”com.mycompany.myproject.skins.MyAppSkin”.

Search for the default ApplicationSkin.mxml in the Flex 4 SDK. Duplicate this file, rename it and place it within your project source. In the new skin code I just added alpha=”0″ to the backgroundRect declaration.

That’s it

3 minutes on stage at Flash on the Beach ’09

Nick Kuh — Mon, 10 Aug 2009 15:58:24 +0000

At Flash on the Beach this year I’ve been selected as one of 20 speakers who will get the chance to present to a full house at the Brighton Dome. But there’s a catch – we’ve each got the limelight for just 3 minutes!

There’s a real mixture of talent for this session and it looks pretty evenly split between designers and developers.

I think for many of the presenters this will be their chance to showcase their most visually engaging work, as 3 minutes is such a short time frame to get anything in-depth across.

The title of my talk, however, is ActionScript to Objective-C (and everything in between) - perhaps not the sexiest title and certainly not that easy to spice up with animated visuals!

I guess my thought behind this proposed presentation was to stick to what you do best. I’m a very experienced OOP ActionScripter and I write good extendable code (even if I do say so myself!). As my OOP skills have developed over the years so has my ability to pick up new programming languages quickly. This is really the message I hope to get across at FOTB – good OOP concepts in ActionScript can be applied to many programming languages and if you’re good at OOP then the core development principles of the iPhone SDK, Objective-C and other OOP based languages will not take long to master.

Come and check out the Elevator Pitch on Tuesday September 22nd at Flash on the Beach 2009

How to implement background images on Spark control buttons with scale 9

Nick Kuh — Mon, 08 Jun 2009 16:04:48 +0000

Hopefully this quick post will be a bit of a time saver for Flex Developers developing Flex 4 SDK projects with Flash Builder or other tools…

Over the last year or 2 I’ve really got comfortable with reskinning Flex 3 applications. For me the quickest, simlest way has usually been to cut up the designer’s photoshop file and implement Scale 9 and syntax in my Flex css files – an example of a recent Flex 3 button skin looked like this:

.answerButton
{
fontSize    : 44px;
fontWeight    : bold;
paddingLeft    : 15px;
paddingRight: 15px;

upSkin        : Embed(source=”assets/images/new/buttons/answerButtonUp.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″, scaleGridBottom=”99″);
overSkin    : Embed(source=”assets/images/new/buttons/answerButtonOver.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″, scaleGridBottom=”99″);
downSkin    : Embed(source=”assets/images/new/buttons/answerButtonOver.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″, scaleGridBottom=”99″);
disabledSkin: Embed(source=”assets/images/new/buttons/answerButtonUp.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″, scaleGridBottom=”99″);
selectedDisabledSkin: Embed(source=”assets/images/new/buttons/answerButtonUp.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″, scaleGridBottom=”99″);

}

Luckily for me the Flex 4 SDK is backwards compatible for the most part so you can still skin an mx.controls.Button component with the CSS above.

However… one of the reasons I’ve been migrating my Flex 3 project to Flex 4 is to make use of some of the skinning improvements it offers with it’s new Spark components built on top of the Flex 3 halo components.

The code above does not work on a spark.components.Button. I assumed it would… Here’s how I got the example below to work:

http://www.nickkuh.com/demos/gumbo/scale_nine/

Step 1) Create a new Flex Project in Flash Builder

Step 2) You can still customize the label colours and states but you’ll need to implement the new namespaces in CSS introduced in Flex 4 to avoid warnings and errors – see the gumbo_scale_nine.css file.

Step 3) You’ll also notice within the gumbo_scale_nine.css file that I’m pointing a custom style (‘answerButton’) to an MXML skin file in the location com.nickkuh.skins.AnswerButtonSkin.mxml. This is the file that I’ve used to custom skin the spark button component. I copied the ButtonSkin.mxml file that comes with Flex 4, stipped out a load of fills and strokes I didn’t require and add these important lines:

By default the resizeMode parameter will just tile and repeat your graphic which wasn’t the desired functionality.

So that’s it. Although it took more step to reskin than a Flex 3 component I can certainly see the benefits of the separate FXG skin file. Next step is to change that SimpleText labelElement into a RichEditableText component and enable multilines and imline images into my Spark buttons. Wish me luck!