I was inspired to write this tutorial by a tutorial from Jorge Solis from (Flash-db.com). So part of the credit for this tutorial is to Jorge. The tutorial is however heavily modified and contains a number of new features. Further, the application is different and all the scripts are AS2 class scripts. If you are not familiar with the class concept check this OOP-tutorial or tutorials from other flash websites. You also need to be familiar with xml and its syntax, which I will not explain here in detail. Check this xml tutorial for more details if you are not familiar. But first have a look at the movie. Just draw something with the mouse in the upper white field of the right movie and follow further instructions in the movie. When you are done and the data are saved you can display the data in the movie on the left.
IMPORTANT: Set the permissions of the XML file, where the data are stored, to 777 to allow opening, reading and writing into the file. Recently, storing was not working because of that reason.
Structure of the movies
There are two movies, which use 4 scripts:
- Drawing.as: script to draw the lines
- Drawing_picshot.as: script to dissect the drawing and save the data
- Picshot_display.as: script to retrieve the data from an xml file and display the bitmap.
- shared.php: php script to write the xml data.
The Drawing_picshot class is a module, which can easily be used for other applications and the Picshot_display module can be used to retrieve data from xml. Only the Drawing class is specific for this particular example. You can download the files on the last page of this tutorial.
Now let's look at the first script: Drawing.as.