Develop an Encryption App Using Flash and MDM Zinc

Step 1: Brief Overview

Using the mdm.Encryption class and its methods, we will make use of a simple interface to obtain the file, text and key to encrypt.

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 500x300 px.

Step 3: Interface

A simple interface will work very well in this application, so i'm not going to detail its creation.

Four buttons are present in the start screen, a Texfield and an icon is used to display its function. There is also another Texfield in the bottom of the stage that will display a message when the encryption/decryption is completed. You can see the instance names in the image.

This is the second view used in the movie. It's a MovieClip named "TextView" wich will be called from ActionScript (remember to check the box), a big TextField named "encryptText" and the other one named "encryptKey". In the Encrypt File sections, the "encryptText" field MUST have a full path, you can't implement a browsing method to get a full path for security reasons.

There are also two buttons, "encryptionButton", and a button that will be called with ActionScript to go back to the start screen, it's called "BackButton" remember to check the "Export for ActionScript" when converting to MovieClip.

As you can see, the interface is very simple. Remember that if you have doubts on the instance names you can check the source.

Step 4: The Code

We'll use a single class in this application.

Create a new ActionScript file and save it as "Main.as".

Step 5: Necessary Classes

Let's first import the classes we'll need.

view plaincopy to clipboardprint?

1. package
2. {
4. import mdm.*; //The mdm classes, you must import this to use the mdm methods and properties
5. import flash.display.Sprite;
6. import flash.events.MouseEvent;
7. import fl.transitions.Tween;
8. import fl.transitions.easing.Strong;
9. import fl.transitions.TweenEvent;

package  {   import mdm.*; //The mdm classes, you must import this to use the mdm methods and properties  import flash.display.Sprite;  import flash.events.MouseEvent;  import fl.transitions.Tween;  import fl.transitions.easing.Strong;  import fl.transitions.TweenEvent; 

Step 6: Declaring and Extending the Class

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

view plaincopy to clipboardprint?

1. public class Main extends Sprite
2. {

public class Main extends Sprite {

Step 7: Variables

These are the variables we'll use, explained in the comments.

view plaincopy to clipboardprint?

1. var tween:Tween; //A tween object to animate
2. var textView:TextView; //The TextView object, this is an instance of the TextView MovieClip
3. var back:BackButton; //An instance of the BackButton we created before

var tween:Tween; //A tween object to animate var textView:TextView; //The TextView object, this is an instance of the TextView MovieClip var back:BackButton; //An instance of the BackButton we created before

Step 8: Extending the Class

We're going to use MovieClip specific methods and properties so we extend using the MovieClip Class. Extending using the Sprite Class won't work.

view plaincopy to clipboardprint?

1. public class Main extends MovieClip
2. {

public class Main extends MovieClip {

Step 9: Constructor Function

This is the main function.

view plaincopy to clipboardprint?

1. public function Main():void
2. {
3. mdm.Application.init(this, onInit);//Initialises {mdm}Script™. This is only required for applications programmed in ActionScript 3.
4. }

public function Main():void {  mdm.Application.init(this, onInit);//Initialises {mdm}Script™. This is only required for applications programmed in ActionScript 3. } 

Step 10: Init Function

This function is executed when the mdm Script starts. It just calls a function to add some button listeners.

view plaincopy to clipboardprint?

1. private function onInit():void
2. {
3. addButtonListeners();//Adds the listeners to the main four buttons
4. }

private function onInit():void {  addButtonListeners();//Adds the listeners to the main four buttons }

Step 11: Add Button Listeners

This is the function that adds the listeners.

view plaincopy to clipboardprint?

1. private function addButtonListeners():void
2. {
3. efButton.addEventListener(MouseEvent.MOUSE_UP, encryptFileHandler);//Encrypt File listener
4. etButton.addEventListener(MouseEvent.MOUSE_UP, encryptTextHandler);/Encrypt Text listener
5. dfButton.addEventListener(MouseEvent.MOUSE_UP, decryptFileHandler);//Decrypt File listener
6. dtButton.addEventListener(MouseEvent.MOUSE_UP, decryptTextHandler);//Decrypt Text listener
7. }

private function addButtonListeners():void {  efButton.addEventListener(MouseEvent.MOUSE_UP, encryptFileHandler);//Encrypt File listener  etButton.addEventListener(MouseEvent.MOUSE_UP, encryptTextHandler);/Encrypt Text listener  dfButton.addEventListener(MouseEvent.MOUSE_UP, decryptFileHandler);//Decrypt File listener  dtButton.addEventListener(MouseEvent.MOUSE_UP, decryptTextHandler);//Decrypt Text listener }

Step 12: Remove Button Listeners

The listeners will be removed when one of the buttons is clicked.

view plaincopy to clipboardprint?

1. private function removeButtonListeners():void
2. {
3. efButton.removeEventListener(MouseEvent.MOUSE_UP, encryptFileHandler);
4. etButton.removeEventListener(MouseEvent.MOUSE_UP, encryptTextHandler);
5. dfButton.removeEventListener(MouseEvent.MOUSE_UP, decryptFileHandler);
6. dtButton.removeEventListener(MouseEvent.MOUSE_UP, decryptTextHandler);
7. }

private function removeButtonListeners():void {  efButton.removeEventListener(MouseEvent.MOUSE_UP, encryptFileHandler);  etButton.removeEventListener(MouseEvent.MOUSE_UP, encryptTextHandler);  dfButton.removeEventListener(MouseEvent.MOUSE_UP, decryptFileHandler);  dtButton.removeEventListener(MouseEvent.MOUSE_UP, decryptTextHandler); }

Step 13: Button Animation

An animation will move the buttons from the stage to hide them.

view plaincopy to clipboardprint?

1. private function animateButtons():void
2. {
3. /* Moves the buttons to the right */
5. tween = new Tween(efButton,"x",Strong.easeOut,efButton.x,stage.stageWidth + efButton.width,1,true);
6. tween = new Tween(etButton,"x",Strong.easeOut,etButton.x,stage.stageWidth + etButton.width,1,true);
7. tween = new Tween(dfButton,"x",Strong.easeOut,dfButton.x,stage.stageWidth + dfButton.width,1,true);
8. tween = new Tween(dtButton,"x",Strong.easeOut,dtButton.x,stage.stageWidth + dtButton.width,1,true);
9. }

private function animateButtons():void {  /* Moves the buttons to the right */   tween = new Tween(efButton,"x",Strong.easeOut,efButton.x,stage.stageWidth + efButton.width,1,true);  tween = new Tween(etButton,"x",Strong.easeOut,etButton.x,stage.stageWidth + etButton.width,1,true);  tween = new Tween(dfButton,"x",Strong.easeOut,dfButton.x,stage.stageWidth + dfButton.width,1,true);  tween = new Tween(dtButton,"x",Strong.easeOut,dtButton.x,stage.stageWidth + dtButton.width,1,true); }       

Step 14: File Encryption Handlers

These functions call the File encryption/decryption depending on the button clicked.

view plaincopy to clipboardprint?

1. private function encryptFileHandler(e:MouseEvent):void
2. {
3. showTextView();//Shows the "TextView"
5. textView.encryptionButton.addEventListener(MouseEvent.MOUSE_UP, encryptFile);//Adds the listener to the Encryption Button
6. }
8. private function decryptFileHandler(e:MouseEvent):void
9. {
10. showTextView();
12. textView.encryptionButton.txt.text = "Decrypt"; //Changes the Encryption Button textfields
13. textView.encryptionButton.txtLP.text = "Decrypt";
15. textView.encryptionButton.addEventListener(MouseEvent.MOUSE_UP, decryptFile);
16. }

private function encryptFileHandler(e:MouseEvent):void {  showTextView();//Shows the "TextView"   textView.encryptionButton.addEventListener(MouseEvent.MOUSE_UP, encryptFile);//Adds the listener to the Encryption Button }  private function decryptFileHandler(e:MouseEvent):void {  showTextView();   textView.encryptionButton.txt.text = "Decrypt"; //Changes the Encryption Button textfields  textView.encryptionButton.txtLP.text = "Decrypt";   textView.encryptionButton.addEventListener(MouseEvent.MOUSE_UP, decryptFile); }

Step 15: File Encryption/Decryption

These functions use the mdm.Encrypt class to Encrypt/Decrypt a file, obtained by writing a full path in the big TextField, and writing a key in the small one.

Editor's note: I'm afraid the ActionScript in this step is causing our syntax highlighter to trip Firefox up (this sometimes happens and I've no idea why). For now, it's best you download it to have a look. Sorry for the inconvenience.

Step 16: Text Encryption Handlers

These functions call the Text encryption/decryption depending on the button clicked.

view plaincopy to clipboardprint?

1. private function encryptTextHandler(e:MouseEvent):void
2. {
3. showTextView();
5. textView.encryptionButton.addEventListener(MouseEvent.MOUSE_UP, encryptText);
6. }
8. private function decryptTextHandler(e:MouseEvent):void
9. {
10. showTextView();
12. textView.encryptionButton.txt.text = "Decrypt";
13. textView.encryptionButton.txtLP.text = "Decrypt";
15. textView.encryptionButton.addEventListener(MouseEvent.MOUSE_UP, decryptText);
16. }

private function encryptTextHandler(e:MouseEvent):void {  showTextView();   textView.encryptionButton.addEventListener(MouseEvent.MOUSE_UP, encryptText); }  private function decryptTextHandler(e:MouseEvent):void {  showTextView();   textView.encryptionButton.txt.text = "Decrypt";  textView.encryptionButton.txtLP.text = "Decrypt";   textView.encryptionButton.addEventListener(MouseEvent.MOUSE_UP, decryptText); } 

Step 17: Text Encryption

These functions use the mdm.Encrypt class to Encrypt/Decrypt a String, obtained by writing text in the big TextField, and writing a key in the small one.

view plaincopy to clipboardprint?

1. private function encryptText(e:MouseEvent):void
2. {
3. if (textView.encryptText.length != 0 && textView.encryptKey.length != 0)
4. {
5. /* mdm.Encryption.encryptString(key:String, dataToEncrypt:String, [oldMethod:Boolean = true]):String */
7. textView.encryptText.text = mdm.Encryption.encryptString(textView.encryptKey.text,textView.encryptText.text,false);
8. message.text = "Encryption Completed";
9. }
10. else
11. {
12. trace("Please fill all fields");
13. }
14. }
16. private function decryptText(e:MouseEvent):void
17. {
18. if (textView.encryptText.length != 0 && textView.encryptKey.length != 0)
19. {
20. /* mdm.Encryption.decryptString(key:String, dataToDecrypt:String, [oldMethod:Boolean = true]):String */
22. textView.encryptText.text = mdm.Encryption.decryptString(textView.encryptKey.text,textView.encryptText.text,false);
23. message.text = "Decryption Completed";
24. }
25. else
26. {
27. trace("Please fill all fields");
28. }
29. }

private function encryptText(e:MouseEvent):void {  if (textView.encryptText.length != 0 && textView.encryptKey.length != 0)  {   /* mdm.Encryption.encryptString(key:String, dataToEncrypt:String, [oldMethod:Boolean = true]):String */    textView.encryptText.text = mdm.Encryption.encryptString(textView.encryptKey.text,textView.encryptText.text,false);   message.text = "Encryption Completed";  }  else  {   trace("Please fill all fields");  } }  private function decryptText(e:MouseEvent):void {  if (textView.encryptText.length != 0 && textView.encryptKey.length != 0)  {   /* mdm.Encryption.decryptString(key:String, dataToDecrypt:String, [oldMethod:Boolean = true]):String */    textView.encryptText.text = mdm.Encryption.decryptString(textView.encryptKey.text,textView.encryptText.text,false);   message.text = "Decryption Completed";  }  else  {   trace("Please fill all fields");  } }

Step 18: Text View

The TextView is the view that appears when one of the four main buttons are clicked, here's the code that brings it up.

view plaincopy to clipboardprint?

1. private function showTextView():void
2. {
3. textView = new TextView();
5. removeButtonListeners();
7. animateButtons();
9. addBackButton();
11. textView.x = stage.stageWidth / 2;
13. addChild(textView);
15. tween = new Tween(textView,"y",Strong.easeOut,stage.stageHeight + textView.height,stage.stageHeight / 2,1,true); //Moves this view up
16. }

private function showTextView():void {  textView = new TextView();      removeButtonListeners();   animateButtons();      addBackButton();   textView.x = stage.stageWidth / 2;   addChild(textView);   tween = new Tween(textView,"y",Strong.easeOut,stage.stageHeight + textView.height,stage.stageHeight / 2,1,true); //Moves this view up }

Step 19: Back Button

The Back button shows up when the TextView is active. When pressed, it returns the buttons to the screen and removes the TextView and itself. It also clears the "message" TextField.

view plaincopy to clipboardprint?

1. private function addBackButton():void
2. {
3. back = new BackButton();
4. back.x = back.width;
5. back.y = stage.stageHeight / 2;
7. addChild(back);
9. back.addEventListener(MouseEvent.MOUSE_UP, backHandler);
10. }
12. private function backHandler(e:MouseEvent):void
13. {
14. message.text = "";
15. back.removeEventListener(MouseEvent.MOUSE_UP, backHandler);
17. removeChild(textView);
19. tween = new Tween(efButton,"x",Strong.easeOut,efButton.x,140,1,true);
20. tween = new Tween(etButton,"x",Strong.easeOut,etButton.x,360,1,true);
21. tween = new Tween(dfButton,"x",Strong.easeOut,dfButton.x,140,1,true);
22. tween = new Tween(dtButton,"x",Strong.easeOut,dtButton.x,360,1,true);
24. removeChild(back);
26. addButtonListeners();
27. }

private function addBackButton():void {  back = new BackButton();  back.x = back.width;  back.y = stage.stageHeight / 2;      addChild(back);      back.addEventListener(MouseEvent.MOUSE_UP, backHandler); }    private function backHandler(e:MouseEvent):void {  message.text = "";  back.removeEventListener(MouseEvent.MOUSE_UP, backHandler);      removeChild(textView);      tween = new Tween(efButton,"x",Strong.easeOut,efButton.x,140,1,true);  tween = new Tween(etButton,"x",Strong.easeOut,etButton.x,360,1,true);  tween = new Tween(dfButton,"x",Strong.easeOut,dfButton.x,140,1,true);  tween = new Tween(dtButton,"x",Strong.easeOut,dtButton.x,360,1,true);      removeChild(back);      addButtonListeners(); }

Step 20: Document Class

Go back to the Fla and in the Properties Panel, Class textfield add "Main". This will link the Main class as the Document Class.

Step 21: Zinc

Now, testing your new application will result in a series of erros resulting from the use of the MDM Classes. To fix that and make your Encryption work we have to get Multidmedia Zinc.

Zinc is a Flash Application Development Software that extends the Flash Movie's functionality by using {mdm}Script, a programming language similar to ActionScript, you can download a free trial version from its website.

Step 22: Zinc Component

After you download Zinc Builder you have to link their compiled component to Flash in order to interpret the mdm script and remove the error warnings.

Go to Flash > Preferences > (Category) ActionScript > ActionScript 3.0 Settings and click the swc icon to add the component.

Test your movie to create a swf with no errors and open Zinc.

Step 23: Building

Create a new Project (Cmd + N) and browse for your swf file.

Use the left and right panels to customize your application.

Then go to the Extensions tab, and mark the mdm_encryption combobox.

Finally, go to Project > Build Project and click build to compile your application.