Web 2.0 Manufactory

2012-09-30T22:38:00.002-07:00

Had a look at several methods to add binaries to shared servers. This one is the best I encountered.

Installing Ant on Mac OS X

2011-11-09T08:15:00.000-08:00

I'm installing Ant to be available in Terminal. This way I can set up workflows to compile as3 projects with mxmlc.

This tutorial is useful for getting Ant installed, provided you have sudo privileges.

Telnet LAN Primer

2011-09-08T13:26:00.000-07:00

Dialog of a telnet session on the LAN.

The Nodes:
Ubuntu Linux Box
MacBook OS X

The Protocol:
Telnet from the TCP/IP suite

Network Addresses:
Ubuntu on static IP 192.168.1.xx
MacBook on DHCP, currently assigned to 192.168.1.101

Prerequisites:
Available default port of 23
Client must be running Telnet daemon

Test port 23 on MacBook from Ubuntu Terminal window using nmap:

jason@thecube:/etc/bind$ nmap -p 23 192.168.1.101
Starting Nmap 5.21 ( http://nmap.org ) at 2011-09-08 16:04 EDT
Nmap scan report for 192.168.1.101
Host is up (0.084s latency).
PORT   STATE  SERVICE
23/tcp closed telnet

Nmap done: 1 IP address (1 host up) scanned in 0.27 seconds

macbook:sudo launchctl load -w /System/Library/LaunchDaemons/telnet.plist

jason@thecube~$ /etc/bind$ nmap -p 23 192.168.1.101

Starting Nmap 5.21 ( http://nmap.org ) at 2011-09-08 16:15 EDT
Nmap scan report for 192.168.1.101
Host is up (0.052s latency).
PORT   STATE SERVICE
23/tcp open  telnet

Nmap done: 1 IP address (1 host up) scanned in 0.24 seconds

Establish telnet connection:

jason@thecube:~$ telnet 192.168.1.101
Trying 192.168.1.101...
Connected to 192.168.1.101.
Escape character is '^]'.

Darwin/BSD (macbook.local) (ttys001)

login:mylogin
password:
Last login: Wed Jul 27 21:54:24 on console

Success. Logout. End telnet connection.

macbook:sudo launchctl unload -w /System/Library/LaunchDaemons/telnet.plist

A final word: Best not to use telnet as the data sent is unencrypted. Consider instead using SSH on a nonstandard port for comprehensive security.

DNS on Ubuntu

2011-09-07T08:46:00.000-07:00

I've been configuring DNS services under Linux to streamline my intranet browsing and addressing. In particular, I did this to resolve my intranet addresses sans IP so that I can e.g. type 'production' into Chrome and it takes me to my internal 192.168.1.xx address automagically. Then I can view the http output from my Ubuntu Apache box from a laptop across the room via domain name. Sometimes it's the little conveniences that count.

I thought I'd summarize the circumstances to do this procedure, as doing so organically takes some serious site hopping to synthesize the elements. It's not a particularly memorable mix, and it's as much for me as anyone else. A cheat sheet of sorts, and here are the broadly-defined tasks:

Select a Linux box on your system to be a dedicated DNS server (I'll call it the DNSbox)
Give DNSbox a static ip
apt-get install bind9 DNS service on DNSbox
configure bind9 on DNSbox
Divert DNS queries from router to DNSbox
Test using CLI utilities ( dig and nslookup ) as well as the bind9 log Hopefully that will get you through the woods.

Here in greater detail, the steps:

I used a Ubuntu box set up as my intranet fileserver. As I begin to use more ultraportable and SSD devices, the fileserver will take on a greater storage role for my media and development files. The Ubuntu box is connected to my Linksys WRT45 (I'll call it the router), which in turn is served by my ISP. At the start of this procedure, the router had DNS IPs pointing to Comcast's DNS servers: 75,75,75,75 and 75,75,76,76.
Give your Linux box a static ip. Edit /etc/network/interfaces, here is a good example of how to structure the interfaces text file. Chances are your network connection is eth0, so set inet static and give an address outside of the DHCP range on the router.
Install bind9.
Configure bind #1: Enable logging
First thing is a real time saver, which is to enable bind to output logs. Syntax errors in your bind configuration files will cause it to fail silently. You can monitor this in the log.
Add the following to the bind config file at /etc/bind/named.conf:
```
logging {
        channel "logfile" {
                file "/var/log/named/named.log" versions 5 size 5m;
                print-time yes;
                print-severity yes;
                print-category yes;
        };
        category "default" { "logfile"; };
        category "general" { "logfile"; };
        category "update" { "logfile"; };
        category "queries" { "logfile"; };
};
```
Be sure that /var/log/named/named.log exists and is accessible by i.e. owned by bind. Test it with a quick:
```
sudo /etc/init.d/bind9 restart
```
Ensure you see stopped and started dialog in the log file. Keep plugging until you have success.

Configure bind #2: Add DNS forwarders. Add this to /etc/bind/named.conf.options:
```
options {
...
forwarders {
*Put auxiliary DNS IP 1 here*;
... 
*Put auxiliary DNS IP n here*;
};
...
};
```
Divert DNS queries from router to DNSbox #1
Visit your router's web-based config and set DNS IP to the static IP of your DNSbox.

Divert DNS queries #2
Declare your nameserver on the DNSbox. Visit /etc/resolv.conf. I simply commented out (#) all lines and added:
```
nameserver 192.168.1.xx   <- ( the static ip set in step 2 above )
```
Test using CLI utilities dig and nslookup

Appendix A: Helpful Linux commands for DNS

sudo /etc/init.d/networking restart
sudo /etc/init.d/bind9 restart
nslookup
dig

Appendix B: Useful locations for DNS

# config files for use with bind

/etc/bind/named.conf
/etc/bind/named.conf.local
/etc/bind/named.conf.options # holds forwarders among others
/var/log/named/named.log # declared in named.conf

# config files for use with networking

/etc/resolv.conf

Appendix C:

File Sharing Using AFP and Netatalk

2011-08-01T13:16:00.000-07:00

Here's how things look at the Linux/Mac meet and greet:

Mac, may I introduce Linux.
Apple Filing Protocol, meet Netatalk.
Bonjour, this is Avahi.

They are, in short, Apple services and their open source counterparts.

My process of setting up an HTPC did not involve purchasing a mini mac, rather I repurposed my trusty and well-worn Cube PC as a newly reformatted 500GB Ubuntu 11.04 file server.

For seamless file serving, the UCube now utilizes Avahi and Netatalk to provide intersection to my LAN. When you gather crumbs of info to make your own similar setup, I recommend you use a succinct, updated guide such as Sidi Kahawa's. Though hundreds of responses exist on the older stalwart of this process, most of them have been fully addressed. It's close to turnkey at this point.

SVN on Eclipse using JavaHL

2011-03-11T12:43:00.000-08:00

If you're finding that Subversion is not working with Eclipse due to an error such as:

unable to load default svn client

Visit Collabnet and download the latest Universal Subversion Binaries. I searched for a direct link to get software using the Eclipse software utility, but found nothing as useful as the repository on Collabnet. Unfortunately you have to register first, but it's a quick form.

After you install the binaries, you should be able to verify that JavaHL is working by visiting Eclipse>Preferences>Team>SVN, on the drop-down for SVN interface client.

References and Cloning examples

2011-03-01T09:40:00.000-08:00

A very interesting example of the subtleties of cloning and referencing variables. Particularly noteworthy is the manner in which the references can be exploited to show ambiguous behavior. See the following example from php.net.

Object cloning with php5

Pointers in Python resemble variable assignments in PHP5

2011-02-25T08:51:00.000-08:00

I encountered the PHP5 clone operator '=&' and a very good illustration of its use. Incidentally, PHP5 variable assignment resembles the use of pointers in Python.

In short, a variable assignment in PHP is a reference to the assignment object. If an object ( $pointer = object ) is reassigned ( object = 'foo'; ), the pointer will reference the OLD object ( $pointer = object ). If however you clone the object ( $clone =& object), when the object is reassigned, ( object = 'foo' ), clone will change as well ( $clone = 'foo' ).

Cloning, then, is making the variable operand synonymous with its counterpart, rather than a reference to the counterpart. There are some particularly enlightening examples of 'clone' aka '=&' on php.net.

Integrating MAMP PHP and Eclipse PDT for CakePHP Debugging

2011-02-25T06:02:00.000-08:00

There are a few steps necessary to get Eclipse PDT, MAMP, and a CakePHP app synchronized for debugging. Summarily, after adding the Zend Debugger to Eclipse, the php initialization file in MAMP must be modified so it can respond to Eclipse. MAMP is not pre-configured for use with Zend Debugger, so you must edit the php.ini file for MAMP. Find the location of this file in the phpinfo tab of MAMP (near the bottom in the screenshot):

Open this in a text editor such as vim, and you will find this info near the bottom (italicized configuration info added at this step):

[xdebug]

;zend_extension="/Applications/MAMP/bin/php5.3/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so"



[Zend]

zend_extension="/Applications/MAMP/Library/modules/zend/ZendDebugger.so"

zend_debugger.allow_hosts=127.0.0.1

; zend_debugger.expose_remotely=always

Now that you have detailed the location of ZendDebugger.so, you need to actually add a copy of the file in that location. Go ahead and put a copy of ZendDebugger.co (which either you have already downloaded into your Eclipse plugin filesystem, or you can download it as part of the Zend Debugger package ) into this directory. Incidentally, ZendDebugger.co can be where ever you like, so long as the path in php.ini resolves to it.

Comment out any references to zend in php.ini, other than the ones in italics above. In addition, comment out xdebug references if they are not already commented out.

Finally, restart MAMP and look for this confirmation in your restarted phpinfo():

If debugging in Eclipse succeeds, the debugger will halt at the first instruction. Be sure to step through a few instructions (F5) to ensure it is working properly. Here is a thoughtful and concise external resource to follow as a further guideline.

Incidentally, CakePHP:

As stated above, this guide will help you get debugging to work with CakePHP. That part of the process entails a further step. Once you are in Eclipse debugging a CakePHP project, you may find the debugger prompts you to resolve the location of core php files as it steps through them. This will happen, for instance, when you debug CakePHP apps you have created by using the cake bake CLI prompt.

To resolve these prompts, simply make sure the following conditions are met:

Your CakePHP app is in a project folder in Eclipse ( it has to be! )
Your CakePHP core library is in a project folder in Eclipse. This way, the files are available to the IDE so Eclipse can step through them in a debug process.

This is a unique requirement of CakePHP. Since you are building from an external core library and debugging involves the core, it has to be in the IDE.

CakePHP / Eclipse Project Integration

2011-02-23T11:57:00.000-08:00

Creating projects in Eclipse that work with CakeBake is a multi-step process consisting of:

Initiate a new PHP Project in Eclipse, e.g. php_project

enable JavaScript code checkbox

Create your initial database so you can input the settings in step 3.
In Terminal, run cake bake /path/to/php_project

add database settings if you have them
heed this info if you are using MAMP and the database does not resolve

Use eGit or SVN in Eclipse to bring in any plugins you may need
Configure Run > External Tools > External Tools Configurations to run further operation such as

cake bake model
cake bake view
cake bake controller

You can also simply use Terminal to invoke interactive cake commands. Refresh Eclipse to see subsequent filesystem changes.

See this earlier integration post for more background.

Authorization in CakePHP

2011-02-22T10:55:00.000-08:00

From the Cake Book 1.3:

User authentication systems are a common part of many web applications. In CakePHP there are several systems for authenticating users, each of which provides different options. At its core the authentication component will check to see if a user has an account with a site. If they do, the component will give access to that user to the complete site.

In short, authentication is a turnkey option in CakePHP. All you need to do to enable it is open and edit your app controller at site_name/app/app_controller.php, adding:

var $components = array('Auth');

This single line will implicitly password-protect your entire site. For explicit, group-or-user-based password protection, add to Auth the ACL:

This component can be combined with the ACL (access control lists) component to create more complex levels of access within a site. The ACL Component, for example, could allow you to grant one user access to public site areas, while granting another user access to protected administrative portions of the site.

CakePHP's AuthComponent can be used to create such a system easily and quickly.

Finally, don't forget to run by the fridge for a cold can of PBR, 'cause you're going to want to celebrate the ease of this authentication framework.

CakePHP Cake Bake is Awesome

2011-02-17T12:47:00.000-08:00

After taking CakePHP's Cake Bake CLI for a spin, I find myself exclaiming aloud:

This is good cake.

Following loads of exploration in IDEs and PHP MVC options, I have CakePHP running on Eclipse, served by MAMP Apache and MySQL, and debug enabled by PDT. Incidentally, this how-to on CakePHP/Eclipse integration from power-user rynop is invaulable.

View along with me as I run through a friendly interactive prompt called Cake Bake from within the Eclipse console. This will summarily build out the underpinnings of my entire site structure - model, view and controller - along with push-button validation (!!):

Note: working CakePHP install in Eclipse. Menu is Run > External Tools > Cake bake

Says the interactive shell script:

---------------------------------------------------------------
Interactive Bake Shell
---------------------------------------------------------------
[D]atabase Configuration
[M]odel
[V]iew
[C]ontroller
[P]roject
[F]ixture
[T]est case
[Q]uit
What would you like to Bake? (D/M/V/C/P/F/T/Q)

I can has cake - so simple!

Select validation options from the list

Look okay? *nods and pops open a beer*

So good! I will detail further on this. Gotta drink my beer now...

Zend Debugger for PDT

2011-02-16T12:25:00.000-08:00

If you are attempting to debug in PHP, PDT is your answer. Listed in Software Updates as the Zend Debugger Feature, it can be plugged into your Eclipse build via the following address:

http://downloads.zend.com/pdt

It's free and it works seamlessly in conjunction with MAMP. When you run it, debug dialog is displayed in the panels in the Eclipse IDE. Objects can be halted via breakpoints for inspection.

Something else that is not free but I'm evaluating in response to upward trending: JetBrains PHPStorm IDE. On initial inspection, seems to offer the same web tools as Eclipse offers.

As a potential mid-weight candidate between TextMate and Eclipse, it could bust the whole thing wide open. After all, informative and easy's all I'm asking for, doesn't matter who provides it. Open source development is fine, but it tends to force platform specialization on the end user. I don't mind paying to avoid that.

Eclipse IDE with Aptana

2011-02-16T09:47:00.000-08:00

I had recently set up Aptana on Eclipse to test out HTML5/JS/CSS/PHP integrated development. Among the options:

WTP
Aptana Stand-alone
Aptana Plug in
JSEclipse

I have tested them all, starting with Aptana. At the time, the plug-in server they offer was down, so I moved on. The other options were found lacking in particulars previously detailed. Now the plug-in service is back online, so I revisited it. The verdict: In hindsight, I'm glad it was down so I could see what other options are available. Now that it is working, I can thoroughly endorse this solution. Here's why:

Full AC functionality:

Enable third-party js libraries:

Predictive incorporation of project libraries:

Rails, Python, and PHP Debug support:

I will see about PHP frameworks with unit testing next. Ah the comforts of a comprehensive IDE.

Eclipse IDE Part 2

2011-02-16T07:47:00.000-08:00

To summarize the posts before this one, I have been exhaustively demoing IDEs for standards-based Web 2.0 site development. My prerequisites, assuming these items can be met in the vendor community, are the following:

Content Assist for multiple languages (JS, PHP, Python)
functional debug perspective for PHP and Python
ability to add 3rd party and custom libraries to CA
integrated repo management
integrated file management
launch run/debug perspective from IDE

I've tested out the latest Eclipse release, Helios, which I use for AS3, under several configurations, including:

Eclipse Helios EE IDE, which includes the WTP and JSDT
Aptana plugin for Eclipse
JSEclipse

Collectively and individually, the results were less than ideal. At worst, I had a good editor environment with Aptana for CSS and HTML but no luck with JavaScript CA in Aptana. I did not have success with JSEclipse.

At best, Helios EE IDE provides CA only upon demand (ctrl+space), even when the preferences are set to insert CA automatically without delay. JQuery can be integrated, there is a process detailed here. I found the procedure to work though it leaves no provision to include further 3rd party JS.

Eclipse updates pt 1

2011-02-15T12:27:00.000-08:00

This day has allowed me to explore the capabilities of Eclipse as a standards-based SDK. Perhaps not news to those who already use it for such, but since I use Flash Builder almost exclusively for Flash-based development, this is fresh territory. This further exploration came about as the result of a recent back-end dev project where the IDE options played out as either:

TextMate
vi on the Terminal CLI
Coda

I haven't delved into Coda, though I have a good amount of exposure on the other two. Let me state for the record that I endorse the viability and value of TextMate as an IDE. Now, clarifications duly stated, I would like an IDE that provides:

managing repositories such as svn and git
code lookup and completion for JavaScript, including 3rd party libraries
code lookup and completion for PHP
bracket pairing assistance that is broadside-of-a-barn obvious
local file, folder and directory management
quick access to function and property definitions (cmd-click seeking)
optionally, FTP management

I'd be happy to address which of these are addressed to my satisfaction in the above-listed IDEs, but for now I will summarily say none of them hit all the targets. That could be due to my own habits - perhaps blinders on my part - I would love nothing more than to be further educated on this. Beyond that, some of the newer PHP frameworks at large (CodeIgniter, CakePHP, Symfony) boast unit testing, and I would prefer an IDE with debugging breakpoints and object inspection so I can see what fury my code hath wrought in the runtime.

Thus far, I have done the following to spec up Eclipse:

Update to Eclipse Helios 3.6
Install PHP and JavaScript language packs for Eclipse
Install eGit for Helios (tested and working)
Install Aptana (see mild apprehension*)
Install Eclipse Web Tools

*Aptana bills itself as:

a set of application development tools for Web 2.0 and ajax for use with programming languages such as JavaScript, Ruby, PHP and Python.

They had a big buzz out of the gate as a premium solution vendor to the open-source community. By late 2009 their revenue stream was lacking to the point of significant downscaling and they have consequently reduced their support and development staff. Their current 2.x release is bemoaned as unpredictable, buggy and meretricious, resulting in retrograde support for the deprecated 1.5 version package. Furthermore, Aptana was aquired less than a month ago by an outfit called Appcelerator. In short, Aptana has a legacy of step-child treatment.

Thus my concern with installing and testing out Aptana. Since it is one of only two commonly-employed means of third-party javascript code completion, I went ahead with it. Installing Aptana is the first step. Following success with that, its proprietary set of plug-ins allows jQuery to work with it. I succeeded with the first part, but unfortunately their plug-in service has proven to be currently offline. On to the next option: Eclipse Web Tools.

Eclipse Galileo 3.5 to Helios 3.6

2011-02-15T08:00:00.000-08:00

I did Windows for a long time. And I'm still ok with it (though I stopped upgrading at XP SP2). Just the same, I'm all in with Mac for the past couple of years. The wherefore comes down to OS X, and more specifically, Unix. Can't beat having an underlying layer of open source OS!

I'm upgrading Eclipse today. I had announced with great fanfare the coming of Eclipse Galileo, but Helios found me focused on other things, so I'm stepping up the SDK to 3.6 now. On the Windows/Mac front, I prefer the small install and configuration footprint of unix apps vs the windows registry. Power Windows users may opine otherwise, but I find the modularity of apps on the mac to be quite painless.

That said, I'm opting not for a clean install of Eclipse 3.6, but rather an upgrade from 3.5 using the software updates dialog. A little background, I use both Flash Builder and Eclipse on my MacBook, the former for AS3 and Eclipse for JS, PHP, Python, basically 'everything else'. I have added Subversive SVN to FB and it works great, and with the possible exception of mylyn in the future, I plan to keep FB in quarantine. (update: broke my own rule there, I added eGit to FB and it is flawless.)

This is just a safety, as I have had issues with other FB installs going off the rails when too many open-source libraries are added to the SDK. It can be a real train wreck when this happens, especially if you're facing a killer deadline. For the record, any deficiencies with Eclipse as a platform are simply the small and acceptable dark side to a robust and maverick developer community. So I keep FB static and use Eclipse as my test lab.

As for the SDK upgrade, it worked great. Here is a simple FAQ from Eclipse to follow. When the dialog presents you with a list of available upgrades, choose only those listed as 3.6. Better not to upgrade too many things all at once.

This is part of a larger operation which I will also post about. Namely, getting a JS/PHP/Git environment up and running within the Eclipse SDK. I've worked with TextMate thus far and will sing its charms, however, I've used Eclipse long enough to love what it does, so developing in a fully Integrated DE is my goal.

MVC PHP CakePHP vs Symfony

2011-02-10T07:59:00.000-08:00

Yet more to consider:

http://stackoverflow.com/questions/1242060/symfony-vs-cakephp

Symfony is another contender.

MVC PHP Frameworks Evaluated

2011-02-10T07:44:00.000-08:00

PHP frameworks are my current focus, particularly CodeIgniter. I have extensive experience with AS MVC frameworks, e.g. Cairngorm, RobotLegs, and Mate. Following a recent project, my thoughts on PHP frameworks are starting to crystallize. Here incidentally is IMO one of the best summaries on CI from the community at large, reposted courtesy of Action on this stackoverflow post :

CodeIgniter is, without a doubt, the most well-documented and approachable PHP MVC framework out there. CakePHP's documentation is also very good, but the learning curve is slightly higher.
CodeIgniter's models are optional and serve no function other than code separation. There's no integrated CRUD and its "Active Record" class is really just an alternative SQL syntax. It also doesn't support table associations. So, you will be building many large queries essentially from scratch. CakePHP's models are far more advanced and similar to those in Ruby on Rails. It supports table associations, has integrated CRUD, and behaviors. In addition, CakePHP has command line tools (Bake) that allow you to generate all the code for basic CRUD operations. Tweak a few things here and there and you've got a working prototype in minutes.
CodeIgniter lacks some essential libraries that are needed in most applications (i.e. Authentication and ACL). You will need to rely on 3rd party libraries in many of your applications. CakePHP has integrated Auth and ACL, but both frameworks integrate with 3rd party libraries easily.
Since CodeIgniter lacks much of the automation that CakePHP brings, there are no strict conventions to follow (this can be viewed as good or bad). This makes CodeIgniter a more flexible framework. Furthermore, its lack of features and automation do give it an advantage when it comes to speed. CodeIgniter is one of the fastest PHP MVC frameworks out there. That said, the framework is rarely the bottleneck in your in application...and you should be choosing a framework based on productivity, not its execution speed.
Both frameworks have large and helpful communities. CodeIgniter has their official forums and an IRC channel. CakePHP has a google group and an active IRC channel. CakePHP is currently the most popular PHP MVC framework with the largest community behind it.
In conclusion, if you want a fast, flexible, well-documented framework, and don't mind writing extra code and relying on 3rd party libraries, go with CodeIgniter. If you want a powerful, feature-rich framework that does most of the heavy lifting through automation, and you don't mind having to follow strict conventions, go with CakePHP.

As you can see, it is a comparison of CI with another framework, CakePHP, which is now on my shortlist to test out. Here is a Google Trends search of the relative trendiness of these two open-source frameworks (update: now three OS frameworks with symfony).

http://www.google.com/trends?q=codeigniter%2C+cakephp%2C+symfony&ctab=0&geo=all&date=all&sort=0

CakePHP has an earlier footprint. Next, I will examine CakePHP support of php5. I'm curious to know of any more advanced, more OO and generally more hurricane-nestled-in-a-typhoon-wrapped-in-a-tornado PHP frameworks out there. I would prefer a stricter MVC pattern with a higher degree of decoupling.

AS3 Command Pattern for Rapid Asset Development

2010-12-09T09:05:00.000-08:00

You know those little modular swf projects where you just program in some basic functionality in lieu of using the timeline? Well, I have had a few of those lately, so I made a little module manager.

It's based upon a useful tutorial I ran across and tweaked a bit. I created a google code repository to host the result, called as3minimalcommandpattern.

See this demo which uses only this library. All the code from the demo is pasted below ( the demo can be found with source in the repository).

The demo consists of the document class and as many 'scenes' as are required for the project. A scene in this sense is simply a way to encapsulate an intro-outro sequence. It's good for doing the monotonous work for you so you can focus on integrating advanced features.

Document Class:

package
{
import com.bluediesel.utils.managers.scenemanager.SceneManager;
import flash.display.MovieClip;
import scenes.*;

public class Main extends MovieClip
{
public function Main()
{
  var sceneManager:SceneManager = new SceneManager();
  sceneManager.setScene(new IntroScene(this));
}
}
}

IntroScene (Setup the UI):

package scenes
{
import com.bluediesel.utils.managers.scenemanager.commands.*;
import com.bluediesel.utils.managers.scenemanager.commands.greensock.*;
import com.bluediesel.utils.managers.scenemanager.scenes.*;
import com.greensock.plugins.*;
import fl.transitions.easing.Strong;

public class IntroScene extends AbstractScene implements IScene
{
public function IntroScene(c:Object) {

  TweenPlugin.activate([AutoAlphaPlugin]);
  super(c);
}

override public function createIntroCommand():Command
{
  return new SerialCommand( 0.1,
      new TweenMaxTo  ( c.backgroundMC, 0.1, { blurFilter:{blurX:20, blurY:20} } ),
      new TweenMaxTo  ( c.backgroundMC, 0.4, { autoAlpha:1, blurFilter:{blurX:0, blurY:0} } ),
      new ParallelCommand( 0,
          new TweenMaxTo( [c.uiTopBanner, c.uiBottomBanner, c.buttonPrevious, c.buttonNext], 0.2, { autoAlpha:1 } ),
          new TweenMaxFrom( [c.uiTopBanner, c.uiBottomBanner, c.buttonPrevious, c.buttonNext], 0.3, { y:500, easing:Strong.easeOut } )
      ),
      new TweenMaxTo  ( [c.appTitle, c.clickForSoundText], 0.2, { autoAlpha:1 } )
  );
}

override public function onSceneSet():void {
  sceneManager.setScene( new Scene01(c) );
}
}
}

Scene01 (Intro-Outro Sheep):

package scenes
{
import com.bluediesel.utils.managers.scenemanager.commands.*;
import com.bluediesel.utils.managers.scenemanager.commands.events.*;
import com.bluediesel.utils.managers.scenemanager.commands.greensock.*;
import com.bluediesel.utils.managers.scenemanager.commands.utils.SetProperties;
import com.bluediesel.utils.managers.scenemanager.scenes.*;

import fl.transitions.easing.Strong;

import flash.events.MouseEvent;
import flash.media.*;

public class Scene01 extends AbstractScene implements IScene
{
public function Scene01(c:Object)
{
  super(c);
}

override public function createIntroCommand():Command
{
  return new SerialCommand(0,
      new TweenMaxTo  ( c.sheepTitle, 0.2, { autoAlpha:1 } ),
      new TweenMaxTo  ( c.sheepMC, 0.2, { autoAlpha:1 } ),
      new TweenMaxTo  ( c.bodyCopyBG, 0.2, { height:231, width:470, autoAlpha:1, easing:Strong.easeOut } ),
      new TweenMaxTo  ( c.sheepBodyCopy, 0.2, { autoAlpha:1 } ),
      new SetProperties ( [c.buttonPrevious, c.buttonNext, c.sheepMC, c.horseMC, c.pigMC], {buttonMode:true, useHandCursor:true} ),
      new AddEventListener( c.sheepMC, MouseEvent.MOUSE_DOWN, playNoise ),
      new AddEventListener( c.buttonPrevious, MouseEvent.MOUSE_DOWN, handlePrevious ),
      new AddEventListener( c.buttonNext, MouseEvent.MOUSE_DOWN, handleNext )
  );
}

override public function createOutroCommand():Command
{
  return new SerialCommand(0,
      new RemoveEventListener( c.sheepMC, MouseEvent.MOUSE_DOWN, playNoise ),
      new RemoveEventListener( c.buttonPrevious, MouseEvent.MOUSE_DOWN, handlePrevious ),
      new RemoveEventListener( c.buttonNext, MouseEvent.MOUSE_DOWN, handleNext ),
      new TweenMaxTo  ( c.sheepBodyCopy,  0.1, { autoAlpha:0 } ),
      new TweenMaxTo  ( c.bodyCopyBG, 0.1, { height:0, width:0, autoAlpha:0, easing:Strong.easeOut } ),
      new TweenMaxTo  ( c.sheepMC,        0.1, { autoAlpha:0 } ),
      new TweenMaxTo  ( c.sheepTitle,     0.1, { autoAlpha:0 } )
  );
}

override public function onSceneSet():void
{
  //TODO: implement function
}

/* CUSTOM METHODS */
private function handlePrevious(e:MouseEvent):void
{
  trace ("Already At Beginning");
  //sceneManager.setScene( new IntroScene( c ) );
}

private function handleNext(e:MouseEvent):void
{
  sceneManager.setScene( new Scene02 ( c ) );
}

private function playNoise(e:MouseEvent):void{
  var soundChannel:SoundChannel = new SoundChannel();
  soundChannel = new SheepNoise().play();
}
/* END CUSTOM METHODS */
}
}

Scene02 (Intro-Outro Horse):

package scenes
{
import com.bluediesel.utils.managers.scenemanager.commands.*;
import com.bluediesel.utils.managers.scenemanager.commands.events.*;
import com.bluediesel.utils.managers.scenemanager.commands.greensock.*;
import com.bluediesel.utils.managers.scenemanager.scenes.*;

import fl.transitions.easing.Strong;
import flash.events.MouseEvent;
import flash.media.*;

public class Scene02 extends AbstractScene implements IScene
{
public function Scene02(c:Object)
{
  super(c);
}

override public function createIntroCommand():Command
{
  return new SerialCommand(0,
      new TweenMaxTo( c.horseTitle, 0.2, { autoAlpha:1 } ),
      new TweenMaxTo( c.horseMC, 0.2, { autoAlpha:1 } ),
      new TweenMaxTo  ( c.bodyCopyBG, 0.2, { height:231, width:470, autoAlpha:1, easing:Strong.easeOut } ),
      new TweenMaxTo( c.horseBodyCopy, 0.2, { autoAlpha:1 } ),
      new AddEventListener( c.horseMC, MouseEvent.MOUSE_DOWN, playNoise ),
      new AddEventListener( c.buttonPrevious, MouseEvent.MOUSE_DOWN, handlePrevious ),
      new AddEventListener( c.buttonNext, MouseEvent.MOUSE_DOWN, handleNext )
  );
}

override public function createOutroCommand():Command
{
  return new SerialCommand(0,
      new RemoveEventListener( c.horseMC, MouseEvent.MOUSE_DOWN, playNoise ),
      new RemoveEventListener( c.buttonPrevious, MouseEvent.MOUSE_DOWN, handlePrevious ),
      new RemoveEventListener( c.buttonNext, MouseEvent.MOUSE_DOWN, handleNext ),
      new TweenMaxTo  ( c.horseBodyCopy, 0.1, { autoAlpha:0 } ),
      new TweenMaxTo  ( c.bodyCopyBG, 0.1, { height:0, width:0, autoAlpha:0, easing:Strong.easeOut } ),
      new TweenMaxTo  ( c.horseMC, 0.1, { autoAlpha:0 } ),
      new TweenMaxTo  ( c.horseTitle, 0.1, { autoAlpha:0 } )
  );
}

override public function onSceneSet():void
{
}

/* CUSTOM METHODS */
private function handlePrevious(e:MouseEvent):void
{
  sceneManager.setScene( new Scene01 ( c ) );
}

private function handleNext(e:MouseEvent):void
{
  sceneManager.setScene( new Scene03 ( c ) );
}

private function playNoise(e:MouseEvent):void{
  var soundChannel:SoundChannel = new SoundChannel();
  soundChannel = new HorseNoise().play();
}
/* END CUSTOM METHODS */
}
}

Scene03 (Intro-Outro Pig):

package scenes
{
import com.bluediesel.utils.managers.scenemanager.commands.*;
import com.bluediesel.utils.managers.scenemanager.commands.events.*;
import com.bluediesel.utils.managers.scenemanager.commands.greensock.*;
import com.bluediesel.utils.managers.scenemanager.scenes.*;

import fl.transitions.easing.Strong;
import flash.events.MouseEvent;
import flash.media.*;


public class Scene03 extends AbstractScene implements IScene
{
public function Scene03(c:Object)
{
  super(c);
}

override public function createIntroCommand():Command
{
  return new SerialCommand(0,
      new TweenMaxTo( c.pigTitle, 0.2, { autoAlpha:1 } ),
      new TweenMaxTo( c.pigMC, 0.2, { autoAlpha:1 } ),
      new TweenMaxTo  ( c.bodyCopyBG, 0.2, { height:231, width:470, autoAlpha:1, easing:Strong.easeOut } ),
      new TweenMaxTo( c.pigBodyCopy, 0.2, { autoAlpha:1 } ),
      new AddEventListener( c.pigMC, MouseEvent.MOUSE_DOWN, playNoise ),
      new AddEventListener( c.buttonPrevious, MouseEvent.MOUSE_DOWN, handlePrevious )
  );
}

override public function createOutroCommand():Command
{
  return new SerialCommand(0,
      new RemoveEventListener( c.pigMC, MouseEvent.MOUSE_DOWN, playNoise ),
      new RemoveEventListener( c.buttonPrevious, MouseEvent.MOUSE_DOWN, handlePrevious ),
      new TweenMaxTo( c.pigBodyCopy, 0.1, { autoAlpha:0 } ),
      new TweenMaxTo( c.bodyCopyBG, 0.1, { height:0, width:0, autoAlpha:0, easing:Strong.easeOut } ),
      new TweenMaxTo( c.pigMC, 0.1, { autoAlpha:0 } ),
      new TweenMaxTo( c.pigTitle, 0.1, { autoAlpha:0 } )
  );
}

/* CUSTOM METHODS */
private function handlePrevious(e:MouseEvent):void
{
  sceneManager.setScene( new Scene02 ( c ) );
}

private function playNoise(e:MouseEvent):void{
  var soundChannel:SoundChannel = new SoundChannel();
  soundChannel = new PigNoise().play();
}
/* END CUSTOM METHODS */
}
}

If you notice the repeating signature of a Scene class, the timeline functionality is controlled by createIntroCommand and createOutroCommand. Below those functions are any custom methods that the scene needs. There are ways this could be further packaged up, like an external class that contains all the helper functions. For now, this is a way to build a quick linear module or application without resorting to the timeline or to a more intensive solution such as a fully-fledged framework.

A Morsel on Flash Professional Projects in Flash Builder

2010-12-08T12:47:00.000-08:00

Flash Builder is so very great to use. Such a time saver for the stuff I work on, especially in conjunction with subversion. Having a repository view of a remote SVN server, being able to update and commit, not to mention the ease of 'diffing' in the Eclipse SDK. Best thing ever.

Lock down FB and SVN and you will find varying project types to choose from: Flex Project, Flex Library Project, or Flash Professional Project. Please join me in considering the good and bad of the Flash Professional Project.

Here are the things I like and don't like about managing a Flash Professional Project from FB.

The Likes:

The .project configuration file
can be saved to SVN, so you can open all your resources quickly at later date
allows you to select .as files from within Flash Pro and have them open in FB for a better coding experience ( still better even thoughh Flash Pro now completes code)

The Dislikes:

The .project configuration file
because collaborators with whom you share the Flash Professional Project, since the .project file is generally only usable in one particular configuration, will find it distracting
Two environments (FB and Flash Pro) means 2x the path configuration. Yes, you have to path to libraries and swcs twice. Once in FB, and once in Flash Pro.
Frequent quickly appearing and then disappearing phantom publishing panels, due to the need for FB to remain synchronized with Flash Builder. I'm on Mac and this is one of the more disturbing issues.
The fact that you must create and save a .FLA as a precursor to starting a new Flash Professional Project, then associate the .FLA with the new Project, and then add the new document class back to the .FLA. Far better to have the .FLA generated through FB and configured according to initial project values.

Seems like the nays have it this time. I find it works better to use subclipse to manage FLAs without converting them into Flash Professional Projects. The only tiny caveat to this approach is that you must open the associated .as files directly from FB rather than via Flash Pro.

It remains to be seen what Flash Builder "Burrito" adds to this mix.

ASDocr to generate ASDoc HTML documentation

2010-12-08T09:32:00.000-08:00

Rather than use the command line tool ASDoc that ships with the Flex SDK, I'm trying out ASDocr released on the Grant Skinner's site, gskinner.com.

It's handy, just be sure to update your Air to the latest 2.x version (presently 2.5.1) and be sure also to grab the latest ASDocr, as several are linked from gskinner.com

Practical Explorations of Catalyst Workflow, Pt 2

2010-11-10T07:07:00.000-08:00

dFurther into Catalyst, here are some details on its workflow implementation:

Catalyst is procedurally similar to IDE-driven Flash Development. In particular:

Imported objects are cut and pasted without regard to underlying code in the process of assembling and producing usable components
Graphics in Catalyst are nameless and instance-less and may well be duplicated many times in random fashion in the process of assembling components, resulting in a code-behind of untold and unmanaged complexity (until the developer gets a hold if it, that is)
Much like Flash circa v3, you can paint yourself into a corner if your work process is too design-centric. You must have an architectural view of what you are creating and scale it in anticipation of the final structured product. If you do not start with this view, unless it is a very simple project, you may get into a jam.
While Catalyst is a presentation tool, development and usability duties fall within its boundaries as well. One example is the need to create transparent hit-areas for buttons; this is a matter of function, not display.

Following on this, Catalyst in its current 1.0 state is more hybrid tool than design platform. The workflow role that it encapsulates is akin to that of a Flash web designer in a pure IDE environment.

The user must have an awareness of the developers' needs as well as graphical manipulation and timeline skills. A team member utilizing Catalyst would need equal measures of feedback from both dev and creative teams to be effective. Furthermore, upon the Catalyst user is placed the expectation of creating hierarchical, logical structures almost entirely from the mouse and clipboard.

As version 2.0 aka Panini moves to release, it will be interesting to see what's next.

Flash Catalyst and Flash Builder workflow

2010-11-08T06:56:00.000-08:00

More workflow explorations incorporating Adobe Flash Catalyst. Among the hopeful tests and discoveries, a stark word of caution is a rare gem. Here is one from an article authored by Adobe's Andrew Shorten (italics mine):

It is not possible to re-open a Flex project in Flash Catalyst once you've imported it into Flash Builder. (The product teams will investigate this option for a future release, but it will not be available in the first release of Flash Catalyst.) To overcome this limitation, consider the other workflows in this article, in particular workflow 3, which extends the approach used here to support iterative development.

Workflow 3 incidentally outlines the use of 'Compare Project With Version' > [previous version] as a means of reconciling different code versions. This represents great hardship in a round-trip and, in light of just how different the versions would be, is IMO not a viable solution.

Further on this, a detailed blog entry regarding 'catalyst jailbreak for flex developers' is exploratory and non-committal in tone as it explores Catalyst integration. Here is a further obstacle to a Catalyst workflow that extends from a different angle on the quote above:

An important note: There isn't a place to set the ID on Flash Catalyst components. When a designer converts artwork to a component and then exports a custom component with multiple text inputs, say a registration form, none of those text inputs contain ID's.

And further:

...when the design changes and it does, the one way Flash Catalyst generated code has no knowledge of your so called ID's. The design has changed and all or nearly all the components are anonymous again. So the developer has to manually find and add the ID to each text input, radio button, button, each time the design is updated etc.

While there are workarounds, there is not yet a clean workflow to utilize.

Flash Catalyst Panini, you are up next.

Flash Builder 4 Workflow from Catalyst to Flex

2010-11-05T12:12:00.000-07:00

Skin vs SparkSkin Classes in the Flash Builder 4.1 SDK

Seems the difference between the two is that SparkSkin adds some extensions that would likely not be used in the creation of a custom Spark Skin. Therefore, you can pretty much just use the Skin class if you are developing a custom implementation.

Here are a couple of resources with limited info on the topic:
http://forums.adobe.com/thread/465734?tstart=0
http://unitedmindset.com/jonbcampos/2010/06/02/the-difference-between-skin-and-sparkskin/