Writing ActionScript with Dreamweaver MX

Team-Fly

---

	Macromedia® DreamWeaver® MX Unleashed By Matthew Pizzi, Zak Ruvalcaba
	Table of Contents
	Appendix C.  Integration with Flash MX

---

Dreamweaver MX offers the capability to write ActionScript in its coding environment. This can often be beneficial for experts in ActionScript because it can provide a bigger workspace than the ActionScript panel in Flash. When you create ActionScript code outside of Flash, it's also easy to update. You can modify the Flash movie without ever opening Flash because in Flash you can create an include action.

For this next exercise, you'll have to download the puzzle.fla file from the companion Web site located at http://www.dreamweavermxunleashed.com.

Creating ActionScript Files in Dreamweaver MX

In this exercise you're going to create a puzzle. This exercise assumes you have a solid understanding of ActionScript, for I will not deconstruct the ActionScript code. After downloading the file, follow these steps to see how you can write ActionScript in Dreamweaver and apply it to objects in Flash.

1. Open the puzzle.fla file. Notice it's constructed of several pieces, as shown in Figure C.1.

   Figure C.1. The file you are about to work with for this project is constructed of several puzzle-piece MovieClip objects.

   

2. Highlight one of the puzzle pieces and open the Actions panel. The keyboard shortcut is F9.

3. In the Actions panel, be sure to be in expert mode. In the top-right corner of the panel, click the submenu and choose Expert Mode, as shown in Figure C.2.

   Figure C.2. You can easily switch to expert mode by accessing the option from the drop-down menu.

   

4. In the body of the panel, type #include puzzle_script.as.

5. Press Return (Mac) or Enter (Windows) to move the cursor down to the next line. On this second line, type #include random.as.

6. Highlight all the code and copy it by pressing Command+C (Mac) or Ctrl+C (Windows).

7. You must highlight each of the puzzle pieces and apply these same actions. Do this until all the puzzle pieces contain this code.

   Right now this code does not add any functionality to your puzzle; what it does do, however, is refer to an external script file that you're about to create using Dreamweaver MX. To simplify this process, save this file in a new folder, called Puzzle, on your desktop. You'll also save the ActionScript files you're about to create in this folder as well so you don't have to worry about sourcing the correct paths. If everything is in the same directory, it will make explaining this example easier. In your own development, feel free to save files in whatever directories you choose; just make sure you source them properly in your code.

8. If you test the movie by pressing Command+Return (Mac) or Ctrl+Enter (Windows), you'll get a preview of what the file will look like. Again, the puzzle is not operational because you have to write the code for the include files in Dreamweaver.

9. Close out of the testing environment and hide or minimize Flash.

10. Open Dreamweaver MX. Create a new document by choosing File, New. This will open the New Document dialog box as shown in Figure C.3.

    Figure C.3. The New Document dialog box offers several options for creating a variety of documents.

    

11. In the category section choose Other, and from the Other pane, choose ActionScript. Click the Create button to open a new ActionScript document.

12. In the document, type the following code:

     on (press) {     xpos = this._x;     ypos = this._y;     if (finish != true) {         _root.depthValue = _root.depthValue+1;         this.SwapDepths (_root.depthValue);         startDrag(this);       } } on (release, release outside) {    stopDrag();    if (eval(this._droptarget) == eval ("_root."+this._name+"target")) {       this._x = eval(this._droptarget)._x;       this._y = eval(this._droptarget)._y;       finish = true;    } else {       setProperty(this, _x, xpos);       setProperty(this, _y, ypos);   } } 

13. Save this document by choosing File, Save As to open the Save As dialog box. Save this file in the puzzle folder you created on the desktop and name it puzzle_script.as.

14. After saving the document, you should have an SWF file of the puzzle from testing it previously. Open the SWF file and notice that you now have the capability to drag the puzzle pieces into their desired locations. If you don't hit the appropriate location, the puzzle piece snaps back to the beginning location. Also notice that after the piece has been placed properly, you can no longer move the puzzle piece.

15. The last thing you should do to the puzzle is have the pieces randomly scatter when the puzzle first loads. All you have to do is write another ActionScript file. From the File menu, choose New to open the New Document dialog box. Choose Other for the category and ActionScript from the Other pane. This will create a new ActionScript document.

16. In the new document, type the following code to add the random scatter functionality:

     onClipEvent (load) {     randomxpos = random(300);     randomypos = random(300);     setProperty(this, _x, randomxpos);     setProperty(this, _y, randomypos); } 

    This will add the random placement of each of the puzzle pieces on load.

17. Choose File, Save As to open the Save As dialog box to save this script. Name this file random.as and save it in the puzzle directory you created on the desktop earlier.

18. Open the SWF file and see that the pieces randomly display on the screen, as shown in Figure C.4.

    Figure C.4. The puzzle pieces are randomly scattered all over the movie.

    

You can tell by the power of these include files that you can edit and modify Flash SWF movies without ever opening Flash or even needing the FLA file. Again, this option may be more comfortable for experienced ActionScripters and coders who feel more comfortable in a larger, more spacious work environment.

---

Team-Fly

Top