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

    Drawing app

    flashste

      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

       

       

      Cheers

       

      SteveW

        • 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:

            re-size

            rotate

            change opacity

            etc

            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.

             

             

            Cheers

             

             

            SteveW

            • 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?

                 

                 

                Cheers

                 

                 

                SteveW

                • 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
                      zeroskillz

                      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!

                       

                       

                      HTH

                      -Zeke