Friday, 3 August 2012

Drawing app in Air Android

In this tutorial I will create a simple AIR for Android drawing app with Actionscript 3. I have previously created a drawing lines tutorial some time ago which uses the mouse events. I will be using the touch events as used in the Multitouch API for Air Android post.

Firstly, open a new AIR for Android document and save the file with the name: 'TouchDrawing'. Open up a new AS3 class file and save it with the same name. Then enter the following code.

package 
{
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.TouchEvent;
 import flash.ui.Multitouch;
 import flash.ui.MultitouchInputMode;

 public class TouchDrawing extends MovieClip
 {
  private var drawingLine:Sprite;
  
  public function TouchDrawing()
  { 
   //sprite to hold the line drawings
   drawingLine = new Sprite();
   addChild(drawingLine);
   
   //Checks if multitouch is supported and sets the input mode to touch point.
   //The touch end and begin listeners are added to the stage.
   if (Multitouch.supportsTouchEvents)
   {
    Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

    stage.addEventListener(TouchEvent.TOUCH_END, endHandler);
    stage.addEventListener(TouchEvent.TOUCH_BEGIN, beginHandler);
   }
  }

  //This function set the line thickness to 3 and moves the line start position
  //to the location of the touch. The touch move listener is only added to the 
  //stage if its not already there. 
  private function beginHandler(e:TouchEvent):void
  {
   drawingLine.graphics.lineStyle(3);
      drawingLine.graphics.moveTo(e.stageX, e.stageY);
   
   if(!stage.hasEventListener(TouchEvent.TOUCH_MOVE)){
      stage.addEventListener(TouchEvent.TOUCH_MOVE, moveHandler);
   }
  }

  //This function removes the touch move listener from the stage.
  private function endHandler(e:TouchEvent):void
  {
   stage.removeEventListener(TouchEvent.TOUCH_MOVE, moveHandler);
  }

  //This function draws the lines the touch point.
  private function moveHandler(e:TouchEvent):void
  {
   drawingLine.graphics.lineTo(e.stageX, e.stageY);
  }
 }
}

I will add some additional features to the drawing app using the Minimal components classes. In the class file add the following import statements and member variables.
import com.bit101.components.ColorChooser;
import com.bit101.components.PushButton;
import com.bit101.components.Slider;

import com.bit101.components.ColorChooser;
import com.bit101.components.PushButton;
import com.bit101.components.Slider;

In the constructor add the code below. I have added the ColorChooser, PushButton, and Slider components on the stage. I have set the scaleX and Y to 1.5 so the size looks slightly larger on a touch device.
colourPicker = new ColorChooser(stage, 25,13,0x000000);
colourPicker.scaleX = colourPicker.scaleY = 1.5;
colourPicker.usePopup = true;

pushButton = new PushButton(stage, (colourPicker.x + colourPicker.width) + 50, 10, 'Clear', clearScreen);
pushButton.scaleX = pushButton.scaleY = 1.5;
   
slider = new Slider("horizontal", stage, (pushButton.x + pushButton.width) + 70, 20);
slider.scaleX = slider.scaleY = 1.5;
slider.setSliderParams(3,20,3);
For the beginHandler function update the line of code below. This will change the thickness of the line based on the slider value, and change the colour of the line.
drawingLine.graphics.lineStyle(slider.value,colourPicker.value);
Finally add the clearScreen function to clear the line drawing on the stage.
private function clearScreen(e:Event):void
{
   drawingLine.graphics.clear();
}
I found out that it would probably be best to use the mouse events for creating the drawing app in AIR Android as it consumes much less processing resources according to the Adobe help documentation here. The main benefit of using touch would be for the multi-touch features otherwise the mouse events still work fine in AIR Android.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP