Flash 파일데이터 업로드시 인터렉션 없이 다중전송 처리방법

플래시에서 파일 데이터를 다중 업로드시 해결했던 방법을 
주변에서 문의가 와서 기록 합니다.
(pc의 다중파일 업로드는 기본 파일레퍼런스 api에서 제공됩니다)

프로젝트 진행하다 플래시의 여러 영역을 이미지로 개별적으로 저장해야 하는

작업이 있었다. 파일업로드(멀티파트가 포함된 리퀘스트)는 사용자의 인터렉션이 

꼭 있어야 함으로(보안이슈) base64인코팅으로 처리하는 방법들도 있지만 서버

단에서 다시 풀어야 하는 깔끔하지 못한 부분이 있다 

이를 해결해본 방법이 Flash에서 멀티파트 구성없이 리퀘스트의 URLVariable 데이터에

bytearray를 할당해서 호출하고 리퀘스트를 처리하는 서블릿에서 저장하는 방법으로 

다중업로드가 가능하다 

(java, php 모두 가능)

- 액션스크립스 코드 -

var byteArr:BytaArray = new ByteArray();//바이트 어레이를 구성 

var urlRQ:URLRequest = new URLRequest(url);

//헤더설정 

var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream"); 

urlRQ.requestHeaders.push(header);

urlRQ.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );

//리퀘스트 데이터에 byteArray 할당 

urlRQ.data = byteArr;

- 서블릿 코드 - 

package com.servlet;

import javax.servlet.http.HttpServlet;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.net.URL;

public class ImageWriter extends HttpServlet {

public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
    doGet(req, resp);
}

public void doGet(HttpServletRequest req, HttpServletResponse resp)
    throws ServletException, IOException
    {

        int i = 0;
        int k = 0;
        int maxLength = req.getContentLength();
        byte[] bytes = null;
        if(0<=maxLength)
        {
            bytes = new byte[maxLength];
        }
        String method = req.getParameter("method");
        String name = req.getParameter("name");
        ServletInputStream si = req.getInputStream();
   
        while (true)
        {
            k = si.read(bytes,i,maxLength);
            i += k;
            if (k <= 0)
            break;
        }
        if (bytes != null)
        {
            File saveFile = new File(req.getSession().getServletContext().getRealPath(name));
            if(saveFile.exists())
                saveFile.createNewFile();
       
            System.out.println(req.getRealPath(name));
       
            FileOutputStream fos = new FileOutputStream(saveFile);
            fos.write(bytes);
            fos.flush();
            fos.close();
       
            resp.setContentType("text");
            resp.getWriter().write(name);
        }
        else
        {
            resp.setContentType("text");
            resp.getWriter().write("bytes is null");
        }
    }

private String String(int remotePort) {
    // TODO Auto-generated method stub
    return null;
}
}

flash touch 샘플코드

Hi. Could someone explain how come one both of these examples work when compiled to iPhone, but only the Example2 works with MacBook Pro Touchpad? MTouch works with gestures, but not with the TouchEvent.

Note that the Example1 has a maximum touches left, but when I do the same thing for the Example2 I get "zero" as the result, but again... it still works on the touchpad in MacBook.

Seems to me that it's the Multitouch.inputMode = MultitouchInputMode.GESTURE and TransformGestureEvent. Note that in order to move the image in the Example2 example you need to use both fingers - this is kind of crappy. I wanted to add a regular TouchEvent to handle simple moving or even tracing something to the output box (look at the code), but it simply doesn't work.

Also... it would be great if someone could show me the way of testing this with a mouse - basically can I somehow code for taps and touch events, but test with my mouse (mouseevent) without rewriting or commenting out a lot of code?

Thanks

Example1

import flash.display.Sprite;
import flash.events.TouchEvent;
import flash.text.AntiAliasType;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;


var dots:Object;
var labels:Object;
var labelFormat:TextFormat;
var dotCount:uint;
var dotsLeft:TextField;
var LABEL_SPACING:uint = 15;


this.labelFormat = new TextFormat();
labelFormat.color = 0xACF0F2;
labelFormat.font = "Helvetica";
labelFormat.size = 11;

this.dotCount = 0;

this.dotsLeft = new TextField();
this.dotsLeft.width = 300;
this.dotsLeft.defaultTextFormat = this.labelFormat;
this.dotsLeft.x = 3;
this.dotsLeft.y = 0;
this.stage.addChild(this.dotsLeft);
this.updateDotsLeft();

this.dots = new Object();
this.labels = new Object();

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
this.stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
this.stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
this.stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);


function onTouchBegin(e:TouchEvent):void
{
if (this.dotCount == Multitouch.maxTouchPoints)
{
return;
}
var dot:Sprite = this.getCircle();
dot.x = e.stageX;
dot.y = e.stageY;
this.stage.addChild(dot);
dot.startTouchDrag(e.touchPointID, true);
this.dots[e.touchPointID] = dot;

++this.dotCount;

var label:TextField = this.getLabel(e.stageX + ", " + e.stageY);
label.x = 3;
label.y = this.dotCount * LABEL_SPACING;
this.stage.addChild(label);
this.labels[e.touchPointID] = label;

this.updateDotsLeft();
}

function onTouchMove(e:TouchEvent):void
{
var label:TextField = this.labels[e.touchPointID];
label.text = (e.stageX + ", " + e.stageY);
}

function onTouchEnd(e:TouchEvent):void
{
var dot:Sprite = this.dots[e.touchPointID];
var label:TextField = this.labels[e.touchPointID];

this.stage.removeChild(dot);
this.stage.removeChild(label);

delete this.dots[e.touchPointID];
delete this.labels[e.touchPointID];

--this.dotCount;

this.updateDotsLeft();
}

function getCircle(circumference:uint = 40):Sprite
{
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x1695A3);
circle.graphics.drawCircle(0, 0, circumference);
return circle;
}

function getLabel(initialText:String):TextField
{
var label:TextField = new TextField();
label.defaultTextFormat = this.labelFormat;
label.selectable = false;
label.antiAliasType = AntiAliasType.ADVANCED;
label.text = initialText;
return label;
}

function updateDotsLeft():void
{
this.dotsLeft.text = "Touches Remaining: " + (Multitouch.maxTouchPoints - this.dotCount);
}


Example2


import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.events.TransformGestureEvent;
import flash.events.TouchEvent;
import flash.text.TextField;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.MouseEvent;


Multitouch.inputMode = MultitouchInputMode.GESTURE;
var sq:Sprite;


sq = new Sprite();
addChild(sq);


this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, scaleObj);
this.addEventListener(TransformGestureEvent.GESTURE_PAN, panObj);
this.addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotObj);
this.addEventListener(TouchEvent.TOUCH_TAP, taptap);

var l:Loader = new Loader();
l.contentLoaderInfo.addEventListener(Event.COMPLETE, addImg);
l.load(new URLRequest("http://lobby.blox.pl/resource/LOBBY_logo1.jpg"));

function disp():void{
dispatchEvent(new Event(TouchEvent.TOUCH_TAP));
}

function taptap(e:TouchEvent):void{
trace("this doesn't work for some reason");
}

function addImg(e:Event):void{
sq.addChild(e.target.content);
sq.scaleY = sq.scaleX = .2;
}


function rotObj(e:TransformGestureEvent):void{
sq.rotation += e.rotation;
}


function panObj(e:TransformGestureEvent):void{
sq.x += e.offsetX * 2;
sq.y += e.offsetY * 2;
}


function scaleObj(e:TransformGestureEvent):void{
sq.scaleX *= e.scaleX;
sq.scaleY *= e.scaleY;
}

trace(Multitouch.maxTouchPoints);

플래시 타임라인을 액션스크립트로 제어 관련

타임라인의 프레임 넘버를 감지하여 액션을 추가하는 방법
addFrameScript 메소드를 사용한다.

targetMC.addFrameScript(5, testFunc);
function testFunc():void
{
       trace("testFunc");
}

* 5프레임 이후에 testFunc가 호출 된다.
 액션이 일어날 프레임 넘버에서 1을 빼서 기입하도록 한다.
 

타임라인에서 라벨링 되어있는 프레임 또는 프레임 종료시점을
찾아서 이벤트로 디스패치하는 클래스를 아래에서 제공한다.
http://www.adobe.com/devnet/flash/articles/timelinewatcher.html