Adding Lightbox to Flash

Posted by snowcat

2009 2010

Follow these steps to add Lightbox functionality to Flash files:

Step 1. First, download Lightbox++

Step 2. Copy the css, images and js folders from the archive in the same folder with your HTML file on your web server. This HTML file should embed the SWF file to which you want to add the Lightbox to.

Step 3. Edit the HTML file and add these lines in the section:

1. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
2. <script src="js/prototype.js" type="text/javascript"script>
3. <script src="js/scriptaculous.js?load=effects" type="text/javascript"script>
4. <script src="js/lightbox++.js" type="text/javascript"script>

Step 4 (option A). If you want to have a Lightbox Image Set (with Next and Previous buttons), right after the lines from Step 3 add these lines, otherwise go to Step 4 (option B)

1. <script type="text/javascript">
2. function GroupDelegate(id) {
3. var objLink = document.getElementById(id);
4. Lightbox.prototype.start(objLink);
5. }
6. script>

In the body of your HTML file you’ll have to add invisible links to the images which will be displayed in the Lightbox, like this:

1. <a id="img1" title="First image" rel="lightbox[img]" href="images/01.jpg"a>
2. <a id="img2" title="Second image" rel="lightbox[img]" href="images/02.jpg"a>
3. …

Step 4 (option B). If you intend to have a single image display in Lightbox (as opposed to option A with Image set) you simply have to add these lines into the section of the HTML file:

1. <script type="text/javascript">
2. function LightboxDelegate(url,caption) {
3. var objLink = document.createElement('a');
4. objLink.setAttribute('href',url);
5. objLink.setAttribute('rel','lightbox');
6. objLink.setAttribute('title',caption);
7. Lightbox.prototype.start(objLink);
8. }
9. script>

Step 5 (option A). If you’re using SWFObject to embed the SWF, make sure you’re having these two params (in addition to maybe other params):

1. params.wmode = "transparent";
2. params.allowscriptaccess = "samedomain";

Step 5 (option B). If you’re using tags to embed the SWF file, add these lines:

1. <param name="allowscriptaccess" value="samedomain">
2. <param name="wmode" value="transparent">

And in the embed tag you must insert the attribute:

1. wmode="transparent"

Step 6. If the links to go to when clicking an image are specified through the XML file, the url attribute must be set like this:
1. For Step 4 (option A):

1. url="javascript:GroupDelegate('img1')"

2. For Step 4 (option B):

1. url="javascript:LightboxDelegate('images/01.jpg','First Image')"

Note that the Lightbox will not work if tested locally. You’ll have to test it on a HTTP server.

An working example of Lightbox implemented in the way described above you will see in the “index-with-lightbox.html” file from these two archives: dockmenu.zip and carousel.zip files

Execute Lightbox Scripts From Flash: Part Deux

Execute Lightbox Scripts From Flash: Part Deux

Since the first thread showing you how to execute Lightbox scripts from Flash was such a big hit, I decided to write another showing you how to gain even more functionality in this regard. Tonight I will be showing you how to initiate a Lightbox containing a Flash movie from a Flash movie, and how to initiate Lightbox groups containing images as well as Flash movies. All of the following scripts can be used in the same page if you wish, you just need to include all of the following delegates into your project.

Initiating a Flash Lightbox from Flash

If you followed the previous thread, this should be a pretty straight forward process. All that really needs to be done is a few edits to your LightboxDelegate, and your getURL functions.

Example

Usage

The following code should be placed within your head tags, or linked via an external javascript file.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

"text/javascript"> function SWFDelegate(url,width,height,caption) { var objLink = document.createElement('a'); objLink.setAttribute('href',url); objLink.setAttribute('rel','lightbox'); objLink.setAttribute('title',caption); if(typeof width != 'undefined') { objLink.setAttribute('width',width); } if(typeof height != 'undefined') { objLink.setAttribute('height',height); } Lightbox.prototype.start(objLink); }

If you’ve used the following bit of script before, you’ll notice a few changes. Since Lightbox++ requires you specify the width and the height of the Flash movie in your URLs, we’ve added the width and height arguments to our script. Now all that is left to do, is change our getURL functions around a little bit. They should now look something like the following:

1	getURL("javascript:SWFDelegate('images/sbemail.swf','550','400','Strongbad: Coloring');");

You’re now specifying the width and the height in your getURL functions, to match the signature of our javascript method. Remember, you must specify the arguments in the correct order: URL, width, height, and caption.

Initiating a Lightbox Image Group via Flash

I received quite a few e-mails and comments in regards to how this might be done. I did a little tinkering to get it to work properly, and if you follow along it shouldn’t be that difficult for you.

Example

Usage

The following code should be placed within your head tags, or linked via an external javascript file:

1 2 3 4 5 6

"text/javascript"> function GroupDelegate(id) { var objLink = document.getElementById(id); Lightbox.prototype.start(objLink); }

The first thing you’re going to need to do is create links in your document just like you’re used to. The only difference is you’re going to be specifying an Id attribute in your links, which I will explain a bit more in a minute. The links in my document, that pertain to the above example look like this:

1 2 3

These links go right into your document that has your Flash movie in it. You’ll notice we don’t have any text between our link tags, which keeps our links from showing up in the page. The Id attribute can be named anything you wish, but you’ll need to remember them because they’re important for our getURL function calls in the next step. In my Flash example movie, my getURL calls look like the following:

1 2 3

getURL("javascript:GroupDelegate('paper1')"); getURL("javascript:GroupDelegate('paper2')"); getURL("javascript:GroupDelegate('paper3')");

So when the images are clicked in my example movie above, they call our GroupDelegate function that we defined earlier, and specify the Id of the image we wish to display in our Lightbox first, even though they will be in a group. So to break it down, if the blue image is clicked in my example movie, a getURL function is fired, calling the GroupDelegate function specifying ‘paper1′ as the argument. This argument is the same as the Id attribute in my link that pertains to my blue wallpaper.

Initiating a Lightbox Flash Group via Flash

This is pretty much the same setup as calling image groups from Flash with a few small changes. There is also a gotcha involved with using this method, which I will outline now. I suggest only using this method if the visitor is only supposed to watch the movies that are contained within a group and not interact with them. When in group mode, the Lightbox script’s previous and next links have a z-index that is greater than that of the Flash movies, which keeps the links above the movies, thus not allowing the visitor to interact with your movies. If you want to have the visitor interact with your video, I suggest using the first example in this post which is only a single Flash movie and doesn’t use the previous and next links. If someone has a solution for this, I’m all ears.

Example

Usage

The following code should be placed within your head tags, or linked via an external javascript file:

1 2 3 4 5 6

"text/javascript"> function GroupDelegate(id) { var objLink = document.getElementById(id); Lightbox.prototype.start(objLink); }

The first thing you’re going to need to do is create links in your document just like you’re used to. The only difference is you’re going to be specifying an Id attribute in your links, which I will explain a bit more in a minute. The links in my document, that pertain to the above example look like this:

1 2 3

These links go right into your document that has your Flash movie in it. You’ll notice we don’t have any text between our link tags, which keeps our links from showing up in the page. The difference from the previous example is that we’re now adding width and height attributes to our links as Lightbox++ requires them. The Id attribute can be named anything you wish, but you’ll need to remember them because they’re important for our getURL function calls in the next step. In my Flash example movie, my getURL calls look like the following:

1 2 3

getURL("javascript:GroupDelegate('comics')"); getURL("javascript:GroupDelegate('lookingold')"); getURL("javascript:GroupDelegate('roadtrip')");

So when the button is clicked in my example movie above, it calls our GroupDelegate function that we defined earlier, and specifies the Id of the Flash movie we wish to display in our Lightbox first, even though they will be in a group. So to break it down, if the button is clicked in my example movie, a getURL function is fired, calling the GroupDelegate function specifying ‘comics’ as the argument. This argument is the same as the Id attribute in my link that pertains to my Strongbad Comic Flash movie.

Initiating Lightbox Scripts From Your Favorite Slideshows

A few of you requested information from my old post showing you how to initiate Lightbox scripts from your slideshow movies–namely SlideShowPro and Monoslideshow. I’m currently working on a post that breaks this entire process down for you, but until then you can check out my old examples. If you’re seasoned in messing with these delegates, you should be able to view source of the examples and pull out the proper delegates and implement them into your projects.

Download Example

Download the example to this tutorial here - Download Example

Create a Basic Drawing Application in Flash

In this tutorial, we'll create a Drawing Application with basic functions and an easy to use interface. Feeling artistic? Then let's go..

Author: Carlos Yanez

Carlos is a Web/Logo Designer, Flash Developer with passion for great designs and cool applications.

Step 1: Overview

This application will feature a series of tools such as pencil, eraser, text tool, and also the possibility to save your drawing in png format using the Adobe's PNG Encoder.

Step 2: Setting Up

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

Set the stage size to 600x350px and the frame rate to 25fps.

Step 3: Board

Draw a 600x290px white rectangle and convert it to MovieClip. Set its instance name to "board" and align it to the top-left of the stage.

This will be the area on which we'll be able to draw.

Step 4: Tools Panel

Create a 600px wide 60px high gray (#DFDFDF) rectangle and align it to the bottom of the stage. This will be our background for the Tools Panel.

Step 5: Tool Icons

I'm not going to cover the creation of the tools icons since that isn't the intention of the turorial, still, you can see how they are made in the Fla file included in the Source.

As you can see in the image, we're going to use two icons, one in a gray tone and the other one in color.

Convert the gray pencil icon to a Button (F8) and name it "pencilTool", double click to edit it and add a KeyFrame (F6) in the "over" state. Here's where we're going to put the color version of the icon.

Lastly, add another KeyFrame in the "hit" state, and draw a 30x30px square to act as the button's hit area.

Repeat this process with all your tool icons, don't forget to give them the correct instance names (eraserTool, textTool, saveButton, clearTool).

In order to display the active tool icon, we're going to use the color version of the icon and place it in the same position of the button we created before. The instance names will be "pencil", "eraser" and "text".

We'll hide these icons later using ActionScript.

Step 5: Save Dialog

When we use the save option we're going to display a "save successful" message.

Create a 600x350px black rectangle with 50% alpha to use as a background.

Add a black rounded rectangle in the center with the save button icon and some text indicating that the save has been completed.

Create a close button and align it in the top-left of the rounded rectangle, name it "closeBtn". As you can imagine, this button will close the Save Dialog.

Convert all the elements to a single MovieClip and mark the "Export for ActionScript" checkbox. Set the Class textfield to "SaveDialog".

We'll instantiate this class when the user presses the SaveButton and the save is completed.

Step 6: Size Panel

The Size Panel is the area where you can change the size of the pencil, eraser and text tool. You can do that by clicking in the panel area or the oval inside it.

Select the Rectangle Primitive Tool, set the corner radius to 4 and create a #EFEFEF 80x50px rectangle. Convert it to a MovieClip and name it "sizePanel".

Open the Filters panel and add a Drop Shadow with the following values:

Now use the Oval Tool to create a 5x5px black circle and center it in the Size Panel, convert it to MovieClip and set its instance name to "shapeSize".

Step 7: Default Colors

We'll create a default color palette instead of using the Color Picker Component.

Create a 22x22px circle using the Oval Tool, set its color to #EEEEEE and convert it to MovieClip. Add the same Drop Shadow Filter we used in the Size Panel.

Draw a second circle of 16x16px and use black for the color this time. Center the circles and repeat this process changing the last circle color to the following:

Align them to end up with something like this:

Convert all the colors to a single MovieClip, name it "colors" and be sure to set the Registration Point to the Top-Left, since we're going to get pixel data using the Bitmap Class.

Step 8: Adobe PNG Encoder

In order to use the Save function we'll need the Adobe PNG Encoder wich is part of the as3corelib that you can find in Google Code.

To use this class outside of the package it comes with as default, we need to change one line. Open the PNGEncoder.as file and change the line "package com.adobe..." to just "package". This will let us call the class in the directory where the Fla file is.

Step 9: Main Class

A single Class will handle this application. Open the Properties Panel in the Fla file and set the Document Class as "Main".

Create a new ActionScript Document and save it as "Main.as" in the same directory where the Fla file is.

Step 10: Import Required Classes

These are the classes we're going to need in this app. Remember to check the Flash Help (F1) if you're unsure of a specific class.

view plaincopy to clipboardprint?

1. package
2. {
3. import PNGEncoder;
4. import flash.display.MovieClip;
5. import flash.display.Shape;
6. import flash.display.DisplayObject;
7. import flash.text.TextField;
8. import flash.text.TextFormat;
9. import flash.text.TextFieldType;
10. import flash.text.TextFieldAutoSize;
11. import flash.display.BitmapData;
12. import flash.geom.ColorTransform;
13. import flash.events.MouseEvent;
14. import flash.events.Event;
15. import flash.utils.ByteArray;
16. import flash.net.FileReference;

package  {  import PNGEncoder;  import flash.display.MovieClip;  import flash.display.Shape;  import flash.display.DisplayObject;  import flash.text.TextField;  import flash.text.TextFormat;  import flash.text.TextFieldType;  import flash.text.TextFieldAutoSize;  import flash.display.BitmapData;  import flash.geom.ColorTransform;  import flash.events.MouseEvent;  import flash.events.Event;  import flash.utils.ByteArray;  import flash.net.FileReference;

Step 11: Extending the Class

We're extending the MovieClip class since we use this class' specific properties and methods.

view plaincopy to clipboardprint?

1. public class Main extends MovieClip
2. {

public class Main extends MovieClip {

Step 12: Variables

These are the variables we'll use. They're all explained in the code comments.

view plaincopy to clipboardprint?

1. /* Pencil Tool shape, everything drawn with this tool and the eraser tool is stored inside board.pencilDraw */
3. var pencilDraw:Shape = new Shape();
5. /* Text format */
7. var textformat:TextFormat = new TextFormat();
9. /* Colors */
11. var colorsBmd:BitmapData; //We'll use this Bitmap Data to get the pixel RGB Value when clicked
12. var pixelValue:uint;
13. var activeColor:uint = 0x000000; //This is the current color in use, displayed by the shapeSize MC
15. /* Save dialog instance */
17. var saveDialog:SaveDialog;
19. /* Active var, to check which tool is active */
21. var active:String;
23. /* Shape size color */
25. var ct:ColorTransform = new ColorTransform();

/* Pencil Tool shape, everything drawn with this tool and the eraser tool is stored inside board.pencilDraw */  var pencilDraw:Shape = new Shape();  /* Text format */  var textformat:TextFormat = new TextFormat();  /* Colors */  var colorsBmd:BitmapData; //We'll use this Bitmap Data to get the pixel RGB Value when clicked var pixelValue:uint; var activeColor:uint = 0x000000; //This is the current color in use, displayed by the shapeSize MC  /* Save dialog instance */  var saveDialog:SaveDialog;  /* Active var, to check which tool is active */  var active:String;  /* Shape size color */  var ct:ColorTransform = new ColorTransform();

Step 13: Main Function

The main function will take care of setting the Text Format of the Text Tool, converting the Colors MovieClip to Bitmap Data so we can extract the Pixels RGB Value, adding the listeners and hiding the active icons.

view plaincopy to clipboardprint?

1. public function Main():void
2. {
3. textformat.font = "Quicksand Bold Regular"; // You can use any font you like
4. textformat.bold = true;
5. textformat.size = 16;
7. /* We create these functions later */
9. convertToBMD();
11. addListeners();
13. /* Hide tools highlights */
15. pencil.visible = false;
16. hideTools(eraser, txt);
17. }

public function Main():void {  textformat.font = "Quicksand Bold Regular"; // You can use any font you like  textformat.bold = true;  textformat.size = 16;     /* We create these functions later */   convertToBMD();   addListeners();   /* Hide tools highlights */   pencil.visible = false;  hideTools(eraser, txt); } 

Step 14: Tools Actions

The tools actions are each split into four functions.

The first one will set the tool to its Active state, the second and third ones will handle the Mouse Events (like Drawing or Erasing) and the fourth one will stop those Events.

Step 15: Pencil Tool

These functions handle the Pencil Tool, read the comments in the code for a better understanding.

The set to active function:

view plaincopy to clipboardprint?

1. private function PencilTool(e:MouseEvent):void
2. {
3. /* Quit active tool */
5. quitActiveTool(); //This function will be created later
7. /* Set to Active */
9. active = "Pencil"; //Sets the active variable to "Pencil"
11. /* Adds the listeners to the board MovieClip, to draw just in it */
13. board.addEventListener(MouseEvent.MOUSE_DOWN, startPencilTool);
14. board.addEventListener(MouseEvent.MOUSE_UP, stopPencilTool);
16. /* Highlight, sets the Pencil Tool Icon to the color version, and hides any other tool */
18. highlightTool(pencil);
19. hideTools(eraser, txt);
21. /* Sets the active color variable based on the Color Transform value and uses that color for the shapeSize MovieClip */
23. ct.color = activeColor;
24. shapeSize.transform.colorTransform = ct;
25. }

private function PencilTool(e:MouseEvent):void {  /* Quit active tool */   quitActiveTool(); //This function will be created later   /* Set to Active */   active = "Pencil"; //Sets the active variable to "Pencil"   /* Adds the listeners to the board MovieClip, to draw just in it */   board.addEventListener(MouseEvent.MOUSE_DOWN, startPencilTool);  board.addEventListener(MouseEvent.MOUSE_UP, stopPencilTool);   /* Highlight, sets the Pencil Tool Icon to the color version, and hides any other tool */   highlightTool(pencil);  hideTools(eraser, txt);     /* Sets the active color variable based on the Color Transform value and uses that color for the shapeSize MovieClip */   ct.color = activeColor;  shapeSize.transform.colorTransform = ct; }

The Start function; this function is called when the Board MovieClip is pressed.

view plaincopy to clipboardprint?

1. private function startPencilTool(e:MouseEvent):void
2. {
3. pencilDraw = new Shape(); //We add a new shape to draw always in top (in case of text, or eraser drawings)
4. board.addChild(pencilDraw); //Add that shape to the board MovieClip
6. pencilDraw.graphics.moveTo(mouseX, mouseY); //Moves the Drawing Position to the Mouse Position
7. pencilDraw.graphics.lineStyle(shapeSize.width, activeColor);//Sets the line thickness to the ShapeSize MovieClip size and sets its color to the current active color
9. board.addEventListener(MouseEvent.MOUSE_MOVE, drawPencilTool); //Adds a listener to the next function
10. }

private function startPencilTool(e:MouseEvent):void {  pencilDraw = new Shape(); //We add a new shape to draw always in top (in case of text, or eraser drawings)  board.addChild(pencilDraw); //Add that shape to the board MovieClip   pencilDraw.graphics.moveTo(mouseX, mouseY); //Moves the Drawing Position to the Mouse Position  pencilDraw.graphics.lineStyle(shapeSize.width, activeColor);//Sets the line thickness to the ShapeSize MovieClip size and sets its color to the current active color   board.addEventListener(MouseEvent.MOUSE_MOVE, drawPencilTool); //Adds a listener to the next function }

The Draw function; called when the user presses the Board MovieClip and moves the mouse.

view plaincopy to clipboardprint?

1. private function drawPencilTool(e:MouseEvent):void
2. {
3. pencilDraw.graphics.lineTo(mouseX, mouseY); //Draws a line from the current Mouse position to the moved Mouse position
4. }

private function drawPencilTool(e:MouseEvent):void {  pencilDraw.graphics.lineTo(mouseX, mouseY); //Draws a line from the current Mouse position to the moved Mouse position }

Stop function, executed when the user releases the mouse.

view plaincopy to clipboardprint?

1. private function stopPencilTool(e:MouseEvent):void
2. {
3. board.removeEventListener(MouseEvent.MOUSE_MOVE, drawPencilTool); //Stops the drawing
4. }

private function stopPencilTool(e:MouseEvent):void {  board.removeEventListener(MouseEvent.MOUSE_MOVE, drawPencilTool); //Stops the drawing }

Step 16: Eraser Tool

The Eraser Tool is pretty much the same as the Pencil Tool, except that we don't use any color other than White.

view plaincopy to clipboardprint?

1. private function EraserTool(e:MouseEvent):void
2. {
3. /* Quit active tool */
5. quitActiveTool();
7. /* Set to Active */
9. active = "Eraser";
11. /* Listeners */
13. board.addEventListener(MouseEvent.MOUSE_DOWN, startEraserTool);
14. board.addEventListener(MouseEvent.MOUSE_UP, stopEraserTool);
16. /* Highlight */
18. highlightTool(eraser);
19. hideTools(pencil, txt);
21. /* Use White Color */
23. ct.color = 0x000000;
25. shapeSize.transform.colorTransform = ct;
26. }
28. private function startEraserTool(e:MouseEvent):void
29. {
30. pencilDraw = new Shape();
31. board.addChild(pencilDraw);
33. pencilDraw.graphics.moveTo(mouseX, mouseY);
34. pencilDraw.graphics.lineStyle(shapeSize.width, 0xFFFFFF); //White Color
36. board.addEventListener(MouseEvent.MOUSE_MOVE, drawEraserTool);
37. }
39. private function drawEraserTool(e:MouseEvent):void
40. {
41. pencilDraw.graphics.lineTo(mouseX, mouseY);
42. }
44. function stopEraserTool(e:MouseEvent):void
45. {
46. board.removeEventListener(MouseEvent.MOUSE_MOVE, drawEraserTool);
48. }

private function EraserTool(e:MouseEvent):void {  /* Quit active tool */   quitActiveTool();   /* Set to Active */   active = "Eraser";   /* Listeners */   board.addEventListener(MouseEvent.MOUSE_DOWN, startEraserTool);  board.addEventListener(MouseEvent.MOUSE_UP, stopEraserTool);   /* Highlight */   highlightTool(eraser);  hideTools(pencil, txt);     /* Use White Color */   ct.color = 0x000000;   shapeSize.transform.colorTransform = ct; }  private function startEraserTool(e:MouseEvent):void {  pencilDraw = new Shape();  board.addChild(pencilDraw);   pencilDraw.graphics.moveTo(mouseX, mouseY);  pencilDraw.graphics.lineStyle(shapeSize.width, 0xFFFFFF); //White Color   board.addEventListener(MouseEvent.MOUSE_MOVE, drawEraserTool); }  private function drawEraserTool(e:MouseEvent):void {  pencilDraw.graphics.lineTo(mouseX, mouseY); }  function stopEraserTool(e:MouseEvent):void {  board.removeEventListener(MouseEvent.MOUSE_MOVE, drawEraserTool);  }   

As you can see, the code is the same except for the White color changes.

Step 17: Text Tool

The Text Tool has only two functions; one in charge of setting it to active, and the other one for handling the text writing. Let's take a look:

view plaincopy to clipboardprint?

1. private function TextTool(e:MouseEvent):void
2. {
3. /* Quit active tool */
5. quitActiveTool();
7. /* Set to Active */
9. active = "Text";
11. /* Listener */
13. board.addEventListener(MouseEvent.MOUSE_UP, writeText);
15. /* Highlight */
17. highlightTool(txt);
18. hideTools(pencil, eraser);
19. }
21. private function writeText(e:MouseEvent):void
22. {
23. /* Create a new TextField Object, this way we won't replace older instances */
25. var textfield = new TextField();
27. /* Set Formats, position, and focus */
29. textfield.type = TextFieldType.INPUT;
30. textfield.autoSize = TextFieldAutoSize.LEFT;
31. textfield.defaultTextFormat = textformat;
32. textfield.textColor = activeColor;
33. textfield.x = mouseX;
34. textfield.y = mouseY;
35. stage.focus = textfield;
37. /* Add text to Board */
39. board.addChild(textfield);
40. }

private function TextTool(e:MouseEvent):void {  /* Quit active tool */   quitActiveTool();   /* Set to Active */   active = "Text";   /* Listener */   board.addEventListener(MouseEvent.MOUSE_UP, writeText);   /* Highlight */   highlightTool(txt);  hideTools(pencil, eraser); }  private function writeText(e:MouseEvent):void {    /* Create a new TextField Object, this way we won't replace older instances */   var textfield = new TextField();   /* Set Formats, position, and focus */   textfield.type = TextFieldType.INPUT;  textfield.autoSize = TextFieldAutoSize.LEFT;  textfield.defaultTextFormat = textformat;  textfield.textColor = activeColor;  textfield.x = mouseX;  textfield.y = mouseY;  stage.focus = textfield;   /* Add text to Board */   board.addChild(textfield); }

This one was easy, remember that you can change the size and color using the shapeSize and the Colors MovieClips.

Step 18: Save Option

The save option handled by the saveButton will make use of the Adobe's PNGEnconder Class to save the artwork as a PNG file.

view plaincopy to clipboardprint?

1. private function export():void
2. {
3. var bmd:BitmapData = new BitmapData(600, 290);//Creates a new BitmapData with the board size
5. bmd.draw(board);//Draws the board MovieClip into a BitmapImage in the BitmapData
7. var ba:ByteArray = PNGEncoder.encode(bmd); //Creates a ByteArray of the BitmapData, encoded as PNG
9. var file:FileReference = new FileReference(); // Instantiates a new File Reference Object to handle the save
11. file.addEventListener(Event.COMPLETE, saveSuccessful); //Adds a new listener to listen when the save is complete
13. file.save(ba, "MyDrawing.png"); //Saves the ByteArray as a PNG
14. }
16. private function saveSuccessful(e:Event):void
17. {
18. saveDialog = new SaveDialog();// Instantiates a new SaveDialog Class
20. addChild(saveDialog); //Adds the SaveDialog MovieClip to the Stage
22. saveDialog.closeBtn.addEventListener(MouseEvent.MOUSE_UP, closeSaveDialog);//Adds a listener to the close button of the dialog
23. }
25. private function closeSaveDialog(e:MouseEvent):void
26. {
27. removeChild(saveDialog); //Removes the dialog of the Stage
28. }
30. private function save(e:MouseEvent):void
31. {
32. export(); //Calls the export function to begin the saving process
33. }

private function export():void {  var bmd:BitmapData = new BitmapData(600, 290);//Creates a new BitmapData with the board size   bmd.draw(board);//Draws the board MovieClip into a BitmapImage in the BitmapData   var ba:ByteArray = PNGEncoder.encode(bmd); //Creates a ByteArray of the BitmapData, encoded as PNG   var file:FileReference = new FileReference(); // Instantiates a new File Reference Object to handle the save   file.addEventListener(Event.COMPLETE, saveSuccessful); //Adds a new listener to listen when the save is complete   file.save(ba, "MyDrawing.png"); //Saves the ByteArray as a PNG }  private function saveSuccessful(e:Event):void {  saveDialog = new SaveDialog();// Instantiates a new SaveDialog Class   addChild(saveDialog); //Adds the SaveDialog MovieClip to the Stage   saveDialog.closeBtn.addEventListener(MouseEvent.MOUSE_UP, closeSaveDialog);//Adds a listener to the close button of the dialog }  private function closeSaveDialog(e:MouseEvent):void {  removeChild(saveDialog); //Removes the dialog of the Stage }  private function save(e:MouseEvent):void {  export(); //Calls the export function to begin the saving process }

Step 19: Clear Tool

The Clear Tool will add a white screen in front of all the elements in order to leave the board ready to draw again.

view plaincopy to clipboardprint?

1. private function clearBoard(e:MouseEvent):void
2. {
3. /* Create a white rectangle on top of everything */
5. var blank:Shape = new Shape();
7. blank.graphics.beginFill(0xFFFFFF);
8. blank.graphics.drawRect(0, 0, board.width, board.height);
9. blank.graphics.endFill();
11. board.addChild(blank);
12. }

private function clearBoard(e:MouseEvent):void {  /* Create a white rectangle on top of everything */   var blank:Shape = new Shape();   blank.graphics.beginFill(0xFFFFFF);  blank.graphics.drawRect(0, 0, board.width, board.height);  blank.graphics.endFill();   board.addChild(blank); }

Step 20: Get Colors Value

To get the value of the colors we're using in the Colors MovieClip, we convert it to a BitmapData Object and use the getPixel method to obtain the RGB value of the pixel clicked.

view plaincopy to clipboardprint?

1. private function convertToBMD():void
2. {
3. colorsBmd = new BitmapData(colors.width,colors.height);
4. colorsBmd.draw(colors);
5. }
7. private function chooseColor(e:MouseEvent):void
8. {
9. pixelValue = colorsBmd.getPixel(colors.mouseX,colors.mouseY);//Gets the cliked pixel RGB value
10. activeColor = pixelValue;
12. /* Use a ColorTransform object to change the shapeSize MovieClip color */
14. ct.color = activeColor;
15. shapeSize.transform.colorTransform = ct;
16. }

private function convertToBMD():void {  colorsBmd = new BitmapData(colors.width,colors.height);  colorsBmd.draw(colors); }  private function chooseColor(e:MouseEvent):void {  pixelValue = colorsBmd.getPixel(colors.mouseX,colors.mouseY);//Gets the cliked pixel RGB value  activeColor = pixelValue;    /* Use a ColorTransform object to change the shapeSize MovieClip color */   ct.color = activeColor;  shapeSize.transform.colorTransform = ct; }

We'll add the chooseColor listener in the addListeners function later in the code.

Step 21: Active Tool

Earlier, we declared a variable to set the active or current tool in use, and we call this function to remove the corresponding listeners in order to have just one active tool.

Basically, the function checks the "active" variable in a switch loop, then depending on its value removes the listeners it has.

view plaincopy to clipboardprint?

1. private function quitActiveTool():void
2. {
3. switch (active)
4. {
5. case "Pencil" :
6. board.removeEventListener(MouseEvent.MOUSE_DOWN, startPencilTool);
7. board.removeEventListener(MouseEvent.MOUSE_UP, stopPencilTool);
8. case "Eraser" :
9. board.removeEventListener(MouseEvent.MOUSE_DOWN, startEraserTool);
10. board.removeEventListener(MouseEvent.MOUSE_UP, stopEraserTool);
11. case "Text" :
12. board.removeEventListener(MouseEvent.MOUSE_UP, writeText);
13. default :
14. }
15. }

private function quitActiveTool():void {  switch (active)  {   case "Pencil" :    board.removeEventListener(MouseEvent.MOUSE_DOWN, startPencilTool);    board.removeEventListener(MouseEvent.MOUSE_UP, stopPencilTool);   case "Eraser" :    board.removeEventListener(MouseEvent.MOUSE_DOWN, startEraserTool);    board.removeEventListener(MouseEvent.MOUSE_UP, stopEraserTool);   case "Text" :    board.removeEventListener(MouseEvent.MOUSE_UP, writeText);   default :  } }

We also need to highlight the active tool and hide the other ones:

view plaincopy to clipboardprint?

1. private function highlightTool(tool:DisplayObject):void
2. {
3. tool.visible=true; //Highlights tool in the parameter
4. }
6. /* Hides the tools in the parameters */
8. private function hideTools(tool1:DisplayObject, tool2:DisplayObject):void
9. {
10. tool1.visible=false;
11. tool2.visible=false;
12. }

private function highlightTool(tool:DisplayObject):void {  tool.visible=true; //Highlights tool in the parameter }  /* Hides the tools in the parameters */  private function hideTools(tool1:DisplayObject, tool2:DisplayObject):void {  tool1.visible=false;  tool2.visible=false; }

Step 22: Shape Size

We click the Size Panel or the ShapeSize MovieClip to change the size of the Pencil, Eraser and Text Tool. The size is changed in intervals of 5, and is reset when the size is bigger or equal to 50. Take a look at the code:

view plaincopy to clipboardprint?

1. private function changeShapeSize(e:MouseEvent):void
2. {
3. if (shapeSize.width >= 50)
4. {
5. shapeSize.width = 1;
6. shapeSize.height = 1;
8. /* TextFormat */
10. textformat.size = 16;
11. }
12. else
13. {
14. shapeSize.width += 5;
15. shapeSize.height=shapeSize.width;
17. /* TextFormat */
19. textformat.size+=5;
20. }
21. }

private function changeShapeSize(e:MouseEvent):void {  if (shapeSize.width >= 50)  {   shapeSize.width = 1;   shapeSize.height = 1;    /* TextFormat */    textformat.size = 16;  }  else  {   shapeSize.width += 5;   shapeSize.height=shapeSize.width;    /* TextFormat */    textformat.size+=5;  } }

Step 23: Add Listeners

A function to add all the listeners.

view plaincopy to clipboardprint?

1. private function addListeners():void
2. {
3. pencilTool.addEventListener(MouseEvent.MOUSE_UP, PencilTool);
4. eraserTool.addEventListener(MouseEvent.MOUSE_UP, EraserTool);
5. textTool.addEventListener(MouseEvent.MOUSE_UP, TextTool);
6. saveButton.addEventListener(MouseEvent.MOUSE_UP, save);
7. clearTool.addEventListener(MouseEvent.MOUSE_UP, clearBoard);
8. colors.addEventListener(MouseEvent.MOUSE_UP, chooseColor);
9. sizePanel.addEventListener(MouseEvent.MOUSE_UP, changeShapeSize);
10. shapeSize.addEventListener(MouseEvent.MOUSE_UP, changeShapeSize);
11. }

private function addListeners():void {  pencilTool.addEventListener(MouseEvent.MOUSE_UP, PencilTool);  eraserTool.addEventListener(MouseEvent.MOUSE_UP, EraserTool);  textTool.addEventListener(MouseEvent.MOUSE_UP, TextTool);  saveButton.addEventListener(MouseEvent.MOUSE_UP, save);  clearTool.addEventListener(MouseEvent.MOUSE_UP, clearBoard);  colors.addEventListener(MouseEvent.MOUSE_UP, chooseColor);  sizePanel.addEventListener(MouseEvent.MOUSE_UP, changeShapeSize);  shapeSize.addEventListener(MouseEvent.MOUSE_UP, changeShapeSize); }

Step 24: Test

Test your app by pressing cmd+return and check if everything is working as expected.

Use all the tools, colors and functions and start drawing your scene!

Conclusion

This Flash Movie can be easily adapted as a kids drawing application, it has a friendly user interface and basic tools that can teach how the mouse works whilst having some colorful fun in the process.

You can also explore the rest of the as3corelib and read its documentation to learn some new ActionScript features.

Thanks for reading!