Dec 26 2008

ActionScript CountTelexTF class

Some years ago I coded a promotional intro for the democode forum called DBF+GVY Interactive. This tiny intro called A shameless plug uses a certain typer/text effect to show its messages. The text effect isn’t new at all - if you know the 80’s movie called “Wargames” you probably remember it. It was used when the supercomputer called W.O.P.R. was searching for the right missle launch code.

Well, the following C++ code is nearly two years old.

//
// the basic algorithm/idea behind the text effect used
// in the dbfinteractive promo intro downloadable at :
// http://dbfinteractive.com/index.php?action=tpmod;dl=item53
//
// (c) 2oo7 by benny!weltenkonstrukteur.de
//
 
#include 
#include 
 
int telexTyper ( char *pMsg, char *pTelexText ) {
 
// telexTyper returns 1 when message equals telexText
// else 0. It is assumed that MSG and TELEXTEXT are of
// the same length !!!
 
	int ret = 1;
 
	// loop the the telex text
	for ( int i=0; i < strlen(pTelexText); i++ ) {
		int ascii_Msg = (int)*pMsg;			// get ascii value of char (scrollText)
		int ascii_Tex = (int)pTelexText[i];		// get ascii value of char (telexText)
		if ( ascii_Msg < ascii_Tex ){			// substract ascii value by 1
			ascii_Tex--;
			ret = 0;
		} else if ( ascii_Msg > ascii_Tex ) {	// or add ascii value by 1
			ascii_Tex++;
			ret = 0;
		}
		pTelexText[i] = (char)ascii_Tex;
		pMsg++;
	}
	printf ( "%s\n", pTelexText );
 
	return ret;
}
 
int main(  ) {
	// telexText holds the characters that are displayed
	char telexText[7]	= "AAAAA\0";
	// the scroller array hold the actual text
	char scroller[2][7]= { "HELLO\0",
							"WORLD\0"	};
 
	// we loop as long as telexTyper return 1
	// returning 1 means that the characters in the source array scroller
	// are equal to the characters in the destination array telexText
	while ( telexTyper ( &scroller[0][0], &telexText[0] ) == 0 );
 
	printf ( "\nFirst scrolltext successfully displayed!\n\n" );
 
	while ( telexTyper ( &scroller[1][0], &telexText[0] ) == 0 );
 
	printf ( "\nSecond scrolltext successfully displayed!\n" );
 
	// end - wait for keypress
	getchar();
    return 0;
}

However, today I thought it would be nice to write a similar effect in Flash. So, I extended the textfield class and came up with the CountTelexTF class. This class actually does all you need to realize the effect. The class file is too long to be listed here - but have a look at the following demo programm that makes use of the new class:

package
{
	import flash.events.*;
	import flash.display.Sprite;
	import flash.filters.GlowFilter;
	import flash.text.*;
	import de.weltenkonstrukteur.utils.CountTelexTF;
 
	/**
	* Demo of CountTelexTF class usage
	* @author benny!weltenkonstrukteur.de
	*/
	public class Main extends Sprite
	{
		// Specify font
		[Embed(source='Crisp.ttf', fontName='Crisp', fontWeight='normal', mimeType='application/x-font-truetype')]
		private var telexFont:Class;		
 
		// Member variables
		private var cntTf:CountTelexTF = null;
 
		/**
		 * Constructor
		 */
		public function Main()
		{
			// Register font
			Font.registerFont(telexFont);
			var tfo:TextFormat = new TextFormat('Crisp', 36, 0x00ff00);			
 
			// Create CountTelexTF instance
			cntTf = new CountTelexTF();
			cntTf.width = stage.stageWidth;
			cntTf.y = 50;
			cntTf.autoSize = TextFieldAutoSize.CENTER;
			cntTf.defaultTextFormat = tfo;
			cntTf.embedFonts = true;
 
			// Add some glow filter
			var glow:GlowFilter = new GlowFilter( 0x00CC00, 0.8, 35, 35, 4);
			cntTf.filters = [glow];
 
			// Create and set string array
			var myText:Array = new Array();
			myText[0] = "Whatever Keeps Us Longing ";
			myText[1] = "For Another Breath Of Air ";
			myText[2] = "     Is Getting Rare      ";
			myText[3] = "But Is Has To Be Somewhere";
			myText[4] = "                          ";
			cntTf.setTextArr(myText);
			addChild(cntTf);
			cntTf.start();
		}
	}
}

The result looks like this:


scr-counttelextf

Of course it is recommended to use a monospace font with this effect. Otherwise it looks a bit jerky. You can download the example and the class itself with the following link. Enjoy.

Name: ActionScript CountTelex Class
Size: 3.56 KB
Hits: 164


Dec 25 2008

Implement autorun for shadowbox via URL parameter

As you probably already realized I used the javascript lightbox engine called ShadowBox to show my media content. I really love this engine and I think it belongs to one of the best lightbox javascript engines around. One drawback of such engines is though - that they are normally launched when the visitor actively pressed a relative link. I thought it would be nice if you could spread a link url that directly links to the activated shadowbox content.

After reading the doc page of shadowbox - I realized that it is possible while adding the appropiate Shadowbox.open method to the windows onload event. That’s why I implement the following hacky code that I added to the header.php file of my wordpress installation. With this code I check for the existance of a sbx_run parameter in the get request which should contain the filename of the flash file to load. I also check for height/width values. (Note: You could easily add more flexibility to it - like setting the various shadoxbox player types et cetera).

<?php
  // Quick hack to implement direct shadowbox autorun via URL parameter
  // benny!weltenkonstrukteur.de
  // Disclaimer: Use code at your own risk!
  if ( isset( $_GET['sbx_run'] ) )
  {
     // Construct url of swf content to play
     $sbx_content = "http://www.weltenkonstrukteur.de/wp-content/uploads/" . urldecode((string)$_GET['sbx_run']) . ".swf";
 
     // Retrieve width/height parameter
     ( isset($_GET['sbx_width']) ) ? $sbx_width = (int)$_GET['sbx_width'] : $sbx_width = 520;
     ( isset($_GET['sbx_height'])) ? $sbx_height= (int)$_GET['sbx_height']: $sbx_height= 390;
 
     echo '<script>
           window.onload = function()
           {
              Shadowbox.init(shadowbox_conf);
              Shadowbox.open({
              player:     "swf",
              content:    "' . $sbx_content . '",
              height:     ' . $sbx_height . ',
              width:      ' . $sbx_width .'
             });
           }
         </script>
        ';
  }
?>

So, using this techinque I could directly start the rotozoomer of the previous post with the following URL:

http://www.weltenkonstrukteur.de/2008/12/rotozoomer-in-actionscript30/?sbx_run=2008%2F12%2Frotozoom

Important:
Use this code at your own risk. Including content in the way I did is very open for cross-site-scripting (XSS) and therefor makes your website vulnerable. Please keep this in mind.


Dec 21 2008

Rotozoomer in Actionscript3.0

One oldschool demoscene effect I still love is the so called Rotozoomer. Rotozoomer by its name rotates and zooms an image in and out. The effect is really stunning and it is well known among oldschool amiga sceners. Reading the very good tutorial about Actionscript’s Transformation Matrix class by senocular.com inspired me to have a try to do a rotozoomer in pure ActionScript3.0.

If you cross-read to senocular’s tutorial and my source code you see how easy the pixel tranformation matrix work to come up with the effect.

The flash movie requires at least Flash Player9.0 - just press on the screenshot to run it. The fantastic “bunny” image was made by the artist called made.

Rotozoom Screenshot

Finally, here is the source code. I tried to comment it as best as I can. Have fun with it.

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.SimpleButton;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Matrix;
	import flash.events.MouseEvent;
	import flash.net.*;
 
	/**
	  * Simple rotozoomer in actionscript3.0
	  *
	  * @author benny!weltenkonstrukteur.de
	  */
	public class RotoZoom2 extends Sprite
	{
		// Declaring class constants
		private const ZOOM_MAX:Number 		= 3;
		private const ZOOM_MIN:Number 		= -2.0;
		private const ZOOM_DELTA:Number 	= 0.015;
		private const ROTATE_DELTA:Number	= 0.05;
 
		/// Initialisate private class members
		private var angle:Number = 0, zoom:Number = ZOOM_MIN, isZoomIncreasing:Boolean = true;
		private var logo:Bitmap = null, logoBitmapData:BitmapData;
		private var sw:uint, sh:uint;
 
		// Declare embedded assets
		[Embed(source = "made-bunny.png")]
		private var LogoBitmap:Class;
 
		/**
		 * Constructor
		 */
		public function RotoZoom2()
		{
			init();
			addEventListener("enterFrame", loop);
		}
 
		/**
		 * Initialize needed sprites and bitmaps
		 */
		private function init():void
		{
			// Create logo bitmap and retrieving the bitmapData
			logo = new LogoBitmap();
			logoBitmapData = logo.bitmapData;
 
			// Setting canvas dimensions
			sw = stage.stageWidth;
			sh = stage.stageHeight;
		}
 
		/**
		 * Calcualte roto matrix and draws the scene
		 * @param	ev, onEnter event
		 */
		private function loop(ev:Event):void
		{
			// If we want to zoom in
			if ( isZoomIncreasing )
			{
				// Add increase value to zoom
				zoom = zoom + ZOOM_DELTA;
			}
			else
			{
				// Otherwise decrement value from zoom
				zoom = zoom - ZOOM_DELTA;
			}
 
			// Calculate new rotation angle
			angle = angle + ROTATE_DELTA;
 
			// If angle is greater than 360
			if ( angle &gt; 360 )
			{
				// Reset it to zero
				angle = 0;
			}
 
			// If zoom is higher than maximum value
			if ( zoom &gt; ZOOM_MAX )
			{
				// Change to zoom out
				isZoomIncreasing = false;
				zoom = ZOOM_MAX;
			}
			// If zoom is less than minimum value
			else if ( zoom &lt; ZOOM_MIN )
			{
				// Change to zoom in
				isZoomIncreasing = true;
				zoom = ZOOM_MIN;
			}
 
			// Calculate matrix for rotation an zooming
			var rotoMatrix:Matrix = new Matrix(Math.cos(angle) * zoom, Math.sin(angle), -Math.sin(angle), Math.cos(angle) * zoom, 0, 0);
 
			// Fill scene with bitmap using the rotoMatrix
			graphics.clear();
			graphics.beginBitmapFill(logoBitmapData, rotoMatrix,true, true);
			graphics.drawRect(0, 0, sw, sh);
			graphics.endFill();
 
			// Set it free for gargabe collection
			rotoMatrix = null;
 
		}
	}
 
}