Archive | February, 2006

Skinning the Flash DataGrid (Part 2)

25 Feb06

I keep fighting to make my DataGrid look just like my Ad agency desires and todays biggest problem was a bug in the DataGrid component that renders the “backgroundColor” style for it useless. No matter what color I set, it turns up as the same shade of red… How to get around that then? I could start digging around the class files again, but it didn’t feel too tempting. What other solutions are there then?

After some searching around, what looked the best was the $5 DataGrid extensions by Tufat (and Darren Gates?). At $5, it’s almost too cheap? Anyway - it’s a great extension that offers sorting numerically (how could MM omit that?), HTML display, editing, text wrapping, turning off the gridlines and much more. It even gives you proper coloring of rows that allow you to combine alternating rowcolors and custom column colors. The $5 gives you not only a SWC, but the full Source Code as classes so you can modify them as you like. Very neat!

Only problem is that when I extend it, my checkbox cellrenderer fails to render properly. Oh well. Working on it… :)

Extending the Macromedia V2 Components

22 Feb06

Lesson learned: When extending the V2 components, it is not enough just to construct the new class using the “extends” keyword like this:

class my.Components.MyDataGrid extends DataGrid
{
  function MyDataGrid()
  {
    trace("MyDataGrid instance created with scope "+this);
  }
}

To successfully extend the components you will need two things. One is a set of static variables that the component structure requires. The other is some exported symbols that will be referenced in the variables.

class my.Components.MyDataGrid extends DataGrid
{
  static var symbolOwner : Object = MyDataGrid;
  static var symbolName : String = "MyDataGrid";
  function MyDataGrid()
  {
    trace("MyDataGrid instance created with scope "+this);
  }
}

“symbolName” must be the same as the export ID in your library.
“symbolOwner” should be the base name of your class.

Next, create a FLA containing the component we’re extending (DataGrid) and an empty movieClip with the identifier (Export ID) specified in “symbolName”. The symbol should also link to the AS2 class using full path: my.Components.MyDataGrid. If you’re using FlashDevelop, just add the exported SWF and select “Add to Library”.

Now your extended class is ready to do it’s job. Just add any methods you want to over-ride or any additional functionality required.

Stream from any point in a FLV using PHP

20 Feb06

Cool script that allow you to seek in FLV files on a server (posted for future reference).

If in doubt - wait one frame

18 Feb06

I don’t remember who said it first, but it may have been Sam Wan at a Flashforward conference. Many things we do in Flash are based on timing. If a movieClip is not present just when you think it should be, you’ll run into trouble. You’ll run into this quite often when using Components. You instantiate a component, but it’s really not there until the Flash movie has gotten time to redraw. Here’s a utility class I’ve written to work around this problem. It’s really simple to use and it cleans up after itself. One could solve this using Intervals, but that comes with a whole new set of issues, so I prefer this way for now. (I have heard that there is a fix for cleaning up intervals though, but I haven’t seen that posted anywhere)

How to use the class.

At the top of the class you’ll find an example of how to use the script. You will also see what the four parameters are:

The first parameter is what to attach to. You will often use _root here, but you can specify any other valid scope. Next is the number of frames to wait. For most things, one is sufficient, but you may specify any number of frames. The third parameter is the name of the method to execute when the given number of frames have elapsed. The last parameter is the scope (location) of the method you just specified. Here’s a working example. Place this script in frame 1 on your _root timeline:

  s = new WaitXframes(_root,2,"test",_root);
  function test(){
    trace("test");
  }

Make sure you use the right captialization of the letters (WaitXframes). Save the file and copy the WaitXframes into the same folder as your FLA. After one frame, you should see the trace in your output window.

Skinning the Flash DataGrid

18 Feb06

transp_datagrid.jpgFor a current project, I needed a datagrid with partially transparent rows. No problem I thought - I’ll just extend the V2 datagrid and write my own versions of the required methods. All so simple in theory, not so simple in real life. There are two things that must be made transparent, the general component background and the background of each row. I first tried overwriting the methods I thought to control this but that did not work. The one who made the datagrid never thought that anyone would ever want partially transparent gridrows. The component just does not contain any code that enables this. Another thing is that no matter what you do, you cannot re-pack or alter the datagrid assets that are used to draw the grid.

The grids assets are stuck inside a SWC file and even if you rename the SWC to ZIP and extract the contents, you’ll find some of the assets to be inside a SWF. Reversing this SWF is out of the question. I’ve browsed the whole class hierarchy and I cannot find a place where the component background is drawn using scripting, so I’ve concluded that it must be embedded within the asset SWF. The same goes for the gridrow class. In theory, I could just change the beginFill-metod that tells how to draw the rows, but for some reason this won’t work. I tell it to use Alpha, but the setting is just ignored. Where to go next?

I browsed Flashcoders and searched the web. I found plenty of questions, but no solution. Most of these solutions required that you did work directly on the movieClips inside the grid and that’s also what I’ve concluded must be the solution. It is with the datagrid rows as with so many other components - they require a one frame pause to redraw all contents. Have you heard the saying “If in doubt - wait one frame”? If not, just try it and in maybe 50% of all cases, waiting one frame will solve your problems. You could solve this using Intervals, but as you also may know - too many intervals may kill your Flash movie. If they are not deleted properly, you’ll end up with an unresponsive application and deleting them can be a hassle. To the rescue comes my rather manual WaitXframes-class. Just specify a location to make a temporary movieClip and the handler to run once finished waiting. Easy to clean up and no intervals used. So here’s my solution:

import mx.controls.DataGrid;
import mx.styles.CSSStyleDeclaration;
import no.netron.utils.WaitXframes;
// Attach DataGrid
var rootObject:MovieClip = _root;
rootObject.createClassObject(DataGrid,"theGrid",rootObject.getNextHighestDepth());
var my_dg = rootObject.theGrid;
my_dg.setStyle("alternatingRowColors", Array(0xEAEFF4, 0xF8FAFB));
// Add some dummy data
var myDP_array:Array = new Array();
myDP_array.push({name:"Clark",checked:false, score:3135});
myDP_array.push({name:"Bruce",checked:true, score:403});
myDP_array.push({name:"Peter",checked:false, score:25});
my_dg.dataProvider = myDP_array;
// Move away from upper corner
my_dg.setSize(350, 200);
my_dg.move(20, 40);
// Turn off transparency for the main datagrid background clip
my_dg.border_mc._alpha = 0;
// Function to adjust transpareny of each row in grid
function fixAlpha(){
	var i = 10; // Rows always start on row ten
	while(my_dg.content_mc["listRow"+i] != undefined){
		my_dg.content_mc["listRow"+i]._alpha = 55;
		i++;
	}
}
s = new WaitXframes(rootObject,1,"fixAlpha",this);

I can’t post the FLA for this example without breaking the Macromedia EULA, but just add a datagrid to your library and paste this code in frame 1 to see it working. You may also want to add a background image to really see the transparency. This was also the first project where I used the XRay debugger extensively. Great tool for the output I get from the debugger in the Flash IDE is worthless.

If anyone reading this has a different take, please post it in the comments. I feel this is a downright dirty way to solve such a problem, but for now it’s the only way I’ve found…

Dumbest Dreamweaver error ever…

13 Feb06

wtf.gifDreamweaver MX04 has been a real drag to work with. Every time I restarted my machine, I had to start Dreamweaver, force-quit it, wait for the program to close and then restart it. It’s got something to do with the Flash movie in the startup screen. Today I got a wicked error message that made me yell out loud: “No error occured”... I mean - I know the program isn’t the best piece of code written by Macromedia, but honestly - why on earth tell me that no error occured???

My friend Chris coined it perfectly! “Dreamweaver MX04: Winning heart and minds - one strange bug at a time”. Gotta start using DW8 now that they’ve delivered the first patch for it…

Friday links

11 Feb06

Been ages since I’ve posted Flash games, but here’s one - Mansion Impossible a rather nice little sim-game done in Flash. I got the link from M4 ages ago, but didn’t get to check it out until now. I also finally had time to check out some of great links over at FWA.

I regularily submit cool findings to WellVetted.com but I feel that I surf the web too seldom these days. Not having seen sites such as YugoP’s gallery browser (using the scrollwheel as primary nav) or cool animated portfolios like Stephane’s makes me feel sort of “outdated”. They’ve both been up for a long time, but I’ve been working too much lately. Gotta take the time for that, cause it keeps me inspired :)

BTW: There’s also a neat new resource-site on Flash games in the form of a Wiki.