Categories
AS3 Custmm Grumm Grumm Urban papercraft

Custmm Grumm – The project

This will be my most ambitious project in my spare time: Custmm Grumm!

Custmm Grumm

What is Custmm Grumm?

When I created Grumm, I had no plans with the moody fellow. But after I got invited to participate in a book about papertoys I started to think about the future of papertoys (and Grumm).

Two of those thoughts about the future is the base of this project: you should be able to modify/create a papermodel without expensive software or specialized knowledge.

Papertoys are, more then vinyl toys, difficult to customize. You need knowledge of image or vector programs link Photoshop or Illustrator. Besides the knowledge of these programs, you also need the program them selfs, which is not cheap. Another bump in customizing is the flat version of the model: the simple papertoys are not that difficult to understand, but the more complex models with more parts, it’s difficult to know which part goes where and how it will look.
It would be nice that you could create a custom skin and modify the model yourself.

Creating a custom skin for a model is done before: papercritters but modifying the model to isn’t.

I will try to make Custmm Grumm in Flash (AS3) so that it’s possible to create a custom skin and modify the model (with some restrictions of course)…

I had a discussion about this project on Nice Paper Toys if you want to know some more about the rocky start of this project.

Categories
AS3

AS2 to AS3: get all objects in a movieclip

Sometimes you want a list of everything inside a movieclip. For example: you want to know the instance names of every movie in the root.

ActionScript 2

A little trick that I used a lot in AS2 is:

for(var i in _root){
   trace('key: ' + i + ', value: ' + _root[i]);
}

or

for(var i in target_mc){
   trace('key: ' + i + ', value: ' + target_mc[i]);
}

to find out which movies are in target_mc

It was not only a trick to trace everything, I also used it to reset movieclips (place them outside the stage, or delete them) or quickly make buttons out of them:

for(var i in target_mc){
	target_mc[i].id = i;
	target_mc[i].onRelease = function (){
		trace ("id = " + this.id); // onRelease the id will be called (the name of the movie)
	};
}

ActionScript 3

But in AS3 this doesn’t work any more!
And I know: AS3 should make my life easier…. well if I see the solution to the problem created by AS3, I have to disagree!

for (var i:uint = 0; i < target_mc.numChildren; i++){
	trace ('\t|\t ' +i+'.\t name:' + target_mc.getChildAt(i).name + '\t type:' + typeof (target_mc.getChildAt(i))+ '\t' + target_mc.getChildAt(i));
}

In AS3 you first have to get the "number of children" (numChildren) in a DisplayObjectContainer, then you have to say which child you want (getChildAt(i))...
A good thing about AS3 is, you get everything in a movieClip, even shapes you made there without a instance name.

I'm glad that I work with FlashDevelop, which has snippets so I don't have to type this constantly!

(For the people that use FlashDevelop too, here is my snippet:)

// $(Clipboard)is a DisplayObject
trace ('+ number of DisplayObject: ' + $(Clipboard).numChildren + '  --------------------------------');
for (var i:uint = 0; i < $(Clipboard).numChildren; i++){
	trace ('\t|\t ' +i+'.\t name:' + $(Clipboard).getChildAt(i).name + '\t type:' + typeof ($(Clipboard).getChildAt(i))+ '\t' + $(Clipboard).getChildAt(i));
}
trace ('\t+ --------------------------------------------------------------------------------------');
Categories
Extending Flash Flash

XML Reader Flash panel – Todo and Requests

A while ago, I created XML Reader Flash panel.
I’ve been using it (and colleagues) for some time now, and I found some points of improvement:

  • Doesn’t work correctly on a mac (scrollbar disappears)
  • External XML (fill in url of XML)
  • Remove \r and \n in node
  • Errors about wrong formed XML
  • Different methods of reading XML (XML-DOM, X-path, XML2Array, ….)
  • More information
Categories
Flash Improvement Misc Urban papercraft

Separate RSS feeds Papercraft and Flash

Because I talk about two topics on my blog that have absolutely nothing to do with each other I created (well, WordPress provided it) two separate RSS feeds for Urban papercraft and Flash.

Custom RSS Links

Categories
Design Flash

Firefox and sIFR don’t play nice

A few days back I noticed that my sIFR (wikipedia about sIFR) headers that are links didn’t work anymore. I really couldn’t remember doing that before, sIFR links always worked and now they only worked in IE7 but not in Firefox.

Today I decided to fix the problem (or remove it 🙁 ) and it was not very difficult.
One visit to sIFR website and my answer was there:

sIFR 2’s links do not work with the new Flash Player 9,0,115,0 if a hover color is specified.

I just had to replace my old sIFR and generate new .SWF font files.

For the people that don’t know sIFR:

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash, which renders the font. It degrades gracefully if Flash is not present. sIFR 3 is open source and licensed under the CC-GNU LGPL.

Categories
AS3 AS3 migration Flash

From AS2 to AS3 – Where did it go – onRelease

Last year I started working with AS3, and after having some startup problems, I’ve made my first application in it (not online yet).
The strange thing is, I started a new project and when I had to make a button from a movieclip, I immediately wrote it in AS2… 🙁

That AS2 is embedded deep into my brain and probably more people have this problem.
So I started this series of post about the stuff that’s changed in from AS2 to AS3.

I will probably regurgitate what other people already wrote something about, but it’s my “travel” trough AS3 land.

onRelease

One of things I use in every application that I build is onRelease.

This is what the ActionScript 2.0 Migration has to say about this:

ActionScript 2.0 ActionScript 3.0 Comments
onRelease() EventHandler flash.display.InteractiveObject dispatches event: mouseUp Replaced in the new event model by a mouseUp event.

In AS2 I know 3 ways to use it:

Categories
Animation Flash Open source / Freeware Tools of the trade

Convert SWF to AVI – part2

How to convert a SWF to an AVI (without spending any cash)? I have written about this question before [Covert SWF to AVI (SWF2AVI or SWFtoAVI)] and my answer was back then: swf2avi, a freeware project by Mario Pizzinini.
SWF2AVI is not an active project (last update from 2002-08-27), but does the job very well.
I’ve used it a couple of times, and when you know who this program works, you get the result you need.

Back then I didn’t have an alternative, but I do now!

And the alternative, in my opinion, is better and more user friendly: http://www.avi-swf-convert.com/
swf avi convert screenshot

SWF>>AVI

is a more recent project (the last update is from 2005-07-20), and does the same thing as swf2avi but has some extra very handy features:

  • Drag and drop files in the converter
  • Play the file in a small popup
  • Select an output folder
  • Set output frame rate
  • Batch Convert: convert more then one SWF to AVI
  • Profiles: you can create custom conversion profiles whereto the SWF can be exported (captures size, output size, frame rate and rotation)

But it doesn’t convert sound and interactive animations may not be properly converted

It’s an freeware program, which does what it says: it converts SWF to (uncompressed) AVI. So if you need a compressed version of your animation you need another program to do that (something to write about in another post). SWF>>AVI is a Windows program which needs Microsoft .Net Framework (it will be automatically downloaded and installed if required).

The same rules (code) apply to SWF>>AVI as it did with SWF2AVI
It’s smart to use frame based animation, although it seems that SWF>>AVI is faster in grabbing the images, so timebased animation is can be an option if you don’t care for an exact export.
Otherwise use the code posted here for you convenience:

Categories
Design Flash Urban papercraft

Urban papercraft: Papercritters

An awesome combination: Flash and papercraft.

Papercritters is an online application to create and share papertoys.
Now possible to create a skin and see it in 3d.
It’s ideal for people with no Illustrator skillz, or who are not able to see objects in 3d. Its Pepakura and Illustrator in one!

You start of with a simple papertoy and you design a custom skin online (no need for other programs then you browser and a Flash plugin).

At the time of posting the site reached its maximum number of users, and when you do get the chance to get in it will take a very long time to load… It’s probably suffocating by it’s success. Try again some other time!

The site is very popular: 11000+ skins designed for the papercritter model. This must the most popular papermodel on the internet (and in the physical world)!!. Keep trying if you don’t get access because it’s really something

[via paper forest and the FWA]

Categories
AS3 Flash

AS3 – take one step at a time: step 1a

I’ve made a mistake, the code I original wrote doesn’t work (I’m glad nobody noticed it 😉 ). You can find the correct class here

My previous post is about my first step into ActionScript 3 (AS3) and in my case: trail and error is the best way to learn stuff.

But it takes some time to find out and sometimes it’s nice to have some help.

I found some help to fix this in the future : Patrick Mineault at 5 1/2 blog has created a AS2 to AS3 converter which you can test here and download here.

There is a web form to paste your code into and it will return your converted AS3 code (check it here).
There is also an command line exe in the zip file
I’m not very good at command line, so for your (and mine) convenience I will explain how to get the exe to work with a .BAT file (I work on a PC so the example only works on PC).

Download the zip file and extract it somewhere on your computer. In my case C:\tmp\convert
I’ve created to folders in the convert folder
C:\tmp\convert\input
C:\tmp\convert\output

and in the input folder I copied all the classes I’ve ever written.

Now create a file with a .BAT extension (in my case convert.bat) and it doesn’t matter where you put it, but I put it next to the convertas2as3.exe in C:\tmp\convert folder.

Open the file you just created and paste this in there:

pause
C:\tmp\convert\convertas2as3.exe -input "C:\tmp\convert\input" -output "C:\tmp\convert\output"

or adjust the path to the files you want to convert
save the file and open the .BAT file (in my case convert.bat) and all your classes you ever have written are converted to AS3…

Well as good as it get’s: it’s not 100 percent converted to AS3 but it helps you with most of your code, and helps you on your way to find the correct code.

example
take the code I translated in the previous post but now in a class file:

class nl.matthijskamstra.config.ConfigFile
{
	/**
	* Constructor 
	* To access and manipulate information about the boundaries of a SWF file.
	*/
	public function ConfigFile ()
	{
		// trace ("set flash to 'browser'-mode");
		_root._quality = "BEST";
		Stage.scaleMode = "noScale";
		Stage.showMenu = false;
		Stage.align = "TL";
	}
	/**
	* static function config.... same as above
	*
	* @usage   nl.matthijskamstra.config.ConfigFile.config ();
	*/
	static function config () : Void
	{
		var temp = new nl.matthijskamstra.config.ConfigFile ();
	}
}

and put it through the AS2 to AS3 online converter will become:

package  { 
class nl.matthijskamstra.config.ConfigFile
	import flash.ui.ContextMenu;
	import flash.display.Stage;
	{
		/**
		* Constructor 
		* To access and manipulate information about the boundaries of a SWF file.
		*/
		public function ConfigFile ()
		{
			// trace ("set flash to 'browser'-mode");
			_root._quality = "BEST";
			Stage.scaleMode = "noScale";
			Stage.showDefaultContextMenu = false;
			stage.align = "TL";
		}
		/**
		* static function config.... same as above
		*
		* @usage   nl.matthijskamstra.config.ConfigFile.config ();
		*/
		static public function config () : void
		{
			var temp = new nl.matthijskamstra.config.ConfigFile ();
		}
	}
	
}

this will not work without errors but will help you convert your AS2 code to AS3

package nl.matthijskamstra.config {

	import flash.display.MovieClip;	
	import flash.display.Stage;
	import flash.display.StageQuality;

	public class ConfigFile extends MovieClip {
		/**
		* Constructor 
		* To access and manipulate information about the boundaries of a SWF file.
		*/
		public function ConfigFile () {
			trace ('ConfigFile ')
			stage.quality = StageQuality.BEST;
			stage.scaleMode = "noScale";
			stage.showDefaultContextMenu = false;
			stage.align = "TL";
		}
		/**
		* static function config.... same as above
		*
		* @usage   nl.matthijskamstra.config.ConfigFile.config ();
		*/
		static public function config () : void
		{
			var temp = new nl.matthijskamstra.config.ConfigFile ();
		}		
	}

	
}

The config class that works!
package nl.matthijskamstra.config {
	
	import flash.display.MovieClip;	
	import flash.display.StageQuality;

	public class ConfigFile extends MovieClip {
		
		// Constants:
		public static var CLASS_REF = nl.matthijskamstra.config.ConfigFile;
		public static var CLASS_NAME : String = "ConfigFile";
		public static var LINKAGE_ID : String = "nl.matthijskamstra.config.ConfigFile";
		
		/**
		* Constructor
		* 
		* @usage   	import nl.matthijskamstra.config.ConfigFile; // import
		*			var __ConfigFile__ : ConfigFile = new ConfigFile ( this );
		* @param	$target_mc		a reference to a movie clip or object
		*/
		public function ConfigFile( $target_mc:MovieClip = null ) {
			// trace ( '+ ' + LINKAGE_ID + ' class instantiated');
			$target_mc.stage.quality = StageQuality.BEST;
			$target_mc.stage.scaleMode = "noScale";
			$target_mc.stage.showDefaultContextMenu = false;
			$target_mc.stage.align = "TL";
		}
		
		/**
		* static function config.... same as above
		*
		* @usage  	nl.matthijskamstra.config.ConfigFile.config(this);
		* 			ConfigFile.config (this);
		* @param	$target_mc		a reference to a movie clip or object	
		*/
		static public function config ($target_mc:MovieClip ) : void {
			var __config = new nl.matthijskamstra.config.ConfigFile ($target_mc);
		}
		
	} // end class
	
} // end package

I’m sorry for adding to the confusion which happens when you learn ActionScript 3!
The Stage class is a difficult change from AS2 to AS3, when I have some time I will explain.

Categories
AS3 Flash

AS3 – take one step at a time: step 1

I finally started programming with ActionScript 3 (AS3); I know, I not a early adopter… 😉

And the first steps in AS3 are as uncomfortable as the first time I started OOP programming … or when I started moved from AS1 to AS2…

Since I started working for NOISE 5 months ago and moved to Amsterdam, I haven’t had time to do learn AS3.
That luckily has changed 🙂 and I started learning the basics.

And the first obstacle I ran into was something very simple: I always use a basic document (FLA) with default library items, some layers I always use and some ActionScript code to align the stage:

_root._quality = "BEST";
Stage.scaleMode = "noScale";
Stage.showMenu = false;
Stage.align = "TL";
stop ();

I have this also in a class (AS2), so I thought it would be useful to rewrite this class in AS3.
and I wanted to use this in my new as3 files too… (remember that this is the first thing a tried)

First you need to create a document class:

Document Class
And in my case my document class was: ‘Main’


package  {

	public class Main {
		
		public function Main() {
			trace ('Main')			
		}
		
	}
	
}

(package generated by FlashDevelop)

Code didn’t pass; I got a Compiler Error:
5000: The class 'Main' must subclass 'flash.display.MovieClip' since it is linked to a library symbol of that type.


package  {

	public class Main extends MovieClip {
		
		public function Main() {
			trace ('Main')			
		}
		
	}
	
}

I got some new errors:

  1. 1017: The definition of base class MovieClip was not found.
  2. 5000: The class ‘Main’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.

So I added import flash.display.MovieClip;


package  {

	import flash.display.MovieClip;
	
	public class Main extends MovieClip {
		
		public function Main() {
			trace ('Main')
		}
		
	}
	
}

Ahhh and now we can get the stage to work with my ‘old code’, let’s paste it into the new document:


package  {

	import flash.display.MovieClip;
	
	public class Main extends MovieClip {
		
		public function Main() {
			trace ('Main')
			_root._quality = "BEST";
			Stage.scaleMode = "noScale";
			Stage.showMenu = false;
			Stage.align = "TL";
			
		}
		
	}
	
}

Auw: both _root and Stage doesn’t excited no more: I got an migration error


package  {

	import flash.display.MovieClip;	
	import flash.display.Stage;
	import flash.display.StageQuality;
	
	public class Main extends MovieClip {
		
		public function Main() {
			trace ('Main')
			stage.quality = StageQuality.BEST;
			stage.scaleMode = "noScale";
			stage.showDefaultContextMenu = false;
			stage.align = "TL";
		}
		
	}
	
}

And at last it works…
The only thing now to do, is to put it in the correct package.