Programming and Design post millenium by Frank Hudgeons

Learn how to create a Whiteboard or Blackboard that the user can draw with whist online. It is surprisingly easy to create a Whiteboard / Blackboard and the file size is tiny. When you print it will print whatever you have drawn on your board. It is not much more difficult to add different colours and brush size. At the end of this tutorial you will see an example of a simple Paint program created with this same script and the published Movie is only 6KB!

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

 Example: Download the Flash file Beg 018a

 

Whiteboard: Click and Draw.

 

 Example: Download the Flash file Beg 018b

 

Blackboard: Click and Draw.

Step One: Setting Up the Document

 

You need to open a new Flash document and customise it.

1. Go to: File > New > General Tab > Flash Document > OK(Ctrl N)

Note: You should now have a new Flash document open.

2. You are now ready to customise the document. Go to: Modify > Document(Ctrl J)
3. Type in the dimensions that you want for your Movie. Mine is: 300 x 125 px(pixels)
4. If you want a Blackboard change the: Background Color
   
5. For Frame Rate type: 30 fps



Note: The default frame rate of 12 frames per second is too slow to create a smooth line.

Step Two: ActionScript - Timeline

You need to place the following ActionScript in the Timeline. I will explain what the ActionScript means later.

1. If the Timeline is closed, open it: Window > Timeline(Ctrl Alt T)
2. Select: Frame 1


Frame 1 selected.

3. If the Actions Panel is closed open it: Window > Actions(F9)

Important Note: Make sure that you can see Actions - Frame at the top of the Actions Panel:


The Actions Panel has Actions - Frame in the top corner.

4. In the Actions Panel if Script Assist is on, Switch: Script Assist Off

Note: To see if Script Assist is on or off go to the Action Panel”s Side Menu Button:   

Script Assist is On when ticked: (remove the tick)

Cross Ref: If you are not sure what Script Assist is or how to switch it on and off see the short Tutorial: Actions Panel

5. Type (or Copy & Paste) the following Actionscript into Actions Panel:

   _root.createEmptyMovieClip(“myLine”, 0);

   _root.onMouseDown = function() {
      myLine.moveTo(_xmouse, _ymouse);
      myLine.lineStyle(2, 0xff0000, 100);
      _root.onMouseMove = function() {
         myLine.lineTo(_xmouse, _ymouse);
      }
   }

   _root.onMouseUp = function() {
      _root.onMouseMove = noLine;
   }

Note: ActionScript is Case Sensitive so make sure that the Capitals / lower case are exactly as above.

6. Check the Syntax by clicking the Check Syntax button:

Note: If all your typing is accurate and the Actions panel says Actions - Frame then you should not get errors.

Be aware that just because you do not have any syntax (ActionScript grammar) errors does not mean the your ActionScript will do what you expect. But if there are errors you can be sure that your script will not work correctly!


Actions - Frame 1.

7. Turn the Actions panel off: Window > Actions(F9)
   

   You should be able to see a small letter “a” in the Timeline depicting that you have some code in Frame 1:

   
   The small letter “a” in the Timeline shows

8. You are ready to Test the movie. Go to: Control > Test Movie
   

   Note: You should be able to draw when the mouse is held down. If you cannot you have made a typing error. Go back and check it.

   
   Draw in the Test Window.

9. Close your Test Window:

Explanation of ActionScript - Timeline

Alas the ActionScript is not easy to understand but thankfully it is not essential to understand to be able to use it and edit it:

_root.createEmptyMovieClip(”myLine”, 0);
This creates a blank Movie Clip.

_root.onMouseDown = function() {
A function which is activated every time you click the mouse. For info on Functions click here

myLine.moveTo(_xmouse, _ymouse);
Makes the line start at the current location of the mouse.

myLine.lineStyle(2, 0xff0000, 100);
Creates the line style:
    2 is the line width
    0xff0000 is the hexadecimal colour.
        100 is the Alpha. 0 is completely transparent and 100 is a solid colour.

Note: For a blackboard you would need to change the chalk colour to white: 0xffffff

To change your whiteboard marker colour to black: 0×000000

Cross Ref: To look at a full Hexadecimal colour chart: click here

_root.onMouseMove = function() {
A function within a function created when the first function is active and then the mouse moves.

myLine.lineTo(_xmouse, _ymouse);
When the mouse moves the line follows it”s position.

}
Closes the Mouse Move function

}
Closes the Mouse Down function

_root.onMouseUp = function() {
New function activated on mouse up.

_root.onMouseMove = noLine;
Clears the line.

}
Closes the Mouse Up function.

Step Three: Placing the Delete Button on Stage

You will need a button on your Stage so that users can delete their drawing creations.

1. Go to: Window > Common Libraries > Buttons
2. Scroll down until you can see folder: Classic Buttons
3. Double click to open the folder:
4. Scroll down until you can see folder: Ovals
5. Double click to open the folder:
6. Drag on Stage the: Blue Oval Button
   

   
   The Blue Oval Button.

Step Four: Delete Button ActionScript

1. Select the: Blue Button


Button Selected.

2. If the Actions Panel is closed open it: Window > Actions(F9)

Important Note: Make sure that you can see Actions - Button at the top of the Actions Panel:


The Actions Panel has Actions - Button in the top corner.

3. Type (or copy and paste) the following Actionscript into Actions Box:

on (release) {
    myLine.clear();
}

4. Go to: Control > Test Movie
   

   Note: You should be able to draw and use your delete button.

   Well done - your Movie is finished!

Explanation of ActionScript - Button

on (release) {
On release of the mouse button.

myLine.clear();
Delete myLine

}
End of script.

Example of a Paint program created with this same ActionScript

Example: Download the Flash file Beg 018c

A Paint program made with this same script. The whole file is only 6KB!

Notes: The above Movie has variables in the line:

myLine.lineStyle(myWidth, myColour, myAlpha);

These variables are controlled by the sliders which enables the user to change the paint settings as they draw.

For a tutorial on variables click here

 

Please indicate what you thought of this tutorial  10 is the best:	10 9 8 7 6 5 4 3 2 1

… Read More of this tutorial at WebWasp.co.uk Tutorials

The aim of the tutorial is to learn how to send any information to Flash with JavaScript. This info could be a variable or a text message. There are two examples in this tutorial. One sends a text message and the other a variable. For those unfamiliar with programming: a variable is something that “varies”. It could be anything you want.

In the example below it is the width of the car:

Example:Download the Flash file Int 120a

Example of a variable controlled via the JavaScript.

 

Using JavaScript to send a Text Message to Flash

Below is the example of what you will build in this tutorial.

Example:Download the Flash file Int 120b

Example of sending information to Flash with JavaScript.

NOTE: This method works in Netscape 7.1, Mozzila”s Fire Fox 1.0 and Microsoft Internet Explorer 6.0 service pack 2 but not Opera 7.54

Method One: Send Information to Flash with JavaScript:

1. Open a new: Flash Movie
   I set my width and height to: 410 x 160 pixels.
2. Save your Flash Movie as: send-info
3. With the text tool create a: Dynamic Text Box

Note: The dynamic text box has to be big enough to hold a sentence.

4. Select the: Text box
5. In the Property Inspector set the text box Variable Name (Var) to: text

Note: Don”t get the Variable Name mixed up with the Instance Name.

6. If you wish you can set the Text Box to re-size automatically depending on the number of words sent to it. To do this add the following to frame 1 of the Timeline:

this.text.autoSize = “left”;

Note: This will only work if the Text Box is set to Single Line in the Property Inspector.

As an alternative you can also use the one of the following:

this.text.autoSize = “center”; //or
this.text.autoSize = “right”;

7. Open up your normal web editor: Dreamweaver or FrontPage etc.
8. Create a new: Web Page
9. Go to code view in your web editor and add the following to the Head section of your web page:

10. Change the User Prompt… or the Please Enter… as appropriate. They change the text in the dialog box that appears.
    The first section displays a message above the Dialog”s Input Box and the second section changes the message in the Input Box. See illustration below:

    
    Dialog text and message box text is determined by what you type in the JavaScript code on your web page.

11. If your text box (or variable) is not called text, change the code above accordingly.
12. Add the following HTML code to the Body section of the HTML in code view of your web page editor:
    Click Here To Send Your Own Message To Flash” onClick=”SendMyInfo();”>

    // Note: You can also use:
    Click Here To Set the car width to 50” onclick=”window.document.GetInfo.SetVariable(”carWidth“”50″);” />
    // If you want to set a variable in the flash movie with out using a prompt or giving the user an option to enter their own value
    // This just allows you other ways to send information to flash. You could use a text link or anything you like =0)
    

    Note: You MUST use this code or the Flash Movie will not work !

13. Now change the 410 and 160 values for so that the width and height values are how you want your Flash Movie to display.
14. If your movie has a different name then replace send-info with the file name of your movie.

Note: Be careful with file names as they are case sensitive and never use spaces for file names that are used on the web.

15. If you wish you can replace the default message: Click Here To Send Your Own Message To Flash

16. If you wish you can define a start up message too by adding by adding the following into the Body Tag like this:

GetInfo.SetVariable(”text”"Hello this is a start up message!”);”

If you wish you can view an example of what the HTML source code would look like: View source code

 

Please indicate what you thought of this tutorial  10 is the best:	10 9 8 7 6 5 4 3 2 1

Method Two: Send Information to Flash with JavaScript

NOTE: This method is said to work in all browsers but I tested it and found it to only works in Microsoft Internet Explorer 6.0 service pack 2. I personally recommend the above method but you may want to try it and may find it works for you

1. Open a new: Flash Movie
   I set my width and height to: 410 x 160 pixels.
2. Save your Flash Movie as: send-info
3. With the text tool create a: Dynamic Text Box

Note: The dynamic text box has to be big enough to hold a sentence.

4. Select the: Text box
5. In the Property Inspector set the text box Variable Name (Var) to: text

Note: Don”t get the Variable Name mixed up with the Instance Name.

6. Add this code to frame one of your movie:
7. #include “setvariables.as”
8. If you wish you can set the Text Box to re-size automatically depending on the number of words sent to it. To do this add the following to frame 1 of the Timeline:

this.text.autoSize = “left”;

Note: This will only work if the Text Box is set to Single Line in the Property Inspector.

As an alternative you can also use the one of the following:

this.text.autoSize = “center”; //or
this.text.autoSize = “right”;

9. Create a new web page and use this code:
10. /* ———————————————————–
    ———-Supporting Browsers———-
    PC:
    IE 5 and higher
    Netscape 6 and higher
    Moz/Firebird all
    Opera 7 and higher Mac OSX:
    IE 5.2
    Safari all
    Netscape 6 and higher
    Moz/Firebird/Camino all
    Opera 6 and higher

    Linux:
    Konqueror assumed
    ———————————————————– */
    var ua = navigator.userAgent.toLowerCase();
    var is_pc_ie = ((ua.indexOf(”msie”) != -1) && (ua.indexOf(”win”) != -1) && (ua.indexOf(”opera”) == -1) && (ua.indexOf(”webtv”) == -1));
    /* ———————————————————–
    function setFlashVariables(movieid, flashquery)

    movieid: id of object tag, name of movieid passed in through FlashVars
    flashquery: querystring of values to set. example( var1=foo&var2=bar )
    ———————————————————– */
    function setFlashVariables(movieid, flashquery) {
    var i, values;
    if (is_pc_ie) {
    var chunk = flashquery.split(”&”);
    for (i in chunk) {
    values = chunk.split(”=”);
    document.SetVariable(values, values);
    }
    } else {
    var divcontainer = “flash_setvariables_”+movieid;
    if (!document.getElementById(divcontainer)) {
    var divholder = document.createElement(”div”);
    divholder.id = divcontainer;
    document.body.appendChild(divholder);
    }
    document.getElementById(divcontainer).innerHTML = “”;
    var divinfo = “YourFileName.swf” FlashVars=”lc=”+movieid+”&fq=”+escape(flashquery)+”" width=”0″ height=”0″ type=”application/x-shockwave-flash”>“;
    document.getElementById(divcontainer).innerHTML = divinfo;
    }
    }

11. Only on the line where it reads: var divinfo = “YourFileName.swf” FlashVars=”lc=”+movieid+”&fq=”+escape(flashquery)+”" width=”0″ height=”0″ type=”application/x-shockwave-flash”>“;
12. Change the: YourFileName.swf to the name of your flash movie
13. Now save the file as: setvariables.js in the same location as your flash movie and web page
14. Now open note pad and add this code:
15. // ———————————————————–
    // Universal method for javascript->flash setvariable
    // ———————————————————–
    if(!_level0.$jslisten_init){
    Stage.$jsvarlistener = new LocalConnection();
    Stage.$jsvarlistener.setVariables = function(query) {
    var i, values;
    var chunk = query.split(”&”);
    for (i in chunk) {
    values = chunk.split(”=”);
    _root[values] = values;
    }
    };
    Stage.$jsvarlistener.connect(_level0.movieid);
    _level0.$jslisten_init = true;
    }
16. Save the file as: setvariables.as in the same location as your flash movie and web page
17. Save your Flash Movie: File > Save
18. Publish the Movie: File > Publish

Step Two: Setting up the HTML Web Page

1. Open up your normal web editor: Dreamweaver or FrontPage etc.
2. Create a new: Web Page
3. Go to code view in your web editor and add the following to the Head section of your web page:

   
   

4. Change the User Prompt… or the Please Enter… as appropriate. They change the text in the dialog box that appears.
   The first section displays a message above the Dialog”s Input Box and the second section changes the message in the Input Box. See illustration below:

   
   Dialog text and message box text is determined by what you type in the JavaScript code on your web page.

5. If your text box (or variable) is not called text change the code above accordingly.
6. Add the following HTML code to the Body section of the HTML in code view of your web page editor:
   Click Here To Send Your Own Message To Flash” onClick=”SendMyInfo();”>

   // Note: You can also use:
   Click Here To Set the car width to 50” onclick=”setFlashVariables(”GetInfo“,”carWidth=50″)” />
   // If you want to set a variable in the flash movie without using a prompt or giving the user an option to enter their own value
   // This just allows you other ways to send information to flash. You could use a text link or anything you like =0)
   

   Note: You MUST use this code or the Flash Movie will not work !

7. Now change the 410 and 160 values for so that the width and height values are how you want your Flash Movie to display.
8. If your movie has a different name then replace send-info with the file name of your movie.

Note: Be careful with file names as they are case sensitive and never use spaces for file names that are used on the web.

9. If you wish you can replace the default message: Click Here To Send Your Own Message To Flash

10. If you wish you can define a start up message too by adding the following into the Body Tag like this:

GetInfo“,”text=Hello this is a start up message!”);”>

If you wish you can view an example of what the HTML source code would look like: View source code

That”s it, you can send any message to Flash. It is worth noting that you can also send a variable to Flash using this method.

For more information on other ways of interaction between Flash and JavaScript see JavaScript in the: webwasp index

See these sites here for the more information on the second method:

http://www.mustardlab.com/developer/flash/jscommunication/

http://www.robertpenner.com/experiments/backbutton/backbutton_code.html

http://www.actionscript.org/tutorials/intermediate/Enabling_a_back_button_within_flash/index.shtml

 

Please indicate what you thought of this tutorial  10 is the best:	10 9 8 7 6 5 4 3 2 1

… Read More of this tutorial at WebWasp.co.uk Tutorials