Firefox 3D View

Have been playing around with Firefox’s 3D view for html. Looks pretty cool.

Image

3D view of Facebook

Image

3D view of my wallpapers website. That Facebook Like-button sure is sticking out.

Advertisements

Fork-CMS and Lighttpd

Fork-CMS is a young open source content management system which can be found at http://www.fork-cms.com/

The day this is posted, Fork will only work completely out of the box if you use Apache as your webserver.

This is due to the fact that Fork needs to tell Apache through a .htaccess file to be treated specially in order to use prettier URLs.

For everything to work properly in Lighttpd, one must add some directives into Lighttpds configuration to obtain the same result.

Here is a sample configuration

server.modules = (
            "mod_simple_vhost",
            "mod_rewrite",
            ...
)
...
## Fork-CMS
$HTTP["host"] == "mydomain.com" {
    simple-vhost.server-root   = "/var/www/mydomain.com/forkcms"
    simple-vhost.document-root = "/default_www/"
    dir-listing.activate = "disable"
    url.rewrite = (
        "^/(.*)\.(.+)$" => "$0",
        "^/(.+)/?$" => "/index.php/$1"
    )
}

Here I’ve used a vHost because Fork needs to rewrite its URLs using the  root folder of your webserver as its root path, but because Fork is placed inside a subfolder, it needs to be tricked. Using vHosts will tell Lighttpd to treat a folder as a root folder for a certain domain name.

These are the minimal requirements to have Fork-CMS set up and functioning properly as it’s supposed to with regards to configuring Lighttpd as your webserver.

Additional configuration options can be added to Lighttpds configuration file to approximate the behaviour under Apache with regards to caching and compressing and so on.

Fork-CMS: can’t load /private /blog…

If you’re giving  Fork-CMS a try (which can be found at www.fork-cms.be), and are experiencing problems loading a lot of different pages, it might be because your Apache ignores the special .htaccess file the folks at Fork made to make some magic work.

To make sure Apache looks into that file, you need to add the directive “AllowOverride All“, and restart Apache.

AS3: Positioning and Size problems in Sprites and MovieClips

Struggling with your Sprites or MovieClips which don’t seem to be placed in the right spot or be of the right size?

Don’t worry, if there’s something I’ve learned from Flash, it’s to distrust Flash’s own positioning and size properties.

Instead, use your own getters and setters and get your piece of mind.

import flash.display.Sprite;

public class MyCoolObject : Sprite {

private var posX:int;

private var posY:int;

private var posZ:int;

private var sHeight:int;

private var sWidth:int;

public function MyCoolObject() {

}

/* Getters and Setters */

public function set X(val:int) {  this.posX = val; }

public function get X():int { return this.posX; }

public function set Y(val:int) {  this.posY = val; }

public function get Y():int { return this.posY; }

public function set Z(val:int) {  this.posZ = val; }

public function get Z():int { return this.posZ; }

public function set Height(val:int) {  this.sHeight = val; }

public function get Height():int { return this.sHeight; }

public function set Width(val:int) {  this.sWidth = val; }

public function get Width():int { return this.sWidth; }

}

It’s a bit of overhead, but trust me, you’ll thank me later…

AS3: XML, the easy way

Haven’t been able to find a tutorial on how to make XML objects that would be worth writing about in a “XML for Dummies™” book.

So hopefully after this you’ll be able to writting XML strings like crazy 😀

XML is already part of Flash globaly, so you don’t need to import it.

To make this easier to understand, I’ll use a ComicBook as an example since I’m currently working on that project which requires the usage of XML objects.

In my project a ComicBook consists of the following:

  • Comic Object
  • Comic object contains an Array of Pages
  • A Page object contains an Array of PageObjects (Sprites… MovieClips… etc….)

Now as you could assume, all these objects are nested inside our Comic object. Using nested for-loops, you can access all the information and perform different sorts of operations.

Comic will therefor, be our main Node. A Parent of sorts.

We create our first XML object tag:

var comicNode:XML = new XML(“<Comic/>”);

People who know a little bit of XML and/or some knowledge about xHTML, will recognize <Comic/> as being a closing tag.

Infact, when we try to view the resulting string, we get this:

trace( comicNode.toXMLString() ); // –>  <Comic/>

This is perfectly normal and you shouldn’t worry yet that the output isn’t  like  <Comic><Comic/>

Later when you’ll be adding elements to the Comic Node, you’ll see that Flash will automatically adapt the XML structure to what you’re feeding it.

A really nice thing is that you can dynamically add properties to your nodes, like giving it an ID, or a Name.

For example, every Comic book I generate needs to have a name. I can do so like this:

comicNode.@name = comic.Name; // –>  <Comic name=”TheNameOfMyComic” />

As you can see, using  node.@ we can generate any attribute name we want! comic.Name happens to be a String variable in the field of my  Comic class where I store the name of it.

Now for the real work! Adding different Nodes to our Parent Node.

Because Comic  contains an Array of Pages, we need to create a For-Loop which runs through all the objects within our Array. The creation of our PageNode, is exactly the same as our ParentNode.

for (var index:Number = 0; index < comic.Length; index++) {
var pageNode:XML = new XML(“<Page/>”); // –>  <Page/>
pageNode.@id = index; //  –>  <Page id=”0″ />
……
comic.Length is simply the length of my Page Array.
Now! We add our PageNode to our ComicNode!
comicNode.appendChild(pageNode); //  –>  <Comic name=”theNameOfTheComic”>
//   –>         <Page id=”0″/>
//   –>  <Comic/>
If you understand all this, then you’ve done it!  You should now be able to easily make your own XML structures 🙂
Here’s a complete excerpt of my code so you get the general picture:
//Create XML
comicNode = new XML(“<Comic/>”); // <Comic/>
comicNode.@name = comic.Name;    //Adding attibute -> <Comic name=”theNameOfTheComic”/>
//Add the Page objects
for (var index:Number = 0; index < comic.Length; index++) {
var page:XML = new XML(“<Page/>”); // <Page/>
page.@id = index; // <Page id=”0″/>
comicNode.appendChild(page); //<Comic name=”theNameOfTheComic”>
//   <Page id=”0″/>
//<Comic/>
//Add the PageObjects
for (var index2:Number = 0; index2 < comic.getPageByIndex(index).Length; index2++) {
var pageObjNode:XML = new XML(“<PageObject/>”);
var pageObj:PageObject = PageObject(comic.getPageByIndex(index).getChildAt(index2));
pageObjNode.@id = pageObj.name;
if (pageObj.movieClip.inputField != null) pageObjNode.@input = pageObj.movieClip.inputField.text;
pageObjNode.@type = pageObj.Type;
pageObjNode.@posX = pageObj.x;
pageObjNode.@posY = pageObj.y;
pageObjNode.@posZ = pageObj.z;
pageObjNode.@Width = pageObj.width;
pageObjNode.@Height = pageObj.height;
page.appendChild(pageObjNode);
}
}

AS3: Default parameter value

In ActionScript 3 it’s possible to automatically assign a default value to parameters in a function.

Parameters with optional value should be placed at the end of the function parameter list, while all the required ones at the begining.

Parameters with default values can be ommitted. This gives us the following possibilities:

function twoPlusTwoIs (result:int = 2) {

trace( “Result: ” + result );

}

twoPlusTwoIs();    —>  2

twoPlusTwoIs(3);  —>  3

Likewise, a more plausable usage:

function enable ( val:Boolean = true ) {

someVariable = val;

}

MyFancyObject.enable();           —>  true

MyFancyObject.enable(true);     —> true

MyFancyObject.enable(false);     —> false

AS3: How to use Flash Cookies

At some point, you would like to store some data on the client side, say for example, to know if it’s the first time a user is accessing your Flash application/animation, and show him/her different content based on the data.

Just like a Web Cookie, Flash Cookies can be used. The best or evil part of it, is that Flash cookies are harder to remove. In fact, they don’t go away even if the client clears all his browser cookies. That’s because it’s the Flash Player that manages those cookies obviously.

Making these cookies is super easy:

  1. add the import:   import flash.net.SharedObject;
  2. create your cookie object (SharedObject):    var cookie:SharedObject = SharedObject.getLocal(“myFlashCookie”);

The handy thing about it, is that you can add any kind of info in it (Note that the amount of data that you can store is limited to the size that the user has chosen in the configuration of his Flash Player, normally that’s 100Kb).

Here are some handy things to know:

  • cookie.size :  See if our cookie contains anything ( 0 means we have a fresh cookie… mmmh fresh cookie…. 😀 )
  • cookie.data :  Array containing any object that we want (please not the size limitation described above)
  • cookie.data.VariableName = object :  we can add any variable name to .data.
  • cookie.data.VariableName :  if  VariableName exists, it will return the object it is containing
  • cookie.flush() :  save our cookie immediately to a file (otherwise, our cookie only exists in memory during the length of the session and not being stored on the clients machine)
  • cookie.clear() :  deletes/clears the cookie (  😦  )

Another useful thing to know is that you can call the cookie remotely.

Here’s a live example that I use,  I want to show the user a tutorial on how to use my application. The tutorial will only be show when the cookie is empty.

import flash.net.SharedObject;

public class ComicGenerator extends MovieClip {

//Our Flash Cookie

var cookie:SharedObject = SharedObject.getLocal(“ComicBookGenerator”);

var forceTutorial:Boolean = false;

//Constructor

public function ComicGenerator() {

super();

initialiseStage();

//Force Cookie Deletion

if (forceTutorial) cookie.clear();

//Is this the first time the user sees our app?

if (cookie.size == 0) {

showTutorial();

cookie.data.FirstTime = true;

}

else {

showOperatingMode();

}

}

For more information, you can go take a look at the API documentation: http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/net/SharedObject.html