2달전에 오픈했어야할 사이트를 5월이 되서야 오픈하기 시작했다.
영상에 쓰려고한 beyonce 음악을 못 쓰는 바람에 발생하게 된 추가적인 사운드 작업으로 인한 딜레이….. 10개국 이상오픈으로 각국 언어변환 및 수많은 수정사항으로 인해 사이트 제작 시간보다 수정사항으로 인한 시간이 훨씬 오래 걸린 프로젝트였다. 아직도 서비스 되어야할 국가가 남아 있어서 6월은 되어야 완전히 끝날듯 싶다…..
플래시에서의 주요 Interaction 으로는 flip motion 으로 스크린이 전환되는 점이다. 제품 컨셉과도 어느정도 부합되는 면이 있어 사이트의 key motion 으로 적용되었다.
이걸 위해 sandy(http://sandy.media-box.net/blog) 라는 오픈 소스 flash 3D API 를 사용하였다.
플래시 IDE 상에서는 일반적으로 오브젝트를 변형 시킬때 어파인 변형(affine transformation)밖에 할 수 없다. sandy 는 이런 제한 사항을 해결해 주는데 이미지 데이타를 이용하여 이미지 왜곡이 가능하다.
해외사이트에 종종 이것을 활용한 사이트가 선보이긴 했지만 대부분의 경우 이미지 변형 정도로 그쳐서 구현한 노력에 비해 효과가 아쉬운 점이 있었다.
또한 실제 이미지와 변형과정에서 생기는 에니메이션의 차이가 너무 눈에 띄는 문제점도 가지고 있었다.
이번 프로젝트에서는 이런 기존의 사이트의 아쉬운 점들을 보완하고 좀더 다이나믹한 flip motion을구현하고자 여러가지 테스트를 수행했다. 최대한 실제 영상의 프레임과 이미지 변환과정 단계에서의 어색함을 없애는데 주력했다.
물론 너무 낮은 사양(?) 의 pc 에서는 끊기는 느낌이 없지않아 있지만….어느정도 사양이 되는 pc에서 확인했을때는 상당히 부드러운 느낌의 flip motion 을 보였다. 또한 이번엔 Subversion 을 이용하여 프로젝트를 진행하였는데 수많은 수정사항과 각국별 다른 버전의 소스들을 관리하는데 있어서 기대이상의 효과를 본것 같다.
이전까지는 작업파일을 백업을할때 그냥 압축파일을 만들어서 이용하였다. 그럴경우 작업폴더에 나중에 수많은 백업파일이 생길뿐더러 정확한 파일 정보를 알 수 없었다.
Subversion 은 소스파일을 저장소에서 버전별로 관리해주고 필요할때 저장했던 로그를 보고 언제든지 원하는 버전의 소스를 다운받아 사용할 수 있다.
삼성모바일쪽의 서버속도가 너무 느린 관계로 로딩에 좀 시간이 걸리는 것 같다.
적어도 속도가 50KB/sec 정도만 되었어도 볼 수 있을 정도 였는데 그 정도도 안나온다….
그렇다고 퀄리티를 다운시킬수도 없는 노릇이고…..
삼성모바일쪽 서버가 업그레이드 되지 않는 이상 이러한 문제는 계속될 것 같다.
Samsung mobile Ultra music F300
Project manager : 김희선
Planning : 김희선, 조주연
Visual / UI Design : 박미연
Interaction Design : 김기정, 김대우
Movie : 박상화, 이동진, 김요한, 곽재도
사이트 보기(영문버전)
AS3.0 에서 사용되는 stage 와 root 의 개념은 AS2.0 버전과는 차이가 있다.
우선 stage 를 살펴보면 이전 버전에서는 stage 오브젝트는 static class 로서 주로 movie size 나 onResize 이벤트를 처리하는데 사용하였지만 새롭게 바뀐 AS3.0 에서는 플래시 무비에 존재하는 모든 displayObject 를 담을수 있는 최상위 컨테이너 개념이 첨가되었다.
이는 어떻게 생각하면 기존의 _root 와 같이 생각할 수도 있다. 하지만 바뀐 모델에 있어서 stage 속성은 인스턴스 속성이다. 다시말해, 전역적으로 접근할 수 없고 반드시 displayObject 의 인스턴스 속성으로서만 참조가 가능하다는 이야기이다. 또한 DisplayObject 가 스크린상의 timeline 이나 display list 에 등록하지 않는다면 null 값을 가지게 된다. (Document class 와 screen 상에 보여지는 오브젝트는 제외)
이런 점이 stage 속성을 사용하는데 있어 상당히 제약사항으로 작용하게 된다. 만약 DisplayObject 가 아닌 다른 Object 를 사용할때 stage 속성은 정의된 속성이 아니므로 constructor 에 stage 속성값을 parameter 로 넘겨주는 방식으로 사용할 수 밖에 없다.
<non-display object classes >
package
{
import flash.display.Stage;public class CustomObject {
private var _stage:Stage;
public function CustomObject(stage:Stage) {
_stage= stage;
}
}
}
root 는 상황에 따라 다를 수 있지만 일반적으로 현재의 flash movie 에서 main timeline 을 참조할 수 있는 DisplayObject 속성이다. 다시말해 상대적인 최상위 DisplayObject 를 참조한다.
이전의 _root 속성은 전역속성으로서 가장 최상의 컨테이너를 참조하였기 때문에 로더를 통해 불러왔을경우 그 갯수에 따라 _root 의 참조값이 변하였다. 하지만 root 속성은 현재의 flash movie 를 기준으로 참조값을 얻어오기 때문에 각 swf 에 해당하는 main timeline 의 참조값이다. 즉, 이전버전에서 _lockroot 를 적용한 것 같이 root 속성을 상대적으로 참조할 수 있다. 모든 displayObject 가 각각 timeline 의 참조값을 가질 수 있다는 의미이다.
하지만 root 도 stage 속성과 마찬가지로 인스턴스 속성이다. 따라서 stage 의 제한사항을 그대로 가지고 있다.
따라서 이런 문제점들을 해결하기 위해서는 위와같이 각각의 참조값을 parameter 로 넘겨주는 방법과 초기화 함수를 실행하여 addChild 이후에 참조할 수 있도록 처리해야한다.
또다른 방법으로는 Document class 를 활용하여 전역속성으로 만드는 것이다.
Document class 에서는 Stage 에 자동으로 추가되는 main timeline 으로 인해 생성되자마자 stage 속성과 root 속성을 참조할 수 있다.
<static 속성으로 참조할 수 있는 MainStage class>
package
{
import flash.display.DisplayObject;
import flash.display.*;
public class MainStage extends MovieClip {
public static var stage:Stage;
public static var root:DisplayObject;
public function MainStage() {
MainStage.stage = this.stage;
MainStage.root = this.root;
}
}
}
<Document class>
package
{
public class DocumentClass extends MainStage {
public function DocumentClass() {
}
}
}
위와 같이 document class 에서 MainStage class 을 상속받아 사용하면 어느 오브젝트에서라도 전역적으로 stage를 참조 할 수 있다.
하지만 이는 전역속성으로서 의미가 있는 stage 에만 유용할 뿐 각기 다른 root 속성을 참조하기에는 문제가 있다.
root 속성 참조 대한 문제는 ADD_TO_STAGE 이벤트를 이용하여 오브젝트마다 일일이 체크하는 방법이나 아니면 초기화 함수를 실행하여 처리하는 방법밖에 없는것 같다.(어떤 다른 방법이 있을까?????)
timeline 으로 부터 종속되지 않도록 stage 속성과 root 속성을 추가한것은 참 좋은 방법인것 같다. 하지만 그로 인해 개발자들이 일일이 신경쓰지 않으면 안되는 것들이 정말 많이 생긴것 같다.
timeline 과 class……….플래시의 특성상 종속적일 수 밖에 없는데……
어떤 것이 더 나은 방법일까?….의구심이 든다.
가변적인 메소드의 parameter 갯수를 이용하려면 AS2.0 버전까지는 arguments 오브젝트를 사용하여 임의의 parameter 에 접근할 수 있었다. 하지만 AS3.0 에서는 컴파일러의 좀더 철저한 데이타 타입의 체크와 parameter 관리에 의해 기존의 방법을 쓸 수가 없게 되었다.
<AS2.0>
function parameterTest():Void{
trace(arguments.length) //parameter 갯수를 알수 있음
}
parameterTest(1,2,3);
result–> 3
<AS3.0>
function parameterTest():void{
trace(arguments.length)
}
parameterTest(1,2,3);
result–> compiler error : Incorrect number of arguments.
AS3.0 에서는 메소드 정의시 parameter 갯수와 호출시 parameter 갯수가 일치해야만 한다.
그렇지 않으면 위와 같이 arguments 갯수에 오류가 있다고 에러를 발생시키게 된다.
이를 위해 …(rest) paremeter 구문을 새롭게 제공하였는데 사용법은 단순히 … 뒤에 사용자가 원하는 parameter array 이름을 써주면 된다.
function parameterTest(…param):void{
trace(param.length) // param 은 배열 타입이다.
}
다른 parameter 와 같이 사용하려면
function parameterTest(str1:String,str2:String,…param):void{
//…..statements
}
마지막에 …(rest) parameter 를 써주면 된다.
주의할 점은 위 방법을 사용하면서 arguments 오브젝트를 동시에 사용할 수 없다는 점이다.
Recent Comments