Posted via email from Rutkoski

Timeline, Copy+Paste Approach

The first method is very simple and the most intuitive one. You create one button, leaving all code in the button’s timeline. Than you duplicate the symbol in the library and make the necessary changes to assets and code.

The problem here is that if you need to make any changes to the code, you have to replicate (copy+paste) the changes to each button’s timeline.

addEventListener(MouseEvent.CLICK, handleClick);

function handleClick(e:MouseEvent):void {
  // ...
}

Ups:

• Easy to code

Downs:

• Changes need to be replicated to every button

Base Class Approach

This is the Object-Oriented, most elegant  approach. It consists of creating a base button class that encapsulates the button functionality. In the Actionscript 2 times, that would be (oddly) enough, because you could assign that one class to all your buttons.

But that’s not a problem. In Actionscript 3, all you have to do is, for each button, create a new class that extends that one base button class and assign it to it’s respective button.

package {
  import flash.display.MovieClip;

  class BaseButton extends MovieClip {
    public function BaseButton() {
      // ...
    }
  }
}

package {
  class HomeButton extends BaseButton {
    public function HomeButton() {
      super();

      // ...
    }
  }
}

package {
  class ContactButton extends BaseButton {
    public function ContactButton() {
      super();

      // ...
    }
  }
}

Ups:

• Object-Oriented
• Base code is centralized in the base class
• Particularities can be treated inside each specific class

Downs:

• Creation of each specific class (that’s just copy+paste+rename, but if you have a lot of buttons can be a bit tiring)

Menu Controller Approach

This is a very interesting approach, not very Object-Oriented, but quite effective. It consists of putting all the buttons’ code in their parent container (usually the Menu movieclip). You use a for to iterate throw the list of buttons and manipulate them as needed.

var buttons:Array = [home, contact];

for each (var button:MovieClip in buttons) {
  button.addEventListener(MouseEvent.CLICK, handleClick);
}

function handleClick(e:MouseEvent):void {
  var button:MovieClip = e.target as MovieClip;
  // ...
}

Ups:

• Base code is centralized

Downs:

• Particularities of specific buttons can mess up your code (you have to use a lot of “if”s)

Button Controller Approach

The last approach is also very interesting. It consists of creating a Button Controller, a movieclip with no visual elements that contains all the button’s code. You place an instance of this controller inside each button, and inside the controller you manipulate it’s parent (the button itself).

var button:MovieClip = MovieClip(parent);

button.addEventListener(MouseEvent.CLICK, handleClick);

function handleClick(e:MouseEvent):void {
  var button:MovieClip = e.target as MovieClip;
  // ...
}

Ups:

• Base code is centralized

Downs:

• Particularities of specific buttons can mess up your code (you have to use a lot of “if”s)

The engine is in a very mature state and in constant development. And it’s open-source.

More about it at: http://code.google.com/p/ape

Apart from it’s intuitive work-flow and beying open-source, what makes it so great is that it integrates into Flash CS3/CS4, providing an user interface that makes the creation of web sites as easy as pushing a few buttons.

Other features like deep-site-linking, timeline or actionscript based transitions, actionscript 2 and 3 support and scafolding complete the package.

Check out the demo video at http://www.gaiaflashframework.com/.

You can download the component here.

Usage:

import org.mi.layout.decorators.PaddingDecorator;

var mc:MovieClip = new MovieClip();

var padding:PaddingDecorator = new PaddingDecorator();
padding.left = 10;
padding.right = 20;
padding.bottom = 30;
padding.top = 50;

padding.component = mc;

addChild(padding);

.outter {
  text-align:center;
}

.inner {
  text-align:left;
  margin-left:auto;
  margin-right:auto;
}

It let’s you write posts and pages composed of other posts and pages.

IMPORTANT: IF YOU DOWNLOADED THE PLUGIN FROM WORDPRESS.ORG, PLEASE RATE IT (USE THE STARS). THANKS.

Usage

Write anywhere on a post:

[composite option="value"]

You can specify one or more options. The options are the same used in the get_posts() function (see http://codex.wordpress.org/Template_Tags/get_posts).

Example

Show all posts from category Projects and include post with ID = 1:

[composite category_name="Projects" include="1"]

Templates

CompositePost create a loop using a template located in the plugin’s folder (usually /wordpress/wp-content/plugins/composite_post). The default template is /wordpress/wp-content/plugins/compositepost/default.php. You can have as many templates as you want, just specify wich one to use, like this:

[composite category_name="Projects" template="my_template"]

CompositePost will look for the file at /wordpress/wp-content/plugins/compositepost/my_template.php

Download

Download the plugin

Versions and Bug Fixes

0.3 – Fixed: missing post’s original content, not showing up.

0.2 – Fixed: for the <!–more–> quicktag.

0.1 – First version .

One problem with updating the display list in Flash components is that you have no way of knowing exactly when it’s changed and needs to be updated without either user interaction (mouse events, for example) or testing it every frame (Event.ENTER_FRAME). There are no native Event.CHILD_ADDED or Event.CHILD_REMOVED events and the only DisplayObject that has dispatches Event.RESIZE is Stage. The one event that comes closer to that is Event.RENDER, but it cannot be trusted because it is asynchronous, meaning it can take a while to happen and the display list might be outdated a long time when it happens.

LayoutManager uses Event.ENTER_FRAME to update the layout and checks for changes in size every frame, what can be resource consuming. But so far, it seems like the only way to get around with it.

LayoutManager and LayoutElement

LayoutElement extends a DisplayObject’s size and positioning properties. Both size and position can be specified in pixels or percentage of a container. LayoutManager manages LayoutElements and updates them as necessary.

LayoutManager Demo

LayoutContainer

LayoutContainer extends Flash’s UIComponent and works much like ScrollPane, except it’s content can be added/removed directly just like any other DisplayObjectContainer.

Layout Containers

Layouts Containers, such as Canvas, HBox and VBox, extends from the LayoutContainer class and add LayoutManager and LayoutElement functionality.

HBox Demo