AAG | LayerComps

Introduction

AAG | LayerComps (LayerComps for short) is a plugin for LiveCode that works just like the Layer Comps palette from Adobe Photoshop. It allows you to record the rect and visibility of controls in a card and switch between these recorded states with ease.

You can use that for many things, but the most obvious usage scenarios are:

  • Create different prototype layouts to show to a client or friend and switch between then easily.
  • Create different layouts for the different mobile resolutions and switch between them as needed.
  • Create complex interfaces where you reveal or hide parts of it without changing cards. For example: hiding and revealing different sidebars and inspectors.
The different recorded states can be activated using the plugin or by code if you start using LibLayerComps stack. The plugin can copy this library stack into your topstack if you want.

How it works

A movie is worth a thousand words, so please watch the movie below where I show the basics like creating a Layer Comps, saving states, activating states both using the plugin and by code.

As you saw in the movie, it is fairly easy to create and update these recorded states. Basically you just select them and press the save button when you want to record a state. To activate a state, you can double click it, use the bottom navigation arrows or call:

SwitchLayerComp <the name of the layer comp>

Using it to prototype different control arrangements

Sometimes you have mixed ideas about how a design should go. Should the logo be on the left or on the right? Should this field go all the way or should we have a permanent sidebar? Instead of wondering what is the perfect answer AAG|LayerComps allow you to record all those different states and switch between them with a double click. This way, you can gather opinions from clients and friends and experiment with the different layouts without the tedious and error prone job of layouting everything by hand again.

Mobile development

LiveCode can build for iPhone, iPad and the gazillions of Android devices out there. For each of those devices you need to handle landscape and portrait orientations. The geometry can be dauting at first but not for those that have AAG | LayerComps.

Just create a stack as big as your largest platform, say 1024x1024. Use layer comps to record the positions, sizes and visibility of your controls as you create layouts for all the resolutions and oridentations.

And then you can use code like: 

on preOpenStack
    switch iphoneDeviceOrientation()
    case "portrait"
    case "portrait upside down"
      switchLayerComp "iPhone portrait"
      break
    case "landscape left"
    case "landscape right"
    default
      switchLayerComp "iPhone landscape"
      break
    end switch
  end preOpenStack
That is very CROSS-MOBILE-PLATFORM, it allows you to reuse your code a lot without thinking to much about how to calculate geometry at run-time.

Complex interfaces

Have you ever tried to create complex interfaces in LiveCode? As much as LiveCode helps and empowers us developers, when the time comes to build complex interfaces, it can get really slow. How many times you've written code to hide a dozen groups or to reveal another dozen controls when needed? Creating interfaces like iPhoto, Photoshop, Mail.app where sidebars and inspectors play a big role can be a tedious work, specially when there is a lot of code like: 


  ...
  hide group "possible inspector #1"
  hide group "possible inspector #2"
  hide group "possible inspector #3"
  hide group "right sidebar"
  if tMediaType is "image" then
    show group "image inspector"
  end if
  ...
It is much easier to do something like: 


  ...
  if tMediaType is "image" then
    switchLayerComp "image inspector"
  end if
  ...

And have all the unneeded stuff disappear and the correct stuff displayed.

Oh Man, this is really useful, how do I get it?

AAG | LayerComps is a commercial offering. It costs U$ 30,00 and is worth every penny. You can buy it by using the PayPal button below.

blog comments powered by Disqus