Pathfinder spell compendium (iOS)

Recently released a spell compendium for iOS-devices, drop a comment with feedback or questions.

Advanced advanced compiler options in FD

Ok, so I'm a nerd...
Sometimes I let the little things bug the hell out of me.

FlashDevelop is a great tool that lets you do whatever you like, or so I thought until I ran into some problems generating documentation through AsDoc. The solution involved adding namespaces as additional compiler options, something like this:

But I'm getting a bit ahead of myself. First I would like to talk about this neat-freakyness of mine: I like it when the projects are self contained, all the assets except the SDK are kept inside the project structure and as path independent as possible.

The options have to be specfied like:

-namespace http://ns.adobe.com/mxml/2009 C:\FlexSDK\frameworks\mxml-2009-manifest.xml 

It drove me totally nuts as I knew that the pre and postbuild command-builders used tokens like "$(FlexSDK)" or "$(ProjectDir)" with values for all the important stuff.

So I wrote this plugin that lets you define the paths using the tokens from the pre/posbuild-command builder in this fashion:

-namespace http://ns.adobe.com/mxml/2009 $(FlexSDK)\frameworks\mxml-2009-manifest.xml 

Download it and smack it into your /Plugins folder yesterday.

Written in C# .NET for versions of FlashDevelop > 3

Step by step, Compositing ambivalent logotypes only Swedes understand.

Put waaay to many hours into figuring out how advanced text beveling works in Maya on this piece for a company trip (company logotypes and messages are stripped).
Anyhow, I got a request to create this fun logo to put on a bus.

Came up with somewhat of a "Gypsy meets rock festival" design theme.

Top to bottom
A lighting/specular pass with just the shiny stuff.
Shadows
Clean colors, needed to clean this up a bit so i rendered out a separate pass.
Base lighting.
Final comp.


Hope this puts everyone in mood.
If this doesn't cut it we can always play Gogol Bordello all the way there.

Step by step, Compositing birthday card design

Ok so my moms 60th birthday was coming around the corner, and i couldn't think of anything to buy her beeing last minute and all. Pulled an all nighter and put together this designed birthday card for her.

Some people have already told me it looks too harsh and cold to give to your mom. Just want to point out that we're a family of German ancestry, we're like that.

Started fiddling around in 3D Studio Max because of superior text tools until i landed on something i found fitting design-wise, then exported it over to Maya. Made a ton of shaders and layers. Then exported everything to Images.

After working up a result i was decently happy about, I concluded that the image lacked flare. Lens flare to be specific.

As it is usually frowned upon to use lens flares I hid it by making the general image a tad overexposed.

Building Starcraft 2 Maps

This time the subject matter is of a, to me, rather different nature. I recently started to dabble in the art of making competetive Starcraft 2 maps and wanted to share some of my failures with you.
My first map was of a horribly wrong scale and contained an unbalanced amount of resources.

Here are the rules for resources:

• The fixed amount of starting resources are 8 minerals and 2 vespene geysers.
• A normal expansion contains 6-8 minerals and 2 vespene geysers.
• A golden expansion contains 6 rich minerals and 2 vespene geysers.
• Rich vespene is never used

Map sizes (effective):

1v1 : ~120x120
2v2 : ~150x150
3v3 : ~170x170
4v4 : ~190x190

Map expansion count:

1v1 : 3~4 / player
2v2 : 2~3 / player
3v3 : 2~3 / player
4v4 : 2 / player

The grid system uses 8 units for a big grid square (G) and 4 for a small (g).

Building rules:

• Start locations should be contained on a at least 14 G² (/ player) big plateu.
• Expansions should have ~6 G² empty space around it.
• A number of Xel'Naga towers (1-4) can be placed around central positions.
• LOS (Line Of Sight) blockers should be placed around key locations (e.g. so that micro unit controls can be used more effectively.
• A fun level has one/several central point(s) to battle over.

Cross version compiling in AS3

Ever wanted to make a flash application behave differently depending on the plugin version of the user? That type of behaviour requires some planning beforehand and is totally doable.


Method availability could be done like this.

package
{
 public class PluginCapable
 {
  public static function methodAvailable(object:*, methodName:String):Boolean
  {
   try { object[methodName]; return true; }
   catch (error:Error) { }
   
   return false;
  }
 }
}

Say you wanted to check if the user could save locally...

var file:FileReference = new FileReference();
if (PluginCapable.methodAvailable(file, "save")) file["save"](data, "file.txt");

or simply hide the save button or something.

XML Serializer 1.1.0

Added some useful functionality and removed some showstoppers on certain xml-files.

Added Features

• Specify entry level of parsing.

Download

XML Serializer 1.0.3

Decided to simplify yet another step in my work process and make an app that automatically maps xml-data to a class in AS3, this was the result of that.

Features

• Drag & Drop XML files directly onto application.
• Analyzes data and suggests variable types.
• Exclude unwanted nodes from serialization.
• Generates .as class file for use in ActionScript 3 projects.

Coming feature

• Specify entry level of parsing.

Download

UTF Compressor 1.2.2

Released a minor updated version.

• Better window resize performance.
• Added application icon.

Coming features

• Auto-update interface
• Export swf files directly from application
• Drag & drop fonts on application

http://apps.jonsson.be/UTFCompressor.air

Building classes with MXMLC

Since the recent post of the UTFCompressor, you might wonder what the hell it´s good for or, just how this will speed up the workprocess when exporting optimized fonts.

Ideally I would write an app that exports a flash font based on a font file directly. Bam you're done.

But then you would have no control over which glyphs are included, some Unicode fonts are extremely large (> 10 MB). This would then wreak havoc online if say you're doing an Asian website in flash, going about it coding in AS3. Every visitor has to load > 10 MB just to see the site.

You could just make shapes of all the texts on the website, but hey. Where's the fun in that?

Right now the AIR platform doesn't support execution of native processes, but that will soon change. For now you will have to make do with this short second phase of font generation.

The Flex SDK uses a binary to compile Actionscript 3. Senocular has a great tutorial on using this to compile your own swf:s.

http://www.senocular.com/flash/tutorials/as3withmxmlc/

1. Add your flexSDK/bin folder in the system path variable.

2. Make a .bat-file with contents similar to:

mxmlc %1 -output %1.swf -as3

3. In UTF Compressor there is this option

Use that to save a class and drop it onto your .bat-file. Now you should have a Flash font lying around somewhere.


If you don't have the Flex SDK, go ahead and download it here.

Go ahead and grab the UTF Compressor while you're at it.

UTF Compressor update

Added the "coming features" since I'm at home, bored.

UTF Compressor 1.2.1



Features:
Analyses and optimizes UTF-ranges from entered text, resourceful whilst working with large fonts such as Asian language.
Creates a prewritten class with all font information.
Ability to bake already set ranges such as european letters or numerals.

Download (462K)

Simplify Flex-font embedding

Wrote this little application to make exporting fonts to swf-files through Flex SDK simpler.

UTF Compressor 1.1



Features:
Analyses and optimizes UTF-ranges from entered text, resourceful whilst working with large fonts such as Asian language.
Creates a prewritten class with all font information.

Coming features:
Ability to bake already set ranges such as european letters or numerals.

Download (461K)

Nice Url in AS3

Feeling generous today, here you go.
(Made to include nordic names)

public static function niceUrl(s:String):String
{
 s = s.toLowerCase();
 s = s.replace(/^\s+|\s+$/g, "");
 s = s.replace(/[_|\s]+/g, "-");
 s = s.replace(/[øöõóò]+/g, "o");
 s = s.replace(/[åäáàãâ]+/g, "a");
 s = s.replace(/[ëéèê]+/g, "e")
 s = s.replace(/[^a-z0-9-\/]+/g, "");
 s = s.replace(/[-]+/g, "-");
 s = s.replace(/^-+|-+$/g, "");

 return s;
}

Key.isDown(), where did you go?

Got a bit stumped when I realized that multi-keystroke handling was totally removed from AS3. The rabid game programmer in me worked up a little steam while it scurried about the internet looking for a solution. The alternative isn't acceptable, you can't make games without multiple buttons pressed at the same time.

Found a bunch of solutions to this problem, all of them over 100 lines in length. How hard can this problem be?

package Extrude.Utils 
{
 import flash.events.KeyboardEvent; 

 public class Keyhandler
 {
  protected static var _keys:Array = new Array(126);

  public static function onKeyDown(e:KeyboardEvent):void
  { _keys[e.keyCode] = true; }

  public static function onKeyUp(e:KeyboardEvent):void
  { _keys[e.keyCode] = false; }

  public static function isDown(key:uint):Boolean
  { return (_keys[key]); }
 }
}

Beautiful girls and nice furniture

Just woke, fiddling about with a cup of coffe and feeling good about myself. Had a great time working the last crazy hours of a project that is launching next week.

This is somewhat of a sneak peak, I hope that no one gets their panties in a bunch about it.



Skaargarden.com

It was a really long time since i saw some quality material put in the pipe. Hope that they fare well in todays competitive market.

Announcing: DropEnc

The last couple of days I've researched the possibility to encode video based on feedback from FFMPEG in AIR. The upcoming desktop application improvements in the AIR 2.0 Beta makes this a possibility.

For once, something that started out as me fooling around in Flex Builder that actually worked. My goal with this encoder is to remove all the technical aspects of video conversion and make it profile based, or just: "Make it simple stupid."

Leaping headfirst into ExtendScript 2.0

Today we ran into somewhat of a problem at my job. One of our clients had stuffed a server chuck-full with uncompressed TIFF-images. The payload weighed in at the modest amount of 10GB.

Our ability to deliver a somewhat stable way for our customers to deliver content to us vanished, as the veritable meat-pile of images just sat there, customer-satisfaction-blocking us all afternoon.

So i whipped up a quick way for me and my co-workers to quick batch those images into leaner shape.

What we needed for web availability was no more than 1280px-sized images and RGB (sRGB) images.

/////////////////////////////////////////////////////////
// Extrude Weightcutter, v1.1, Extrude Interactive, 2010
// Author: Sven-Erik Jonsson, svenerik@extrude.se
/////////////////////////////////////////////////////////
bringToFront();

var oldUnits = preferences.rulerUnits;
var startDisplayDialogs = displayDialogs;

preferences.rulerUnits = Units.PIXELS;
displayDialogs = DialogModes.NO;

var files = File.openDialog('Choose files to resize', '*.*', true);

if (files)
{
 var userImageSize = prompt('Target image size','Enter image size');
 var targetImageSize = (!isNaN(parseInt(userImageSize))) ? parseInt(userImageSize) : 1280; 
 
 jpgSaveOptions = new JPEGSaveOptions();
 jpgSaveOptions.embedColorProfile = true;
 jpgSaveOptions.formatOptions = FormatOptions.STANDARDBASELINE;
 jpgSaveOptions.matte = MatteType.NONE;
 jpgSaveOptions.quality = 8;  

 for (var i = 0; i < files.length; i++)
 {
  var currFile = files[i];
  if (currFile.exists)
  {
   open(currFile);
   
   try 
   {    
    if (activeDocument.mode != DocumentMode.RGB) activeDocument.changeMode(ChangeMode.RGB);
    if (activeDocument.bitsPerChannel != BitsPerChannelType.EIGHT) activeDocument.bitsPerChannel = BitsPerChannelType.EIGHT;
    
    activeDocument.flatten();   
    
    try { activeDocument.convertProfile("sRGB IEC61966-2.1", Intent.PERCEPTUAL, true, true); }
    catch(e) {}
    
    var portrait = (activeDocument.height > activeDocument.width);
   
    if (!portrait) activeDocument.resizeImage( targetImageSize, null, 300, ResampleMethod.BICUBIC );
    else activeDocument.resizeImage( null, targetImageSize, 300, ResampleMethod.BICUBIC );    
    
    var asCopy = (activeDocument.name.toString().indexOf(".jpg") > -1);
    
    activeDocument.saveAs(activeDocument.path, jpgSaveOptions, asCopy);
    activeDocument.close(SaveOptions.DONOTSAVECHANGES);
   }
   catch(e)
   {
    alert(e);
   }  
  }
 }
}

// Leave no crap behind
displayDialogs = startDisplayDialogs;
preferences.rulerUnits = oldUnits;
purge(PurgeTarget.ALLCACHES);

Download Script

Installation

Put the script in:
Program Files > Adobe > Adobe Photoshop (CS-version) > Presets > Scripts

Restart Photoshop if needed

Activate from:
File > Scripts > ex_weightcutter

Use with caution around jpeg files.

Solving the wmode keyboard bug in Firefox (AS3)

The Firefox team has embarrasingly been saying (for years) that they are working on solving their problems with keyboard focus on embedded flash objects with wmode set to either 'transparent' or 'opaque'.

See details:
http://forum.sephiroth.it/showthread.php?t=9232
http://timconfessions.blogspot.com/2008/04/firefox-wmodetransparent-bug.html
http://lists.macosforge.org/pipermail/webkit-unassigned/2008-September/084474.html

The list goes on and hopes are low. There has been some dirty quickfixes circulating but I grew tired and wrote a more robust solution for AS3.

Embed the following in your class, assign it to your inputField and... enjoy.

Download Flex Project Archive

 0)? input.text.substring(input.selectionEndIndex, input.text.length) : "";

     // Enter the codes to change here
     // Below is Swedish keyboard
     switch (event.text)
     {
      case "2" : event.text = "@"; break;
      case "3" : event.text = "£"; break;
      case "4" : event.text = "$"; break;
      case "5" : event.text = "€"; break;
      case "6" : event.text = "6"; break;
      case "7" : event.text = "{"; break;
      case "8" : event.text = "["; break;
      case "9" : event.text = "]"; break;
      case "0" : event.text = "}"; break;
      case "+" : event.text = "\\"; break;
      case "<" : event.text = "|"; break;
      default : break;                     
     }

     input.text = startText + event.text + endText;
     input.setSelection(input.selectionBeginIndex + 1, input.selectionBeginIndex + 1);
    }
    catch (error:Error)
    {
     trace(error.getStackTrace());
    }
   }
  }
 }
}

Doing perspective in Adobe Flash the old way

This has been a problem for ages:



http://pixelfumes.blogspot.com/2006/01/flash-why-do-you-mock-me-bitmap.html

As a solution to this, some smart developer came up with a quick fix, and people seem to stick to it.

http://pixelfumes.blogspot.com/2006/01/perspective-distort-example.html

This solution maps a lot of triangles to a quad and uses bitmapFill to project the image onto the surface. As you can see it has some limitations, the borders become teared and the final results look so so.

I'm currently working on a wallpaper application for a company that sells.. well guess.

Since there's always version-limitations as to what you can expect from the visitors, we decided that flashplayer 9 was the target version for this application, but this version suffers from the aforementioned problems so we had to fix it somehow.



After looking at the results of the 'perspective distort script' I concluded that there was something awkwardly wrong with this way of drawing images. The code places the triangles in a linearly interpolated fashion which screws up any chance of actually drawing something close to a correct perspective.

(If you're into this kind of stuff, You've probably seen this bit of code before)

public function setTransform( x0:Number , y0:Number , x1:Number , y1:Number , x2:Number , y2:Number , x3:Number , y3:Number ):void
{
    var w:Number = texture.width;
    var h:Number = texture.height;

    var dx30:Number = x3 - x0;
    var dy30:Number = y3 - y0;
    var dx21:Number = x2 - x1;
    var dy21:Number = y2 - y1;

    var l:Number = poly.length;

    while( --l > -1 )
    {
            var point:Object = poly[ l ];

            var gx:Number = (( point.x - _xMin ) / w);
            var gy:Number = ( point.y - _yMin ) / h;

            var bx:Number = x0 + gy * ( dx30 );
            var by:Number = y0 + gy * ( dy30 );

            point.sx = bx + gx * ( ( x1 + gy * ( dx21 ) ) - bx );
            point.sy = by + gx * ( ( y1 + gy * ( dy21 ) ) - by );
    }
    render();
}

After some thinking I came up with a somewhat simple quick-fix to a wall specific problem. With a bit of tinkering you'll easily be able to add vertical correction too, if that floats your boat. Anyway... enjoy.

public function setTransform( x0:Number , y0:Number , x1:Number , y1:Number , x2:Number , y2:Number , x3:Number , y3:Number ):void
{
    var w:Number = texture.width;
    var h:Number = texture.height;

    var dx30:Number = x3 - x0;
    var dy30:Number = y3 - y0;
    var dx21:Number = x2 - x1;
    var dy21:Number = y2 - y1;

    var l:Number = poly.length;

    // Calculate the facing angle of the quad.
    var dangle:Number = ((Math.atan2(dy30 - dy21, x2 - x0) * (180/Math.PI)) / 90);

    while( --l > -1 )
    {
            var point:Object = poly[ l ];

            var gx:Number = (( point.x - _xMin ) / w);
            var gy:Number = ( point.y - _yMin ) / h;

            // Quadraticly shift the triangles x-ward into the perspective depending on the facing angle
            var gxshift:Number = (gx * (1 - Math.abs(dangle))) + (Math.pow(gx, 2) * Math.abs(dangle));

            if (dangle > 0) gxb = 1 - gxb;

            var bx:Number = x0 + gy * ( dx30 );
            var by:Number = y0 + gy * ( dy30 );

            // Apply the new coordinates
            point.sx = bx + gxshift * ( ( x1 + gy * ( dx21 ) ) - bx );
            point.sy = by + gxshift * ( ( y1 + gy * ( dy21 ) ) - by );
    }
    render();
}

During this project I also came across some creative ways to apply subtle sharpening to images in flash. Post a comment or something if you're interested.

This years most notable nobel prize

Goes to Albert Fert and Peter Grünberg for the discovery of "giant magnetoresistance", the area of course: Physics.
This will in time lead to great improvements of magnetically based storage devices such as hard drives.
The scientists also predict the development of MRAM technology (Magnetic RAM) , wich eventually will lead to crash-proof, instant booting computers.
When I heard the news of this my inner nerd went haywire. This is surely a milestone in computer science.