Problem drawing big bitmapdata in FP 10

Today I was having problem drawing big bitmapdatas, and save them to disk in Air. When I was trying to save an image with size 2933*5447 the image came out cropped. After some googleing I found that the limit of 8191px in Flashplayer 10 only represents the limit of an displayObjects max size on the stage. The actual max size of a BitmapData seams to be 4096px, so the application ignores to throw error, it just cropps the BitmapData. The solution for this problem can be found here http://blog.formatlos.de/2008/12/11/bitmapdatadraw-is-limited-to-4096px/.

First project using Silverlight2

I've just managed to finish my very first Silverlight project. Using Silverlight2 I was tasked with making a simple Flash application into a Silverlight application. Was just a 1:1 conversion.
So I thought I'd share some experiences with you.

The tools I used were Microsoft Expression Blend and Visual Studio 2008. I'd feel utterly lost if I didn't have both programs to complement each other. There are for example no codehinting whatsoever in Blend. And there are little to no design area thats working properly in VS2008. Therefore I was more or less forced to use Blend for the designing of buttons, colors etc, and VS2008 for coding in the code-behind files.

It is however quite obvious that these two programs are intended to complement each other, and do so nicely. Making events etc are amazingly easy. You pretty much get a list with available events such as Click, OnLeftMouseDown, KeyUp for each element you select.

Another thing I would like to write a little about is the Templates idea thats implemented in Blend. The idea is simply to be able to create a "skin" which you can add to similar elements, for example a button. With a template you can set color, mouseover-color, hit-color or if you'd like you can create some animations into the templates by adding storyboards(which works pretty much exactly like the Flash-timeline). Thats sweet. Almost. When editing a button, you can easily change the Text-property to whatever text you'd like your button to read. When adding a template however, you overwrite the button completely. Meaning the Text property in the button isn't viewable. This might be me not realising something, like some setting somewhere to set it so it displays the text on top, but in my opinion this should be a standard behavior. If you have a button, and you have a Text property, you most likely want it to show on your button. Even if you change the color of the button.

So my experiences coming from a Flash background with Silverlight2? It's pretty straightforward, and everything is made pretty logical. Without any Visual Studio experience. The Storyboard concept is easy to grasp, and you have no problems creating and manipulating the timelines. Creating events I dare say are way easier in Blend. You simply type in the name you want for your event in the box(that says what you want it to fire on) and you get launched into VS2008 where it creates the event for you, and you just have to code in what you want to happen next. It can be pretty hard to at first realise you need to keep track of both the xaml-code and the c#-code tho. Like if you remove your event from the C#-file, your silverlight application will not send you an error, but will stand at the loading-screen at 100% indefinetly, and never actually launching. This means you forgot to remove the event form your xaml-code. Good thing to keep in mind! Without any error-message atleast I got a bit confused.

I ended up two times in this short project stuck in things that didnt work, and I couldn't figure out what was wrong, did the same thing again, and it strangely worked. The first time I thought I probably missed some step, but the third time it happened, I carefully reviewed what I had done and redid it. And it worked. Might be something with the events created by Blend or something like that.

So to sum it up, using Microsoft Expression Blend and Visual Studio 2008 to create Silverlight2 applications are as easy as pie. Sometimes too easy. With too much help from Blend, you can easily end up with code you don't actually realise you have. The Templates section really needs some work in my opinion. And it sometimes doesnt feel completely finished. But I see alot of potential in Silverlight for the future.

Mazegame solution

To day I was facing a classical problem. I wanted to build a classic maze game. The players task is to guide a charachter out of the maze with help of the arrowkeys on the keyboard .

The classic way to do this is to create MovieClips of all the walls in the level, add them to an array, then loop through the array to find if the charachter hits a wall with the hitTest function. This is a bit clumsy solution if the maze is complex with multiple walls or if I want to make many levels. I can't hitTest one single movieclip with the whole maze graphics in it, because the hitTest function tests the graphics boundingrectangle.

The solution I came up with was to check the colors around the charachter instead. So I just loaded a png image with transparent background and black lines as walls. Then I extracted the bitmapdata with bitmapdata.draw(mazeImage). After that I scanned the charachters boundingrectangle outlines for colors others then white with help of getPixel(x, y). To get the pixels around the charachter I made four loops, one loop for each side, like this one:

for(i=0; i<(player.width+1)/tolerance; i++)
{
xScan = player.x + (i*tolerance);
yScan = player.y;

controlHit(bitmapData.getPixel(xScan, yScan), xScan, yScan);
}

Then depending on where the pixel is found i bouncedback the charachter in the opposite direction.
To check if the charachter has reached the goal I just made the goal in a specifik color.

Papervision 3D hand cursor

viewport:Viewport3D's property buttonMode is what control if a hand cursor should show on ALL or NON 3D objects. If buttonMode=true the hand cursor will show whether or not the materials are interactive, or if you are listening for InteractiveScene3DEvents.

So if you need hand cursor to show all time, set viewport.buttonMode=true; and if you do not want a hand cursor anytime, set viewport.buttonMode=false;

If you need to show a hand cursor on specific target objects, you should set viewport.buttonMode=false; and then have each target object to set listeners. In those callback functions you must use CursorManager.setCursor(id:Class) | CursorManager.remove...

Font Embed

I want to share my experience with working with Flex and font embedding. Today I noticed that an embedded asset including a symbol with text that embedded the same Font as the Flex compiler did - It seemed to result in a conflict of what scope (or sandbox?) the font should belong to.

1) Flex can embed fonts from a flash-8.swf by the @font-face {} tag.
2) Flex can embed fonts in an instantiated AS3 model to a Class type using the meta Embed tag.
3) Flex can also embed or dynamically load an asset.swf that includes embedded fonts, and then have those exposed to any scope (or sandbox?) that wish to register them. And the other way around - the loaded asset.swf may register the fonts embedded by Flex.

Later I will show how. I haven't yet figured out the reason for the above mentioned problem, but let me start by sharing a simple workaround. In this case the asset.swf had some symbols in library with non-dynamic textfields in it. They where imported or pasted into Flash from an Illustrator design. When embedding/loading these symbols, all other text in the applications other scopes did not render. The solution to this was simply to redo the import from Illustrator to Flash first after I made the Illustrator textfields to outlines.

Maintain thumbsize in a scrollbarcomponent.

I found a great tutorial how to set a constant thumbsize in a scrollbarcomponent.

http://npacemo.com/wordpress/2008/05/20/flex-3-designer-scrollbar-fixed-size-scrollthumb/

Problem removing blankspaces with split(" ").join("");

Yesterday I was playing around with Adobe Air and flex. My goal was to parse a productprice from an HTML-site by splitting the pricetag in to ”kronor” and ”oren” (pounds and cents) My only problem was that ”kronor” below 10 just contained one number, before that number was a blankspace to balance the textalign on the site.

So I built a function that was suppose to remove the blankspaces with split(” ”).join(””); , but no success. After some testing I tryed the string.charCodeAt(index:Number = 0);. This function returns a “charCode” , the numeric Unicode character code of the character ,at a specified index, this gave the result 160. After some googleing on unicode 160 I found this site http://bytes.com/forum/post1462660-5.html. This sort of blankspace-characters are called a ”non breaking space” http://en.wikipedia.org/wiki/Non-breaking_space. I also found that there are some more types of whitespace - characters that may be used by unicode but not removed by the split(” ”).join(””) – function. So to solve this problem I some how had to force the special character in to the splitjoin-function. After some reading about strings on ”livedocs” ,http://livedocs.adobe.com/flex/3/langref/String.html ,I found the String.fromCharCode(), that simply translates a list of commaseparated Unicodenumbers to a string. So instead of using split(“ “).join(“”) to remove the non breaking space I used split(String.fromCharCode(160)).join("").