using the Flex HTML Wrapper with WordPress

You may have noticed that StevenStark.com just got a makeover. This will be followed by 3d integration, but for now we will stick with this.

What did I do?

I setup a HTML Wrapper to render the HTML content in Flex (Flash). There were many issues involved in getting this to work, so let me share my findings with you…

1. Setup

Follow the above link for ‘Wrapper’ to find http://code.google.com/p/htmlwrapper/, here you can download both the wrapper source and the wordpress theme. Extract and install. Set the new theme in your WP admin.

I am using wordpress 2.6, and this did not work for me… and with little to no documentation on the wrapper, I was on my own.

I just got a blank screen with a thin orange bar. I first upgraded to php5 because I assume it will help JSON work better. (Could someone confirm this for me?)

After the PHP upgrade, I had to configure the PHP.ini settings, however my host did not provide a php.ini file. What to do? Edit the wp-config.php file and add the following to the top of the php code:

ini_set (‘magic_quotes_gpc’, 0);

ini_set (‘magic_quotes_runtime’, 0);

You may also have to turn register globals on, mine were already on. Check phpinfo(); to confirm this is set right. Some plugins do not work with php5.

2. Template

So the template still doesn’t work! Well I hope you’re into hacking things, cause this needs a lot of it. First off, get the ‘real’ wrapper.js file and overwrite the one you have. Edit the file, and set the baseUrl to the theme’s wrapper directory, starting with a /. Now, open header.php and change the onLoad function to just run wrapper() without any parameters.

Now open the style.css and fix the fonts… sheesh! The path names go to a ‘wrapper’ template directory, however it is really ‘wrapper_wordpress’. Also, the downloaded package is missing the fonts that are actually being used. The rest of the font .swf’s can be downloaded here.

Now, I hope things should be working. Download and install the SWF tracer (and switcher) from Sephiroth.it and install the flash debug player and config the tracer plugin. This gives you swf trace results for anything programmed in as3. We need this to troubleshoot any additional problems.

I may have missed something, I spent many hours messing about to get to the ‘it works’ point, which is where you should be now.

Notice the nicely rendered fonts… wait, there’s a blank screen! Oh, the error is just that there are no loaded fonts! Well every css node that has text NEEDS to be assigned a font, or it is not rendered. Body fonts do not work! Here is my .css file for my template that you can use as a reference. Do not forget the Wrapper wiki. Note: Some JSON shape filters have ‘br’ (Bottom Right) and ‘bl’ (Bottom Left) reversed!

After playing around with the .css and json, some of my pages don’t work. Easy fix! http://urbangiraffe.com/plugins/tidy-up/ Install and have it auto clean all your pages, posts and comments from wordpress default to xhtml.

I then had to disable all comments by deleting the contents of comments.php. I hope I can fix this.

Due to condenseWhite needing to be on, I have to double the spaces in my posts. I also use Dreamweaver to edit and copy over the source.

Now I just need to drop all of this into a 3D environment.