KUNA's FlashLinker V1.0에 대한 설명
코덕질/해탈내역들 2008/12/28 08:34
제가 이번에 만들었던 FlashLinker v1.0에서 사용된 액션스크립트에 대하여 설명을 드리도록 하겠습니다. 관심 있으신 분은 한 번 보세요.
먼저 FLA파일은 2프레임으로 이루어져 있습니다.
이것만 봐서는 어떻게 링크들이 쫙 뜨는지는 알 길이 없죠.
일단 로딩 부분의 소스부터 알아보도록 합시다.
(1 프레임에 들어간 액션스크립트)
아나, 제가 봐도 어지럽습니다 -_-.
그러니까, loadVariablesNum이라는 함수가 dataUrl이라는 주소의 자료를 읽어온다고 생각하시면 됩니다. 한번 그 dataUrl의 자료(data.txt)의 내용을 보도록 하면..
옙, 그렇습니다. 맨 위에 있는 loading=1이 있네요.
즉, loadVariablesNum으로 변수들이 로딩됬는지 확인하는 방법으로서 저는 loading이라는 함수를 이용한 것입니다. 로딩 전에는 loading은 없는 변수(null)이었지만 로딩 후에는 loading은 1이라는 값을 갖게 되겠죠.
그리고 받아온 urls라는 변수를 이제 줄바꿈문자(newline)을 기준으로 하나 하나씩 잘라서 (split) urlArray라는 배열에 넣습니다. 결국 데이터를 가공하기 전에는 하나의 긴 문자열이었지만 지금은 알아보기 쉽게 주소 하나하나가 잘려진 상태라고 볼 수 있겠네요.
그리고 이 모든 처리가 끝나면 2프레임으로 넘어가서 다음 처리를 시작하게 되는 겁니다.
도움 되셨나요?
아마 플래시에 관심있으신분은 도움 되셨으리라 제발.. 믿습니다 ㅠ
먼저 FLA파일은 2프레임으로 이루어져 있습니다.
1프레임
2프레임
이것만 봐서는 어떻게 링크들이 쫙 뜨는지는 알 길이 없죠.
일단 로딩 부분의 소스부터 알아보도록 합시다.
1프레임에 들어간 액션스크립트
(1 프레임에 들어간 액션스크립트)
System.useCodepage=true;
Stage.scaleMode = "noscale";
//var dataUrl = "links.txt";
var urlArray:Array;
loadVariablesNum(dataUrl,0);
_root.onEnterFrame = function()
{
// 로딩이 완료되면
if (loading=='1')
{
// 불러운 url들을 자른다
urlArray = urls.split(newline);
// URL정렬
urlArray.sort();
// url에 들어있는 newline을 제거한다
for (i=0; i<urlArray.length; i++)
{
var str:String = urlArray[i];
urlArray[i] = str.substring(0, str.length - 1);
}
gotoAndStop(2);
}
};
stop();
Stage.scaleMode = "noscale";
//var dataUrl = "links.txt";
var urlArray:Array;
loadVariablesNum(dataUrl,0);
_root.onEnterFrame = function()
{
// 로딩이 완료되면
if (loading=='1')
{
// 불러운 url들을 자른다
urlArray = urls.split(newline);
// URL정렬
urlArray.sort();
// url에 들어있는 newline을 제거한다
for (i=0; i<urlArray.length; i++)
{
var str:String = urlArray[i];
urlArray[i] = str.substring(0, str.length - 1);
}
gotoAndStop(2);
}
};
stop();
아나, 제가 봐도 어지럽습니다 -_-.
그러니까, loadVariablesNum이라는 함수가 dataUrl이라는 주소의 자료를 읽어온다고 생각하시면 됩니다. 한번 그 dataUrl의 자료(data.txt)의 내용을 보도록 하면..
옙, 그렇습니다. 맨 위에 있는 loading=1이 있네요.
즉, loadVariablesNum으로 변수들이 로딩됬는지 확인하는 방법으로서 저는 loading이라는 함수를 이용한 것입니다. 로딩 전에는 loading은 없는 변수(null)이었지만 로딩 후에는 loading은 1이라는 값을 갖게 되겠죠.
그리고 받아온 urls라는 변수를 이제 줄바꿈문자(newline)을 기준으로 하나 하나씩 잘라서 (split) urlArray라는 배열에 넣습니다. 결국 데이터를 가공하기 전에는 하나의 긴 문자열이었지만 지금은 알아보기 쉽게 주소 하나하나가 잘려진 상태라고 볼 수 있겠네요.
그리고 이 모든 처리가 끝나면 2프레임으로 넘어가서 다음 처리를 시작하게 되는 겁니다.
2프레임에 들어간 액션스크립트
2프레임은 액션스크립트가 월등히 많습니다 -_-. 아무래도 1프레임에서 얻어온 자료들을 바탕으로 동적으로 컨트롤을 일일이 생성하고 그 컨트롤 하나하나에 프로필 이미지를 얻어와야 하니까요.
일단 간단한 것부터, 그러니까 프로필 이미지를 얻어오는 원리부터 알아보도록 하겠습니다.
한번 [자신의 블로그주소]/index.gif를 창에 쳐보세요.
아마 자신이 다른 테터툴즈 기반의 블로그에 댓글을 달 때 자신의 블로그 주소를 입력하면 자신의 프로필 사진이 뜬 것을 본 적이 있을 것입니다. 그것의 원리는 간단합니다.
[블로그 주소]/index.gif
자, 그럼 썸네일을 얻는 법도 알아냈겠다. 다시 원문으로 돌아와서 2프레임에 들어간 액션스크립트를 확인하도록 하겠습니다.
(2 프레임에 들어간 액션스크립트)
2프레임 자체에는 액션스크립트는 별로 없고 무비클립에 대부분의 액션 스크립트가 들어가 있습니다. 여기에 들어가 있는 내용은 마우스 휠을 움직일 때에 대한 처리, 링크 툴팁을 지금은 안보이게 하는 처리(다시말해 초기화)라 보시면 됩니다.
무비클립에 있는 액션스크립트를 설명하기 전에 무비클립부터 설명하도록 하죠.
mv_linkinfo 안에는 t_link라는 동적 텍스트 상자가 하나 있고 mv_linkinfo의 1프레임에 들어간 액션은 다음과 같습니다.
그러니까 텍스트상자의 가로크기와 반투명한 배경을 텍스트의 길이에 맞추는 부분이라 보시면 됩니다.
mv_linkpanel안에는 mv_link라는 무비클립이 하나 있으며, 이번 액션스크립트의 메인 배역쯤 되겠네요. 이 mv_link를 복제하는 것이 바로 이번 FlashLinker의 원리입니다.
mv_linkpanel의 1프레임에 들어간 액션스크립트입니다.
예, 제 현재 심경은 어지러워 죽을 지경입니다 =_=;
다른 건 다 제쳐두고(무비클립의 길이 조정이라던가 x,y좌표 지정이라든가) dupliateMovieClip와 createEmptyMovieClip만 보도록 합시다.
여기서는 mv_link 무비클립을 i라는 이름으로 복제시키고 있습니다.(물론 여기서 i는 변수). 그 복제된 무비클립을 _mc라는 변수로 받아채서 위치와 크기를 조정하고 있네요.
그리고 뒤를 보시면 _mc.createEmptyMovieClip("img", 1)라는 부분이 있습니다. 즉, 무비클립 _mc안에 img라는 무비클립을 생성하는 거죠. (뒤에 붙어있는 1은 깊이를 지정하는 건데 높을수록 앞쪽으로 나오게 됩니다. 지금은 신경 안쓰셔도 되요)
그러면 이제 복제될 mv_link 무비클립에 들어있는 액션스크립트를 보도록 합시다.
먼저 무비클립에서는 무비클립 이벤트 안에서만 액션스크립트를 쓸 수 있습니다. 그래서 초기화(onClipevent-load)부분에서 isMouseup 변수를 초기화시켰습니다.
자, 일단 여기서 isMouseup변수는 [마우스가 나(mv_link)에 올려졌느냐?] 를 판별하는 변수입니다. 이 변수는 onClipEvent-enterFrame에서 쓰이는데, onClipEvent(enterFrame)은 이 프레임에 들어가 있을 동안 무한 반복, 즉 계속해서 돌아가는 루틴입니다.
onClipEvent 안에 들어가 있는 루틴은 간단합니다. isMouseup(마우스가 올려졌느냐)변수가 true이면 _root(장면 1)에 있는 mv_linkinfo 무비클립을 보이도록 하고 마우스의 x,y위치를 알아내서 mv_linkinfo x,y위치에 대입하는 것이죠.
즉 반투명한 툴팁을 마우스에 붙이는 부분이라 할 수 있습니다.
아, 아직 mv_scroller에 대한 설명이 남았어요 젠장.
먼저 mv_scroller 무비클립에 들어있는 액션스크립트부터 알아보도록 합시다.
예, 여기는 비교적 간단합니다.
이 무비클립을 누르면 안에 있는 scr이라는 무비클립을 드래그 시키고 때면 드래그 없애고.
그리고 프레임 내내 이 scr이라는 무비클립의 위치를 확인하여 mv_linkpanel을 스크롤시키는 게 이 액션스크립트의 역할입니다.
일단 간단한 것부터, 그러니까 프로필 이미지를 얻어오는 원리부터 알아보도록 하겠습니다.
한번 [자신의 블로그주소]/index.gif를 창에 쳐보세요.
아마 자신이 다른 테터툴즈 기반의 블로그에 댓글을 달 때 자신의 블로그 주소를 입력하면 자신의 프로필 사진이 뜬 것을 본 적이 있을 것입니다. 그것의 원리는 간단합니다.
[블로그 주소]/index.gif
자, 그럼 썸네일을 얻는 법도 알아냈겠다. 다시 원문으로 돌아와서 2프레임에 들어간 액션스크립트를 확인하도록 하겠습니다.
(2 프레임에 들어간 액션스크립트)
mouseListener = new Object();
Mouse.addListener(mouseListener);
mouseListener.onMouseWheel = function(delta) {
_root.mv_scroller.scr._y -= delta * 3;
if (_root.mv_scroller.scr._y < 0) _root.mv_scroller.scr._y = 0;
if (_root.mv_scroller.scr._y > 250) _root.mv_scroller.scr._y = 250;
};
mv_linkinfo._visible = false;
Mouse.addListener(mouseListener);
mouseListener.onMouseWheel = function(delta) {
_root.mv_scroller.scr._y -= delta * 3;
if (_root.mv_scroller.scr._y < 0) _root.mv_scroller.scr._y = 0;
if (_root.mv_scroller.scr._y > 250) _root.mv_scroller.scr._y = 250;
};
mv_linkinfo._visible = false;
2프레임 자체에는 액션스크립트는 별로 없고 무비클립에 대부분의 액션 스크립트가 들어가 있습니다. 여기에 들어가 있는 내용은 마우스 휠을 움직일 때에 대한 처리, 링크 툴팁을 지금은 안보이게 하는 처리(다시말해 초기화)라 보시면 됩니다.
무비클립에 있는 액션스크립트를 설명하기 전에 무비클립부터 설명하도록 하죠.
이쪽은 mv_linkinfo
mv_linkpanel
mv_scroller
mv_linkinfo 안에는 t_link라는 동적 텍스트 상자가 하나 있고 mv_linkinfo의 1프레임에 들어간 액션은 다음과 같습니다.
t_link.autoSize = true;
this.onEnterFrame = function() {
mv_linkbg._width = t_link._width + 10;
};
this.onEnterFrame = function() {
mv_linkbg._width = t_link._width + 10;
};
그러니까 텍스트상자의 가로크기와 반투명한 배경을 텍스트의 길이에 맞추는 부분이라 보시면 됩니다.
mv_linkpanel안에는 mv_link라는 무비클립이 하나 있으며, 이번 액션스크립트의 메인 배역쯤 되겠네요. 이 mv_link를 복제하는 것이 바로 이번 FlashLinker의 원리입니다.
mv_linkpanel의 1프레임에 들어간 액션스크립트입니다.
import mx.transitions.Tween;
import mx.transitions.easing.*;
mv_link._visible = false;
// ****************** //
// * 유저 셋팅 부분 * //
var padding_side = 12; // 옆쪽의 여백
var padding_top = 32; // 위의 여백
var mv_width = 36; // 무비클립가로크기
var mv_height = 36; // 무비클림세로크기
// * 유저 셋팅 부분 끝 * //
// ********************* //
for (i=0; i<_root.urlArray.length; i++)
{
// url 갯수만큼 동적으로 img를 만듬
_mc=mv_link.duplicateMovieClip(i, i); // 변수를 지정해서 복제된것을 넣는다.
// X,Y 좌표 지정하는 부분
// 먼저 한 행에 들어갈 수 있는 갯수를 정한다
var x_cnt:Number = Math.floor((Stage.width - 2*padding_side - mv_width + 16) / mv_width);
_mc._x = padding_side + (i % x_cnt) * (mv_width + 8); // 복제된 변수값의 x값
_mc._y = padding_top + (mv_height + 8) * Math.floor(i / x_cnt); // 복제된 변수값의 y값
_mc._width = mv_width;
_mc._height = mv_height;
// mv_link에 새로운 무비클립 생성
_mc.createEmptyMovieClip("img", 1);
_mc.img.loadMovie(_root.urlArray[i] + "/index.gif", this);
}
stop();
import mx.transitions.easing.*;
mv_link._visible = false;
// ****************** //
// * 유저 셋팅 부분 * //
var padding_side = 12; // 옆쪽의 여백
var padding_top = 32; // 위의 여백
var mv_width = 36; // 무비클립가로크기
var mv_height = 36; // 무비클림세로크기
// * 유저 셋팅 부분 끝 * //
// ********************* //
for (i=0; i<_root.urlArray.length; i++)
{
// url 갯수만큼 동적으로 img를 만듬
_mc=mv_link.duplicateMovieClip(i, i); // 변수를 지정해서 복제된것을 넣는다.
// X,Y 좌표 지정하는 부분
// 먼저 한 행에 들어갈 수 있는 갯수를 정한다
var x_cnt:Number = Math.floor((Stage.width - 2*padding_side - mv_width + 16) / mv_width);
_mc._x = padding_side + (i % x_cnt) * (mv_width + 8); // 복제된 변수값의 x값
_mc._y = padding_top + (mv_height + 8) * Math.floor(i / x_cnt); // 복제된 변수값의 y값
_mc._width = mv_width;
_mc._height = mv_height;
// mv_link에 새로운 무비클립 생성
_mc.createEmptyMovieClip("img", 1);
_mc.img.loadMovie(_root.urlArray[i] + "/index.gif", this);
}
stop();
예, 제 현재 심경은 어지러워 죽을 지경입니다 =_=;
다른 건 다 제쳐두고(무비클립의 길이 조정이라던가 x,y좌표 지정이라든가) dupliateMovieClip와 createEmptyMovieClip만 보도록 합시다.
여기서는 mv_link 무비클립을 i라는 이름으로 복제시키고 있습니다.(물론 여기서 i는 변수). 그 복제된 무비클립을 _mc라는 변수로 받아채서 위치와 크기를 조정하고 있네요.
그리고 뒤를 보시면 _mc.createEmptyMovieClip("img", 1)라는 부분이 있습니다. 즉, 무비클립 _mc안에 img라는 무비클립을 생성하는 거죠. (뒤에 붙어있는 1은 깊이를 지정하는 건데 높을수록 앞쪽으로 나오게 됩니다. 지금은 신경 안쓰셔도 되요)
그러면 이제 복제될 mv_link 무비클립에 들어있는 액션스크립트를 보도록 합시다.
on (rollOver)
{
isMouseup = true;
_root.mv_linkinfo._visible = true;
this.brd.gotoAndStop(2);
}
on (rollOut)
{
isMouseup = false;
_root.mv_linkinfo._visible = false;
this.brd.gotoAndStop(1);
}
on (release)
{
getURL(_root.urlArray[this._name], "_blank");
}
onClipEvent (load)
{
var isMouseup:Boolean = false;
}
onClipEvent (enterFrame)
{
if (isMouseup)
{
// xmouse 위치가 stage를 벗어나면 별도 처리하기
if (Stage.width - _root.mv_linkinfo._width - _root._xmouse < 0)
{
_root.mv_linkinfo._x = Stage.width - _root.mv_linkinfo._width;
} else {
_root.mv_linkinfo._x = _root._xmouse;
}
_root.mv_linkinfo._y = _root._ymouse;
_root.mv_linkinfo.t_link.text = _root.urlArray[this._name];
}
}
{
isMouseup = true;
_root.mv_linkinfo._visible = true;
this.brd.gotoAndStop(2);
}
on (rollOut)
{
isMouseup = false;
_root.mv_linkinfo._visible = false;
this.brd.gotoAndStop(1);
}
on (release)
{
getURL(_root.urlArray[this._name], "_blank");
}
onClipEvent (load)
{
var isMouseup:Boolean = false;
}
onClipEvent (enterFrame)
{
if (isMouseup)
{
// xmouse 위치가 stage를 벗어나면 별도 처리하기
if (Stage.width - _root.mv_linkinfo._width - _root._xmouse < 0)
{
_root.mv_linkinfo._x = Stage.width - _root.mv_linkinfo._width;
} else {
_root.mv_linkinfo._x = _root._xmouse;
}
_root.mv_linkinfo._y = _root._ymouse;
_root.mv_linkinfo.t_link.text = _root.urlArray[this._name];
}
}
먼저 무비클립에서는 무비클립 이벤트 안에서만 액션스크립트를 쓸 수 있습니다. 그래서 초기화(onClipevent-load)부분에서 isMouseup 변수를 초기화시켰습니다.
자, 일단 여기서 isMouseup변수는 [마우스가 나(mv_link)에 올려졌느냐?] 를 판별하는 변수입니다. 이 변수는 onClipEvent-enterFrame에서 쓰이는데, onClipEvent(enterFrame)은 이 프레임에 들어가 있을 동안 무한 반복, 즉 계속해서 돌아가는 루틴입니다.
onClipEvent 안에 들어가 있는 루틴은 간단합니다. isMouseup(마우스가 올려졌느냐)변수가 true이면 _root(장면 1)에 있는 mv_linkinfo 무비클립을 보이도록 하고 마우스의 x,y위치를 알아내서 mv_linkinfo x,y위치에 대입하는 것이죠.
즉 반투명한 툴팁을 마우스에 붙이는 부분이라 할 수 있습니다.
아, 아직 mv_scroller에 대한 설명이 남았어요 젠장.
먼저 mv_scroller 무비클립에 들어있는 액션스크립트부터 알아보도록 합시다.
onClipEvent (load)
{
this._x = Stage.width - this._width;
this._y = 0;
}
on (press) {
this.scr.startDrag(false, 0, 0, 0, 250);
}
on (release, releaseOutside) {
this.scr.stopDrag();
}
onClipEvent (enterFrame)
{
// scr의 위치를 파악해서 몇% 스크롤 확인
var percentage = this.scr._y / 250;
trace(_parent.mv_linkpanel.padding_top);
_parent.mv_linkpanel._y = (Stage.height - _parent.mv_linkpanel._height - _parent.mv_linkpanel.padding_top) * percentage
}
{
this._x = Stage.width - this._width;
this._y = 0;
}
on (press) {
this.scr.startDrag(false, 0, 0, 0, 250);
}
on (release, releaseOutside) {
this.scr.stopDrag();
}
onClipEvent (enterFrame)
{
// scr의 위치를 파악해서 몇% 스크롤 확인
var percentage = this.scr._y / 250;
trace(_parent.mv_linkpanel.padding_top);
_parent.mv_linkpanel._y = (Stage.height - _parent.mv_linkpanel._height - _parent.mv_linkpanel.padding_top) * percentage
}
예, 여기는 비교적 간단합니다.
이 무비클립을 누르면 안에 있는 scr이라는 무비클립을 드래그 시키고 때면 드래그 없애고.
그리고 프레임 내내 이 scr이라는 무비클립의 위치를 확인하여 mv_linkpanel을 스크롤시키는 게 이 액션스크립트의 역할입니다.
도움 되셨나요?
아마 플래시에 관심있으신분은 도움 되셨으리라 제발.. 믿습니다 ㅠ
댓글을 달아 주세요
계속 간지나는 물건(?)들을 생산하시네요 ㅋㅋㅋ
~_~b
그나저나 제 홈페이지가 왜 저기 있을까요.
그리고 플래시[?]만드는 프로그램은 어디서 다운을 ㅠㅠ
플래시 만드는 프로그램은.. 이멜주소좀 부탁드립니다만.
아니 네이버에서 Flash8 다운로드 / 시디키만 쳐도 찾을것 다 찾을걸요?
근데 프로필 이미지를 blog/index.gif로 일일이 가져오는건 너무 힘들지 않을까요. 차라리 블로그 이름이 나을것 같은데. ㄷㄷ [퍽]
음. 초 간단히 말해서 '이정도 부하는 컴퓨터한테 별 것도 아니다'이기 때문에 상관없습니다 ^^