Streaming Media

mk streaming media Streaming Media

Streaming media is technology that transmitting data (as well as audio & visual) to end-user in realtime. Through this technology, the transmitted data is constantly displayed on end-user computer/device before the entire file has been downloaded. From streaming media technology we know the word ‘buffering’, this is the key of streaming media. Buffering is the process of saving portions of a streaming media file to local storage for playback.

Streaming media usage has been grown exponentially over the past few years as per technological development. With this technology, we could possible to have a audio-video conference with our partner in different continent.

The idea of streaming media actually has been found long time ago. Of course, at the beginning of the development streaming media was not made for transferring audio visual as what we have today since the technology to support huge amount of data transfer through internet has not been found.

The streaming media I found at that time (around 98) was perhaps internet chat, which was only used for transferring data (text and emoticon). Still, it was quite impressive at that time. I remember it was an amazing thing to talk with foreign people from over the world. The internet chat was then later supported with audio chat, then completed with video.

Today, streaming media is being used for such as internet TV, news broadcasting, video streaming even in HD (wondering what happen in the next 5 years).

Well, lets talk about the tutorial. Today I want to show you how to upload video and share it to other people using streaming media using simple video component from Adobe Flash (its very easy, no script needed).

1. open your Adobe Flash (mine CS5)
2. open your component library (on top menu, click window > components)
3. select and drag video component from the library to stage
4. now, click the video component on the stage. When you click it the component properties will show on the right bar.

Set Up a Server

mk set up a server Set Up a Server

Set Up a Server

On this post, I would like to show you how to set up a server to your own system. Since we’re gonna pretty much do some coding (which is PHP) for the entire tutorials and we also would having it connected with MySQL, so you better have a server run on your system.

Here’s what we need:
1. Apache server
2. MySQL
3. PHP and Perl

You can download those awesome powerful and free software and set up one-by-one but it wont be easy, or you can download solution stack package including all those software on XAMPP, which is more handier for beginner and also free. You can download XAMPP here.

On the installation, just make sure that you install all services.
mk screenshot xampp installation Set Up a Server

Once your server is ready, you can go to ‘http://localhost’ on your browser for testing.

And voila!
mk screenshot xampp default Set Up a Server

From now on deploy all your files on this directory:
*installation directory*/xampp/htdocs/ [yourProject]

sep Set Up a Server

Getting Variable from MySQL

mk getting variable from my Getting Variable from MySQL

Getting Variable From MySQL

How to get variable from MySQL with actionscript? Well, first we need to find out how actionscript reads XML file, then we use PHP to get variable from MySQL and translate it into XML. Last, let actionscript do the rest. XML may not only way for this case, but I think it’s the best one.

On this post, I gonna tell you how actionscript deal with XML and how to turn PHP output as XML. Here we go…
By the way, I’m using database on my previous post.

First create PHP file, say list.php, we’re gonna create XML output with this script:

<?php

mysql_connect("host", "user", "password") or die(mysql_error());
 mysql_select_db("friend") or die(mysql_error());

$result = mysql_query("SELECT * FROM `user` ORDER BY `user`.`name` ASC");

$xmlstr= "";
 while ($row = mysql_fetch_array($result)) {
 $xmlstr.="";
 $xmlstr.="".$row[name]."";
 $xmlstr.="".$row[phone]."";
 $xmlstr.="".$row[email]."";
 $xmlstr.="";
 }
 $xmlstr.="";

header("Content-type: text/xml");
 echo '<!--?xml version="1.0" encoding="utf-8" standalone="yes"?-->';
 echo $xmlstr;
 ?>

We just create XML output from PHP. One thing you should know is XML has particular structure, all modify should be refer to XML structure, now next step is preparing your Flash.
On first frame:

stop();

var name:Array = new Array;
var phone:Array = new Array;
var email:Array = new Array;

var my_xml:XML = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success:Boolean) {

     total = my_xml.firstChild.childNodes;

     for(i=0; i<total.length; i++){
          name.push(total[i].childNodes[0].firstChild);
          phone.push(total[i].childNodes[1].firstChild);
          email.push(total[i].childNodes[2].firstChild);
     }
     play();
};
my_xml.load("list.php");

What happen here is, all data has been stored to each arrays. Next step, we’re gonna load it out into input field text.
On second frame, create input text field, then select Dynamic Text and choose Multiline, type “output_txt” as Instance Name.

stop();

for(i=0; i<total.length; i++){
     output_txt.text += total[i].childNodes[0].firstChild;
     output_txt.text += "\n";
     output_txt.text += total[i].childNodes[1].firstChild;
     output_txt.text += "\n";
     output_txt.text += total[i].childNodes[2].firstChild;
     output_txt.text += "\n\r";
}

Done, it’s easy isn’t it?

mk download Getting Variable from MySQL

sep Getting Variable from MySQL

Sending Variable To MySQL

mk sending variable to mysql Sending Variable To MySQL

Sending Variable To MySQL

Eventually Flash cannot execute any MySQL functions directly but through PHP (cmiiw). – here’s a funny thing about PHP, at the beginning it’s stand for Personal Home Page but it is now said to stand for PHP: Hypertext Preprocessor after improvement of its capability. In order to sending variable to a MySQL database, we’re gonna need to understand how variable being sent from Flash using ActionScript to PHP, then later being proceed in PHP and finally stored into MySQL (that’s it).

Here’s an illustration of how the variable being sent to MySQL
mk graph flash php mysql Sending Variable To MySQL

If you don’t have MySQL on your system or you don’t have any idea what MySQL is, please read set up a server. And for you who already have can go on to next step …

First, open PHPMyAdmin on your web server then setup a database and name it “friend” (we’re gonna make a phone book database), and fill it with this query:

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `phone` varchar(50) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=72 ;

This will create a table called ‘user’ which contains properties (id, name, phone and email)

on ActionScript:
Create a MovieClip, set “form” as instance name,

var form:MovieClip = this.createEmptyMovieClip("form", this.getNextHighestDepth());

then, what can we do is, set name of variable that we want to send by attaching it to previous MovieClip “form”. Suppose you want to set ‘x’ as a name of variable, just put ‘x’ after the MovieClip – for this case would be: form.x And in case you need to send more than one variable, just set it in different names.

Next step, set the value.
Without giving the value to the variable, it would be set as ‘undefined’ by default, so make sure you set all variable’s value. And also, since we want to determine the variable’s value later when the web is run, we could assign it as equal as input text. So, whatever we type on input text, would be the variable’s value.

form.name = name_txt.text;
form.email = email_txt.text;
form.phone = phone_txt.text;

next, we’re going to send those variables to PHP by using POST method. This is the process what we talking about, the value that you given on input text will transferred to PHP.

form.loadVariables("input.php","POST");
form.onData = function(success:Boolean) {
     for (var a in this) {
          trace([a, this[a]]);
     }
}

on input.php

<?php
mysql_connect("host", "user", "password") or die(mysql_error());
mysql_select_db("friend") or die(mysql_error());

$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];

$sql_user = "INSERT INTO `friend`.`user` (`name`,`phone`,`email`)
VALUES ('$name', '$phone', '$email');";

$result_user = mysql_query($sql_user);
?>

In the process of storing database we need to credential access, so don’t forget to configure input.php. As you can see on input.php, there are 3 variables (name, email & phone) which is taken from previous process using POST method. Those 3 variables will be stored in database ‘friend’ on table ‘user’ on each field. To retrieving those variable to Flash click here!

mk download Sending Variable To MySQL

sep Sending Variable To MySQL