Flash Widget Tutorial

Slide 1: Flash Widgets Hussain Fakhruddin http://hussulinux.blogspot.com hussulinux@gmail.com

Slide 2: Widgets : Window Gadgets ➔ Can be embedded on ➔ Websites, ➔ Blogs, ➔ Desktops, ➔ Social networking sites ... ➔ Really easy to develop ➔ Many Frameworks ➔ 2

Slide 3: Widgets widgets widgets 3

Slide 4: What are we waiting for? What we're going to do is this: Retrieve data from a database. Print it somewhere using scripting language. Import this in the flash. What we need? Adobe Flash( I'll show all demos using Flash 8) PHP/ASP/JSP/CGI/RoR any scripting language. I'll use PHP Database if any. 4

Slide 5: Lets get started On the server. Step 1: (Without XML) Create a script which will throw out the data to you in a GET variable form Example author=Hussain&desc=I+am+a+stupid+programmer&picu rl=me.jpg Also create a database create table barcamp ( uid int(10) primary key auto_increment, author varchar(50), desciption text, picurl varchar(60) ); 5

Slide 6: PHP Script for the widget <?php $uid = $_GET['uid']; // I will receive this from the flash include ('db.php'); //Contains my Database Connectivity code. $rs = mysql_query(\"select * from barcamp where uid=$uid\"); // I'm being lazy to check for errors here $arr = mysql_fetch_array($rs); //Output format, I am using URL encode method, One may also use XML echo \"author=\".$arr['author']; echo \"&desc=\".$arr['desciption']; echo \"&picurl=\".$arr['picurl']; ?> 6

Slide 7: Flash Design Our flash widget design 7

Slide 8: Flash ActionScript Now to get this data into our flash widget function LoadData() { myvar=new LoadVars(); //Create a New LoadVars object //Load our created URL myvar.load(\"http://www.mywidgets.com/widget/getWidgetInfo.php?uid=\" + this.uid); //I'll explain where this.uid comes from later. myvar.onLoad = function( ){ /* Our PHP variables are available inside flash as myvar.author; myvar.desc; myvar.picurl; */ author = myvar.author; desc = myvar.desc; LoadMovie(pic,picurl); } } //Call the above function LoadData(); 8

Slide 9: Embed this <embed allownetworking=\"all\" pluginspage=\"http://www.macromedia.com/go/ getflashplayer\" quality=\"high\" allowscriptaccess=\"always\" align=\"middle\" flashvars=\"uid=1\" src=\"http://www.mywidgets.com/widget/mywidg et.swf\" height=\"230\" type=\"application/x- shockwave-flash\" bgcolor=\"#ffffff\" width=\"194\" name=\"mywidget\" /> </embed> 9