New Component: Barcode_128B

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

This new component allows you to easily add Code 128-B barcodes to your web pages. Code 128-B has been chosen for implementation as it is a high density barcode that supports an alpha numeric character set. (Many barcodes are numeric only).

Inexpensive barcode readers that read this type of barcode are available for around $30.00. (I purchased a reader for $28.00 on ebay.)

Once created, the barcode can be printed using the Printjob object. Printed barcodes could be used for ticketing purposes, product identification, asset tracking etc.

For my own personal use, I have used this component to create static barcodes of various membership codes/numbers. By saving the .swf files to my phone, I can avoid the hassle of carrying multiple plastic cards. Users without a Flash enabled phone could export to .png instead.

Downloads

This component will work with SWiSH Max4 and miniMax4 with build dates of 20110318 or later, and although the component is not included with the 20110318  build’s installer, it can be downloaded here. After downloading it, extract both files within the zip file to:

C:\Program Files\SWiSH Max4\Components\Utility

The exact location may be different depending on where you installed Max4, or MiniMax4. We intend including the component in future releases. On x64 systems, Max4 and miniMax4 are by default installed into C:\Program Files (x86)\

The example file described below can be downloaded from here.

Use

To use the component drag it from the Components Panel onto the stage. The component can be used in a static mode simply be setting the various parameters. Alternatively it can be used with scripting via the SetB() method.

Parameters

Text

This is the text that is converted to barcode format. Leave this item blank if you intend to use script to set the barcode.

Include Text

If this checkbox is set, then human readable text is displayed under the barcode

Text Format

Allows the font properties of the text to be adjusted. If using Device fonts, note that the text will not be scaled if the barcode is scaled, so this can be advantageous.

Size and Print Tuning

Height and Width define the height and width of the barcode. The height is in pixels, the width defines the width in pixels of the minimum size bar. The overall width of the barcode depends on the text being used.

Width Scale (%) defines the horizontal stretching of the barcode. 100% is the preferred value, but 125 or 150 should be used if the barcode is difficult to read.  Note that many readers will have a physical limitation on the maximum width of the barcode. (see the Print Tuning section below).

Enlarge White Bar defines a pixel offset by which the white bar is enlarged compared to the black bar. This setting is used to help avoid issues of “ink bleeding” when using inkjet printers. A setting of 0.2 seems to give good results on a variety of printers. (see the Print Tuning Section below).

 

Example

 

The demonstration movie can be used to print an arbitrary alpha numeric barcode. Enter your text in the text area then press the Enter key. To print the barcode, press the round Print button.

To maintain maximum sharpness, the barcode lines are aligned on integer pixel boundaries. When printed, the barcode is re-scaled to align with the printer pixel alignment (assumed to be a multiple of 150dpi).

The demonstration movie can be downloaded from the Downloads section above.

Analysis

To simplify scaling calculations, the barcode component has been placed inside the printholder movie clip. The contents of the printholder are used for printing, but the barcode component is rescaled as needed. This avoids the need to re-scale margin positions.

When the Enter key is pressed, the onSelfEvent code within the ip_text object initiates the barcode creation via the SetB() method.

onSelfEvent (keyPress("<Enter>")) {
 _parent.printholder.barcode.SetB(this.text);
}

The Events function within the Printercontrol movie clip handles changes to the margin combo boxes as well as the print button.

function Events(n,v) {
 // trace(n add ":" add v);
 switch(n) {
 case "Combo_leftmargin":
 leftMargin = v*72; // convert inches to pixels
 break;

 case "Combo_topmargin":
 topMargin = v*72; // convert inches to pixels
 break;

 case "Button_print":
 // make sure barcode is generated
 if ("" == _parent.ip_text.text)
 break;    // nothing to print. 

 var pj:PrintJob = new PrintJob();

 // update the barcode with user entered text
 _parent.printholder.barcode.SetB(_parent.ip_text.text);    

 // trace(_parent.barcode._width add ":" add _parent.barcode._height);
 if (pj.start()) {
 // print job started ok.
 var pw:Number = pj.pageWidth;
 var ph:Number = pj.pageHeight;

 // rescale to get points on pixel boundaries based on 150dpi print.
 // standard mapping is 1pixel->1twip. there are 72 twips per inch.
 // to convert to printer pixels (based on 150dpi) = 72 / 150 * 100% = 48%
 _parent.printholder.barcode._xscale = 48;

 // print barcode spaced by left and top margins
 // note that printholder movie clip is not scaled so no need to adjust margin values.
 pj.addPage(_parent.printholder, {
 xMin:-leftMargin,
 xMax:(pw-leftMargin),
 yMin:-topMargin,
 yMax:ph-topMargin}
 );

 // return to original scale.
 _parent.printholder.barcode._xscale = 100;
 _parent.printholder.barcode._yscale = 100;
 pj.send();
 }
 break;
 }
}

Changes to the margin combo boxes simply cause the stored margin values to be updated. The margins which are specified in inches are converted to pixels on the basis of 1pixel = 1twip and there are 72twips per inch.

When the print button is pressed, the barcode is reset to display the current text.

// update the barcode with user entered text
 _parent.printholder.barcode.SetB(_parent.ip_text.text);

The print job is started and the page width and height are noted for margin positioning.

To force accurate bar / pixel alignment, the barcode has it’s _xscale altered to 48%. This calculation is based on 72 twips per inch and 150 dpi. (72/150*100% = 48%)

The printholder object is then printed after adjusting for the user chosen margins.

After printing the barcode movie clip is returned to 100% scale.

More information about the Printjob object can be found in the blog article: Print from flash using Printjob.

Print Tuning

Inkjet printers will often achieve better results in Draft mode as this mode generally reflects the natural resolution of the printer. Higher quality print settings often cause the image to be re-printed in multiple passes with a slight print head offset. Although this approach generally works well in giving better outlines, it can fill in the white areas of a barcode as shown by the example movie below.

The Width Scale and Enlarge White Bar options have been provided to fine tune factors that affect barcode readability.

If you are using a Laserjet printer you probably don’t need to consider this section. However, if you are intending your barcodes to be printed by web users using unspecified printers, then a Width Scale of 125% and a Enlarge White Bar setting of 0.2 will give a higher success rate. A Width Scale of 150% (or 100% with a width setting of 2) will give even more reliable results if the printed barcode is not physically too large to be read by your reader.

Notes

A twip is a typesetting term. There are 72 twips to an inch. An unscaled movie clip will print 1pixel to 1twip.

If it does not work, check that your barcode reader can be configured to read Code 128 barcodes.

It is possible that a “Draft” print setting will give better results as a “Normal” print setting may cause “bleeding” into the bar space areas.

This component is provided without warranty of any kind. I am only able to test it with my inexpensive CCD barcode reader and my Canon Pixma iP1000 printer. It should work with better quality printers and barcode readers, but I have no way to test such configurations. If you find that it does not work with a specific barcode reader / printer combination you may want to leave a comment to warn other users that have the same configuration. It is unlikely that I will be able to assist you if it does not work correctly.

 

Tags: , , ,

2 Responses to “New Component: Barcode_128B”

  1. Henrik says:

    This is very nice, when will there be a QR generator avalible ? that would be more usable, since its a huge hit right now in most of the world..


Switch to our mobile site