2010년 1월 9일 토요일
20-flash-menu1~16.zip
main.psd
1099800472_CursorEffect.fla
2009년 9월 24일 목요일
플래시 날짜 타이핑
위에껀 글자를 타이핑 하는 효과입니다.
위 플래시에서 여러분이 원하는 애니메이션을 요청하시면 올리도록 노력하겠습니다.
본론으로 들어갈게요.
이 글에서 보여드리려는건 날짜를 타이핑 하는 효과입니다.
맨 위의 애니메이션은 1글자씩 출력되는 것이 특징이고 이것은 숫자들이 다같이 출력됩니다.
이해를 돕기위해 스크립트를 간단히 설명해보겠습니다.
(제가 구현했지만 저도 해석할려면 한참걸립니다 ㅡㅡ;;)
1. 변수 aae에 날짜를 입력합니다. (형식은 숫자.숫자.숫자.숫자 ... 이런식으로)
2. 배열을 만들어 각 배열마다 한글자씩 집어넣습니다.
3. 점(.)이 있는 배열을 제외한 나머지 변수마다 0부터 9까지 랜덤으로 숫자를 출력합니다.
5. 몇번 반복한후에 첫 변수는 랜덤을 멈추고 원래 날짜의 첫 글자를 입력해줍니다.
6. 3번과 4번을 반복하고 각 글자를 입력해줍니다.
7. 글자가 다 입력되면 texf 함수를 멈춥니다.
다이나믹 텍스트 만들고 변수(Var)를 dates_view 으로 지정해줍니다.
그리고 프레임에 액션걸고 첫 줄에 날짜를 입력해줘야 합니다.
aae="2019.04.16"; 이런식으로..
그리고 아래 스크립트를 입력합니다.
aa = 7; //애니메이션 끝나는 속도
if(_root.aae) {} else _root.aae = "2009.09.11";
aae = _root.aae;
aaa=0; aaa2=0; mata="";
aae_arr= new Array();
//aae_arr[0]부터 aae_arr[9]까지 글자입력하기
texf = setInterval(texx, 18);
function texx() {aaa2++;
aaa=Math.floor(aaa2/aa);
view="";//뷰 초기화
for(ia=0; ia<=aae.length-1; ia++){
if(aae.charAt(ia)==".") aae_arr[ia]=_root.aae.charAt(ia);
else if(aaa<=ia) aae_arr[ia]=random(10);
else aae_arr[ia]=_root.aae.charAt(ia);
view+=aae_arr[ia];}//뷰 입력
if(aaa==aae.length) clearInterval(texf);
}
궁금하신 분은 첨부파일 참고^^; (MX2004)
2009년 9월 23일 수요일
Dday + 유튜브 크기조절 위젯 (2 in 1) 퍼가기
Dday + 유튜브 크기조절 위젯 (2 in 1)에 이어서 포스팅 합니다.
사용방법은 위 포스팅을 참고해주세요.
이 녀석 이름을 뭐라해야할지 모르겠군요.
Dday + 유튜브 크기조절 위젯 (2 in 1) 이라고 하니까 제목이 너무 길어서 말이죠.
쿨럭
본론으로 들어가겠습니다.
우선 코드부터 적어보겠습니다.
(코드 첨부파일로도 올려놨어요^^)
<center><span>
<embed width=180 height=50 menu="0"
src=http://cfs.tistory.com/custom/blog/43/436478/skin/images/Youtube.swfflashvars="dates=2009.09.11&w_change=396&color_percent=0">
</center></span>
블로그 날짜는 dates에 적어줍니다.
(2005년 1월 1일인경우 dates=2009.09.11 라고 해야겠죠?)
w_change 에는 포스트 너비를 적어주세요.
(제 티스토리 블로그는 396이니까 w_change=396 이라고 적으면 됩니다)
밝은 스킨이 아니라면 color_percent 값을 늘려주세요.
(값은 0~100인데 밝은 스킨은0~15, 어두운 스킨은 85정도를 추천)
그럼이제 어두운 스킨에, 날짜는 2019년 4월 16일, 포스트너비 640으로 올려보겠습니다.
<center><span>
<embed width=180 height=50 menu="0"
src=http://cfs.tistory.com/custom/blog/43/436478/skin/images/Youtube.swfflashvars="dates=2019.04.16&w_change=640&color_percent=85">
</center></span>
쉽죠!?
주소는http://cfs.tistory.com/custom/blog/43/436478/skin/images/Youtube.swf 쓰시거나 직접 올릴수 있습니다. (위 주소를 사용하시면 자동으로 업뎃 됩니다 -_-!)
티스토리에서 swf파일 불러오기
Youtube.rarswf 파일
embed code.txt스크립트
한분이라도 쓰시길 희망해봄 ㅠㅠ
Dday + 유튜브 크기조절 위젯 (2 in 1)
제 블로그 Dday를 위젯으로 달고 싶었습니다.
사실, Dday 위젯을 달고 싶게된 이유는 Daum Dday 위젯때문입니다.
제 맘에 꼭 드는 위젯이었죠.
그런데 Since라고 적으니 안 어울리는 겁니다.
뭐가요?
블로그에 Since를 붙여넣는다 함은, 블로그 개설날짜를 표시해야 되는데..
그저 Dday 만 보여주는거죠. (무슨 수능도 아니고 ㅠ)
하여간 이런 희안한 요구때문에 직접!!!! 만들어야 한다는 사명감에 불타올랐습니다.
이 위젯을 만들게된 이유는 하나 더 있습니다.
바로, 비좁은 제 티스토리 블로그입니다.
디자인으로는 적절히 아담한데 정작, 포스팅영역에는 동영상도 못들어갑니다
ㅡ_ㅡ
유튜브에서 동영상 퍼올려면 사이즈가 425입니다.
제 티스토리 블로그 포스팅 영역은 396입니다.
포스팅 영역을 넘어서면 동영상이 짤려버려요 ㅠ
그래서 어떻게 해야하나 고민을 많이했습니다.
바로 그 문제를 해결해준 것이 이 위젯의 두번째 기능입니다.
그런데 이 위젯을 달아놓는다고 해서 포스팅영역을 조절할 수 있는건 아닙니다.
그러면 대체 뭐하는 기능이냐?
유튜브 코드를 붙여넣으면 자신이 원하는 사이즈로 토해내는 거죠.
예를들어 유튜브에서 640*505 동영상을 퍼온다고 칠게요.
그런데 포스팅 영역은 700입니다.
이런경우 동영상 코드를 위젯에 붙여넣으면 700사이즈로 뱉어줍니다.
(저의 경우 396사이즈로 뱉어주는거죠!)
정말 희귀하고 괜찮은 기능입니다(저한테만 -_-)
사용법은 간단합니다.
우클릭해서 'Youtube by 엘카' 를 클릭합니다.
Change size to 에는 미리 입력해둔 사이즈가 나오죠.
Paste code here에다가 embed 태그를 붙이고 copy to clipboard 클릭하면 원하는 사이즈로 알맞게 복사해줍니다.
불편한점 있으면 알려주세요!!
내용이 길어서 퍼가는 방법은 이어지는 포스팅에 올렸어요~
2009년 9월 22일 화요일
플래시에서 키 입력으로 URL을 걸수있는 액션스크립트
Letters A to Z and standard numbers 0 to 9
The following table lists the keys on a standard keyboard for the letters A to Z and the numbers 0 to 9, with the corresponding key code values that are used to identify the keys in ActionScript:| Letter or number key | Key code | ASCII key code |
|---|---|---|
| A | 65 | 65 |
| B | 66 | 66 |
| C | 67 | 67 |
| D | 68 | 68 |
| E | 69 | 69 |
| F | 70 | 70 |
| G | 71 | 71 |
| H | 72 | 72 |
| I | 73 | 73 |
| J | 74 | 74 |
| K | 75 | 75 |
| L | 76 | 76 |
| M | 77 | 77 |
| N | 78 | 78 |
| O | 79 | 79 |
| P | 80 | 80 |
| Q | 81 | 81 |
| R | 82 | 82 |
| S | 83 | 83 |
| T | 84 | 84 |
| U | 85 | 85 |
| V | 86 | 86 |
| W | 87 | 87 |
| X | 88 | 88 |
| Y | 89 | 89 |
| Z | 90 | 90 |
| 0 | 48 | 48 |
| 1 | 49 | 49 |
| 2 | 50 | 50 |
| 3 | 51 | 51 |
| 4 | 52 | 52 |
| 5 | 53 | 53 |
| 6 | 54 | 54 |
| 7 | 55 | 55 |
| 8 | 56 | 56 |
| 9 | 57 | 57 |
| a | 65 | 97 |
| b | 66 | 98 |
| c | 67 | 99 |
| d | 68 | 100 |
| e | 69 | 101 |
| f | 70 | 102 |
| g | 71 | 103 |
| h | 72 | 104 |
| i | 73 | 105 |
| j | 74 | 106 |
| k | 75 | 107 |
| l | 76 | 108 |
| m | 77 | 109 |
| n | 78 | 110 |
| o | 79 | 111 |
| p | 80 | 112 |
| q | 81 | 113 |
| r | 82 | 114 |
| s | 83 | 115 |
| t | 84 | 116 |
| u | 85 | 117 |
| v | 86 | 118 |
| w | 87 | 119 |
| x | 88 | 120 |
| y | 89 | 121 |
| z | 90 | 122 |
Keys on the numeric keypad
The following table lists the keys on a numeric keypad, with the corresponding key code values that are used to identify the keys in ActionScript:| Numeric keypad key | Key code | ASCII key code |
|---|---|---|
| Numpad 0 | 96 | 48 |
| Numpad 1 | 97 | 49 |
| Numpad 2 | 98 | 50 |
| Numpad 3 | 99 | 51 |
| Numpad 4 | 100 | 52 |
| Numpad 5 | 101 | 53 |
| Numpad 6 | 102 | 54 |
| Numpad 7 | 103 | 55 |
| Numpad 8 | 104 | 56 |
| Numpad 9 | 105 | 57 |
| Multiply | 106 | 42 |
| Add | 107 | 43 |
| Enter | 13 | 13 |
| Subtract | 109 | 45 |
| Decimal | 110 | 46 |
| Divide | 111 | 47 |
Function keys
The following table lists the function keys on a standard keyboard, with the corresponding key code values that are used to identify the keys in ActionScript:| Function key | Key code | ASCII key code |
|---|---|---|
| F1 | 112 | 0 |
| F2 | 113 | 0 |
| F3 | 114 | 0 |
| F4 | 115 | 0 |
| F5 | 116 | 0 |
| F6 | 117 | 0 |
| F7 | 118 | 0 |
| F8 | 119 | 0 |
| F9 | 120 | 0 |
| F10 | This key is reserved by the system and cannot be used in ActionScript. | This key is reserved by the system and cannot be used in ActionScript. |
| F11 | 122 | 0 |
| F12 | 123 | 0 |
| F13 | 124 | 0 |
| F14 | 125 | 0 |
| F15 | 126 | 0 |
Other keys
The following table lists keys on a standard keyboard other than letters, numbers, numeric keypad keys, or function keys, with the corresponding key code values that are used to identify the keys in ActionScript:| Key | Key code | ASCII key code |
|---|---|---|
| Backspace | 8 | 8 |
| Tab | 9 | 9 |
| Enter | 13 | 13 |
| Shift | 16 | 0 |
| Control | 17 | 0 |
| Caps Lock | 20 | 0 |
| Esc | 27 | 27 |
| Spacebar | 32 | 32 |
| Page Up | 33 | 0 |
| Page Down | 34 | 0 |
| End | 35 | 0 |
| Home | 36 | 0 |
| Left Arrow | 37 | 0 |
| Up Arrow | 38 | 0 |
| Right Arrow | 39 | 0 |
| Down Arrow | 40 | 0 |
| Insert | 45 | 0 |
| Delete | 46 | 127 |
| Num Lock | 144 | 0 |
| ScrLk | 145 | 0 |
| Pause/Break | 19 | 0 |
| ; : | 186 | 59 |
| = + | 187 | 61 |
| - _ | 189 | 45 |
| / ? | 191 | 47 |
| ` ~ | 192 | 96 |
| [ { | 219 | 91 |
| \ | | 220 | 92 |
| ] } | 221 | 93 |
| " ' | 222 | 39 |
| , | 188 | 44 |
| . | 190 | 46 |
| / | 191 | 47 |
이 외의 키들은 아래의 액션스크립트를 통해 찾을 수 있습니다.
빈 문서를 작성한 후 액션스크립트를 입력, 테스트 무비를 하신 후에 원하는 키를 입력하시면 Output 패널을 통해 해당 키를 보실 수 있습니다. ^^
var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
trace("DOWN -> Code: " + Key.getCode() + "\tACSII: " + Key.getAscii() + "\tKey: " + chr(Key.getAscii()));
};
Key.addListener(keyListener);
keyListener.onKeyDown = function() {
trace("DOWN -> Code: " + Key.getCode() + "\tACSII: " + Key.getAscii() + "\tKey: " + chr(Key.getAscii()));
};
Key.addListener(keyListener);
출처 http://jaywill.springnote.com/pages/2852986
2009년 9월 19일 토요일
무비클립 부드럽게 색 바꾸기
지난번 포스팅한 ColorMatrixFilter 색조, 채도 변경에서는 오브젝트의 색상을 바꾸는 방법을 다루었습니다.
그런데 색상이 바로바로 바뀌니까 다소 딱딱한 느낌이 있었습니다.
그후 어떻게 하면 보아의 홈페이지처럼 부드럽게 색을 바꿀수 있을까 열심히 고뇌했습니다 -_-;
답은 아래 스크립트에 있었습니다.
for(ia=0; ia<=2; ia++){
if(Math.round((c[ia]-color[ia])*100)>0) c[ia]= 0.01*Math.round(c[ia]*100)-0.01;
if(Math.round((c[ia]-color[ia])*100)<0) c[ia]= 0.01*Math.round(c[ia]*100)+0.01;
}//trace(c[0]+c[1]+c[2]);
색이 바뀌면 즉시 전달하지 않고 color[ia] 변수의 값을 조금씩 조정하는 것입니다.
(EnterFrame으로 반복 걸구요)
즉, 기존 색상이 새로 얻은 값보다 크다면 값을 빼고, 작다면 더해서 기존 색상이 새로운 값을 따라가는거죠.
(어려운 것을 설명할수록 제가 글을 참 못쓴다는 생각이 ㅠㅠ)
이 플래시는 아무때나, 아무색으로 바뀝니다.
소스 잘 뜯어보세요^^
소스보기..
Actionscript3.0 강좌 모음
동강의 AS3.0 기초 강좌
1강 Flash CS3 || Actionscript3.0
2강 Event 의 이해 와 꼭 알아 둬야할 프로그래밍의 기초
3강 - MouseEvent, Event.ENTER_FRAME 활용
5강 - DisplayObejct 와 객체 동적 생성(2)
10강 - Array + caurina Tweener = iMac Navigation
12강 Event.... Event... Event...
문군의 3.0 Class
[문군 3.0 Class #.6]setInterval & Focus
[문군 3.0 Class #.5] Static :::정적속성의 개념
[문군 3.0 Class #.4] Class notion
윤훈남님의 AS3.0 동영상 강좌
2009년 9월 18일 금요일
ColorMatrixFilter 색조, 채도 변경
ColorMatrixFilter 클래스를 이용하여 채도(Aturation)와 색조(Hue)를 바꿔보겠습니다.
(밝기 변화 없음)
색조(Hue)만 바꾸는 것은 여기를 참고하세요.
채도만 변경하는 것은 여기를 참고하세요.
이제 예제를 볼까요?
아래 플래시를 클릭하면 랜덤으로 색조와 채도가 바뀝니다.
Gray에 변화가 없다는 것은 밝기가 그대로라는 거죠.
- 밝기
a b c 0 0 // a+b+c==1 && d+e+f==1 && g+h+i==1
d e f 0 0 // Red, Blue, Green 크기가 1이 되야 밝기가 변하지 않습니다.
g h i 0 0 // 1보다 크면 밝아지고, 작으면 어두워집니다.
0 0 0 1 0
- 채도
a b c 0 0 // (a==1 || b==1 || c==1) && a+b+c==1
d e f 0 0 // (d==1 || e==1 || f==1) && d+e+f==1
g h i 0 0 // (g==1 || h==1 || i==1) && g+h+i==1
0 0 0 1 0 // 기본 채도값을 유지하려면 위 조건대로 해야 합니다.// 1보다 커지면 채도가 올라갑니다.
// a==b && b==c 이렇게 되면 흑백이 됩니다. (밝기 변화가 없어야 하므로 각 값은 1/3)
결론은 직접 대입해봐야 이해할 수 있어요 -_-;
*참고: &&연산자: AND, ||연산자: OR
ColorMatrixFilter 클래스, flash.filters.ColorMatrixFilter
ColorMatrixFilter 클래스를 이용하여 입력 이미지의 각 픽셀의 RGBA 색상 및 알파 값에 4 x 5 행렬 변환을 적용해서 새로운 세트의 RGBA 색상 및 알파 값 결과를 얻습니다. ColorMatrixFilter 클래스를 이용하여 알파 및 기타 다양한 효과에 채도 변경, 색조 회전, 광도를 활용할 수 있습니다. 이 필터를 비트맵과 MovieClip 인스턴스에 적용할 수 있습니다.
필터 사용은 필터를 적용할 객체에 따라 달라집니다.
- 런타임에 필터를 무비 클립에 적용하려면 filters 속성을 사용합니다. 객체의 filters 속성을 설정해도 객체는 수정되지 않으며, filters 속성을 지워 실행 취소할 수 있습니다.
- BitmapData 인스턴스에 필터를 적용하려면 BitmapData.applyFilter() 메서드를 사용합니다. BitmapData 객체에 대해 applyFilter()를 호출하면 소스 BitmapData 객체와 필터 객체를 통해 필터링된 이미지가 만들어집니다.
제작 시 이미지와 비디오에 필터 효과를 적용할 수도 있습니다. 자세한 내용은 제작 설명서를 참조하십시오.
무비 클립 또는 버튼에 필터를 적용하는 경우 무비 클립이나 버튼의 cacheAsBitmap 속성이 true로 설정됩니다. 모든 필터를 지우면 cacheAsBitmap의 원래 값이 복원됩니다.
다음 공식이 사용됩니다. 여기서 a[0]부터 a[19]는 20개의 요소로 이루어진 배열 속성 행렬의 항목 0부터 19에 해당합니다.
redResult = a[0] * srcR + a[1] * srcG + a[2] * srcB + a[3] * srcA + a[4]greenResult = a[5] * srcR + a[6] * srcG + a[7] * srcB + a[8] * srcA + a[9]blueResult = a[10] * srcR + a[11] * srcG + a[12] * srcB + a[13] * srcA + a[14]alphaResult = a[15] * srcR + a[16] * srcG + a[17] * srcB + a[18] * srcA + a[19]
이 필터는 각 소스 픽셀을 빨강(srcR), 녹색(srcG), 파랑(srcB) 및 알파(srcA) 요소로 분리합니다. 마지막으로 이 필터는 각 색상 요소를 다시 단일 픽셀로 결합하고 그 결과를 기록합니다.
연산은 곱하지 않은 색상값에 실행됩니다. 입력 그래픽이 미리 곱해진 색상 값으로 구성된 경우 이러한 값은 이 연산을 위해 자동으로 곱해지지 않은 색상 값으로 변환됩니다.
다음과 같은 두 개의 최적화된 모드를 사용할 수 있습니다.
알파에만 적용.다음과 같이 알파 요소만 조절하는 행렬을 필터에 전달하면 필터 성능이 최적화됩니다.
1 0 0 0 00 1 0 0 00 0 1 0 00 0 0 N 0 (where N is between 0.0 and 1.0)
(example)적청반전
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
0,0,1,0,0,
0,1,0,0,0,
1,0,0,0,0,
0,0,0,1,0);
mc.filters = [filterObj];
//
흑백
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
1/3,1/3,1/3,0,0,
1/3,1/3,1/3,0,0,
1/3,1/3,1/3,0,0,
0, 0, 0,1,0);
mc.filters = [filterObj];
//
세피아
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
1/2,1/2,1/2,0,0,
1/3,1/3,1/3,0,0,
1/4,1/4,1/4,0,0,
0, 0, 0,1,0);
mc.filters = [filterObj];
펼쳐두기..
2009년 9월 15일 화요일
HTML에서 플래시로 변수 전달
플래시를 첨부할때는 <embed width=800 height = 600 src = 주소> 보통 이러한 스크립트를 사용합니다.
그런데 플래시를 만들다보면 HTML을 이용해서 변수를 전달해야 할 때가 있습니다.
그럴때는 주소 뒤에 flashvars="내용"을 입력해주면 됩니다.
또한 각각의 변수는 & 기호로 구분합니다.
html_test, html_test2, html_test3 변수에 각각 A B C, 123, 가나다 라고 입력한다고 가정해보겠습니다.
<embed width=800 height = 600 src = 주소 flashvars="html_test=A B C&html_test2=123&html_test3=가나다">
이렇게 해주면 됩니다.
주의하실점은 &사이의 띄어쓰기, 줄바꿈등을 모두 인식한다는 것입니다(덕분에 한참 삽질ㅠㅠ)
응용분야는 매우 다양하니 잘 연구해보세요^^ (저는 여기에 사용)
참고로 변수를 입력하는 방법에는 주소뒤에 물음표(?)를 붙이는 방법도 있는데... 파일명 자체가 바뀌는 방법이라 임시파일을 계속 생성합니다(대충 이해하세요 ㅠㅠ) 하지만 위 처럼 flashvars 명령어를 넣어주면 변수는 변수대로, 파일은 파일대로 각각 인식합니다.
2009년 9월 9일 수요일
부드럽게 무비클립 이동하기.
무비클립을 부드럽게 이동하는 방법입니다.
fps는 30정도 입력하고 프레임에 액션을 입력합니다.
x_m=500;
_root.onEnterFrame = function(){ // 반복하기
my_movie._x = my_movie._x+(x_m-my_movie._x)/6;
}//반복문의 끝
이렇게 하면 my_movie 무비클립이 x좌표 500으로 이동합니다.
그런데 흠이 하나 있습니다.
목표값까지 완전하게 도달하지 못하고 소수자리가 부족합니다.
드문 경우지만 저는 그것이 큰(?) 문제가 됬기 떄문에 해결책이 필요했었습니다.
그럼 이제 깔끔하게 완료하는 액션을 추가해줍니다.
if(Math.abs(my_movie._x-x_m)<1) my_movie._x=x_m; else
//목표값(x_m)과 무비클립(my_movie)의 거리가 1픽셀 이하가 된 경우 무비클립 위치는 목표값
위 액션을 my_movie._x = my_movie._x+(x_m-my_movie._x)/6; 앞에 넣어주면 됩니다.
즉, 거리가 1픽셀 이하일때는 무비클립 위치를 목표값과 같게하고, 그렇지 않을경우 무비클립이 목표값으로 따라갑니다.
이제 목표까지 깔끔하게 이동합니다.
수고하셨습니다^^
피드 구독하기:
글 (Atom)