Introduction

In this first tutorial, I’m going to demonstrate how to start using Press2Flash with the simplest example : Display the content of the default WordPress post “Hello World”.

Using Press2Flash requires some Actionscript 3 and Flash platform knowledge for publishing the Application. Knowledge in PHP is not necessary, but recommended if you want to customize the plugin or add more features through the installation of other plugins.

You can download the tutorial here : tutorial hello-world

How to start?

Here is what you have to do to get started:

  1. First, you need to have a running WordPress installation.
  2. Download the latest Press2Flash version. Copy the theme and the plugin in your WordPress directory.
  3. Activate the theme and the plugin
  4. Start coding your flash app!

If you don’t know how to install WordPress, please refer to the instructions here: Installing WordPress

Request.php

In the WordPress plugin, you can find the file named request.php. This fill will take care of receiving the request, translate it into a WordPress langage and send back the XML file holding your content.

Since you will have to debug/view your application directly in the browser, I would recommend to use Firebug to see exactly what the request.php returns to flash.

First steps with the framework

I think that no explanations is worth a well commented code. So, here we go, we are going to need the 2 following classes.
Main.as

public class Main extends Sprite 
{		
public function Main():void 
{
	if (stage) init();
	else addEventListener(Event.ADDED_TO_STAGE, init);
}
 
private function init(e:Event = null):void 
{
	removeEventListener(Event.ADDED_TO_STAGE, init);
 
	stage.scaleMode = StageScaleMode.NO_SCALE;
	stage.align 	= StageAlign.TOP_LEFT;
 
	/** Tell WPConfig where the plugin is located is located. */
	WPConfig.TEMPLATE_DIRECTORY	= Utils.extractPath(loaderInfo.loaderURL);
	/** and also where the template (theme) is. This will be usefull to load assets.
 	     Note that in this example, plugin_path is a HTML variable!*/
	WPConfig.PLUGIN_DIRECTORY	= loaderInfo.parameters.plugin_path;
 
	/** instanciate a new Wordpress connection.*/
	var wpConnect:WPConnection = new WPConnection();
	/** Add the events */
	wpConnect.addEventListener(WPConnectionEvent.COMPLETE, onConfigReceived);
	wpConnect.addEventListener(WPConnectionEvent.ERROR, onConfigError);
 
	/** The first thing you want to retrieve is your wordpress configuration. So let's get it! */
	var configSerialiser:GetConfigSerializer = new GetConfigSerializer();
	/** Give me the categories I created in Wordpress... */
	configSerialiser.output_categories = true;
	/** ...and the pages */
	configSerialiser.output_pages = true;
	/** send the request! */
	wpConnect.getConfig(configSerialiser);
}
 
private function onConfigError(evt:WPConnectionEvent):void
{
	trace("an error occured");
}
 
private function onConfigReceived(evt:WPConnectionEvent):void
{
	/** When the configuration has been received, save it using the WPConfig Class */
	var wp_config:WPConfig = new WPConfig(evt.data);
	/** load all your assets */
	loadAssets();
}
 
private function loadAssets():void
{
	/** in this simple exemple, we just need to load a stylesheet */
	var loader:URLLoader = new URLLoader(new URLRequest(WPConfig.TEMPLATE_URL+"flash.css"));
	loader.addEventListener(Event.COMPLETE, onAssetsLoaded);
}
 
private function onAssetsLoaded(evt:Event):void
{
	/** Parse the stylesheet to the StyleSheetManager.
	 * We are going to need it to display some text */
	StyleSheetManager.parseStyleSheet(evt.target.data);
 
	/** add a container in which all your content is going to be displayed */
	var container:Container = new Container();
	addChild(container);
 
}
}

Container.as

public class Container extends Sprite
{
[Embed(source = '../lib/fonts.swf', fontFamily = 'Arial')]
private var Arial:Class;
 
public function Container() 
{
	if (stage) init();
	else addEventListener(Event.ADDED_TO_STAGE, init);
}
 
private function init(e:Event = null):void 
{
	removeEventListener(Event.ADDED_TO_STAGE, init);
 
	/** instanciate a new Wordpress connection.*/
	var wp_connection:WPConnection = new WPConnection();
	/** add the events */
	wp_connection.addEventListener(WPConnectionEvent.COMPLETE, onPostReceived);
	wp_connection.addEventListener(WPConnectionEvent.ERROR, onPostError);
 
	/** This will provide some variables that you can fill to build the request */
	var post_serializer:GetPostSerializer = new GetPostSerializer();
	/** this means: give me the wordpress post that has the ID 1 */
	post_serializer.post_id = 1;
	/** show the associated custom fields */
	post_serializer.output_customfields = true;
	/** the post has to be a post (meaning not a page, attachment or revision) */
	post_serializer.post_type = "post";
 
	/** proceed to the request */
	wp_connection.getPost(post_serializer);
}
 
private function onPostReceived(evt:WPConnectionEvent):void
{
	/** When the XML sent from the backend has been received, you can retrieve the content this way: */
	var wp_content:XML = evt.data;
 
	/** Use the StyledTextField Class to easily create a textfield with CSS support */
	var post_title:StyledTextField = new StyledTextField("<h1>" + wp_content.post_title + "</h1>", { embedFonts:false } );
	post_title.x = 20;
	post_title.y = 20;
	addChild(post_title);
 
	var post_content:StyledTextField = new StyledTextField("<p>" + wp_content.post_content + "</p>", { embedFonts:false } );
	post_content.x = 20;
	post_content.y = post_title.y + post_title.height + 10;
	addChild(post_content);
 
	/** Set the browser title using SWFAddress */
	SWFAddress.setTitle(WPConfig.blogName + " - " + wp_content.post_title);
}
 
private function onPostError(evt:WPConnectionEvent):void
{
	trace("the post has not been found");
}
}

This is it!
More tutorials are going to follow to demonstrate some other interessting stuff allowed by Press2Flash

Comments are closed.