Tag Archive for 'AS2.0'

Page 2 of 2

Animating with Fuse Tutorial

Thanks to 2Advanced, the site is now back up! Last night I uploaded a new tutorial called Animating with Fuse which shows how to install and use this amazing new animation system. This is part one of two and the next one will show how to use it to create some complex motion graphics. I can’t state this enough, Fuse rocks! Click on the image below to check it out.

1125931698


이래저래 볼것이 많은 사이트다.

외국사람들은 할일이 없는 걸까?…아님 따로 돈을 받고 제작하는 걸까?..

남들이 쓰기 좋게 잘도 만들어 놓는다.

어찌 보면 모션 패키지 같은 라이브러리로서 복잡한 모션을 간단히(?) 구현할수 있게 도와주는 클래스 모듬세트

하지만 너무 확장성 있게 적용하려고 코드 길이가 쓸데없이 너무 길어 리소스 낭비가 심할듯 싶다.

또한 코드 가독성 심하게 떨어진다. 좀더 직관적인 패키지 구성을 했을면 어떨까 하는 생각이 든다.

FileReference Class Tip

현재 flash8 에서 지원하는 파일 업로드 클래스인 FileReference 는 어쩌면 반쪽짜리 업로드 클래스이다. 왜냐하면 파일업로드 완료시 서버와의 어떤 변수 값도 받을 수 없기 때문이다.

물론 onComplete 가 업로드 완료시에 플래시 쪽에서 호출되지만 이는 단순히 업로드 완료만 알수 있는것이다.

특별히 안정적으로 업로드를 구성하지 않는다면 다시말해, 개인이 업로드를 관리하고 사용자가 많지 않을경우 물론 업로드가  완료되는 이벤트만 발생되어도 문제가 없다.

하지만 사용자가 많은 경우, 예를 들어 사용자가 사진을 업로드하는 사이트를 만들경우,

이런 경우에는 반드시 업로드하는 클라이언트 파일명을 바꾸어야 할 필요가 있다.

중복의 여지가 있기 때문이다. 만약 이런 파일 필터링을 거치지 않는다면 분명히 파일이름이 같게되어 이전 파일이 덮어써지는 현상이 발생할 것이다.

따라서 좀더 안정적인 파일 업로드 구현을 원한다면 파일 생성 일자나 일련의 첨자를 붙여 파일 이름을 변경하는 것은 필수이다.

이때 문제가 되는 것이 바로 위에 언급한 서버와 플래시간의 변수 교환문제이다.

FileReference class 에서의 upload()  method의 파라미터에는 서버파일의 데이타를 받을수 없다.

따라서 서버에서 파일 이름을 임의로 변경해 버리면 플래시에서 알 수 있는 방법이 없다.

물론 약간의 팁을 사용하면 가능하다.

다행이도 upload url에 매개변수를 첨부하여 서버에 전송할 수 있다.

바로 이런방법으로 서버에서 파일명을 저장하는 것이 아니라 플래시에서 정한 파일명을 서버로 보내 그걸 파일명으로 저장하면 위와 같은 문제를 해결할 수 있다.

<upLoad.as>

private function upload():Void

{

var success:Boolean;

noRep=new Date().getTime();

success = this._fileRef.upload(UploadExample.URL+“?noRep=”+noRep);

// url에 중복을 피하기 위한 현재 시간 정보를 첨부한다.

}

private function onComplete(fileRef:FileReference):Void

{

trace(file Name—>”+noRep+”_”+fileRef.name);

//업로드 완료시 서버에 저장완료된 파일명을 알수 있다.

}
<upload.php>

<?php

//path to storage

$storage = ‘uploadedFiles’;

$upFile=”$storage/”.$noRep.’_’.$_FILES['Filedata']['name'];

//if the file is moved successfully

if ( move_uploaded_file( $_FILES['Filedata']['tmp_name'] , $upFile ) ) {

echo( ’1 ‘ . $_FILES['Filedata']['name']);

//file failed to move

}else{

echo( ’0′);

}

?>

AS3.0 에서 업로드 데이타 필드명을 따로 플래시에서 지정할 수 있게 바뀌었지만 서버에서의 변수 문제는 제공해 주질않았다.

Easing motion in Frame

프레임 모션에 easing 값을 넣어서 적용하는 방법…
프레임의 길이가 적어도 200 frame 이상이 되여야만 어느정도 부드러운 효과를 기대할수 있다.
일반적인 트윈같은 경우 action 으로 하는 경우가 훨씬 자연스럽지만 프레임 모션을 사용해야할경우
이 방법을 사용하면 action 같은 frame 모션이 가능하다.

import mx.transitions.Tween;
import mx.transitions.easing.*;
 
mc._frame = mc._currentframe;
 
var myTween:Tween = new Tween(mc, "_frame", Strong.easeOut, mc._currentframe, 300, 1, true);
 
myTween.onMotionChanged = function() {
mc.gotoAndStop(Math.round(mc._frame));
};
myTween.onMotionFinished = function() {
this.yoyo();
};

프레임 속성을 동적으로 할당해서 Tween class 를 사용하여 easing function 를 적용하여 구현.

XML Parsing Error

아래와  같은 xml 파일을 플래시로 불러들여 파싱할경우 주의할 점이 있다.

<?xml version="1.0"  ?>
<node>
<item label="menu1" src="null">
  <subMenu label="Play Movie" src="file1.swf"  eng="no"  loadingPos="506,345"></subMenu>
  <subMenu label="Play2" src="file2.swf"  eng="no" loadingPos="506,345"></subMenu>
</item > 
 
<item label="THEME STORY" src="file3.swf"  loadingPos="506,345"> </item ><item  label="SPECIAL FEATURE" src="null">
      <subMenu label="gallery" src="file4.swf"  eng="yes"  loadingPos="506,345"></subMenu>
  <subMenu label="about" src="file5.swf"  eng="yes" loadingPos="506,345"></subMenu>
   </item >
</node>

보통 xml 을 사용할 경우 외부데이타 종류를 임의로 정해줄 수 있어 xml 속성(attributes)을 이용하여 구성한다. 무심코 나중에 추가되는 xml 속성값의 순서와 플래시에서 파싱하는 순서가 일치하지 않을경우 제대로 파싱되어 데이타를 처리할 수 없다.

var subObj={label:dataArr2[j].attributes.label, src: dataArr2[j].attributes.src ,eng:dataArr2[i].attributes.eng , loadingPos: dataArr2[i].attributes.loadingPos};

위와 같은 형식으로 파싱할 경우 꼭 파싱할 순서를 xml 노드 속성 순서와 정확히 일치시킨다.

Singleton pattern 에서 유의사항

Singleton pattern 으로 객체를 생성했을경우 플래시에서 뜻하지 않은 상황이 발생한다.

플래시에서 Export 한 후 Download simulate 를 하면 알수 없는 이유로 프로그램이 진행이 되질 않는다. 이것은 프로그램의 오류가 아니라 Singleton pattern 에서 인스턴스 참조값을 저장하기 위해 사용한 전역변수가 문제다.

다시말해, 플래시에서 simulate 를 하기 위해서는 Export 한 상태에서 한번 더 Ctrl+ Enter 을 눌러야된다. 이 상황에서 플래시는 메모리에서  전역변수를 소거하지 않고 그대로 남아있는 상태가 된다.

Singleton pattern 에서는 반드시 인스턴스는 단 한번 밖에 생성되지 않는다.

따라서 한번 Export 해서 생성된 인스턴스로 인해 simulate 할경우 원하지 않은 상황이 발생한다.

private static var sInstance:FramePulse = null;
public static function getInstance () : FramePulse {
    if (sInstance == null) {
      sInstance = new FramePulse();
    }
    return sInstance;
}

–> Download 테스트 시 메모리가 소거 되지 않아 전역속성인 sInstance 로 인해 인스턴스를 생성할 수 없다.

Event Programming

플래시 자체가 이벤트 기반의 프로그램이다 보니 발생하는 이벤트 중심으로 코딩하는 방법이 로직상이나 가독성 측면에서 좋은 코딩 방법이라는 생각이 든다.

하지만 이벤트 별로 패턴을 나누다 보니 코드길이가 자연스레 길어지고 이벤트 리스너(addEventListener) 를 연결하는 시간과 인스턴스를 초기화하는 시간과의 차이로 인해 적지않은 문제점이 발생한다.

var myLoader:XmlLoader=new XmlLoader(this,UrlSet.xmlUrl+"navigation.xml",100,100);
 
myLoader.setXmlAttribute(["label","src","loadingPos"]);
myLoader.addEventListener(XmlLoaderEvent.ON_START,this);
 
function onStart(evt:XmlLoaderEvent){
      myLoader.removeEventListener(XmlLoaderEvent.ON_START); 
   //파싱완료후 실행함수
 
}

간혹가다 인스턴스(myLoader ) 초기화보다 인스턴스 메소드가 먼저 실행되는 이상한 일이 발생할 경우가 있다.

Action 초기화 순서

Timeline –> MovieClip

항상 기억하자 하면서도 어느순간 잊어버려 엄청난 고생을 한다. 액션 초기화 순서는 타임라인이 무비클립보다 항상 먼저 일어난다. 따라서 타임라인의 액션과 같은 프레임상에 무비클립이 있을경우 그 무비클립을 제어하려고 하면 영 말을 듣지 않는다.

이것은 타임라인이 초기화될때 제어하려고하는 무비클립이 아직 초기화되지 않기 때문에 발생하는 문제이다.

해결방안

  1. 타임라인의 액션의 위치를 제어하려고하는 무비클립의 위치보다 항상 뒤프레임에 위치하도록 함
  2. 일정시간 딜레이후 타임라인 상의 액션을 실행한다


Object 의 scope 변경

클래스 안에 메소드가 중첩될경우 현재 클래스 scope를 참조하려고 일일이 this 키워드를 사용해 코드 가독성이 좀 떨어졌는데 알고보니 7.0 버전부터 delegate 클래스를 지원하고 있었다…

class com.vkimone.utils.ExtDelegate {
function ExtDelegate(f : Function) {
//생성자 필요없음…..
}
/**————————————————————————
* 함수를 다른 오브젝트 영역으로 설정할수 있음..apply 또는 call 과 같은 기능
* 오브젝트와 함수 이외에 나머지는 파라미터로 넘겨줌
* @param obj 오브젝트 영역
* @param func 실행할 함수
*————————————————————————*/
public static function create(obj:Object, func:Function):Function{
var f = function(){
var target = arguments.callee.target;
var func = arguments.callee.func;
var args=arguments.callee.args;
return func.apply(target, args);
};
f.target = arguments.shift();
f.func = arguments.shift();
f.args=arguments;
return f;
}
}

원본코드는 스코프변경후 실행할 메소드의 파라미터를 넘겨줄수 없었는데 파라미터까지 지원하게 좀 손봤다..함수를 참조값으로 넘길수 있다는 점이 좀 흥미롭다..

btn.onRelease=ExtDelegate .create(this,test,param1,param2…….);

Clearing All setIntervals

객체를 삭제하거나 무비클립을 unload 해도 setInterval Id 값은 전역속성으로서 그대로 메모리에 남아 지우지 않는한 계속실행된다. 전에 이걸 모르고 코드를 작성했다가 엄청난 멍멍이고생을 했던기억이 새록새록 난다.
과연 어떻게 클래스에 상관없이 모든 객체내에 쓰인 setInterval 을 몽땅 없애버릴수 있을까?…
나이스한(?) 방법을 하나 발견했다..

  function clearAllIntervals() {
    var topID = setInterval(function () {}, 100);
    for (i=0; i&lt;=topID; i++) {
     clearInterval(i);
    }
  }

Id 값이 순차적으로 증가한다는 사실에 착안…새로운 인터벌 생성후 그 이전 아이디 값을 몽땅지운면 끝….