Santanu
Santanu

General

Create Typewriter Effect with Ming Php for Flash (swf) movie

Moe Magick

A description of cover image.

This is a nice and simple code it creates the simple effect which you might have seen in lots of web sites. As it is PHP you can use the same from your own news reader to database.

Type Writer effect
<?php
// Set background color
$movie->setBackground(0x00, 0x00, 0x00); // SM
// Set the speed of the movie
$movie->setRate(3); // SM - This one depends on you
// Set movie dimensions and frames
$movie->setDimension(600, 40);
$movie->setFrames(31);
$movie->nextFrame();
// Define your string here
$str = 'Ming Typewriter Effect';
// Split string into an array of characters
$chars = preg_split('//', $str, -1, PREG_SPLIT_NO_EMPTY);
// Initialize the position increment
$inc = 0;
for ($i = 0; $i < count($chars); $i++) {
// Create text object and set properties
$myText = new SWFText();
$myText->setFont($myFont);
$myText->setColor(255, 255, 255);
$myText->setHeight(30);
$myText->addString($chars[$i]);
// Output character for debugging
echo "$chars[$i] \n";
// Add text to movie
$firstText = $movie->add($myText);
$firstText->moveTo($inc, 30);
// Increment position
$inc += 18;
// Add frame for typewriter effect
$movie->nextFrame();
}
// Save the movie
$movie->save("/tmp/banner.swf", 9);
?>

INFO

**Update : 2024 ; ** here is newer way to do the same, using css with keyframe.

styles.css
.typewriter {
font-family: monospace;
font-size: 30px;
color: white;
background-color: black;
width: 600px;
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}

Read Next

29 Nov   2005

Metro in Paris

Local Transport