Welcome to CREATIVE World!

작년에 위젯 제작하면서 시안과 별도로 따로 만들어봤던 달력입니다.
파일정리하다가 찾았네요~!
공부하실 분들을 위해 허접하지만 올려봅니다.
프로토타입형태라서 사용하기 뭐한 상태라 간단히 Today로 가는 버튼과 하단에 년도를 추가하였습니다.(년도도 없었어요 ㅎㅎ)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

정확한 명칭은 뭔지 잘 몰르겠네요.
이런저런 사이트에서 많이 쓰는 효과인데 연습삼아 한번 만들어봤습니다.
사용된 메소드가 3개뿐이고 그중 2개는 랜덤문자를 형성하기 위한것이라 소스상에는 어려울것이 없어보입니다.
그럼 많은 참고가 되길바랍니다~~

1. var testString:String = "http://www.heyon.com Have yourself to cookie. bravo my life~~ ah hat hat";
2. var tmpText:String = "";
3.  
4. // 초기값 세팅
   testText.text = SetRandChar(testString.length);
5. testText.addEventListener(Event.ENTER_FRAME, ShowMatrix);
6.  
7. /**
8. * 매트릭스 실행
9. * @param e : enter frame event
10. */
11. var i:Number = 0;
12. function ShowMatrix(e:Event):void {
13.         // 텍스트 길이 만큼만 실행
14.         if (i <= testString.length) {
15.                 // tmpText 변수에 testString을 한글자씩 늘리고 랜덤문자는 한글자씩 줄인걸 합하여 대입한다.
16.                 tmpText = testString.substr(0, i) + SetRandChar(testString.length - i);
17.                 testText.text = tmpText;
18.         } else {
19.                 // 텍스트 길이를 넘어가면 index를 초기화 하고 enter frame을 종료한다.
                    i = 0;
20.                 testText.removeEventListener(Event.ENTER_FRAME, ShowMatrix);
21.         }
22.         i++;
23. }
24.  
25. /**
26. * 랜덤 문자 채우기
27. * @param textCnt : 텍스트길이
28. * @param beginCharCode : char code 랜덤 범위 시작점
29. * @param endCharCode : char code 랜덤 범위 끝점
30. * @return returnText : 랜덤문자열
31. */
32. function SetRandChar(textCnt:Number = 0, beginCharCode:Number = 80, endCharCode:Number = 120):String {
33.         var returnText:String = "";
34.        
35.         for (var i:Number = 0; i < textCnt; i++) {
36.                 returnText = returnText + String.fromCharCode(randRange(beginCharCode, endCharCode));
37.         }
38.        
39.         return returnText;
40. }
41.  
42. /**
43. * 랜덤 범위
44. * @param beginCharCode : 최소값
45. * @param endCharCode : 최대값
46. */
47. function randRange(beginCharCode:Number, endCharCode:Number):Number {
48.         var randomNum:Number = Math.floor(Math.random() * (endCharCode - beginCharCode + 1)) + beginCharCode;
49.         return randomNum;
50. }
    

 FLA다운로드
 matrix.fla

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

플래시에서 ExternalInterface class 를 사용하여 외부 자바스크립트와 연동할때
자바스크립트의 소스를 html 주석이 감싸고 있으면 동작이 안된다.

js)
<script type="text/javascript">
<!--
function CallAlert() {
    alert("heyon.com");
}
-->
</script>

위의 <!-- --> 는 제거를해서 사용하면 호출이된다.
문제와 답 모두가 아주심플하지만 개인적으로 계속 동작이 안되어 external을 잘못사용하고 있는지 flash 소스만 보느라 시간낭비한게 생각나 메모해둔다.

간단한 externalinterface 사용법.
// 클래스 참조
import flash.external.ExternalInterface;

// 외부인터페이스가 사용가능한지 여부를 체크
if (ExternalInterface.available) {
    // 실행 - Argments는 javascript의 인자갯수만큼 맞추어 값을 보낼때 사용한다.
    ExternalInterface.call("CallAlert" /*, Argments..*/);
}

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

papervision3d 를 사용하다보면 분명히 z depth 를 뒤로 뺐음에도 불구하고 마우스를 x좌표 + 방향으로 이동시키다보면 DisplayObject3D끼리 겹치거나 뒤에 있어야할 object가 위로 온다던지 겹쳐서 깜빡거린다던지 하는 문제가 있다.
나도 해당 object의 z값을 뒤로 빼주기만 하면 알아서 index가 형성될줄 알았는데 이리저리 살펴보니 해당 sorting부분은 따로 있었다.

잘못된 예제1 : http://work.heyon.com/blog_post/papervision3d_test/2008_06_24/01_LayerSort.html
잘못된 예제 2 : http://work.heyon.com/blog_post/papervision3d_test/2008_06_24/02_LayerSort.html
정상적인 예제 : http://work.heyon.com/blog_post/papervision3d_test/2008_06_24/03_LayerSort.html

소스 다운로드 :

papervision3d_2008_06_24.zip

퇴근전에 잊어먹지 않기위해 블로깅하는거라 소스첨부와 간단한 설명만 남기는게 조금 아쉽다.
급하게 짜느라 상세한 주석은 못달았지만 대략적인 구조와 이용방법은 소스를 참고하면 된다.

AlphaPlane.as 파일은 무시해도 되고 LayerSort.as 파일에 중요한 index에 관련한 루틴이 들어있다.
클래스는 org.papervision3d.view.layer.util 안에 있는 ViewportLayerSortMode.as 파일이 필요하다.
대략적인 프로세스는 아래와 같다.

1. viewport 생성
2. 해당 viewport 에 viewport parent layer 생성
3. viewport 의 container sprite에 생성한 parent layer add (addChild와 같은 개념)
4. parent layer의 sortMode를 INDEX_SORT나 Z_SORT로 선언
5. parentLayer.getChildLayer(plane 객체).layerIndex = 작은수로 갈수록 뒤로 빠짐

DisplayObject3D객체를 생성할때 layer 영역도 같이 생성이 되는데 해당 객체의 layer를
useOwnContainer = true 값으로 세팅하여야 sorting 을 할 수 있다.
해당 메소드사용법은 AlphaPlane.as 파일에 있다.

내가 대략 이해하기로는 useOwnContainer = true 로 하여 자신의 Object3D객체를 viewport parent layer 로 렌더링을 하고 이렇게 렌더링된 layer를 layer.util 의 layerSortMode 에서 정렬을 해주는게 아닌가 싶다.
금방 소스만 올리고 갈랬는데 벌써 시간이 3시가 되어버렸다..OTL
오늘은 이만 줄이고 정확한 동작법과 프로세스를 알게되면 다시 피드백을 남겨야 겠다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

얼마전에 cs3의 내장 Tween 클래스로 작업을 하는데 이상한 문제가 발생하였다.
Tween이 플레이중일때 다른 Tween이 플레이되버리면 기존에 플레이 되던 Tween은 멈추던 것이다.
해결책으로 new Tween을 할때마다 변수명을 달리줘서 해결하였으나 검색해보니 cs3내장 Tween에 문제가 많다고 한다.
내가 좋아하는 lan fuller(flash monkey) 도 google tweener를 쓰는걸 알고 부터는 나도 google tweener를 사용하기 시작했다.  그렇다 난 완전 팔랑귀다.ㅋㅋ

다운로드 URL : http://code.google.com/p/tweener/downloads/list
API Documentation : http://hosted.zeh.com.br/tweener/docs/en-us/

아직 사용해보지는 않았지만 포인트 지점을 정해줘서 곡선운동도 간단히 표현가능한것으로 보인다.
아래는 API Documentation 에 있는 Transition 예제들이다.




예제소스 - google tweener를 이용해서 drag&drop 을 허접하게 구현해보았다.

 

import flash.display.Sprite;
import caurina.transitions.Tweener;

// 컬러 리스트 수동으로 구성 OTL
var colorList:Array = new Array();
colorList.push(0xFFCC00);
colorList.push(0xEFC000);
colorList.push(0xCACC00);
colorList.push(0xBBCC0E);
colorList.push(0xCACACA);
colorList.push(0xEFEF00);

/**
* circle을 생성한다.
* @param (string) circleName : circle 의 인스턴스명
* @return (Sprite) circle : 생성된 Sprite인스턴스 리턴
*/
function createCircle(circleName:String = null, colorIdx:uint = 0):Sprite {
        var circle:Sprite = new Sprite();
        circle.graphics.beginFill(colorList[colorIdx]);
        circle.graphics.drawCircle(60, 60, 60);
        circle.graphics.endFill();
        circle.x = 0;
        circle.y = 0;
        circle.buttonMode = true;
        addChild(circle);
        return circle;
}

/**
* 드래그 시작
* @param (MouseEvent)
* @return
*/
function dragIt(e:MouseEvent):void {
        e.target.addEventListener(Event.ENTER_FRAME, runDrag);
        
        // 마우스를 target밖에서 떼었을때 - releaseOutSide 처리
        function dispListener(disp_e:MouseEvent):void {
                // 중복 호출을 막기위해 mouse up 이벤트를 삭제
                stage.removeEventListener(MouseEvent.MOUSE_UP, dispListener);
                // 초기 호출된 e.target으로 dropIt을 호출
                dropIt(e);
        }
        stage.addEventListener(MouseEvent.MOUSE_UP, dispListener);
}

/**
* 드래그 중단
* @param (MouseEvent)
* @return
*/
function dropIt(e:MouseEvent):void {
        e.target.removeEventListener(Event.ENTER_FRAME, runDrag);
}

/**
* 드래그 하는동안의 Tween 처리
* @param (Event)
* @return
*/
var tweenEffect:Object = null;
function runDrag(e:Event):void {
        tweenEffect = { x:(mouseX-(e.target.width/2)), y:(mouseY-(e.target.height/2)), time:2, transition:'easeOutElastic' };
        Tweener.addTween(e.target, tweenEffect);
}

/**
* 초기화 처리를 하는 메소드
* @param (MouseEvent)
* @return
*/
function resetCircle(e:MouseEvent):void {
        for (var i:Number = 0; i < 6; i++) {
                removeChildAt(1);
                // 마우스를 눌렀을때 dragIt호출
                createCircle(defaultName + i, i).addEventListener(MouseEvent.MOUSE_DOWN, dragIt);
        }
}

// 뿌립시다.
var defaultName:String = 'myCircle';
for (var i:Number = 0; i < 6; i++) {
        // 마우스를 눌렀을때 dragIt호출
        createCircle(defaultName + i, i).addEventListener(MouseEvent.MOUSE_DOWN, dragIt);
}

// 초기화 버튼 이벤트
reset.buttonMode = true;
reset.addEventListener(MouseEvent.CLICK, resetCircle);

 FLA다운로드
 
 google_tweener_test.fla

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.