SlideShare a Scribd company logo
1 of 9
Download to read offline
Flash Widgets
                Hussain Fakhruddin
                http://hussulinux.blogspot.com
                hussulinux@gmail.com
Widgets :



     Window Gadgets
    ➔




     Can be embedded on
    ➔


       Websites,
     ➔


       Blogs,
     ➔


       Desktops,
     ➔


       Social networking sites ...
     ➔




     Really easy to develop
    ➔




     Many Frameworks
    ➔




                                     2
Widgets widgets widgets




                          3
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
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
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
Flash Design

  Our flash widget design




                            7
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
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

More Related Content

What's hot

Auto tools
Auto toolsAuto tools
Auto tools
祺 周
 
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaLeave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Robert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
Robert Nyman
 
Secure Coding with WordPress - WordCamp SF 2008
Secure Coding with WordPress - WordCamp SF 2008Secure Coding with WordPress - WordCamp SF 2008
Secure Coding with WordPress - WordCamp SF 2008
Mark Jaquith
 
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django applicationDjangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Masashi Shibata
 

What's hot (20)

Mojolicious: what works and what doesn't
Mojolicious: what works and what doesn'tMojolicious: what works and what doesn't
Mojolicious: what works and what doesn't
 
WordPress Kitchen 2014 - Александр Стриха: Кеширование в WordPress
WordPress Kitchen 2014 - Александр Стриха: Кеширование в WordPress WordPress Kitchen 2014 - Александр Стриха: Кеширование в WordPress
WordPress Kitchen 2014 - Александр Стриха: Кеширование в WordPress
 
Mojolicious on Steroids
Mojolicious on SteroidsMojolicious on Steroids
Mojolicious on Steroids
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQuery
 
Django の認証処理実装パターン / Django Authentication Patterns
Django の認証処理実装パターン / Django Authentication PatternsDjango の認証処理実装パターン / Django Authentication Patterns
Django の認証処理実装パターン / Django Authentication Patterns
 
Auto tools
Auto toolsAuto tools
Auto tools
 
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaLeave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
 
Yuihacku iitd-sumana
Yuihacku iitd-sumanaYuihacku iitd-sumana
Yuihacku iitd-sumana
 
Future of Web Development
Future of Web DevelopmentFuture of Web Development
Future of Web Development
 
Secure Coding with WordPress - WordCamp SF 2008
Secure Coding with WordPress - WordCamp SF 2008Secure Coding with WordPress - WordCamp SF 2008
Secure Coding with WordPress - WordCamp SF 2008
 
Let jQuery Rock Your World
Let jQuery Rock Your WorldLet jQuery Rock Your World
Let jQuery Rock Your World
 
Secure WordPress Development Practices
Secure WordPress Development PracticesSecure WordPress Development Practices
Secure WordPress Development Practices
 
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django applicationDjangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django application
 
Banquet 50
Banquet 50Banquet 50
Banquet 50
 
OUTDATED (Encore)
OUTDATED (Encore)OUTDATED (Encore)
OUTDATED (Encore)
 
Mojolicious - A new hope
Mojolicious - A new hopeMojolicious - A new hope
Mojolicious - A new hope
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
Odoo - Create themes for website
Odoo - Create themes for websiteOdoo - Create themes for website
Odoo - Create themes for website
 
Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!
 

Similar to Flash Widget Tutorial

20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev
Frank Rousseau
 
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
Dmitry Makarchuk
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla
Robert Nyman
 
Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
Bob Paulin
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
Plugins on OnDemand with Remote Apps - Atlassian Summit 2012
Plugins on OnDemand with Remote Apps - Atlassian Summit 2012 Plugins on OnDemand with Remote Apps - Atlassian Summit 2012
Plugins on OnDemand with Remote Apps - Atlassian Summit 2012
Atlassian
 
Web development automatisation for fun and profit (Artem Daniliants)
Web development automatisation for fun and profit (Artem Daniliants)Web development automatisation for fun and profit (Artem Daniliants)
Web development automatisation for fun and profit (Artem Daniliants)
LumoSpark
 

Similar to Flash Widget Tutorial (20)

WCLA12 JavaScript
WCLA12 JavaScriptWCLA12 JavaScript
WCLA12 JavaScript
 
Intro to Php Security
Intro to Php SecurityIntro to Php Security
Intro to Php Security
 
20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev
 
WCLV13 JavaScript
WCLV13 JavaScriptWCLV13 JavaScript
WCLV13 JavaScript
 
Sanjeev ghai 12
Sanjeev ghai 12Sanjeev ghai 12
Sanjeev ghai 12
 
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
 
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSMozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
 
Drupal Day 2012 - Automating Drupal Development: Make!les, Features and Beyond
Drupal Day 2012 - Automating Drupal Development: Make!les, Features and BeyondDrupal Day 2012 - Automating Drupal Development: Make!les, Features and Beyond
Drupal Day 2012 - Automating Drupal Development: Make!les, Features and Beyond
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack Encore
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
 
Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Plugins on OnDemand with Remote Apps - Atlassian Summit 2012
Plugins on OnDemand with Remote Apps - Atlassian Summit 2012 Plugins on OnDemand with Remote Apps - Atlassian Summit 2012
Plugins on OnDemand with Remote Apps - Atlassian Summit 2012
 
What makes me "Grunt"?
What makes me "Grunt"? What makes me "Grunt"?
What makes me "Grunt"?
 
CodeIgniter PHP MVC Framework
CodeIgniter PHP MVC FrameworkCodeIgniter PHP MVC Framework
CodeIgniter PHP MVC Framework
 
Write php deploy everywhere tek11
Write php deploy everywhere   tek11Write php deploy everywhere   tek11
Write php deploy everywhere tek11
 
Web development automatisation for fun and profit (Artem Daniliants)
Web development automatisation for fun and profit (Artem Daniliants)Web development automatisation for fun and profit (Artem Daniliants)
Web development automatisation for fun and profit (Artem Daniliants)
 
Yii Introduction
Yii IntroductionYii Introduction
Yii Introduction
 

More from hussulinux (10)

Effective communication
Effective communicationEffective communication
Effective communication
 
Enterprise Application Framework
Enterprise Application FrameworkEnterprise Application Framework
Enterprise Application Framework
 
Direct Web Remoting : DWR
Direct Web Remoting : DWRDirect Web Remoting : DWR
Direct Web Remoting : DWR
 
PHP MySQL Training : Module 3
PHP MySQL Training : Module 3PHP MySQL Training : Module 3
PHP MySQL Training : Module 3
 
PHP MySQL Training : Module 2
PHP MySQL Training : Module 2PHP MySQL Training : Module 2
PHP MySQL Training : Module 2
 
PHP Training: Module 1
PHP Training: Module 1PHP Training: Module 1
PHP Training: Module 1
 
Auto Forex Trade with Meta Trader 4
Auto Forex Trade with Meta Trader 4Auto Forex Trade with Meta Trader 4
Auto Forex Trade with Meta Trader 4
 
Linux Apache Php Mysql Lamp1273
Linux Apache Php Mysql Lamp1273Linux Apache Php Mysql Lamp1273
Linux Apache Php Mysql Lamp1273
 
Apache Ant
Apache AntApache Ant
Apache Ant
 
Mobile Navigation
Mobile NavigationMobile Navigation
Mobile Navigation
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Recently uploaded (20)

ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Navigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern EnterpriseNavigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern Enterprise
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 

Flash Widget Tutorial

  • 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
  • 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