Flash + WordPress = Lovers

February 11th, 2011 | Filed under: talks | Tags: , ,

flash-wordpressAt the end of last year the portuguese Adobe User Group (AUG-PT) held a meeting where I was invited to participate as a speaker. It’s called “Stand Up and Speak” and you have 15 minutes to do your talk. Yeah, it’s a short time and that’s why ends on time, not even with @joaopapin horn! But I must say it was an interesting experience and I’m available for future calls 🙂 With me was a group of fabulous people and professionals. Always a good atmosphere, which characterizes the meetings of the AUG-PT, and a participatory audience coming from various market areas.

About the event

Paulo Moreira talked about on multouch-devices  and the differences between European and Asian audiences. Rui Madeira, showed us the potential of Microsoft’s new camera – Kinect – and how things work behind the curtain. João Fernandes brought us the AIR on TV and showed us how a full-HD video running from a pen without any lag. Ricardo Castelhano spoke about Processing giving us with his smooth style an overview of what it is and for what it serves. Finally, Cláudia Pernencar shared with us the adventures of their past work in the area of interaction.

Friends or lovers?

In my presentation I wanted to show that sometimes different technologies can communicate with each other in a simple and easy way. Associating the versatility of WordPress to the power of Flash is possible, whether for websites or RIAs. I leave you the slides from my presentation with my notes.

The Logic

The simplest way to connect Actionscript with with WordPress is using the WordPress framework itself and return the result of the query in a xml format. It is not necessary to create physical xml files, you just have to make the PHP output with the xml structure. To that we can use a support file that will be inside the active theme folder. We could build a plugin, but lets keep it simple. That file (in my example it’s called wordpress-to-flash.php) could receive variables (GET or POST) from Flash so that we could filter the data query. One practical example would be Flash to send the category id (eg. “Blog”) to the PHP file so that the PHP could read the posts only of the desired category. So, with one file only, we are ready to go 🙂

The WordPress side

Ok. Now lets imagine that we want to know the title and a little excerpt of the last blog posts.

<?php

// Connecting to the database
require_once( '../../../../../wp-config.php' );

// Holder Variable $xml_output = "";

// --------------------------------------------------------
// QUERY POSTS

// We only want the category "5" posts
$query = 'cat=5';
$queryObject = new WP_Query($query);

if ($queryObject->have_posts())
{
	// Stars the loop
	while ($queryObject->have_posts())
	{
		// General object
		$queryObject->the_post();
		
		// Post id
		$post_id = get_the_ID();
		
		// Gathers the data in the holder variable
		$xml_output .= "\t<post>";
		$xml_output .= "\n\t\t<title>" . get_the_title() . "</title>";
		$xml_output .= "\n\t</post>\n\n";
	}
}

// --------------------------------------------------------
// OUTPUT
$xml = "<?xml version='1.0' encoding='UTF-8'?>\n";
$xml .= "<posts>\n";
$xml .= $xml_output;
$xml .= "\n</posts>";
echo $xml;
?>

The result, if you run the page and look at the source code, will be a xml strucure. That’s what Flash will read.

The Flash/Actionscript side

If the last process was simple, this one tops it. The only thing we need from Actionscript is a request to the PHP file.


// Vars
var myXML:XML;
var myXMLList:XMLList;
var nPosts:int;

// Load XML
display_txt.text = "Loading...";
var myLoader:URLLoader = new URLLoader();
myLoader.load(new URLRequest("http://www.site.com/wp-content/themes/mytheme/wordpress-to-flash.php"));
myLoader.addEventListener(Event.COMPLETE, onLoadXML);

// On Load XML
function onLoadXML(e:Event):void
{
	// Data
	myXML = new XML(e.target.data);
	myXMLList = myXML.children();
	nPosts = myXML.*.length();
	
	// reset text
	display_txt.text = "";
	
	// loop
	for(var i:int = 0; i<nPosts; ++i)
	{
		display_txt.appendText(myXML.post[i].title.toUpperCase());
		display_txt.appendText("\n\n");
	}
}

Integration Example

Lets use Flash to display the lastest posts:

This movie requires Flash Player 9

Alternative with plugin

On the same programming logic, there are WordPress plugins that have their own mechanisms. One example is Press2Flash. With this plugin we only have to worry with the Actionscript part since the plugin handles the communication with the WP framework. One good resume of how get it done: How to Get started with Press2Flash in 8 Steps. Advantages:

  • Uses the WordPress framework
  • Great for Flash Developers
  • Only one language to develop

Disadvantages:

  • XML loading can turn slow if its to biig
  • We don’t have control on how it communicates with WP and wich data do we return. This gets more serious when we get a full customized content manager.

Besides this disadvantages, I think Press2Flash is without any doubts a great choice if you don’t want to hand code it all.

Alternative with direct database access

In another completely different line, we can use amfphp and query directly the database. Advantages:

  • The processing is faster

Disadvantages:

  • It already happened (not that much) the database being updated and changed a little bit. If we have a big site querying concrete database tables, that’s the last thing you’ll want.
  • Not taking advantage of the WP framework we loose a lot of the platform potentialities.
To end…

In the meeting I also talked about a “magic” plugin that allow us with extreme ease customize the post edition fields. Add checkboxes, image areas that can be duplicated, textfields… Almost everything is possible in just 2 or 3 clicks. The plugin is called Magic Fields. The name says it all.

You can download the PHP and the Flash files here.

Doubts, comments or suggestions? 😀
There’s a portuguese version of this article in the Active Media blog.


5 Comments on “Flash + WordPress = Lovers”

  1. 1 Spiegelberg said at 18:53 on February 21st, 2011:

    Hey Hugo.
    i can get the title showed from my post.
    but what about the content? how can i GET, i tried multible code combinations, but none of the work

    regards

  2. 2 Spiegelberg said at 11:55 on February 22nd, 2011:

    i figure it out:

    PHP file:
    $xml_output .= “\t”;
    $xml_output .= “\n\t\t” . get_the_date() . “”;
    $xml_output .= “\n\t\t” . get_the_author() . “”;
    $xml_output .= “\n\t\t” . get_the_title() . “”;
    $xml_output .= “\n\t\t” . get_the_content() . “”;
    $xml_output .= “\n\t\n\n”;

    actionscript:
    for(var i:int = 0; i<nPosts; ++i)
    {
    display_txt.appendText(myXML.post[i].title.toUpperCase());display_txt.appendText(" – ");display_txt.appendText(myXML.post[i].date.toUpperCase());display_txt.appendText("\n");
    display_txt.appendText(myXML.post[i].content);display_txt.appendText("\n");
    display_txt.appendText("");display_txt.appendText(myXML.post[i].author);
    display_txt.appendText("\n\n");
    }

    anyone know how to show a image in the display.txt? it only returns the html code!

  3. 3 imhugo said at 19:22 on March 1st, 2011:

    Hey Spiegelberg!

    First of all thanks for the comment! And sorry for the late reply… :\

    About your questions, as you saw, it’s really easy to add new content to the WordPress query.

    About you will to sow an image in the display_txt, you have to change it’s property to “html” and instead of display_txt.appendText(myXML.post[i].content); use display_txt.htmlText = myXML.post[i].content;.

    But I must warn you. Loading an html image tag in Flash is a pain in the ass…

  4. 4 Ricardo Castelhano said at 18:06 on April 2nd, 2011:

    I had the pleasure to share the stage with Hugo in his first talk…and what a talk it was !!
    Congratulations my friend, you rocked !!
    Keep it coming 😉

    Cheers,
    RC

  5. 5 imhugo said at 21:46 on April 13th, 2011:

    Thanks mate 🙂