Dec
26
2008
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:

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
1 comment | tags: ActionScript, Typer effect | posted in ActionScript
Dec
25
2008
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.
2 comments | tags: PHP, Shadowbox, Wordpress plugin | posted in PHP
Dec
21
2008
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.

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 > 360 )
{
// Reset it to zero
angle = 0;
}
// If zoom is higher than maximum value
if ( zoom > ZOOM_MAX )
{
// Change to zoom out
isZoomIncreasing = false;
zoom = ZOOM_MAX;
}
// If zoom is less than minimum value
else if ( zoom < 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;
}
}
}
1 comment | tags: ActionScript, Demoeffect, Demoscene, Flash, Rotozoomer | posted in ActionScript