A practical approach to next generation web animation using Open Source Software

1. A practical approach to next generation web animation using Open Source Software ITWare 2004, Kongu Science and Arts College,Erode [25th September -27th September 2004] Subhabrata Bhattacharya, Infosys Technologies Ltd. Bangalore

2. Need for animation/Interactive graphics in websites • Highly competitive market/value addition • Reachable to broader spectrum of users • Look and Feel • Increase of customizability

3. So why PHP? Features • Fast processed • Cross platform • Supported by many web servers • Capability to integrate with numerous other libraries • Source available at http://in2.php.net/get/php-4.3.8.tar.bz2

4. ..and why libSWF? Features • SWF [high-resolution, multimedia graphic file format] • Overcomes GIF's limitations in animation. • Most browsers are SWF enabled • Animation can be programmatically generated • Supports C/C++/PHP • Source available at http://prdownloads.sourceforge.net/libswf/libswf0.1.tar.gz

5. Package configuration/installation • libSWF installation 1.Dowload the libSWF source 2.Uncompress the package $ tar -xvzf libswf0.1.tar.gz 3.Change to the source directory hence formed $ cd libswf0.1 4.Compile the source by properly $make 5.Copy the swf.so file into /usr/lib 6.Copy swf.h into /usr/include

6. Package configuration/installation (Contd.) • Apache installation 1.Dowload the source from Apache org 2.Uncompress the package $ tar -xvzf httpd-2.0.50.tar.gz.tar.gz 3.Change to the source directory hence formed $ cd httpd-2.0.50 4.Generate the make file ./configure –enable-so 5.Compile the source $make 5.Install source $make install 6.Cleanup $make clean

7. Package configuration/installation (contd.) • PHP installation 1.Change to the php source directory 2. Configure package with other necessary options $ ./configure --enable-shared --with-apxs=/usr/local/apache2/bin/apxs --with-swf=shared,/usr 3.$make [swf.so (shared object module for apache)] 4.$make install 5.$make clean 6.Create a file for extension $cat /etc/php.d/swf.ini ; Enable swf extension module extension=swf.so

8. An Example using libSWF with PHP <?php $file=realpath("Clock.swf"); $width=200; $height=200; $rate=400; $Red=50; $Green=11; $Blue=1; swf_openfile ($file,$width,$height,$rate,$Red,$Green,$Blue); swf_ortho2(-50,50,-50,50);

9. Example (contd.) /*Creating The Dial Of The Clock*/ swf_startshape(1); swf_shapelinesolid(10,0,0,1,0.5); /*Line drawing style ,RGB(10,0,0) ,alpha channel(1), Thickness(0.5) */ swf_shapearc(0,0,40,0,360); swf_endshape(); /*Shape definition*/ swf_placeobject(1,3); create_hand(35,0.1,2,100); /*Creating a Single Hand*/ function create_hand ($hh,$ht,$id,$agl){ swf_pushmatrix(); swf_rotate ($agl,'z'); /*Rotational Transformation */

10. Example (contd.) swf_startshape ($id); /*Shape of an arrow head */ swf_shapelinesolid(0,0,0,1,$ht); swf_shapemoveto(0,0); /* Start Drawing the shape from the origin*/ swf_shapelineto(0,$hh); for($i=-1;$i<=1;) { /* Creating the Arrow head of Hand*/ swf_shapemoveto(0,$hh); swf_shapelineto($i,$hh-5); $i=$i+0.1; } swf_endshape(); /*End Shape*/ swf_popmatrix(); /*Pop the current Transformation */ }

11. Example (contd.) for($i=0;$i<1440;$i++) { swf_pushmatrix(); swf_rotate($i/4,'z'); swf_placeobject(2,2); swf_showframe(); /*Display the contents of the current frame */ swf_popmatrix(); swf_removeobject(2);/* Remove the Object (Housekeeping)*/ } swf_closefile(); ?>

12. Embedding in web page

13. Where it might be used .. Target Sector • Web based CRM • Display of Meteorological Data • Imaging for Location Based Services • Tourism promoting sites • Reports for Geographical Information Systems • Entertainment portals • E-Greetings • Online education and training systems

14. Thanks.Subh.arya@gmail.com Subhabrata_b@infosys.com