Ok so you want to create animations online… What’s stopping you?
Probably a combination of things but I blame Google mainly.
I know, thus is going to cause another uproar from the Google Boosters out there but facts are facts, and they’ve become damn hard to find since Google’s algorithyms have almost entirely crippled new web development.
The answers are there but they’ve been buried below trash directory after trash directory, hobby sites that employ Google approved tactics to gain undue rank, sites that have no relevance but contain every key word known to man.
No one wants to wade through all that crap to find a bit of useful information and, without traffic, the legitimate sites are suffering.
Most sites are ad supported. In fact, almost the entire internet is ad supported.
Without traffic, without income from ads, quality sites disappear. New information is either never released, or never indexed by proper search engines.
What you see in most cases is content that’s several years old. Outdated, deprecated, or just plain wrong.
So with all that said, I am now releasing this tutorial and example script to hopefully push web development ahead a little, and to try and bring it back to where I feel it should be.
Feel free to use the examples in this script for your own online animation projects but please do not redistribute or re-publish this tutorial or script.
Without traffic and ad income, this site dies too!
The animation process is actually very simple. The trick is to create the images which will form the animation frames.
It’s all simple logic though and some amazing things can be done with online animation!
Now let’s get started….
|
Create an image, 300 pixels wide by 50 pixels tall and fill it with a black background color. Save it to the temp/ folder |
|
|
Blank Frame, Frame #0
|
$frame0 = imagecreate(300, 50); $fill0 = imagecolorallocate($frame0, 0, 0, 0); imagefill($frame0, 0, 0, $fill0); imageGIF($frame0, “temp/0.gif”, 100); imagedestroy($frame0); |
| Create an image, 300 pixels wide by 50 pixels tall and fill it with a black background color. Add part 1 of the text message and save it to the temp/ folder | |
|
Frame #1
|
$text1 = “Animation”;
$frame1 = imagecreate(300, 50); $tcol1 = imagecolorallocate($frame1, 255, 0, 0); $fill1 = imagecolorallocate($frame1, 0, 0, 0); imagefill($frame1, 0, 0, $fill1); imagettftext($frame1, 14, 0, 35, 35, $tcol1, $font, $text1); imageGIF($frame1, “temp/1.gif”, 100); imagedestroy($frame1); |
| Create an image, 300 pixels wide by 50 pixels tall and fill it with a black background color. Add parts 1&2 of the text message and save it to the temp/ folder | |
|
Frame #2
|
$text2 = “Animation can”;
$frame2 = imagecreate(300, 50); $tcol2 = imagecolorallocate($frame2, 255, 0, 0); $fill2 = imagecolorallocate($frame2, 0, 0, 0); imagefill($frame2, 0, 0, $fill2); imagettftext($frame2, 14, 0, 35, 35, $tcol2, $font, $text2); imageGIF($frame2, “temp/2.gif”, 100); imagedestroy($frame2); |
| Create an image, 300 pixels wide by 50 pixels tall and fill it with a black background color. Add parts 1&2&3 of the text message and save it to the temp/ folder | |
|
Frame #3
|
$text3 = “Animation can be”;
$frame3 = imagecreate(300, 50); $tcol3 = imagecolorallocate($frame3, 255, 0, 0); $fill3 = imagecolorallocate($frame3, 0, 0, 0); imagefill($frame3, 0, 0, $fill3); imagettftext($frame3, 14, 0, 35, 35, $tcol3, $font, $text3); imageGIF($frame3, “temp/3.gif”, 100); imagedestroy($frame3); |
| Create an image, 300 pixels wide by 50 pixels tall and fill it with a black background color. Add parts 1&2&3&4 of the text message and save it to the temp/ folder | |
|
Frame #4
|
$text4 = “Animation can be very”;
$frame4 = imagecreate(300, 50); $tcol4 = imagecolorallocate($frame4, 255, 0, 0); $fill4 = imagecolorallocate($frame4, 0, 0, 0); imagefill($frame4, 0, 0, $fill4); imagettftext($frame4, 14, 0, 35, 35, $tcol4, $font, $text4); imageGIF($frame4, “temp/4.gif”, 100); imagedestroy($frame4); |
| Create an image, 300 pixels wide by 50 pixels tall and fill it with a black background color. Add parts 1&2&3&4&5 of the text message and save it to the temp/ folder | |
|
Frame #5
|
$text5 = “Animation can be very easy!”;
$frame5 = imagecreate(300, 50); $tcol5 = imagecolorallocate($frame5, 255, 0, 0); $fill5 = imagecolorallocate($frame5, 0, 0, 0); imagefill($frame5, 0, 0, $fill5); imagettftext($frame5, 14, 0, 35, 35, $tcol5, $font, $text5); imageGIF($frame5, “temp/5.gif”, 100); imagedestroy($frame5); |
| Call ImageMagick, set previous frame disposal methods, set frame delays, specify images, set looping properties, set output name, execute command, save image to the temp/folder, show any errors in the browser window.
|
|
|
Finished Animation
 |
$cmd = “convert -dispose none -delay 100 $path/0.gif -delay 50 $path/1.gif $path/2.gif $path/3.gif $path/4.gif -delay 200 $path/5.gif -loop 0 $path/final.gif”; exec(“$cmd 2>&1″, $output);
foreach($output as $outputline){ echo(“$outputline<br>”); } |
Posted in 
Tags: 
