Currently Browsing: Flex

Adobe AIR 2.0 Beta 2 Released

Discussing New Printing Features in the AIR 2 Beta 2 from Ryan Stewart on Vimeo.

Adobe® have released AIR® 2 beta 2 on Adobe Labs. Adobe AIR 2 provides end users with exceptional application experiences while giving developers the easiest and most powerful way to develop desktop applications across multiple platforms (Mac, Windows, and Linux).

AIR 2 builds on the success of AIR 1 by giving developers new capabilities, and even tighter integration with the desktop. Some new features of AIR 2 include:

  • Enhanced support for interacting with printers (beta 2)
  • Support for TLS/SSL socket communication (beta 2)
  • Support for the detection of mass storage devices.
  • Advanced networking capabilities like secure sockets, UDP support, and the ability to listen on sockets.
  • Support for native code integration.
  • The ability to open a file with its default application.
  • Multi-touch and gesture support.
  • New APIs for access to raw microphone data.
  • Webkit update with HTML5/CSS3 support.
  • Global error handling.
  • Improved cross-platform printing
  • Improved security and support for enterprise and government standards.

Two new features that developers may be particularly interested in are the following:

  • Print Job Enhancements
    New properties and methods have been added to the PrintJob class to give you better control of the way content is printed from an AIR application, including the choice of printer, paper size, and number of copies. New properties also give you more information about the printer, such as printable area, whether the printer will print in color, and whether the print job is currently active. The new PrintJobOptions.printMethod property allows you specify whether to use bitmap or vector printing. The PrintJobOptions.pixelsPerInch property allows you to specify the resolution of print jobs. The new PrintUIOptions class allows you to control how much the end user can change the page range to be printed. See PrintJob, PrintJobOptions, and PrintUIOptions.
  • TLS/SSL Sockets
    You can now connect to a server that requires TLSv1 or SSLv3 for socket communications. See SecureSocket.

For a complete list of features and to see what’s new in beta 2, please refer to the Release Notes. For an overview of the new features in AIR 2, please take a look at the following:

The AIR 2 Public beta is your opportunity to explore new features and communicate your feedback. Please remember that that this is beta software, so there will be bugs, incomplete features, some performance issues, and some missing documentation. Therefore, please use the AIR 2 beta only for testing and exploratory purposes.

Flash Player 10.1 running on many devices

Below are a few video demos showcasing the Adobe Flash Player 10.1 running on many different devices. Included here is a demo of Kevin Lynch showcasing multi-touch support on an HP TouchSmart using AIR 2.0 Beta.

Demos

Adrian Ludwig demos various games from Armor Games and Miniclip.com with Flash Player 10.1 on Palm webOS using the Palm Pre (3:44)

Adrian Ludwig demos video and animation on the BBC, The New York Times, and Angry Alien websites on Android using the Motorola Droid (3:35)

Adrian Ludwig demos Flash Player 10.1 on Nexus One, the new Google branded phone (3:41)

Kevin Lynch demos multi-touch and gesture capabilities on the HP TouchSmart using AIR 2 beta and Flash Player 10.1 (2:54)

Adrian Ludwig demos various websites with Flash Player 10.1 on Palm webOS using the Palm Pre (3:02)

Adrian Ludwig demos Google Finance on Microsoft Windows Mobile using the Toshiba TG01 smart phone (3:04)

Flex 4 beta in a Week on Adobe Developer Connection

If you are a Flex developer or wanting to learn Flex, i highly recommend you look at Adobe’s video training course called Flex 4 beta in a Week.

The course is broken up over 5 days as follows:

Day 1 – Exploring the basic, Introducing object-orientated programming and Understanding components and layouts
Day 2 – Handling events, Validating and formatting data, Navigating application content and Animating components and states
Day 3 – Controlling text display, Controlling visual display and CSS and Skinning Spark components
Day 4 – Extending events, Accessing remote data and Creating a typed data model
Day 5 – Displaying data with the DataGroup container, Displaying Data with the DataGrid control and Deploying Flex and AIR Applications

Seasoned Flex developers may only find some of these areas useful, such as the Skinning Spark components and Displaying data with the DataGroup container (Coming soon).

Degrafa Sliding Progress Bar Component

[kml_flashembed publishmethod="static" fversion="9.0.114" movie="http://www.thoughtfaqtory.com/blog/wp-content/uploads/2009/09/slidingprogressbar/DegrafaSlidingProgressBar.swf" width="540" height="520" targetclass="flashmovie"]Get Adobe Flash player

[/kml_flashembed]

This is the the first post in the series, and each one will highlight a different component we developed for various projects throughout the year.

ThoughtFaqtory has been working on numerous projects this year and one of them required our team to develop a host of custom components with a specific look and feel. We had a couple of choices but we are very familiar with Degrafa and decided to use it to skin our components.

In the example application above, the component gives the user feedback on the progress of the slide show. This can be very useful component to show feedback within a wizard style user interface.

The progress bar has quite a bit of logic to work out the size of the sub-sections and labels based on the available width and height. It also supports vertical layout but had no requirement for this in the project. The colours (background, active and inactive) can be set using styles. The animation is done using AnimateProperty with a slight delay, and the easing function can be set in the styles.

In our next post we will use Flex 4 to create the exact same component and wait for it… the source will be included. This version will contain user interaction and we may even go as far as adding multi-touch events.

More to come…

Flex, PNGs, and PDFs…

At ThoughtFaqtory we are continually encouraged to think outside of the box when challenges are presented.  A challenge was set recently by a pretty innocuous requirement from one of our clients.

This project required me to implement functionality that would allow the end user to export groups of images to PDF. The PDF needed to be high quality, 300 ppi (pixels per inch). After some searching I came across the AlivePDF website which appeared to be perfect for my requirements. Initially after using AlivePDF to generate a few PDFs, I couldn’t believe how easy it was to use and I thought that I had found Utopia. My joy however was short lived after the following error message was received:

error

AlivePDF had no alpha channel support for PNGs and the PNG encoder provided by Adobe always returns a PNG with an alpha channel. Even if you turned off the transparency you will get back a 32 bit ARGB PNG.

I continued searching for someone who had a method of successfully removing the alpha channel but my search proved fruitless. Hence I decided to do my own research into PNGs and found the following:

A valid PNG consists of:

PNG signature
IHDR chunk (only one)
IDAT chunk (one or more)
IEND chunk (only one)

The PNG signature:

89 50 4E 47 0D 0A 1A 0A.

The IHDR image header:

Width: 4 bytes
Height: 4 bytes
Bit depth: 1 byte
Colour type: 1 byte
Compression method: 1 byte
Filter method: 1 byte
Interlace method: 1 byte

The IDAT chunks contain the image data.
The IEND chunk marks the end of the PNG.

The colour type under the IHDR chunk needs to be mentioned here as that is where the image type is defined.

Image type Colour type
Greyscale 0
True colour 2
Indexed colour 3
Grey scale with alpha 4
True colour with alpha 6

After familiarizing myself with PNGs, I revisited Adobe’s PNGEncoder.as class again and eventually managed to make certain changes that allowed the removal of the alpha channel all together.

After all the research this ended up being a lot easier than I had originally thought, all that I needed to do was change the colour type and extract the RGB values. Adobe’s colour type was 6 (True colour with alpha) I changed it to 2 (True colour only). Next I needed to isolate and extract the RGB values, this was done with a bitwise right shift operation and a bitwise AND operation.

// Build IHDR chunk
 
var IHDR:ByteArray = new ByteArray();
IHDR.writeInt(w);
IHDR.writeInt(h);
IHDR.writeUnsignedInt(0x08020000); // True colour (no alpha)
IHDR.writeByte(0);
writeChunk(png, 0x49484452, IHDR);
 
// Isolate RGB values
 
for (var j:int = 0; j < w; j++)
{
	p = img.getPixel(j, i);
	IDAT.writeByte(p >> 16 & 0xFF);
	IDAT.writeByte(p >> 8 & 0xFF);
	IDAT.writeByte(p & 0xFF);
}

The changes implemented resulted in the removal of the Alpha channel which allowed me to successfully embedded the encoded PNG image into a PDF with AlivePDF. This was the first of many problems I had working with PDFs, maybe you will get to read about the others in the not too distant future. Attached below is a sample application that will embed a PNG into a PDF.

[kml_flashembed publishmethod="static" fversion="10.0.0" movie="http://thoughtfaqtory.com/blog/wp-content/uploads/2009/10/pngalpha1.swf" width="630" height="400" targetclass="flashmovie" ]Get Adobe Flash player

[/kml_flashembed]

Page 3 of 41234