My first annoying stumbling block was trying to add an exported symbol (e.g. MovieClip, Sprite) from an external swf to a skin. The skin will be applied to a button and should apply a background using the exported symbol. There are two ways that I’ve come up with: using BitmapImage or SpriteVisualElement.

For BitmapImage, just add this to the skin (<s:SparkSkin> tag):

<s:BitmapImage source="@Embed('assets/assets.swf#CaptureButton')" />

The above will add a bitmap version of the exported symbol named “CaptureButton” from the SWF file named “assets/assets.swf” located in the project directory. The problem with bitmaps is they look horrible when scaled up so I wanted to add the CaptureButton as a Sprite or MovieClip (vector) instead. I did it using SpriteVisualElement which takes a few more lines to set up. You’ll have to add the SpriteVisualElement tag and add the external symbol to it through code (on the addedToStage event). Here’s the full code of the skin file using SpriteVisualElement:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
             xmlns:mx="library://ns.adobe.com/flex/mx"
             minWidth="21" minHeight="21" alpha.disabled="0.5">

  <fx:Metadata><![CDATA[ [HostComponent("spark.components.Button")] ]]></fx:Metadata>
  <fx:Script>
    <![CDATA[

      // embed our symbol (Sprite)
      [Embed('assets/assets.swf#CaptureButton')]
      private var CaptureButton:Class;

      /**
       * As defined in the SpriteVisualElement tag at the bottom of the page, this 
       * event handler will be called when it gets added to the stage.
       */
      protected function mySprite_addedToStageHandler(event:Event):void
      {
        // create an instance of our embedded symbol
        var sprite:Sprite = new CaptureButton() as Sprite; // or use MovieClip if you're adding a symbol with more than 1 frame
        sprite.x = 10;
        sprite.scaleX *= 2;
        sprite.scaleY *= 2;
        mySprite.addChild(sprite); // add it to the SpriteVisualElement
      }
    ]]>
  </fx:Script>

  <s:states>
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
    <s:State name="up"/>
  </s:states>  

  <!-- call mySprite_addedToStageHandler() when this element gets added to the stage -->
  <s:SpriteVisualElement id="mySprite" addedToStage="mySprite_addedToStageHandler(event)" />

</s:SparkSkin>

The SpriteVisualElement takes more lines to setup than BitmapImage. I hope that this is just a lack of knowledge on my part. There might be a way to add a Sprite/MovieClip with just 1 tag. For now, this works great and I’m fine with that.

Assigning the skin to a button should look like this:

<!-- assuming we named our skin "CaptureButtonSkin" -->
<s:Button id="captureButton" skinClass="CaptureButtonSkin" height="197" width="442" x="365"/>

Update 2010-08-26

After a night’s sleep I found it. Crap. It was this easy:

<mx:Image source="@Embed('assets/assets.swf#CaptureButton')" />

Face palm. Excuse me while I bang my head against the wall.

We’ve just recently deployed a custom endpoint to allow Twitter for iPhone users to post their pics through PicLyf.

When you attach an image to a tweet, Twitter for iPhone will upload that image to the image service of your choice. It allows you to choose from various image services (e.g. yFrog, Twitpic, TweetPhoto) or a custom image service. In our (PicLyf) case, it was custom. We made a custom endpoint: http://api.piclyf.com/twitter. Using this url as the custom image service, attached images will be uploaded to the user’s PicLyf account.

Implementation

This functionality works through the use of OAuth Echo. From Twitter:

OAuth Echo is a means to securely delegate OAuth authorization with a third party while interacting with an API. Within the Twitter ecosystem, we use OAuth Echo as a means to allow your application to use services such as Twitpic and yfrog.

You may want to read about OAuth Echo first. Basically, Twitter for iPhone sends you the image along with the OAuth credentials of the user who wants to upload the image. Note that the OAuth credentials also includes the app’s consumer key. What you’ll have to do is use these credentials and verify them with the Twitter API. If the verification succeeds, you will receive the user’s Twitter information. You may then save the image in your server and link it with the user’s Twitter account. Lastly, you will have to return the correct response to Twitter for iPhone specifying the url where the image can be viewed:

<mediaurl>http://foo.com/bar/pic-url.html</mediaurl>

Sample code in PHP

Here is a sample class which encapsulates the OAuth Echo process:

class TwitterOAuthEcho
{
  public $verificationUrl = 'https://api.twitter.com/1/account/verify_credentials.json';
  public $userAgent = __CLASS__;

  public $verificationCredentials;

  /**
   *
   * @var int
   */
  public $resultHttpCode;
  /**
   *
   * @var array
   */
  public $resultHttpInfo;
  public $responseText;

  /**
   * Save the OAuth credentials sent by the Consumer (e.g. Twitter for iPhone, Twitterrific)
   */
  public function setCredentialsFromRequestHeaders()
  {    
    $this->verificationCredentials = isset($_SERVER['HTTP_X_VERIFY_CREDENTIALS_AUTHORIZATION']) 
      ? $_SERVER['HTTP_X_VERIFY_CREDENTIALS_AUTHORIZATION'] : '';
  }

  /**
   * Verify the given OAuth credentials with Twitter
   * @return boolean
   */
  public function verify()
  {
    $curl = curl_init($this->verificationUrl);
    curl_setopt($curl, CURLOPT_USERAGENT, $this->userAgent);
    curl_setopt($curl, CURLOPT_HEADER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, array(
        'Authorization: ' . $this->verificationCredentials,
      ));

    $this->responseText = curl_exec($curl);
    $this->resultHttpCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    $this->resultHttpInfo = curl_getinfo($curl);
    curl_close($curl);

    return $this->resultHttpCode == 200;
  }
}

The setCredentialsFromRequestHeaders method saves the OAuth credentials sent by the consumer (e.g. Twitter for iPhone, Twitterrific). These credentials will be used in the verify method which sends the verification request to Twitter.

Using the class above, your custom image service page (e.g. http://api.piclyf.com/twitter) should handle the request like this:

$oauthecho = new TwitterOAuthEcho();
$oauthecho->userAgent = 'My Custom Image Service App 1.0';
$oauthecho->setCredentialsFromRequestHeaders();
if ($oauthecho->verify()) {      
  // Verification was a success, we should be able to access the user's Twitter info from the responseText.
  $userInfo = json_decode($oauthecho->responseText, true);
  $twitterId = isset($userInfo['id']) ? $userInfo['id'] : null;      
  // You can use $userInfo or $twitterId above to maybe check if you have a record of this user
  // in your db.

  // You can access the uploaded image using $_FILES. Save it and create a url where it can be accessed.

  // Return the image url back to the consumer
  $imagePageUrl = 'http://somwhere.com/image1';
  echo '<mediaurl>' . $imagePageUrl . '</mediaurl>';

} else {
  // verification failed, we should return the error back to the consumer
  $response = json_decode($oauthecho->responseText, true);      
  $message = isset($response['error']) ? $response['error'] : null;      
  if (!headers_sent())
    header('HTTP/1.0 ' . $oauthecho->resultHttpCode);
  echo $message;
}

The code above is just a sample and your final code will look very different especially if you’re using a framework. I’ve also left out the part where you’ll get the image from $_FILES and save/process it. That is beyond the scope of this article.

Notes

The note in Twitter for iPhone’s custom image service screen says you can get more (developer) info in this url: http://developer.atebits.com. As of this writing, the information on that page is no longer accurate. Twitter for iPhone no longer sends you the user’s username and password. The info at Twitterrific is more accurate. And yes, if your service works for Twitter for iPhone, it should work on Twitterrific too.

Further reading:

• Creating A Custom Image Upload Service For Tweetie (Twitter For iPhone) Using ColdFusion
• Using OAuth Echo

If it were just me, I’d have built PicLyf using Ruby to make it more exciting. But there’s the city talent pool we had to think of. Currently, it’s hard to find good PHP developers. I reckon it’ll be more hard to find those who know Ruby.

echo `ps auxf | grep -v grep | grep "$exec -d $options" | awk '{print $2}'` > /var/run/beanstalkd.pid

I have no idea what all those grep and awk exactly mean. ^_^x But the effect is it creates the pid file in /var/run/beanstalkd.pid containing the correct process id of beanstalkd. You could then have monit watch that pid file.

Here’s the whole modified script. And this is my main reference: http://gist.github.com/508889. A huge thanks to him (Sam X).

PHP Fatal error:  Call to undefined function curl_init() in D:\Shiki\github\yii-clockwerk\test-app\CurlHelper.php on line 90
Fatal error: Call to undefined function curl_init() in D:\Shiki\github\yii-clockwerk\test-app\CurlHelper.php on line 90

It (cURL) works in the browser but not when in console. I didn’t think that it was this simple to fix. The PHP CLI uses a different config file (php.ini) compared to the one used by WampServer/Apache. You can see the location of the config file being used by typing:

php --ini

Result:

Configuration File (php.ini) Path: C:\Windows
Loaded Configuration File:         C:\wamp\bin\php\php5.3.0\php.ini
Scan for additional .ini files in: (none)
Additional .ini files parsed:      (none)

You can then fix the curl problem by enabling it in the php.ini file being used. Make sure this is not commented out:

extension=php_curl.dll

Requirements

• Download the extension from the Yii Framework extension page or GitHub.
• Install Firebug and FirePHP plugins for Firefox.
• Enable output_buffering in php.ini.

Installation

1. Download and extract the “shiki” folder to your extensions directory. This is usually /protected/extensions.
2. Download the FirePHP core class and put it somewhere in your /protected directory. I usually put these files in /protected/vendors.
3. Modify your config file to include this LogRoute class and set the fbPath property to the path of fb.php. Use a Yii alias (e.g. application.vendors.FirePHPCore031.lib.FirePHPCore.fb):

config file code (e.g. /protected/config/main.php)

'log'=>array(
    'class'=>'CLogRouter',
    'routes'=>array(
        // the default (file logger)
        array(
            'class'=>'CFileLogRoute',
            'levels'=>'error, warning',
        ),
        // the FirePHP LogRoute
        array(
            'class' => 'ext.shiki.firePHPLogRoute.ShikiFirePHPLogRoute', // "ext" alias points to /protected/extensions
            'fbPath' => 'application.vendors.FirePHPCore031.lib.FirePHPCore.fb', // set path to fb.php
        ),
    ),
),

Usage

Once you’ve got the extension setup in the config, you can use Yii’s logging methods to log messages to FirePHP.

// logging an INFO message (arrays will work and looks awesome in FirePHP)
Yii::log(array('username' => 'Shiki', 'profiles' => array('twidl', 'twitter', 'facebook')), CLogger::LEVEL_INFO);

// logging a WARNING message
Yii::log("You didn't setup a profile, are you really a person?", CLogger::LEVEL_WARNING);

// logging with a CATEGORY (categories are displayed as "labels" in FirePHP -- just an additional info text)
Yii::log('Profile successfully created', CLogger::LEVEL_INFO, 'application.user.profiles');

// tracing simple text
Yii::trace('Loading application.user.profiles.ninja', 'application.user.profiles');

// logging an ERROR
Yii::log('We have successfully determined that you are not a person', CLogger::LEVEL_ERROR, 'Any category/label will work');

First off, all credits go to this guy. I’m just listing the steps on how I did it in Windows 7 with PHP 5.3. Also, I tested this using WampServer but I believe it should work on any PHP install.

Install memcached

• Download the Memcached Win32 library here: http://code.jellycan.com/memcached/. Extract the downloaded archive file in a directory (e.g. c:\memcached). There should be a memcached.exe in there.
• Run a command prompt as an administrator. Some info on how to do that here.

• Install memcached as a service. Go to the memcached directory, type and run:

  memcached -d install
  

• Start the memcached service by running:

  memcached -d start
  

Install PHP Memcache extension (php_memcache.dll)

• Chances are you don’t have php_memcache.dll in your PHP extensions yet. You can download a build of it here. Make sure to download the correct one for your system. Mine was 32bit and PHP 5.3 so I used this: php_memcache-cvs-20090703-5.3-VC6-x86.zip. The archive should contain php_memcache.dll. Extract the archive to your php extensions directory. On my system (WampServer), this was C:\wamp\bin\php\php5.3.0\ext.

• Edit php.ini, add this line to enable the extension:

  extension=php_memcache.dll
  

  This is a little easier for WampServer users because there’s a menu for enabling extensions ^_^x

Test

Test the installation using the sample PHP code here: http://www.php.net/manual/en/memcache.examples-overview.php.

Ignoring funny ref 'refs/remotes/origin/master (Shiki's conflicted copy 2010-01-14)' locally

It seems to happen when 2 people push to origin/master at almost the same time. This makes Dropbox update the same file and seems to be the cause of the error. When this happens, you can bet that one of the people who did the push will lose his changes to origin/master. So you’ll have to fix it accordingly.

The “funny ref” error does not have any critical effect on the repo and Git seems to work perfectly. It will just annoy you every time you try to fetch. It turns out that this "master (Shiki's conflicted copy 2010-01-14)" is a branch in the main repo. Simply deleting it will remove the error. In terminal, go to your main repo’s (Dropbox) root folder:

git branch -d "master (Shiki's conflicted copy 2010-01-14)"

If you’re not sure of the name of the conflicting branch, you can execute git branch to show all branches. There should at least be a “master” branch and your conflicting branch.

Here’s a sample class we use to create an oriented box shape:

package cavalcade.box2D
{
    import Box2D.Collision.Shapes.b2PolygonDef;
    import Box2D.Collision.Shapes.b2ShapeDef;
    import Box2D.Common.Math.b2Vec2;

    import com.pblabs.box2D.CollisionShape;

    import flash.geom.Point;

    public class OrientedBoxCollisionShape extends CollisionShape
    {
        public var halfWidth:Number = 0.5;
        public var halfHeight:Number = 0.5;
        public var center:Point = new Point();
        public var angle:Number = 0;

        public function OrientedBoxCollisionShape()
        {
            super();
        }

        override protected function doCreateShape():b2ShapeDef
        {
            var scale:Number = _parent.manager.inverseScale;            

            var shape:b2PolygonDef = new b2PolygonDef();
            shape.SetAsOrientedBox(halfWidth * scale * _parent.size.x, halfHeight * scale * _parent.size.y, b2Vec2.Make(center.x, center.y), angle);            
            return shape;
        }
    }
}

As you can see, the class inherits from CollisionShape and overrides the doCreateShape method in order to create the actual Box2D oriented box shape from there. Use it in the level files like this:

<component type="com.pblabs.box2D.Box2DSpatialComponent" name="Cart">
    <collidesWithTypes childType="String">
        <_0>Platform</_0>
    </collidesWithTypes>

    <collisionShapes childType="com.pblabs.box2D.CollisionShape">
        <_0 type="cavalcade.box2D.OrientedBoxCollisionShape">
            <halfWidth>0.42</halfWidth>
            <halfHeight>0.12</halfHeight>
            <density>50</density> <!-- you can still use the same properties in CollisionShape -->
            <friction>2</friction>
            <restitution>0</restitution>
            <angle>3</angle> <!-- specify an angle of rotation -->
            <center> <!-- you can override the location of the box so it won't be positioned somewhere other than the center of the entity -->
                <x>1</x>
                <y>-0.5</y> 
            </center>
        </_0>                
    </collisionShapes>
    <collisionType childType="String">
        <_0>Renderable</_0>
    </collisionType>
    <manager componentReference="SpatialDB" />
        <position type="">
            <x>0</x>
            <y>110</y>
        </position>
        <size type="">
            <x>60</x>
            <y>45</y>
        </size>
</component>

Important: This tutorial is now deprecated due to the new and awesome, fully rewritten, rendering components. You can see some discussions about it here.

I’ve been working with PushButton Engine for a short while now but last night was actually the first time I tried integrating/using a MovieClip from a SWF into PBE. Unfortunately, there are no documentations on how do this at the moment. The examples mostly use images (pngs). I won’t btch about it because that is totally understandable. The PBE team are working their a*es off to get to 1.0 and the documentation is the least of their worries. I could at least thank them for doing such a good job — PBE’s a well thought-out framework, everything I learned from it made a lot of sense.

Anyway, what I wanted to do was simply to put my MovieClip in a SWF library into the stage. I am using FlexBuilder 3 + the latest PBE code from the SVN. I somehow got some ideas on how to do this when I was hanging out at the #pbengine IRC channel. And I did a lot of digging on the PBE code and did lots of experiments to try to understand how to use them. There are 2 different components we can use:

• com.pblabs.rendering2D.SWFSpriteSheetComponent. This one actually had a class description: “A class that is similar to the SpriteSheetComponent except the frames are loaded by rasterizing a MovieClip rather than a single image”. Assuming you’ve gone through the PBE examples, I think this means that instead of creating the frames from a sprite sheet image and have it used by SpriteRenderComponent, you’ll be getting your frames from a loaded MovieClip instead. Nevertheless, this isn’t what I was aiming for.
• com.pblabs.rendering2D.SWFRenderComponent. This component somehow works like SpriteRenderComponent, only it uses MovieClips. A little code investigation later, looks like this component will need to be subclassed in order for it to work. From that subclass, you can do what you want to do with your movieclip using a protected _clip variable.

Since I still wanted control over a movieclip, I used SWFRenderComponent. I’ll explain below how I did it. Please do note that I am still a novice with PBE (and Flex for that matter) so the method I used might not be good practice.

Requirements

• Latest PBE code. You can get it from the SVN here or download here. As of this writing, I’m at revision 470 (Sep 10, 2009)
• SWF. I have a compiled SWF containing exported assets (movieclip classes) that I want to use in PBE.
• Flex compiler / IDE / or whatever your preferred tool is. I’m using FlexBuilder + Flex Compiler.
• A PBE Project. Our team used the PBEngineDemo project as the base project.

Embed the SWF

In Resources.as, embed the SWF using the same method as the sample embedded resources in the PBEngineDemo project.

[Embed(source='../assets/gamemovieclips.swf', mimeType='application/octet-stream')]
public var _embeddedSWF:Class;

I thought that the above would be enough just like embedding images. However, I was getting this warning from the log:

WARN: Resources - ResourceBundle - No resource type specified for extension '.swf'.  In the ExtensionTypes parameter, expected to see something like: ResourceBundle.ExtensionTypes.mycustomext = "com.mydomain.customresource" where mycustomext is the (lower-case) extension, and "com.mydomain.customresource" is a string of the fully qualified resource class name.  Defaulting to generic DataResource.

This resulted to the gamemovieclips.swf not getting embedded in the final swf. I tried to look at the problem in ResourceBundle.as, and somehow, adding this to Resources.as fixed it:

public class Resources extends ResourceBundle
{
  ResourceBundle.ExtensionTypes.swf = "com.pblabs.engine.resource.SWFResource"; // added this line

  [Embed(source='../assets/gamemovieclips.swf', mimeType='application/octet-stream')]
  public var _embeddedSWF:Class; // our embedded swf

  // other embed files below
  ...

Subclass SWFRenderComponent

Next, I created a new class which inherits SWFRenderComponent and overrides the getClipInstance() method. For this example, let’s say in my embedded swf (gamemovieclips.swf in the example above) I have a car animation movieclip exported as CarMC. I will then need to have getClipInstance() return an instance of that movieclip. My class would then look like this:

package com.game.renders
{
    import com.pblabs.engine.resource.Resource;
    import com.pblabs.engine.resource.ResourceManager;
    import com.pblabs.engine.resource.SWFResource;
    import com.pblabs.rendering2D.SWFRenderComponent;

    import flash.display.MovieClip;

    public class CarRenderComponent extends SWFRenderComponent
    {
        public function CarRenderComponent()
        {
            super();
        }

        // override getClipInstance() and return a CarMC movieclip instance
        protected override function getClipInstance():MovieClip
        {
            // check if we are currently loading the movieclip or a CarMC instance was already loaded
            if (_clipInstance == null && !_loading) {

                _loading = true;
                // load CarMC from gamemovieclips.swf using PBE's ResourceManager
                //I'm also passing an anonymous function which gets called if gamemovieclips.swf is loaded
                ResourceManager.instance.load("../assets/gamemovieclips.swf", SWFResource, function(resource:Resource):void {
                    // reaching this part of the code means that gamemovieclips.swf was loaded
                    // we will then get an instance of CarMC by calling getExportedAsset below
                    _clipInstance = (resource as SWFResource).getExportedAsset("CarMC") as MovieClip;

                    if (_clipInstance) { // check if the class was actually loaded
                        // if it was loaded, you can now do whatever you want with it

                        // for example, I have a child movieclip in CarMC with instance name "wheel" and I want it stopped initially
                        _wheel = _clipInstance.getChildByName("wheel") as MovieClip;
                        _wheel.stop();
                    }

                    _loading = false;
                });

            }

            // return our CarMC instance that will be rendered to the scene/stage
            return _clipInstance;
        }

        private var _loading:Boolean = false; // set to true if we are currently loading a movieclip
        private var _clipInstance:MovieClip = null; // will temporarily hold the loaded movieclip
        private var _wheel:MovieClip = null;
    }
}

A problem with this method is that I’m using ResourceManager to load the swf and then the movieclip. This means that loading the movieclip is not instantaneous. I did try a different method for this but somehow couldn’t get the movieclip loaded into PBE.

Add the component to the level file

Now that I have a render class (CarRenderComponent). I can add it to any entity with a spatial component. (Please see PBEngineDemo for more info on this)

<entity name="car">
    <component type="com.pblabs.box2D.Box2DSpatialComponent" name="CarSpatial">
        ....
    </component>
    <!-- our render component here -->
    <component type="com.game.renders.CarRenderComponent" name="SWFRender">
        <loop>true</loop> <!-- set to TRUE. The SWFRenderComponent will destroy the CarMC once it's done playing if this is FALSE -->
        <positionReference>@CarSpatial.position</positionReference> <!-- set the spatial's position as the movieclip's position when rendering -->
        <scaleFactor>0.3</scaleFactor> <!-- you can resize/scale your MC using this -->
        <screenOffset> <!-- or you can offset it's render position from the @CarSpatial.position -->
            <x>0</x>
            <y>20</y>
        </screenOffset>
    </component>
</entity>

One thing I noticed was the properties <sizeReference> and <rotationReference> didn’t seem to have any effect on the render. I’ll have look at that another time. Maybe I’m just missing something.

That’s it. I was happy enough to see the movieclip embedded, rendered and animated on the scene. Hopefully, this will be of help to someone.