8 Replies Latest reply on Jul 27, 2010 7:43 AM by zeroskillz

    Drawing app


      I am looking for a tutorial that will show me how to create an online 'design & print' service. ie the app has say 3 text areas / 3 image areas / drawings areas and a seperate controls to rotate the text and images etc. I then need to export the data as a vector for digital printing.


      I have experience in php & mysql but am new to flash






        • 1. Re: Drawing app
          kglad Adobe Community Professional & MVP

          google is the best way to search for tutorials.  but your needs are so specific and advanced you might want to hire someone to create that app.

          • 2. Re: Drawing app
            flashste Level 1

            I suppse I should break down what I require to see if it is feasable in flash.


            1. I need to set a 'canvas' size to draw on.

            2. The end user then adds an image , a text box , an editable vector image , a background

            3. Each item needs to able to:



            change opacity


            4. Once the end use has finished his masterpiece I then need to export / save to databse a vector based image of only the canvas.



            I am presuming 1,2,&3 can be done but not sure whether 4 can be and what phrases I should be googling for.







            • 3. Re: Drawing app
              kglad Adobe Community Professional & MVP

              yes, those can be done.


              for 4, depending on your needs, you might find it easier to save a bitmap (using jpegencoder) instead of vector.  but, if you're certain you need a vector, you can use blazePDF.

              • 4. Re: Drawing app
                flashste Level 1

                Thanks for the info.


                I am learning buttons movies action script 3 etc.


                I added BlazePDF but the site said it is no longer being developed and I got an error stating it does not work with as3. Are there any other ways to get the graphics out in svg?







                • 5. Re: Drawing app
                  carl schooff Level 3

                  you could very well send the

                  location, scale, rotation and opacity of all the individual elements to a database and then possibly reconstruct the vectors and layout in some other app / technology.

                  • 7. Re: Drawing app
                    Ganesh_Palwe Level 3

                    You may use some of the components from this library http://www.nocircleno.com/graffiti/

                    • 8. Re: Drawing app

                      You may want to start with tutorials for the Flash Text Layout Framework (TLF), or simply tutorials on creating and formatting text.

                      The TLF framework also includes an Undo manager, which can be used with other things as well (shapes/images).


                      Next, drawing lines/boxes/shapes is simply a matter of tracking the mouse move on mouse down and doing something.

                      As example:


                      Copy this into the code panel:


                      //CODE START


                      var startX:int; //     holder to reference starting X value of the shape

                      var startY:int; //     holder to reference the starting Y value of the shape

                      var currentShape:Sprite; //     holder for the current shape being drawn


                      stage.addEventListener(MouseEvent.MOUSE_DOWN, startBox);


                      function startBox(event:MouseEvent):void


                      startX = event.stageX;           //     Assign the starting X point as the point on stage where the mouse is first down

                      startY = event.stageY;          //     Assign the starting Y point as the point on stage where the mouse is first down



                      currentShape = new Sprite(); //     Create a new holder for the current shape

                      currentShape.graphics.lineStyle(2, 0xff0000);     //     Assigning the linestyle for the shape, in this case a 2 point red line.

                      addChild(currentShape);       //     add the holder to the stage/display list



                      stage.addEventListener(MouseEvent.MOUSE_MOVE, drawBox);  // adding a listener to track the mouse movement--to start drawing the shape.

                      stage.addEventListener(MouseEvent.MOUSE_UP, stopBox);        // adding a listener to tell when the mouse is up--to stop drawing the shape.




                      function drawBox(event:MouseEvent):void


                      var boxWidth:int = event.stageX-startX;       // Calculating the box width as the current point minus the start point

                      var boxHeight:int = event.stageY-startY;     // Calculating the box height as the current point minus the start point


                      currentShape.graphics.clear();                   // Clearing the graphics--otherwise it just adds a new box every time the mouse moves.


                      currentShape.graphics.drawRect(startX, startY, boxWidth, boxHeight);     //drawing the box




                      function stopBox(event:MouseEvent):void


                      stage.removeEventListener(MouseEvent.MOUSE_MOVE, drawBox); // mouse is up, remove the listeners

                      stage.removeEventListener(MouseEvent.MOUSE_UP, stopBox);       // mouse is up, remove the listeners


                      //CODE END



                      You'll also want to learn about Undo stacks.


                      Ideally you would start with a base class named something like EditableShape, with functions for drawing, clearing, resizing, moving etc. and extend it with individual shapes, like box, circle, triangle etc. Go nuts and create custom events, interfaces etc. If you do all that, you will learn a ton about flash. Each shape could keep a record of it's attributes, which could translate well into exporting different filetypes...

                      Suddenly I have the urge to make a drawing application...


                      Next, look into loading and manipulating images. The sky's the limit here with PixelBender filters being available.


                      Once all is said and done, AlivePDF (it's in AS3) is probably a great option for you for file output, what with EPS, spot color and PDFx1a support.


                      Sounds like a fun (but hefty) project. Take it one step at a time, and have fun making it!