71 entries in Development

Ideal default Flash IDE setup for Developers

Instructions on how to set up the Flash IDE for hassle-free AS3 development

Wednesday, October 6th, 2010

Flash has a few places where you can set preferences, some of which are saved globally, some of which are saved per file. The per-file settings are a pain as they are forgotten for new files.

This post describes how to:

  • Disable file-specific global warnings, such as migration warnings for onMouseDown
  • Use File > New File > Templates to specify default settings, such as turning off Always declare stage instance

Disabling warnings

I tried the adobe-recommended handler names for about 6 months before reverting back to onMouseDown etc which is  far more readable in both the code and project outline in FlashDevelop. The thing is, Adobe by default in ActionScript 3.0 you get a migration warning on every publish. Annoying!

I’ve finally found out that you can toggle these warnings using the EnabledWarnings.xml file, by simply setting the enabled attribute to false for the desired warning.

The file can be found in the following location:

Win: C:///en/Configuration/ActionScript 3.0/EnabledWarnings.xml
Mac: HD|Applications||Configuration|ActionScript 3.0|EnabledWarnings.xml

There are about 30 warnings in all, covering possible mistakes, coding style, and AS2 to AS3 code migration.

Setting default file / file preference settings

Did you know that it’s possible to create your own file templates, complete with settings found in:

File > Publish Settings... > Flash > ActionScript 3.0 Settings...

This covers:

  • Export classes in frame n
  • Strict mode
  • Warnings mode
  • Automatically declare stage instances

If you simply create a folder called Templates in your user Configuration folder, then a named subfolder, and save an .fla file in there, it appears in the File > New > Templates list.

Not only this, but:

  • The template group shows on the Flash startup screen
  • File > New remembers your choice, so automatically pre-selects the last-used template
  • The File > New > Templates tab, Category and Template choice is remembered between sessions

I now have a folder called Templates/Development, and a few different .fla files in there, all with the settings I mentioned above.

You could easily add some files with default timeline testing code, a few symbols, fonts, etc, as well.

jQuery Deconstructed

An interactive visual breakdown of the jQuery internal code

Monday, July 19th, 2010

UPDATE: jQuery Deconstructed is now JS Libs Deconstructed, also supporting Prototype, and soon, MooTools.

I’ve been interested in the internal structure of jQuery for as long as I can remember, but it can be overwhelming at the best of times, so I’ve recently made-good on my plan to build an interactive breakdown of the physical code.

Essentially, it provides a rather handy birds-eye view of the jQuery library, making it easy to dig into and understand the coding behind the seemingly-simple syntax.

Points of note:

  • It breaks the physical JavaScript into visual blocks that you can easiliy navigate.
  • Each block opens to reveal its internal code
  • Clickable hyperlinks allow you to follow program flow

It now also has a few nice features such as:

  • Live links to the online documentation
  • Color themes
  • Optional icons

Check it out here: https://keyframesandcode.com/resources/javascript/deconstructed/

Excel export delimited text macro

Export Tab-delimited text from Excel

Friday, April 30th, 2010

I often need to save text from Excel to use with PHP, but I find Excel’s “Save As” functionality less that useful, as it converts your open worksheet to a text, which is a real pain.

This macro exports the current worksheet as a tab-delimited or comma-delimited text file, with the following features:

  • optionally exports the current selection
  • outputs values as text
  • strips leading and trailing whitespace
  • quotes any cells with spaces (TSV only)
  • warns if the file is locked

Here’s an example of the two file outputs:

Tab-separated values

id      word    words
1       hello   "hello there"
2       goodbye "goodbye then"
3       a       "a, b, c"

Comma-separated values

id,word,words
1,hello,hello there
2,goodbye,goodby then
3,a,a, b, c

Download ExportDelimitedText

Disable password autocomplete in Firefox

Handy little trick to make Firefox behave in a more security-conscious manner

Saturday, December 5th, 2009

Firefox seems intent on autocompleting password fields, whether you want it to or not, which is not good for security if you’re building a web app with “old password / new password” functionality.

Luckily, I’ve found a way to trick it into not doing this.

Simply place a hidden password field, with no name, at the start of your form:

This seems to trick firefox into thinking that this is the main password field, but as there’s no name it a) doesn’t get set and b) doesn’t get submitted.

Great :)

Documentor – PHP to HTML to Redmine Wiki syntax converter

Easily convert PHP to HTML then Redmine wiki format

Thursday, July 23rd, 2009

Overview

I’ve released what I think is a pretty robust version of Documentor, my PHP > HTML > Redmine documentation app.

These are some of the nice features to make it in:

PHP

  • Classes, methods and properties are now supported
  • Excellent JavaDoc & commenting conversion
  • Automatic grouping of properties based on comments structure

HTML

  • Full or partial HTML generation, with semantic markup, anchors and full CSS support
  • Multiple structural options
  • Generation of sample code

Wiki format

  • Automatic conversion of almost all supported tags, including simple tables
  • Automatic link generation for external and internal links

UI

  • Elegant and easy-to use AJAX interface which remembers your settings between sessions
  • Sample code example included to quickly test all the features
  • Live preview of HTML results

Check it out

It’s now got its own project page, so you can file issues or suggestions there:

http://dev.kohanaphp.com/projects/documentor/wiki/

And the application is here to tinker with:

https://keyframesandcode.com/resources/php/redmine/documentor/

I think it’s fairly bullet-proof, but please get in there and test the latest version, let me know what you like, and if you find any bugs.

Check it out online and have a play – I’ve tried to make it super easy, and there’s sample code you can use to get you started. Also, try copying and pasting some of the code Kohana classes in to see what happens!

Comment Headings

Enable easy navigation of code using GIANT comments made up of block characters

Friday, November 14th, 2008

When navigating through large classes, it can be a real pain to find certain bits of code if you don’t have a good IDE. As I often work in Flash IDE and DreamWeaver IDE, I have to rely on comment blocks here and there, with lots of – - – - – - – - – - delimiters, etc. which is an OK start.

However, I saw the PaperVision 3D classes had moved on a step from this, and had rather nice blocks at the top of each script with their logo, made out of characters. Why not extend this idea and actually build a small Flash application to let me build dirty-great big words that I can use in my scripts for navigation purposes?

Comment Headings

Edit the text in the left-hand text box to update the text in the right, then click Copy Text to copy the headings directly to the clipboard so you can paste to your IDE.

Note:Comment Headings works only with mono-spaced fonts! Mac users – you might have to experiment to find the best one.

Firefox 3 users: due to FF3’s mono-spaced font tracking, the characters below may not display correctly, but rest-assured that in the final downloadable utility, and your IDE, the headings will appear just fine.

Demonstration

To demonstrate the differences between a comment-headered file and a normal file, compare the following two files, and see how much easier it is to skim through the one with larger comment headings.

Options

The following options are available to customize your headings:

  • Font – Choose from 12 available fonts of varying sizes and styles
  • Block – Various characters to create the block comments themselves
  • Comment – Various leading-comment styles to suit different languages
  • Delimiter – Various delimiter characters for the

Presets

If you change programming languages / tasks regularly, you can save time by storing oft-used combinations as presets. For example:

  • Input presets – Your most common heading text combinations
  • Output presets – Your most common settings for each language / editor / etc

Presets can be quickly called up by selecting them from the dropdown lists, which automatically updates related dropdowns as well as the output text.

Both Input Templates and Output Settings are stored in an editable text file, presets.xml, which is well-commented, allowing you to add or delete settings to suit your workflow.

To have the utility start with your chosen presets, for example having the MaxScript headings always open, just ensure its entry is first in the input list.

Customization

Once tinkering in the presets file, the following elements are configurable:

  • Comments – Choose the leading comments (//, –, etc) according to programming language
  • Blocks – Choose which characters you want to physically build the words from
  • Delimiters – Choose which characters you want to use to delineate each comment block
  • Fonts – Choose from any of 12 fonts to be available

3dsmax users

In order to display the full-block style of comments, you will need to set up the SCiTE editor to use the extended Unicode character set, and display code by default in a fixed width font. To do so, you will need to add the following lines to your User Preferences file:

code.page = 65001
character.set = 204
font.base = font:Courier New,size:10
font.comment = font:Courier New,size:9

Obviously this is only applicable if you are using 3dsmax 2008 or above.

Download

  • Windows .exe version for Windows users
  • Flash .swf version for Mac users

Kohana: Default controller for serving static pages

Save development time by routing un-routable content to default views

Thursday, September 11th, 2008

A brief overview of the problem

A framework such as Kohana is really useful when serving lots of dynamic pages, as it allows you organise both your thoughts and your code into folders, creating order from what could potentially be chaos, at the expense of having to adhere to a structured way of working, in this case setting up controllers and methods that are correctly mapped from URLs (routes).

Whilst this is necessary for dynamic pages that need access to models, helpers and such like, for static pages that literally just need to be output to the browser, it’s quite a lot of overhead, and your controllers can very quickly end up bloated with itty-bitty “view this page” methods.

What would be great would be some magic method to automatically handle static pages, without having to set up an actual controller and method, that way all you really need to create is the view file, and you leave your controllers folder nice and lean.

Note: this tutorial is for Kohana 2.2. I haven’t investigated how it will work with 2.3 and the routing yet. Please comment if you have something to add!

The Fallback controller

The solution is using a default or “fallback” controller that takes care of serving views from routes that don’t map to an existing controller and method.

Essentially, this new controller kicks in just after the routing has drawn a blank, locates the appropriate view file, then serves it – instead of serving a 404 page.

Step-by-step

Let’s a take a look at how this works in a step-by-step approach from Kohana’s perspective. Don’t worry – it’s actually pretty simple, I’ve just mapped it out specifically so you can see what’s happening every step of the way.

Let’s start with a route

  • The user navigates to a route, lets say /about/company/history
  • Kohana looks for
    • an about controller, with
    • a company method, and intends to supply it with
    • a history argument

Here’s the thing though, because we did’t want the hassle of setting up ALL our controllers with methods just to load views, our about controller doesn’t have a company method! So what is Kohana to do?

Let’s load the Fallback Controller!
Well, normally, a 404 page would be served, but using the magic of hooks, we’re going to give Kohana one last chance to do something before serving that horrid 404 page.

So:

  • The system.post_routing hook kicks in, and due to the way we’ve set up the hook file
  • It loads our Fallback controller, which is designed to do something useful with the route before bombing out.

Let’s have the Fallback Controller do it’s stuff and find the view!
In this case, we want it to attempt to find a view, so:

  • The Fallback controller builds a path from the arguments /about that will (hopefully) map to a view, in this case views/main/about.php, then
  • Attempts to find this view using Kohana::find_file, and
    • if found – loads the view!
    • if not found – serves the 404 page

Summary

Pretty useful, huh? Basically all that happened is

  • Kohana couldn’t find a controller, so loaded a Fallback controller
  • The fallback controller took the route and found a view
  • Kohana loads the view (or the 404 page if the view didn’t exist)

OK, perhaps it’s time to look at some code

Code

You will need to create or edit code in 3 separate places:

  1. Enable hooks in your application’s configuration file
  2. Create a hook file which tells Kohana what to do in the system.post_routing event
  3. Create the actual Fallback Controller that will do the finding and loading of your view files

.

application/config/config.php – Enable hooks in the main config file…

$config['enable_hooks'] = TRUE;

.

application/hooks/fallback_page.php – Add a hook file to the hooks directory…

Event::add('system.post_routing' ,'call_fallback_page');

function call_fallback_page()
{
    if (Router::$controller === NULL)
    {
        Router::$controller = 'fallback_page';
        Router::$arguments = Router::$segments;
        Router::$controller_path = APPPATH.'controllers/fallback_page.php';
    }
}

.

application/controllers/fallback_page.php – Set up a controller to do the business

class Fallback_Page_Controller extends Page_Controller // page controller is my standard page template
{

    public function __construct()
    {

    // the constructor can be omitted if you're not doing anything special,
    // as the parent constructor it is called automatically
        parent::__construct();
    }

    public function __call($function, $arguments)
    {

    // search for a view, and load it if it exists
    // it's up to you how you handle the mapping of arguments to folders here!
        $route =  implode('/', $arguments);
        if(Kohana::find_file('views/main', $route))
        {
            $this->template->content = new View('main/'.$route);
        }

    // display alternative content if not found
        else
        {
            $view = new View('common/404');
            $view->info = array($function, $arguments);
            $this->template->content = $view;
        }
    }

}

Conculsion

So now you should be able to set up a bunch of views, but needn’t worry about building controllers for them if nothing exciting is happening.

The fallback controller will run, will attempt to find a matching view, and if found, will echo it the page. The main thing is – it keeps your controllers folder and classes nice and lean, and you only need to build controllers that actually DO any controlling!

Nice.

Kohana ‘filesystem’ Helper

A robust helper to handle everything file and folder-related within Kohana

Wednesday, August 20th, 2008

Kohana is just an excellent framework to work with, but one of my beefs is that the structure of its bundled libraries and helpers is a little haphazard, missing basic functions you’d expect to find in the core (so you can rely on them when writing modules) omitted!

For this reason, here’s my attempt at a more integrated helper class. It’s somewhat of a Frankenstein’s monster with bits borrowed from Code Igniter, and my own code thrown in as well. Apart from this, it:

  • Adds a few new methods
  • Improves on some existing methods
  • Combines the ‘download’ helper functionality
  • Tidies up various method calls

The methods are:

  • map()
  • get_folders()
  • get_files()
  • delete_files()
  • read_file()
  • write_file()
  • make_path()
  • download()

Download filesystem.php here.

(more…)

“List” struct

Easily create associative array-like structures in 3dsmax

Friday, June 6th, 2008

As 3dsmax doesn’t allow for either associative arrays or dynamically-set object properties, it can be difficult to store unstructured, arbitrary variables.

Sometimes you just want to store lists of name/value pairs, to keep track of a few settings throughout your script, without relying on a host of variables, resorting to .ini files, or custom attributes.

Therefore, I set about writing a basic Dictionary, or List struct, similar to VB and other languages.

Example code

Here’s a really basic example of storing 5 named variables within a List:

names = #("five", "four", "three", "two", "one")
values = #(5,4,3,2,1)
lst = List()

for i = 1 to 5 do lst.addItem names[i] values[i]

So let’s get some data back out:

lst.getValue "two"
-- 2

lst.getIndex "two"
-- 4

lst.getValues()
-- #(5, 4, 3, 2, 1)

Or print the whole lot:

lst.print() -- unsorted

five:   5
four:   4
three:  3
two:    2
one:    1

How about some sorting:

lst.sort() -- by name, alphabetically

five:   5
four:   4
one:    1
three:  3
two:    2

lst.sort field:#value -- by value

one:    1
two:    2
three:  3
four:   4
five:   5

As you can see, it’s pretty straightforward stuff!

Properties and Methods

Properties

  • items – the key/value pairs.
    • Names can be a #name, “string”, or even an index
    • Values can be any MaxWrapper value (i.e. anything)

Setters

  • addItem – adds an item to the List, and if it already exists
  • setItem – synonym for the above

Getters

  • getValue – returns the value of the named item
  • getIndex – returns the index of the named item
  • getName – returns the name of the first item that matches the supplied value
  • getItem – returns the List item corresponding to the supplied name (typically, you wouldn’t use this, as you know the name component already, it’s just included for completeness)
  • getItems() – returns all items as an array of ListItem structs
  • getNames() – returns all names as an array
  • getValues() - returns all values as an array

Clear or delete

  • clear() – clears the lit of all items, and returns the empty ListItems array
  • deleteItem – deletes the named item from the list, and returns it
  • deleteIndex – deletes the item at the index, and returns it

Utilities

  • sort field: order: func: – sorts the list in a variety of ways, even supply a comparison function (see the max help on qsort)
  • print() – prints the List items to the Listener

Next version

Possible improvements in the next version might be:

  • .ini file integration, with save() and load() methods
  • Support for hierarchical Lists, perhaps getValue #(#parent, #child, #grandchild, …)

Download

Download List.struct.ms here.

Time Stamper – Meshops.attach() Case Study

Monday, May 26th, 2008

Overview

In response to a post on CG Talk, Optimization ideas needed, a few other developers and I us pitched in to help out with ideas to solve a puzzling problem.

The issue was that a loop to attach 7500 objects was taking up to 8 minutes to complete. Where did the problem lie? Was it in the transformation code, the attachment code, or somewhere else?

Well as luck would have it, today’s Bank Holiday has been totally washed out with rain, so I had nothing better to than to do some testing and find the cause, and in the process road test my recently-developed TimeStamper struct.

Approach

After turning undo and redraw off, as well as optimizing the transformation code within the script, which cut a 1000-object test scene’s processing time in half, surprisingly the 7500-object scene was still taking around 8 minutes.

I suspected that the problem may well be in the fact that as mesh gets larger, perhaps it becomes computationally more expensive to add new meshes, seeing as the entire array of points and faces needs to be evaluated every time a new mesh is added. Cumulatively, this could really add up.

I though that perhaps the right approach would be to split the attaching up into phases, using a 2D loop, and I suspected that perhaps the square-root of the total attaches might yield the optimal performance, ie for 10000 attaches I’d perform a 100 x 100 loop, creating 100 intermediate meshes, then attaching them all at the end.

Results

These are the results for various variations of 2D loops, limiting the amount of objects attached per loop. The results are impressive!

  • For 1000 objects, the optimum loop combination was 31 loops of 32, a speed increase of 12 times over a single loop
  • For 3000 objects, the optimum loop combination was 55 loops of 54, a speed increase of 22 times over a single loop
  • For 5000 objects, the optimum loop combination was 50 loops of 100, a speed increase of 28 times over a single loop
  • For 7500 objects, the optimum loop combination was 87 loops of 86, a speed increase of 30 times over a single loop

And yes, the square root approach was most successful 3 out of 4 times.

Here are the results in table format, with the optimum loop highlighted:

1D / 2D loop comparison

Compared to the 1D loop, the 2D loop was 30 times faster on 7500 attachments.

In minutes and seconds, that means a decrease from 6 minutes and 29 seconds to just 12 seconds!

In graph-form that looks like this:

Conclusion

It seems pretty safe to say that in this case, building up intermediate meshes and attaching at the end is the best way to go. It looks likely that adding to already-huge arrays carries with it an overhead that can have an extremely negative effect in a lengthy loop situation.

I’ve no doubt that this approach most likely extends to other mesh / array / hash based computations as well, so splitting up large cumulatively-expensive calculations into smaller chunks could well be a great time-saver in other tasks as well.

So – a shame about the rain, but perhaps a bonus in disguise!

Resources

  • View the Time Stamper page
  • Download TimeStamper.ms
  • Download the test script that generates the 1000’s of spheres that get attached, and performs the benchmarking
  • Download the Excel report that was built using TimeStamper getReport() function in Excel 2003 or Excel 2007