What’s this “1080p” thing?

February 18th, 2010

By Oliver Merk – Principal Consultant

I get asked this question a lot. From clients wishing to display their Flex applications on a wide screen display to friends and family looking to purchase a new LCD television for the livingroom.

The short answer is that it all has to do with resolution.

Video resolution is like sandpaper; the more little grains you pack together, the smoother the surface. It’s the same with your TV screen or computer monitor. The more pixels that can be packed into each inch of the screen, the smoother and clearer images, video and text will appear.

You probably already know that a 1600×1200 computer monitor is subjectively “better” than a 640×480 screen.

Take a typical large sporting venue as an example. You’ve seen jumbo-sized screens attempt to display images and video. In years past, the picture quality was terrible; you could actually see the red, green and blue dots that made up the picture. If you squinted and used your imagination, you could possibly make out the was being displayed, especially if it involved text.

Nowadays, these large screens are a lot better. Why? Because the technology has evolved to allow the pixels (picture elements) to be packed closer together. Therefore, more pixels per inch; therefore higher resolution and image quality.

So what’s this got to do with the big signs at Fred’s Bargain TVs & Food Emporium advertising 1080p televisions?

Well, television screens work the same way as the screens in the large sports arenas. In the old days (the early 1990s), you’d be lucky to get a television to display more than more than a couple of hundred pixels in height.

Why hi-def is so cool

With the introduction of DVDs came the first wave of high definition television screens, which could display 480 pixels vertically. Wow! I remember being blown away at the clarity of these first attempts to improve our viewing pleasure.

But television manufacturers never stand still. A few years later, we were introduced to televisions with 720 pixels vertically. But if DVDs were only 480, why would you need a 720 set? Because the broadcasters were also getting into the game and allowing viewers to receive their shows at 720.

And of course, everything evolved again to where we now have televisions capable of displaying broadcast-quality video at 1080 pixels vertically and 1920 pixels horizontally. Broadcast-quality because the broadcasters now deliver at this resolution.

But what about that p and i thing?

To this point, I haven’t used the infamous “p” or “i” after these vertical pixel counts.

These letters, after the vertical resolution, such as 480i, 720p, 1080i or 1080p, refer to the way the television signal is drawn upon the screen.

Traditional television sets would fill odd-numbered lines of the screen (1, 3, 5, etc.) and then go back to the top and fill in the even-numbered lines (2, 4, 6, etc.). This happened quickly enough to fool your brain into thinking you were seeing smooth motion; around 30 frames per second.

This technique is known as interlacing the signal. The “i” for interlaced in 1080i.

With the advent of faster displays, this trick is no longer necessary; screens can now draw each line onto the screen progressively (1, 2, 3, 4, 5, etc.). So the “p” is for progressive.

The only times you may notice the difference between an interlaced and progressive display is during a fast-moving sporting event or a horizontal pan across a landscape. An interlaced signal will likely appear to stutter, skip or leave short motion trails; a progressive one will look a lot smoother.

At this point, the best display you can get at your typical electronics store is 1080p. But the screen sizes could be 40” and higher. So a 40” 1080p is going to look a lot sharper up close than a larger screen, simply because of how tightly packed the pixels are. The larger screen still look great, especially from a bit farther away.

So if you’re purchasing a new television for the livingroom, you may find that you get a better viewing experience from a 46” than a 72” (although your neighbors won’t be as jealous).

I hope that clears things up a bit. Now go and explain it to your friends and family.

Tags: ,
Posted in AIR, Flex, General Knowledge | No Comments »

What’s New in Flex 4 – Part I

February 18th, 2010

By Oliver Merk, Principal Consultant

Adobe’s Flex 4 platform and tools are expected to be released in the first half of 2010.

Of note:

  1. Flex Builder has been re-christened Flash Builder to promote the Flash platform.

  2. The Flex SDK has been turned on its head with the introduction of the Spark component set; skinning will never be the same (thank goodness!).

  3. A new product called Flash Catalyst CS5 will finally give designers a chance to realize their creations within the Flex framework.

In this entry, I’ll start with the theme that will have the most impact on everyone on the typical RIA team.

Designer/Developer Workflow

Adobe Flash Catalyst joins Photoshop, Illustrator and Fireworks in the RIA designer’s toolbox.

Originally a lot of us Flex developers got very excited when this new product was announced as Thermo back at Adobe MAX 2007 in Chicago. But Catalyst is distinctly not aimed at Flex application development as you might currently understand it.

Rather, Catalyst allows designers to do three critical things, which I’ll detail below:

  1. Easily import assets from the above mentioned applications for use in a Flex/AIR application.

  2. Quickly prototype an application for demonstration purposes.

  3. Create fully skinned components which can be delivered to a Flex developer for integration into a working application.

Let’s dig into these a bit further.

What the FXG!

Most professional designers work in Photoshop, Illustrator or the two in combination. Being Adobe products, it’s not hard to guess that the integration between Catalyst and these stalwarts is tight.

With Catalyst, designers tasked with creating Flex application GUIs can begin where they’re comfortable, in Photoshop, Illustrator or, my personal favorite, Fireworks.

The native formats of these programs will be importable into Catalyst as a library of assets. Files such as .PSD, .AI and .PNG can not only be imported into Catalyst, but their layers will be maintained as well.

Now the first question an astute designer will ask is, what if I want to go back to Photoshop and tweak my artwork?

Known as round-tripping, this feature is already incorporated into the latest beta builds of Catalyst. Right within Catalyst, the designer will choose to edit an asset and the appropriate program will open with the artwork ready to edit. Upon saving, the designer returns to Catalyst, which has remained open, and sees the changes immediately on screen.

But there’s another way to move assets around: using the new FXG file format.

This new format is similar to the well-intentioned Open Source SVG format we’ve heard about for many years. FXG is an archive format which contains all the information (MXML code and binary assets) required to import and export Flex components and assets using Photoshop, Illustrator, Fireworks, Catalyst. The new Flash Builder 4 can also open FXG files as imported projects.

Show me!

One of the greatest challenges in creating RIAs for clients is getting them to visualize what the completed application might look like. Currently, your options include using Flex Builder’s design mode (still hard to apply complex skinning) or mocking up something in Open Office Impress or the ubiquitous Powerpoint, which are never very accurate.

With Catalyst, designers will be able to quickly prototype not only the visual aspects of the application, but most of its behavior as well. For example, lists can be skinned and populated with temporary data, with minimal effort, so that a client can see the component as it will appear in the final application.

In fact, Catalyst is so easy to use that I wonder how long it will be before sales people realize that they can use it to help clients visualize an application and close the deal a lot quicker. I recommend Catalyst as a sales and marketing tool for those who are tasked with demonstrating the power of RIAs to potential customers but don’t have the time or resources to enlist a designer or developer to create a mock-up.

What About Us Programmers?

I said earlier that Catalyst is not a hard core developer tool and is clearly geared towards developers.

However, it will still make developers’ lives easier in several ways:

  1. For those tasked with implementing a design and given a Photoshop file, Catalyst will make short work of converting the original artwork into usable components which can be imported into Flash Builder. If you’re a Flex developer who does a lot of design implementation, Catalyst will be a game-changer for you.

  2. Catalyst gives the designer the tools to define not only the skin, but the behavioral characteristics of components. Separate components can be composed in Catalyst and delivered to the developer for integration into a Flex or AIR application. These components can be delivered as FXGs or as SWC libraries.

Here’s another great reason to check out Catalyst. I could argue that the new Flex 4 SDK is almost a whole new platform compared to Flex 3. There’s going to be a learning curve when you first try to grasp how components are composed and while investigating all the cool new features in this release. Because Catalyst generates MXML code, a developer could study this as a good introduction to how things will fit together in the new framework.

Smells good! Is it baked yet?

Catalyst is in its late beta stage and is likely to be released in the first half of 2010. While round-tripping between Catalyst and the graphics applications is almost complete, the round trip between Catalyst and Flash Builder may have to wait for a point upgrade; though I really hope they get it in for the first release.

But that shouldn’t stop you from downloading the latest beta and checking out Catalyst for yourself. You can learn more about it and download a beta from http://labs.adobe.com/technologies/flashcatalyst/.

Have fun!

Adobe Flash Catalyst Beta

Adobe Flash Catalyst Beta

Tags: , , ,
Posted in AIR, Catalyst, Flash, Flex, actionscript | No Comments »

Chad Upton

Secret Key Encryption Options in the as3crypto Library

February 15th, 2010

Written By: Chad Upton

The as3crypto library is an open source ActionScript 3 encryption library available from google code.

In an earlier post I demonstrated how to take plaintext and encrypt it into an unreadable file, then decrypt it so you could read it again. This is very useful in Flash or Flex projects where you need to hide data from the user, either because it’s sensitive information such as software licenses or personal info, or because tampering with it could cause your application to function incorrectly (ex. application settings).

In that post, I used the AES encryption algorithm but I promised a future post that talked about why. In this post, I want to revisit the secret key encryption choices in as3crypto, breaking down the choices, their strengths and weaknesses.

This guide should be used for general knowledge or to narrow down encryption methods you should consider for your project. Before making a final decision, you should deeply investigate that method to ensure it is right for your implementation.

In as3crypto, the secret key encryption choices are DES, 3DES, RC4, XTEA, AES and BlowFish.

DES

DES stands for “Data Encryption Standard.” It was developed to improve the security of US government computer systems and was completed in 1974. It has a fairly short key at 56 effective bits (8 of the 64 bits are used as a checksum and not encryption). Many encryption methods have been developed since then; it is the second fastest compared to other methods in as3crypto but it has a large number of vulnerabilities.

It should not be used unless absolutely necessary for legacy support, even then you should be considering migration to a modern cipher. As an interesting side note, there are also rumors of an NSA backdoor in this algorithm.

3DES

3DES, or “triple DES”, was developed in the late 90s as a simple way to make DES stronger and more resistant to brute force attacks (trying every possible key). It’s called “3DES” because it applies the DES algorithm three times. As you can probably guess, it’s about three times slower than DES. It does provide more security, but it’s not an ideal choice when considering what else is available. It may be required to support legacy systems.

RC4

RC4 is a fairly modern and widely used cipher method. It was developed in 1987 by Ron Rivest of RSA security (RC4 stands for “Rivest Cipher 4”). Many of you probably use this cipher everyday without realizing it. Secure website (SSL) certificates use this cipher and some wifi encryption systems use it too. It is not without its share of weaknesses, especially in certain implementations. For that reason, it has been completely deprecated by some platforms, including Microsoft .NET.

When implemented correctly, RC4 can offer a fair amount of security but there are better options available in most cases. That said, there is one case where it should at least be considered: when you have tens of megabytes of data or more to encrypt. RC4 is by far the fastest cipher method in the as3crypto library. It is about 4.5 times faster than Blowfish (third fastest in library), but keep in mind it is slightly less secure than Blowfish.

XTEA

XTEA has fewer vulnerabilities than RC4, so it is slightly more secure. But, this is the slowest encryption method in the as3crypto library. Frankly, the only case where I could see this being used in ActionScript is when you’re interacting with other systems that use XTEA encryption. If you’re developing a new system, choose one of the following methods.

AES

AES is one of the best general purpose secret key encryption methods in as3crypto. Like I mentioned above, there may be cases where another method is more appropriate, but AES is going to be the method of choice in many cases, particularly because many other systems that your application may interact with will use it.

It has a lot of credibility because it is the standard encryption used by the US government and the first publically available cipher approved by the NSA. It is fast and secure, although it does have some known weaknesses that can usually be protected by prevented brute force attacks. This method should not be overlooked.

Blowfish

Blowfish was developed in 1993 by Bruce Schneier, who has developed many other cryptographic algorithms, written several articles and books on security, and also publishes a free monthly security newsletter called CRYTPO-GRAM, which I subscribe to and recommend.

In as3crypto, Blowfish 256 performs more than twice as fast as AES 256. It is also capable of using a 448 bit key, although the as3crypto implementation uses a 256 bit key. When compared to AES 256, Blowfish gives you slightly better security since it has no known cryptanalysis. It’s may not be as widely used as AES, but for great speed and security, it should not be overlooked. For many projects, this is an excellent choice of encryption.

Conclusion

If you don’t have any legacy system requirements, you should start by looking at Blowfish or AES encryption. One of these is likely going to meet your requirements, especially if you’re working with less than a megabyte of data. With large amounts of data these two may be too slow, so be sure to look at RC4 in more detail — it’s really fast. All of the others are likely going to be used because you’re working with a legacy system that requires them.

Tags: , , , , , , ,
Posted in AIR, Flash, Flex | No Comments »

dereks

XMLSocket Benchmarking with Flex and Java

January 13th, 2010

By: Derek Santos

Socket driven applications have several benefits. The benefits include real-time data interchange between the Client and Server, and giving the developer more control over how the data is sent.  This post will cover some basics about sending xml data over sockets, and how the socket performs with large data sets.

Setting Up a Socket Server

The first thing you need to do is create a socket server.  This can be done with Java via the ServerSocket class. Please refer to the attachments to see how this is done. In this example, we will be connecting to a socket on port 5678.  It’s important to note that since Flash Player 9.0.124.0, a policy file is required to be served by the socket.  You can serve a policy file on port 843, which will allow any subsequent socket connections for any port on that host. A Policy File server is also provided in the attachments. In this example, the Java Socket Server simply responds to a request and returns “n” number of xml rows back to the client. The Socket Server will return the data in intervals, rather than all at once. The purpose of this example is to determine at what interval you can achieve the best performance.

Below is the xml we will be expecting from the server.

<person>
    <id>1</id>
    <name>Derek Santos</name>
    <company>New Toronto Group</company>
</person>

Once our Socket Server is up, we can make requests to the server from the Client.  To do this, you can use the XMLSocket class.

var socket:XMLSocket = new XMLSocket();
socket.connect(‘localhost’, 5678);

This will an attempt to connect to the socket server we have created.  We also need to listen for the connect event of the socket, so that we can begin sending requests.

socket.addEventListener(Event.CONNECT, connectHandler);
private function connectHandler(event:Event):void {
socket.send(“my first socket request”);
}

Although it is an XMLSocket, you are not required to send data in XML format.  In fact, the server does not know the difference between an xml socket and a regular socket connection.  You can handle results from the server by adding an event listener on the socket for the DataEvent.

socket.addEventListener(DataEvent.DATA, dataHandler);

XMLSocket Test Results

The screenshot below shows a simple Flex application which asks the server for XML data.  First it asks for 10,000 rows, then 100,000 and then 1,000,000 rows.  The chart below represents the time it took to retrieve all of the rows(y axis), and how many rows at a time were returned(x axis).

Benchmarking Results

This test was run on dual-core processor with 2GB of ram.  Interestingly, it looks like the optimal setting is around 32 rows per result.

You can download all of the source for this example below.

Download Source Code

Tags: ,
Posted in Flex, Java | No Comments »

Chad Upton

Encryption and Decryption with as3crypto Library

December 17th, 2009

By: Chad Upton

The as3crypto library is packed with the most common encryption and decryption algorithms. In this post, I want to demonstrate how you can use the as3crypto library to encrypt and then decrypt some data that is useful in a variety of real world scenarios.

Encryption is the process used to turn plain text into unreadable information.  Decryption is the process of turning unreadable encrypted information back it into plain text.  Both operations require an encryption algorithm and key.  Anyone who has the key and algorithm can convert the encrypted information back into plain text.  This is useful when storing data or transferring data to a place where you don’t want anyone to read it.

There are half a dozen secret key encryption algorithms in as3crypto.  Some of these algorithms are better than others, and others are provided because they are common in legacy systems and may be needed for compatibility. I’m going to cover the various algorithms in a future post; for this post I’ll use AES since it is a fast and strong algorithm.

Let’s say you want to write data to an encrypted file.  Perhaps, you want to store application settings or software license info in a file, but you don’t want anyone to read it and possibly compromise your licensing system.

Follow the steps below to make an AIR app that will encrypt some data and write it to a file.

Figure 1
Figure 1
  1. Start by creating a new AIR project in Flex Builder
  2. Name the main application file Encrypt.mxml (Figure 1)
  3. Download the as3crypto library (swc file) from the project on google code
  4. Place as3crypto.swc in your AIR project’s libs folder (Figure 2)
  5. Copy the code below and replace everything in Encrypt.mxml with it
Figure 2
Figure 2
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="340" height="150" showStatusBar="false" verticalAlign="middle">

<mx:Script>
<![CDATA[
import com.hurlant.crypto.symmetric.AESKey;
import mx.controls.Alert;
import com.hurlant.crypto.symmetric.DESKey;
import com.hurlant.util.Hex;
import mx.charts.CategoryAxis;

private static var stream:FileStream;
private static var file:File;

private function encrypt():void
{

file = File.desktopDirectory.resolvePath("encrypted.txt");

//open a filestream to write to file
stream = new FileStream();
stream.open( file, FileMode.WRITE );

//define the encryption key
var key:ByteArray        = Hex.toArray("NewTorontoGroup");

//put plaintext into a bytearray
var plainText:ByteArray    = Hex.toArray(Hex.fromString(txtInput.text));

//set the encryption key
var aes:AESKey            = new AESKey(key);

//encrypt the text
aes.encrypt( plainText );

//write encrpted text to the file
stream.writeMultiByte( Hex.fromArray(plainText), "utf-8" );

//provide confirmation
Alert.show("Text written to file on desktop","Success");

//close the stream
stream.close();

}

]]>
</mx:Script>

<mx:TextInput id="txtInput" text="Enter text to be encrypted." />

<mx:Button label="Create File" click="encrypt()" />

</mx:WindowedApplication>

Run the Encrypt app.  Type some text into the Text Input and click the Create File button. A file called “encrypted.txt” will be written to your desktop. Open the file and look at your text in its encrypted form.  If you don’t see anything, check your encrypt application.  Try copying the code and clicking the Create File button again. Now we’ll create an app to decrypt the file.

  1. Start by creating a new MXML Application
  2. Name the file Decrypt.mxml (Figure 3)
  3. Copy the code below and replace everything in Decrypt.mxml with it
Figure 3
Figure 3
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()" showStatusBar="false">

<mx:Script>
<![CDATA[
import com.hurlant.crypto.symmetric.AESKey;
import com.hurlant.crypto.symmetric.DESKey;
import com.hurlant.util.Hex;
import mx.managers.DragManager;

private function init():void{
addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, dragEnterHandler);
addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, dragDropHandler);
}

private function dragEnterHandler( event:NativeDragEvent ):void
{

DragManager.acceptDragDrop(this);
}

private function dragDropHandler( event:NativeDragEvent ):void
{
//get the file
var file:File = File(event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT)[0]);

//create a FileStream for the file
var fileStream:FileStream = new FileStream();

//open the file to read
fileStream.open(file, FileMode.READ);

//read the file into a string
var encryptedText:String = fileStream.readUTFBytes(fileStream.bytesAvailable);

//close the file
fileStream.close();

//define encryption key
var key:ByteArray = Hex.toArray("NewTorontoGroup");

//set key
var aes:AESKey = new AESKey(key);

//put encrypted text into ByteArray
var decryptedBytes:ByteArray = Hex.toArray( encryptedText );

//decrypt the bytearray
aes.decrypt( decryptedBytes );

//convert the decrypted bytearray to a string and display
txtDecrypted.text += decryptedBytes.toString();

}

]]>
</mx:Script>

<mx:TextArea id="txtDecrypted" text="" wordWrap="true" width="100%" height="100%" />

</mx:WindowedApplication>

Run the Decrypt app.  Minimize Flex builder and drag the “Encrypted.txt” file from your desktop and drop it on the Decrypt app.  You should see your the encrypted text displayed as decrypted plain text. This illustrated the basic mechanics required to encrypt and decrypt text in ActionScript3 using the as3crypto library.

New Toronto Group

Posted in AIR, Flex | 3 Comments »

Tim

Wordpress Lessons Learned

December 10th, 2009

We decided to implement a blog on our web site using the popular package Wordpress, but we didn’t really want to use their hosting services.  In the process of integrating with our existing site we learned a few lessons.

  • We wanted to use Wordpress as a light Content Management System for News and Events.  The tags that can be applied to posts helped us retrieve only news or events, for example get_posts(’tag=News’,'numberposts=3′).  We didn’t want to use Categories because we wanted to save them for our technical content.
  • On the main blog page we wanted to exclude News and Events, so we used  query_posts(array(’tag__not_in’ => array(DB_NEWS_TAG_ID, DB_EVENTS_TAG_ID))).  We defined the TAG_IDs and wrote our own SQL to eliminate some joins and only retrieve the few fields that we needed.
  • For Events on our home page we wanted future events to appear in chronological order descending down the page followed by past events in reverse chronological order.  We created a metakey, ‘event_date’, to give us something to sort on and used query_posts(’meta_key=event_date&tag=HomePage&numberposts=5&orderby=metavalue&order=ASC’), though we later wrote our own SQL.
  • We wanted to eliminate the News and Events from the Recent Posts section of the Sidebar, so we modified default-widgets.php with the same tag__not_in syntax.
  • Our site uses a lot of css styling and we wanted the look and feel of the blog to be the same, so we created our own theme by copying the default and cutting it back to the bare minimum and then adding back in just the styles we needed.  One of our instructors who teaches Dreamweaver CS4: Website Development, one of the Adobe Training courses that we offer, and knows a lot about CSS gave us some advice on how to do this.
  • In the end we found that our raw sql for reading content did not fix up the html sufficiently and we went back to using the Wordpress rendering functions.
  • We had to define our smtp server in wp-config, a step we missed in the Wordpress install instructions.
  • We also had to give write permissions to the wp-content/uploads directory.

All in all we have found implementing Wordpress to have been an interesting learning experience, especially since the php it uses is a long way from the Adobe Flex and Coldfusion that we use and teach and know inside out.

Posted in Wordpress | No Comments »