Synja Dev Blog

I recently bought an AKAI APC-40 for my late night Ableton jam sessions and within moments of deciding to buy it in the first place, I thought about wiring it up to Flash. I’ve already wired up my iPhone to Flash through flOSC (sorry for not blogging about that one) and wanted to do MIDI. Turns out MIDI is a bit more convoluted than OSC, because I can’t keep myself in the TCP/IP stack. I have to kick it to the system level.

Obviously, I wasn’t the first nut to think of this one. In fact, there have been many attempts to do just that. The only problem is those attempts involved MAX/MSP, an expensive program. There is a blogger out there who did WAY more homework than me to find a totally opensource solution. Surya, over at mmmlabs, figured out a method to do it with opensource software. The method includes installing Red5, which impressively decided to include a level of MIDI support in broadcasting NetStreams. I specialize in NetStreams at Current TV so this should be cake.

It will take a couple days to get a proper gateway to the APC going, and when I do I’ll of course post my source-code. I just wanted to let you all get a head start Happy coding!

Making a rotated gradient in Actionscript is not a trivial task. It turns out there’s only one method to do it that works correctly for me (all other Matrix type voodoo produce funky results). This did exactly what I wanted though:

var matrix:Matrix = new Matrix();

// This line of code is the magic ingredient:
matrix.createGradientBox(_h, _w, (0.5*Math.PI), 0, 0);

with(_bg.graphics) {
clear();
beginGradientFill("linear", [0x656565,0x323232], [100,100], [0,255], matrix);
drawRect(0,0,_w,_h);
endFill();
}


In the createGradientBox, I am doing two things. First I’m creating a box with the precise dimensions of my final gradient, except pre-rotated (flipping width and height) so that when the gradient draws itself out, it does so in its normal way (horizontally across). Secondly, I’m rotating it 90 degrees (or 1/2 PI in radians), so that the width and height flip back to normal as a result of the rotation. What this also accomplishes, however, is it rotates the horizontally rendered gradient to be vertical.

Hi Adobe!

Thanks for making such a fun technology. I don’t get access to the good stuff because I focus primarily on Flash, but it’s still a cool challenge to work under the constraints to make Flash effects no one has ever seen before.

It’s clear that the Toolkit was meant as a simple IDE for Pixel Bender, and it works pretty well. I just have some requests for the next version. You probably have these all jotted down, but just in case you haven’t thought of one yet:

• Code Snippet Generator: It would be great to click a button to generate some boilerplate actionscript to instantiate a compiled Pixel Bender and supply it with the currently selected parameter values from the right interface.
• Mapping “Load Image” functionality to actual image input variable names. I don’t know if there is a bug but sometimes I experience oddness when trying to load the right images in the right order? I think the Toolkit gets confused as to which Image # is assigned to which image input parameter. If I could just assign an image based on the input param name I chose, that would solve that.
• This might exist, but is there a way to define a parameter so that the individual vector elements can be assigned names? So for a float3, rather than [0], [1], [2] I could choose “R” “G” and “B”, etc. Better yet, actual properties of a dynamic object, so I can assign shader.data.myParam.value = {x: 30, y: 30, z: 30} rather than [30, 30, 30]. I know this would be a change to the Shader object model but hey, I can dream right?
• The ability to choose an image as a background behind the pixel bender outputs rather than just a background color. Or better yet, a bonafied SWF file in Play mode.
• In Preferences, I’d like to set a 3rd folder for exporting Pixel Bender kernels for flash (PBJ). I keep the PBK and PBJ files in totally different areas so it would improve my workflow a lot if I could control these separately.

That’s it … for now. Muahaha.

David Lenaert has shared some really insightful performance tips for Pixel Bender over at his blog Der Schmale. David works in Flash like me, so they’re specific to making Pixel Benders for this environment. Some of his tips include:

• Only  use 4 channels image inputs if you really need them (transparencies)
• BitmapData is faster than Vector.<Number> (This one surprised me!)
• Conditionals are expensive! When using them to try and improve performance, they can actually be slower than just the calculating useless pixels anyway.
• Offloading outCoord() to a variable doesn’t improve performance (Interesting!)

Thanks David for the good tips!

So you just finish your awesome Flex app and unleash it into the wild. It’s great, except for an annoying blue flash that happens before the movie renders. Despite setting the background color to many things when embedding your SWF, it still flashes blue. It only happens in some browsers, but it’s enough to be a total eyesore.

This is because Flex has a “default background color” that it likes to present to the user before any rendering is done. The busier the web page, the more noticeable this flash is.

You’d think Flex would offer an easy way to access this property and change it, but it doesn’t (at least as far as I know). What you can do however, is change the color using a compiler option. I know, compiler options are the bandaid for every annoying thing with Flex these days, but at least they are available.

-default-background-color=0xffffff

This will change the color to white. I would make this color whatever value your most common backgrounds are that your SWF goes on top of. You could probably sidestep this with using wmode=”transparent” but that’s a rather drastic measure to take for just fixing an annoyance such as this.

I’m pleased to announce my latest Flash endeavor has gone live. I have built Current’s new embeddable video player in Actionscript 3.0, using Flex Builder 3 and Flash CS3:

It’s taken me about a month of nonstop development and I’ve been very pleased with the results. You can check out more info from Mario Anima’s great post over at the official Current.com Blog.

There are still some kinks to work out, but nothing major. This is definitely the most highly visible project I’ve done for the internet so I was a little nervous letting it out but so far the feedback’s been great.

If anyone has any questions on how I accomplished any specific aspect of the player, feel free to comment here and I will gladly share any advice.

It turns out there’s a straight up BUG in IE. When ExternalInterface checks to see if allowScriptAccess is on (via same domain or always), the “available” property returns true, even if access is NOT allowed. This will fool any SWF into thinking it’s allowed to use the ExternalInterface even when it can’t, thus throwing an exception if it’s attempted.

So sadly, not only must you use ExternalInterface.available, you also have to wrap it in a try/catch.

If anyone can tell me why IE behaves this way, I’m all ears.

IE7 and IE8 both have serious issues with regard to <object> based embedding of Flash when utilizing the ExternalInterface.addCallback function. When embedding a SWF using this method, you may (and probably will) run into issues when leaving or reloading the page, which will throw up an “Object doesn’t support this property or method” error. This error will pop up for every single ExternalInterface.addCallback you add in your code.

This is happening because the “id” and “type” tags are probably not defined in your <object> code. Here are some examples:

This will throw an error when trying to unload the SWF:

<object height=”400″ width=”300″> … embed code here … </object>

This will not throw an error:

<object height=”400″ width=”300″ id=”current_embed” type=”application/x-shockwave-flash”> … embed code here … </object>

But what if you made an awesome widget already, and there’s a billion people already embedding it with the old code? That’s exactly what happened to us at Current, so the only fix that works for us must come from within the Flash (because we have the ability to replace it for everyone). To fix this we had to find the root of why IE was failing, and it was doing so because it was trying to map the external interface calls using the HTML defined ID, rather than an internally generated one (which I presume is how all other browsers do it). You will have a hard time controlling a SWF through Javascript if it doesn’t have an ID anyways, so I think MS assumed that anyone who used ExternalInterface.addCallback would also be defining an ID for it.

Luckily, Actionscript has a little known property in it’s ExternalInterface object called objectID. If the <object> is not declared correctly, this property will be null. So the solution is quite simple, check to see if it’s null before adding any callbacks. The code looks like this (AS3):

if(ExternalInterface.available&&ExternalInterface.objectID!=null)

{

ExternalInterface.addCallback(”myFunc”,_myFunc);

}

This will fix the issue, however please note that you won’t actually have any methods available to you in your Javascript code if you were identifying it through the name attribute instead.

Yet another crappy thing to deal with in IE.