Practise makes perfect

I decided to try my hand at screen-printing the other day so I popped in to the city
and bought myself the basic equipment I would need to get started.

  • squeegee
  • mesh
  • black acrylic paint
  • 500watt work lamp
  • emulsion, sanitizer and remover
  • acetate photocopies

After a lot of traveling across London on a Sunday afternoon to find hardware stores where I could buy the work lamp I was eventually reading to begin the exciting but tricky process of screen-printing. Already I know to use more emulsion for a thicker more even coat across the screen next time, a sheet of glass would be ideal for weighing down the acetate whilst exposing the screen and an area to wash the screen with a powerful spray-gun or hose is a must.

Although you cannot tell very well from the scans, when the acrylic paint is too thin the moiré pattern from the screen is visible and looks like a pixel perfect pattern on
the paper. Screen-printing is going to be fun…
Screen-printing samples
Screen-printing samples 2
Screen-printing samples 3
Screen-printing close-up mesh

About face

If there’s one thing I love it’s reading; if there’s one thing I love even more it’s
learning about new ideas, theories or practises, imagine how fantastic it is when
I can do both.

Although this book is not new to my collection it’s the first do be added to the lab.

About Face is an extremely well-written book by David Jury editor of
TypoGraphic and fellow of the International Society of Typographic Designers
detailing many of the does and do nots in both typographic design and visual
communication. I’m going to read through this book again to refresh my memory,
I guess I really have no excuse to use bad typography then!
about face
about face spread

Scroller

As of today Scroller 0.1 is available for you to download. I have been working on
this Actionscript 2.0 class for a few months now and have used it in several recent projects.

The Scroller Class was first created for the Andy Warhol online exhibition website to scroll through the text, and then more functionality was introduced when the Scroller was used in several cd-rom projects. You can view a small test example here.

Scroller 0.1 includes 3 public methods:

  • setTop – starts the scroller and aligns the content to the top
  • setMiddle – starts the scroller and aligns the content to the middle
  • resize – can resize and scale the Scoller objects based on browser size

It only takes three main lines to create a Scroller instance

// import the class
import com.lukesturgeon.Scroller;

// instantiate a new Scroller instance
var my_scroller:Scroller = new Scroller(scroll_mc, slide_mc, content_mc, false);
my_scroller.setTop(0, 3);

Let me know if you have any problems, comments, suggestions, fixes, bugs, recipes for chocolate brownies or thoughts on further development.

Flash optimisation

I’ve spent some time designing and developing in Flash but I’m never happy unless I’m learning faster and more efficient ways to develop my projects. A key is to develop faster applications that run smoothly on any platform and use a minimal about of system resources, animation that is quickly and smooth as well as develop cleaner and more user friendly Actionscript code.

I’ve come across several blogs and website’s which have tips and tricks on how to optimise your Flash projects, so I thought I would consolidate them in the post. They are from various sources such as:

Fantasy-Interactive.

Eight code optimisation tweaks:

  • Declare the types of all variables
  • Do not use array length inside loops or in loop headers
  • Avoid multiple array lookups
  • Use int for counters and array lookups (AS3 only)
  • Use Number for math operations. There are cases where int is faster but it is generally best to stick with Number (AS3 only)
  • Use multiplication instead of division
  • Access variables directly, i.e without using getter and setter functions
  • Declare many variables at once

Two AS3 implementations of the same loop
//Slow unoptimized loop:
for(var i = 0; i < arrayOne.length; i++){
  if(arrayOne[i].enabled()){
    arrayOne[i].getX() = arrayTwo[i].getX()/2;
    arrayOne[i].getY() = arrayTwo[i].getY()/2;
    arrayOne[i].getZ() = arrayTwo[i].getZ()/2;
  }
}

//Fast optimized loop:
var length:int = arrayOne.length, i:int=0;
for(; i < length; i++){
  objectOne:SomeObject = arrayOne[i];
  objectTwo:SomeObject = arrayTwo[i];
  if(objectOne._enabled){
    objectOne._x = objectTwo._x*0.5;
    objectOne._y = objectTwo._y*0.5;
    objectOne._z = objectTwo._z*0.5;
  }
}

Design / Develop tips
Tip 1. Avoid bitmaps with alpha channel whenever possible. When two bitmaps containing an alpha channel are stacked on the stage, Flash has to do extra calculations to figure out the color of the pixel on every pixel where the bitmap contains alpha information. That adds a lot of computing.

Tip 2. Always draw/attach only those elements that are visible on the screen at the given moment, reuse movie clips whenever possible and try to control the number of clips on stage - the fewer the better.

Tip 3. Try to have as many graphical and textual assets imported to your FLA, and load externally at runtime only what is absolutely necessary.

Tip 4. Flatten graphical assets to minimize their number. If you have a button that is composed of a background, a shadow, an icon and a text label, the ideal solution is to export it from Photoshop as one flattened bitmap with all those elements in it (yes, even the text label!).

Tip 5. Optimize bitmaps in Photoshop not in Flash; the Photoshop save-for-web module is a lot better than Flash when it comes to optimizing bitmap files. In the FLA file, all the imported bitmaps should then have the lossless PNG/GIF compression option checked - Flash does not need to compress them any more.

Tip 6. The less ActionScript the better. Always minimize the amount of code you write. Especially do not create functionality that “will be useful in the future”. In the future you almost always need something else that you prepared for anyway. Also, AS is for interactivity, not for building stuff (the stage is designed for that). So if half of your code consists of attachMovie calls, something is wrong.

Progressive Enhancement

I’ve just update my portfolio website to include progressive enhancement. This basically means there is a hidden HTML page underneath the Flash for Search Engines to read. If a visitor does not have javascript or the correct version of the required Flash player installed they will see a CSS and HTML version with a message asking them to upgrade their Javascript and Flash player settings.

It allows more flexibility and accessibility in a website created completely in Flash – because you create a simple HTML version too.

progressive enhancement

New project

I’ve just completed the design and development of the website for artist Stuart Semple’s latest exhibition titled ‘fakeplasticlove’ and added the project to my portfolio.

fakeplasticlove

fakeplasticlove