Archive for the 'Flash' Category

27
Oct
10

Keyboard Woes

By swingpants 4 Comments
Categories: Benchtesting and Flash
Tags: , , ,

I came across a problem today. Surely I should should have spotted this sooner – but maybe I just never used these key combinations.

It seems that there are issues with using ARROW KEYS and SPACE. Specifically on my keyboard the combination LEFT, DOWN and SPACE doesn’t work. I’ve spotted that other key combinations fail on different keyboards. Another laptop I have fails with LEFT, UP and SPACE as does my desktop at work.

Here is a quick app that will tell you what keys are being accepted. Try different combinations of arrow keys and space to see if you have any fails.

Seemingly this is nothing to do with Flash and everything to do with keyboard design. The problem varies from model to model, but is VERY common.

Test your keyboard.

Keyboards use a matrix to wire up the keys and register presses. The matrix is made up of columns and rows. When a key is pressed the column and row contact each other completing a circuit. The controller for the keyboard detects this and registers the key press. ‘Ghosting’ and ‘Masking’ of key presses can occur with a matrix keyboard. Here is a technical explanation of the issue. This article is from a decade ago, seemingly the drive to fix these keyboard problems hasn’t been strong enough.

Let’s gauge how bad it is. Try the Keyboard Woes app out and then let me know if there are any issues with your set-up.

How to fix this? The ONLY solution is not to use the SPACEBAR in combination with the ARROW keys.

02
Oct
10

Flash on the Beach 2010 Review

By swingpants 3 Comments
Categories: Conference and Flash
Tags: , , , ,

Wow. Another great year for Flash on the Beach. The doom merchants may well have predicted (or desired) it’s death but the evidence in Brighton this week demonstrated what a great future Flash has. Packed out presentations across the whole event with attendees from all over Europe (shown by the lack of people who had heard of Family Fortunes (Feud) – an amusing circumstance in Seb Lee Delisle’s session).

I kicked off day 1 at FOTB2010 by attending a talk by Conrad Winchester on Robot Legs and Signals. Very interesting and well thought out presentation with a good smattering of code examples. Andre Michelle‘s Pulsatile Crackle session was very well received. More excellent demonstrations of Andre’s apps with some very nice playful audio interfaces. His hilarious ball falling out of tube demo was a treat. Would love to see Andre give an audio coding 101 session… Mario Klingemann next: It was Mario’s session a few years ago – when he broke down the seemingly lesser bitmapData functions – demonstrating how to use floodfill, etc for optimal image analysis that really inspired me to concentrate fully on Flash. All of his sessions have been excellent since including this his last one for at east a year – slightly chaotic but full of great takeaway ideas. His attempt at a jigsaw puzzle analyser and solver was inspired. Such a shame he couldn’t coax it closer to a solution. I’ve been wanting to get to a Stacey Mulcahy session for a couple of years and finally succeeded here – I wasn’t going to miss a presentation with ‘douchebag’ in the title. Stacey is a fine purveyor of fun from the darkest corners of the interweb, I found the session to be hilarious but I still came away with some salient points about social media and the increasing usage of oauth.

The inspiration sessions were excellent. I love Robert Hodgin‘s work and especially love his love for maths. Stefan Sagmeister in the evening looked like a slightly smarter Nick Cave – he kicked off talking about ‘chelly fish’ which I thought was a wonderful pronunciation – his body of work is amazing and he has some great philosophies about working and taking time off to refresh.

Day 2 started off with the Elevator Pitches (I presented 3 Games in 3 Minutes here last year). The standard this year was amazing. I only saw the first 10 or so (I had to go and prepare for my session) but the stand outs for me were Sarah Bird/@AnimNation – 3D in 3 minutes, wow!, Tomek Augustyn/@blog2t – a real web cam eye opener, Tom Vian/@SFBTom – 8 bit sound engine SFXR and Trine Falbe/@TrineFalbe – Do not use bullet points – Trine has l33t preso skills!

Hand sketch of the 'Where in the World?' sketch

Jon Howard's FOTB2010 session as sketched by @UBelly

I was next up with my “Where in the World? InContinent Ballistic Flash”. The session went really well. A poor data feed prevented me showing off the really cool bits of the deep zooming but I skirted around that issue. As I started I was told to try and cut 5 mins to help the schedule catch up so I dropped a little bit of code explanation around the explosions. I’ll do a post soon to cover that soon. It is amazing how simple clean understandable solutions to big problems can be the killer point – I certainly didn’t expect my little polynomial equations from Excel graphs method to be lauded so much in the Twittersphere. Lesson learnt though – I’ll try to come up with some more of those nuggets. The audience was great (thanks guys) and laughed at all my jokes =-)

Swingpants distributes his balls

Swingpants and his balls (photo Marc Thiele)

I love Joa Ebert‘s work but I have to confess I was vainly catching up on the twitter feed about my session rather than concentrating on Joa’s pres (sorry) but the improvement stats sound amazing. Seb Lee Delisle‘s presentation this year was immense. Great interviews with people across the web development world about the state of Flash, why people hate it and what kind of future Flash has. Seb has a lovely relaxed style and a great understanding of how to deliver in an entertaining way. He also has a conveyor belt of some sort if you hadn’t heard. Mind Candy finished the afternoon for me. I met up with the Moshi Monster’s gang a couple of years ago and since then they have become hugely successful. They explained about their Agile methods which seemed to go down really well. To finish the day off I managed to get along to Brendan Dawes session which was entertaining and very funny.

FOTB Audience in the Corn Exchange

Attentive faces of an FOTB audience (photo by Marc Thiele)

I got asked to do the Jam Throwdown this year – a great honour. I was up on stage with Seb Lee Delisle, Iain Lobb, Andre Michelle, Robert Hogin and Julian Dolce. 10 mins each. John Davey had asked me to ‘blow the others off the stage’ – so I did literally or at least digitally. I put in a few hours the night before to pull it off – it seemed to work well. Seb’s crowd ‘beat capturing’ worked excellently and really got the guys going.
By all accounts Iain Lobb’s Zero to Game Designer in 60 Minutes was an amazing session – but I couldn’t get in. Ralph Hauwert‘s session introduced me to 2D and 3D depth fields – something I really need to look into. Ralph is inspired by reading a lot of Maths papers – makes me feel I should read a few more. (and learn to understand the syntax better). I went along to Frank Reitberger‘s presentation (another Elevator Pitcher from last year). Really nice graphical effects and explanation of his processes. Joshua Hirsch and Jared Tarbell wrapped up proceedings.

Another amazing few days. My inspiration batteries have been recharged and I’ll be looking to try and get back as a speaker again next year.

If you’re a Rich Media developer/Designer and haven’t been to Flash on the Beach then why not? It is the number #1 conference in Europe and you are pretty much guaranteed to make a whole host of new contacts.

[ Huge thanks to Brett Jephson @brejep for building a 3D tree model for me to blow up, and to Aidan O'Brien @scaryclown for designing some scenery to adorn my character explosion tests. Last but not least big big thanks to John Davey @FOTB for organising such an immensely successful conference(festival) ]

23
Sep
10

Where in the World? Intercontinental Ballistic Flash

By swingpants 1 Comment
Categories: Actionscript, bitmapData, Conference and Flash
Tags: ,

I shall be presenting “Where in the World? Intercontinental Ballistic Flash” at Europe’s premier rich media conference Flash on the Beach. I’m scheduled to present in the Pavillion Theatre at 10.15am on Tuesday 28th September.

In the first half of the session I’m going to look at techniques for how to build a world in 3D. Take a 2D map, convert it to 3D. Add some models, information pins, zoomability. I’ll describe some optimisation tricks and tips, and some easy methods to build maths formulae.

In the second half I shall be demonstrating a number of ways to create usable, configurable and fun game components. These include bitmapData constructions and manipulations, delta tweening, model parsing and combinations of all three.

If you are at FOTB 2010 if will be great to see you at my session, if not I shall be posting some of the demos and source here very soon.

Flash on the Beach, Brighton 26th to 29th Septhember 2010

Flash on the Beach

14
Sep
10

My Flash on the Beach 2010 Schedule

By swingpants 1 Comment
Categories: Actionscript, Conference and Flash
Tags: , ,

The awesome Flash on the Beach conference takes place in Brighton on 26th to the 29th September.
I shall be presenting “Where in the World? Intercontinental Ballistic Flash” on Tuesday morning (10am) – I’ll list more details about it here very soon.

Here is a Twitter list of all the FOTB presenters

These are the sessions I’ll be attending:

Monday
Keynote
Conrad Winchester: ROBOTLEGS AND SIGNALS – A MATCH MADE IN HEAVEN?
Andre Michelle: PULSATILE CRACKLE
Mario Klingemann: SO LONG, AND THANKS FOR ALL THE FLASH
Stacey Mulcahy: DEVELOPING FOR THE SOCIAL MEDIA DOUCHEBAG – AN INTRO TO SOCIAL API’S
Robert Hodgin: PRACTICE MAKES PERFECT, SO WHAT ARE YOU PRACTICING?
Stefan Sagmeister: DESIGN AND HAPPINESS

Tuesday:
THE ELEVATOR PITCH
Jon Howard: WHERE IN THE WORLD? INTERCONTINENTAL BALLISTIC FLASH
Joa Ebert: 1 1 7 11 21
Seb Lee-Delisle: WHAT THE FLUX!?
Veronique Brossier: ADOBE AIR FOR MOBILE DEVELOPMENT
Nando Costa: THE OTHER SIDE
Brendan Dawes: MAKERS OF THINGS

Wednesday:
6 OF THE BEST – 10 MINS EACH
Iain Lobb: ZERO TO GAME DESIGNER IN 60 MINUTES
Ralph Hauwert: UNITZEROONE :: THE DISCONTINUITY
Frank Reitberger: TRIANGLE AFFAIRS
Peter Elst: BIG BOYS AND THEIR LITL TOYS
Jared Tarbell: THE COMPUTATIONAL ARTIFACT

02
Mar
10

AS3 Magnifying Glass Class :: Pixelbender Lense Refraction

By swingpants 8 Comments
Categories: Actionscript, as3, Code Snippet and Flash
Tags: , , , , , , , ,

The AS3 Magnifying Glass is a lense refraction class employing PixelBender. The class is an encapsulated method that takes a source image, a position and radius and returns a refracted result in sprite form.

I needed to represent a spy glass in my current project, and was looking for a very efficient method to achieve this. PixelBender seemed the obvious route and I’m pretty impressed by the speeds I am getting. I have max-ed out the frame rate and am still getting full (120) fps.

The MagnifyingGlass effect is the resultant class. The class embeds a pixelbender filter that spherizes it’s input and returns this as a sprite.

When using the class, the source image should be sent to the MagnifyingGlass full size, and be displayed to the user at a reduced size. This helps to preserve the integrity of the refracted image.

Usage:


//refraction: 0=Lots, 1 =None
//radius: The radius of the magnifying glass
//position_point: The position of the magnifying glass on the source image
//source_pic: BitmapData of the source picture
magnifying_glass = new MagnifyingGlass(refraction,radius, posn_point, source_pic)

magnifying_glass.magnifyingGlassPosition=posn_point
magnifying_glass.update()

AS3 Magnifying Glass Class

The AS3 MagnifyingGlass Class

I have set up a quick demo that shows the class at work on 3 different images. Press any key to change the image.

Image#1: Have a look around a bit of England & Wales. Enjoy.
Image#2: Hundreds of cartoon characters. See if you can find Quagmire! – Gigity.
Image#3: There is a sheep in there somewhere.

NOTE: The PixelBender filter used here is based on Joa Ebert’s Spherize Filter originally built in Hydra – the forerunner of PixelBender.

NOTE: This requires Flash Player 10 and above.

Demo: Magnifying Glass Class Demo
Source: MagnifyingGlass.zip

25
Feb
10

AS3 Flamer Class :: Setting things on fire

By swingpants 4 Comments
Categories: Actionscript, as3, Code Snippet, Effect, Flash and Flash Games
Tags: , , , , , , , , ,

The Flamer Class is a quick and easy method to set things on fire. Throw some fuel (any display object) at the class and make it burn.

While working on another project I needed to make some lightweight flames. I looked around, tried a bit of perlin noise, some convolution filters – then some PixelBender filtering – I wasn’t really happy with the results.

I found the excellent Saqoosha’s Fire on Wonderfl.
This demo had nearly the flicker and colour mapping that I was looking for. Rendering the perlin noise on each frame was causing a bit too much processor overhead for my purposes.
Instead of rendering two perlin octaves and moving the layers against each other, I took two separate single octave perlin noise bitmaps and rotated one against the other while blending.
This gives a nice effect and is very lightweight. With the Saqoosha method I was clocking at a steady 26fps, with my lightweight method I could get 90fps.

To get the flame hues I set up a gradient box, threw some colours at it, loaded those colours into an array which I then pushed to a palette map.

So how to use the Flamer class:


import swingpants.effect.Flamer

var flamer:Flamer=new Flamer(display_object)
addChild(flamer)

addEventListener(Event.ENTER_FRAME, enterFrameHandler)
function enterFrameHandler(event:Event):void
{
flamer.update()
}

Your object will now be on fire. Feel naughty?

You can set the render width and height and also set the direction of the flames by setting a point vector.


var flamer:Flamer=new Flamer(display_object,render_width, render_height, flame_direction_point)
addChild(flamer)

//The colour of the flames can be set with one of the presets (There are 4 at the moment – ORANGE_FLAME, BLUE_FLAME, YELLOW_FLAME, GREEN_FLAME – but I will be adding more)
flamer.setFlameColour(Flamer.BLUE_FLAME)

//Direction can be set on the fly:
flamer.setFlameDirection(direction_point)

Here is a demo of a pure code use of the Flamer: The Flaming Vortex. You can click on the flash to initiate an explosion, and pressing space will change the colour. Have a play:

Flaming Sun

Flamer Class. The flaming vortex demo

This next demo is an example of throwing a movieclip/sprite at the Flamer class. Don’t laugh, I quite literally spent 10 minutes putting the anims together then threw them at the Flamer. Click on Flash to change colour and object.

Flaming Car

Flamer Class Demo. Help, my car is on fire

Lots of fun can be had by throwing different animations at the Flamer. Control some with your mouse/keys. Become a twisted fire starter.

The Flamer class could do with a few more features, but is a pretty good start. The speed is pretty good, I’m happy to receive any improvement recommendations.

I have packed the Flamer class and demos up in a zip if you want to have a play:
DOWNLOAD: Flamer Class and Demos

DEMO #1: Flaming Vortex
DEMO #2: Burning Movieclips

15
Jan
10

Away3DLite: Translating 3D Coordinates to 2D Screen Position

By swingpants 6 Comments
Categories: 3D, Actionscript, as3, Code Snippet, Flash and Mathematics
Tags: , , , ,

I have been playing with the awesome Away3DLite. Playing with 1000s of polygons is very liberating, but still doesn’t mean we can slack off with the optimisation. It is important to take any opportunity to lessen the number of calculations performed per frame by the player.

To this end, I was just putting together a 2D layer above my 3D scene when I found that the camera.screen function (available in the standard Away3D library) that projects 3D coordinates(x,y,z) to 2D screen positions (x,y) wasn’t present.

In Away3DLite we have to calculate this ourselves. The salient information can be gained through a model or container’s viewMatrix3D property. To get an accurate screen position the the x,y,and z positions are drawn from viewMatrix3D. Each of x and y are divided by the z value and any screen offsets are applied.

Here is the method as a function:

public function calc2DCoords(screen_element:*):Point
{

var posn:Vector3D = screen_element.viewMatrix3D.position
var screenX:Number = posn.x / posn.z;
var screenY:Number = posn.y / posn.z;

return new Point(screenX+screenW_offset,screenY+screeH_offset)
}

Pass through a screen element (a model, primitive or object container) and the 2D result will be returned. The screenW_offset and screenH_offset are required if the ‘view’ has been centred on the stage.

I have put together a demo here to demonstrate the function. I load a couple of models into the scene and let a 2D info panel follow each around the screen.

Got to keep a close eye on those tubbies

Demo: Translating 3D Coordinates to 2D Screen Position
Source: ZIP

18
Nov
09

Ranged Numbers. Non-Linear response curves for Sliders and TouchPads.

By swingpants 2 Comments
Categories: Actionscript, as3, Code Snippet, Flash and Mathematics
Tags: , , , , , ,

I’ve been building a few apps recently and have found that a linear response over a range of numbers has been a poor solution. I needed to be able to apply different response curves to user interface components (knobs, sliders, touchpads) as well as on screen display objects, characters, etc.

I needed a good name for the class, but instead came up with the pretty poor moniker ‘RangedNumbers’. I’ll change it when I come up with a better one.

So the idea is, a ‘ranged number’ is instantiated, initialised for the required range then a simple call with a value in that range will result with a percentage that can be applied to the intended recipient accordingly. I realised that an inverted curve would be handy too, so have added that functionality.

I have included exponential and powered curves as well as linear.

So to use the ranged number system:

//Instantiate and Initialise
var ranged_num:RangedNumber=new RangedNumber(min,max)
//Where min is the minumum number in the range and max is the maximum

//In use:
trace ( ranged_num.calculatedRangeNumber(value, curve_type, inverted) )
//Where:
// value is the value within the range to be calculated
// curve_type is the type of response curve.
// Curve types: RangedNumber.LINEAR, RangedNumber.EXPONENTIAL, RangedNumber.POWERED
// inverted is a boolean flag. True if the inverted response is required

I have put together two demos to show the RangedNumber class in action:

Firstly using a Slider component. Grab the slider and watch how the markers are represented on all the displayed response curves.

A demonstration of how to implement non-linear response curves

Now here is the same demo but this time using a TouchPad. Click on the touchpad to engage. In this demo horizontal movement controls the standard curves and vertical the inverted.

How to implement non-linear response curves with a touchpad

The source for these demos and the Ranged Number class can be found here: Ranged Number ZIP

« Previous Entries

Categories

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates

Follow

Get every new post delivered to your Inbox.