This is a flash widget tutorial which I presented at BarCampPune3 on 7th July 2007

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

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

3. Widgets widgets widgets
3

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

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

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(quot;select * from barcamp where uid=$uidquot;);
// 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 quot;author=quot;.$arr['author'];
echo quot;&desc=quot;.$arr['desciption'];
echo quot;&picurl=quot;.$arr['picurl'];
?>
6

7. Flash Design
Our flash widget design
7

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(quot;http://www.mywidgets.com/widget/getWidgetInfo.php?uid=quot; + 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

9. Embed this
<embed allownetworking=quot;allquot;
pluginspage=quot;http://www.macromedia.com/go/
getflashplayerquot; quality=quot;highquot;
allowscriptaccess=quot;alwaysquot; align=quot;middlequot;
flashvars=quot;uid=1quot;
src=quot;http://www.mywidgets.com/widget/mywidg
et.swfquot; height=quot;230quot; type=quot;application/x-
shockwave-flashquot; bgcolor=quot;#ffffffquot; width=quot;194quot;
name=quot;mywidgetquot; />
</embed>
9