onResize 이벤트 리스너를 이용한 풀플래시 무비클립 제어
by 세계의끝 on 12.14, 2008, under AS2.0 API
onResize 이벤트 리스너를 이용한 네귀퉁이 정렬과 중앙 정렬에 관한 간단한 예제 입니다.
이 글은 플생사모에 올라온 질문에 대한 답변글로 작성된 글입니다.
http://cafe.naver.com/flashdev/34311
2008년 12월 14일에 처음 작성되었고,
2009년 4월 1일에 수정하였습니다.
2009년 4월 24일에 중앙 부분 크기 조절과, DOCTYPE 에 대한 설정을 포함하여 다시 업데이트 하였습니다.
onResize_example.zip - (fla, swf, html 파일 다운로드)
이 fla 파일은 Flash CS4에서 CS3형식으로 저장했습니다. (Flash 8 이하의 버전에서는 열리지 않습니다)
onResize_example.fla 의 내용입니다.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | Stage.scaleMode = "noScale"; Stage.align = "TL"; function resetStage(){ trace("Stage size is now " + Stage.width + " by " + Stage.height); tl_mc._x = 0; tl_mc._y = 0; tr_mc._x = Stage.width; tr_mc._y = 0; bl_mc._x = 0; bl_mc._y = Stage.height; br_mc._x = Stage.width; br_mc._y = Stage.height; center_mc._x = Stage.width * 0.5; center_mc._y = Stage.height * 0.5; center_mc._width = Stage.width - 160; center_mc._height = Stage.height - 160; } resetStage() var stageResizeListener:Object = new Object(); stageResizeListener.onResize = function () { resetStage() } Stage.addListener(stageResizeListener); |
onResize_example.html 의 주의점.
플래시가 앉혀지는 html 의 object와 embed 태그의 width 와 height 를 모두 100% 로 해줘야 합니다. 즉, 플래시의 크기 자체는 html 상의 상위 요소의 width 와 height 에 따라 꽉 채워지도록 100%로 설정하고, 나머지는 브라우져 크기 변화에 맏기는 겁니다.
한가지 주의할 점은, html 상단에 정의하는 DOCTYPE 이 XHTML 1.0 인 경우에는 스타일 시트의 html과 body 요소까지 height 속성을 100% 으로 설정해야 swf 가 의도된대로 표현됩니다. (DOCTYPE 이 HTML 4.0인 경우에는 div 까지만 height=”100%” 설정해도 동작합니다.)
* AS3.0 버전이 필요한 분은 AS3.0, RESIZE 이벤트를 이용한 풀플래시 stage 무비클립 제어 를 클릭하세요.
관련된 글
48 Comments for this entry
Leave a Reply
-
Howdy. Welcome to
세계의끝과 플래시 원더랜드!이 블로그는 2008년 9월에 만들어진 후, Flash ActionScript와 Web Publishing, 그리고 Design 영역을 포함한 본인의 작업에 관해 주로 다루고 있습니다.
세계의끝이 누군지 궁금한 분은 여기를 클릭하세요. 저작자 표시 및 내용 변경금지
Blog under the Creative Commons Attribution-NoDerivs 3.0 License 
6월 1st, 2009 on pm 6:07
안녕하세요… 플사모를 통해서 알게되었습니다.^^
다운로드를 받고 파일을 열어봤는데. 플래시 파일이 열리지 않아서요.
전 플래시8.0를 쓰고 있는데…^^*
답변주시면 감사!!^ㅠ^
6월 1st, 2009 on pm 6:11
네, fla 파일은 하위버전에서는 열리지 않습니다. CS3 버전 이상을 사용하셔야 합니다.
6월 1st, 2009 on pm 6:38
기대안하고 있었는데…^^ 감사합니다.
에쿠… 그런데 젤 상위버젼이 8.0 밖에 없어요…^^;;
6월 1st, 2009 on pm 8:27
8.0은 출시된지 상당히 오래되었습니다. 5년쯤 된거 같은데요?
어도비 웹 사이트에 계정을 등록하면 CS4 버전을 트라이얼로 30일간 사용할 수 있는건 알고 계시죠?
계정 등록하는 것도 그리 오래 걸리지도 않습니다. 어도비 제품을 앞으로도 계속 사용하실거면 계정 하나쯤 등록해 두시는것도 좋습니다.
6월 2nd, 2009 on am 9:40
설치했어요…^^* 감사감사.^ㅠ^*
맨날 쓰던것만 쓰다보니…5년이나…^^;
6월 2nd, 2009 on am 10:00
네 좋은 선택입니다.
8과 CS4 버전은 퍼블리싱 할 수 있는 플레이어 버전부터 차이가 나죠.
사용자 인터페이스도 상당히 개선되었고요.
포토샵의 경우 예전 버전이나 최신 버전이나 그닥 차이가 나지 않고 psd파일도 상당히 넓은 하위 호환성을 제공하지만, 플래시는 약간 다릅니다. 최신 버전을 가지고 계시는게 좋아요.
6월 2nd, 2009 on pm 1:27
플래시 개발자가 없는 곳에서 조금 배운 지식으로 해볼려고하니…
머리가 넘 아프네요… 이 소스를 사용을 못하지만!!
제가 필요한 핵심을 알게 되었어요…^^*
이제 그걸 찾아 다시 인터넷을 헤메야겠네요…ㅋㅋ
6월 2nd, 2009 on pm 2:06
네, 사실 알고 보면 별거 아닙니다. 소스코드도 위 본문에 나온것이 전부고요.
핵심을 알게 되었다니 잘됐습니다.
6월 2nd, 2009 on pm 5:52
또다시 질문.. 죄송해요…^^*
정말 이부분만 해결되면 바로 작업들어갈수 있는데…
여기서 막혀 이렇게 헤매고 있어요…
여기처럼 하고 싶은데…
http://r.wingbus.com/seoul/fullmap/?mapType=map
1024*768 와 1280*1024 해상도에서 나오는 지도의 면적이 차이가 나는데
제가 해결한 지금까지 고민한 결과는
http://www.nicerent.com/mn_map/onResize_example.html
swf가 해상도에 따라 커지고 작아지는 정도밖에…
죄송하지만 방법이 없을까요??^–^
6월 3rd, 2009 on am 12:32
커지고 작아진다는건
Stage.scaleMode = “noScale”;
Stage.align = “TL”;
가 적용되지 않았다는 겁니다.
다운로드한 fla 파일의 중앙의 사각형이 지도가 되어야 겠고요.
나머지 모서리에 있는 요소들도 각각 대응해야겠죠.
무비클립의 인스턴스 네임을 맞춰줘야 한다는 것만 주의하세요.
6월 8th, 2009 on pm 5:03
다시한번 감사인사!!
인제 모든것을 해결했어요…^^*
이번기회에 CSS도 더 자세히 공부하게 되었어요….
소스 오픈해주시고 친절하게 답변도 해주시고.. 너무 감사했습니다…
6월 9th, 2009 on am 12:09
네 잘 해결되었군요.
잘 모르는 때는 trace를 여기저기 찍어보다보면 실마리가 보이게 마련입니다.
멋진 작업 많이 만드시길 바랄께요. ^^
6월 11th, 2009 on pm 9:00
정말 감사합니다. 큰 도움이 되었습니다.
6월 11th, 2009 on pm 9:48
네, 도움이 되셨다니 다행입니다.
7월 4th, 2009 on pm 3:12
코드 도중에
_root.blah._width = Stage.width; 가 있는데요, 이걸 넣어서 Test Movie 하면
이 “blah” 가 표시가 안되요 ㅜㅜ; 그리고 이걸 빼면 표시가 되는데 Resize가 안되죠
왜 이럴까요??
7월 4th, 2009 on pm 3:19
_root 에 blah 가 없거나
blah 가 어딘가 또 하나 있다거나
인스턴스 네임을 지정하지 않았다거나
중의 하나일 겁니다.
7월 4th, 2009 on pm 3:32
아.. 문제가 안풀리네요 ㅠㅠ 이 파일에서 StageResize 레이어에 있는 코드를 좀 봐주세요
(문제의 인스턴스 네임은 titleborder 입니다)
http://www.silentsc.com/Comingsoon.fla
7월 4th, 2009 on pm 4:32
문제를 해결했습니다만;;
CS3에서 Hairline Line으로 그려진걸 심볼 만들고 인스턴스 주고
width 를 resize 할 때 왜 이 line은 없어지는거죠?
hairline을 solid line level 1 으로 바꾸니까 보여지더라구요;;
7월 4th, 2009 on pm 7:05
테스트를 해 보았지만, 저는 그런 문제는 발생하지 않았습니다 (CS4)
다른 원인이 있는지 살펴보셔야 겠네요.
7월 13th, 2009 on pm 10:31
안녕하세요..오래전에 쓰신 글을 이제 보면서 도움받고 있습니다.
다른게 아니고..첨부된 파일에서 보면..center_mc 무비클립을 가로세로 같은비율로 리사이징되게 할 수도 있나요?..가능하다면 부탁드립니다.꾸벅
7월 13th, 2009 on pm 11:37
간단할것 같지만, 의외로 많은 고려를 해야 하는 내용입니다.
같은 비율이라면 정사각형이 되어야 한다는건지, 아니면 직사각형을 비율대로 유지하는건지에 따라 달라질테고요. 후자라면 직사각형의 최초 크기를 뭘로 설정할건지로 고려해야 하겠네요.
사용자가 브라우저를 가로길이를 극단적으로 좁게 또는 극단적으로 위아래 폭을 좁게 했을 경우 center_mc 는 어떤 길이를 따라아 햐는지도 결정해야 합니다.
그렇게 Stage 의 width와 height를 그대로 따르지 않고 자체의 가로세로를 따라야 할 경우 이게 과연 스테이지의 onResize 에 적용할 내용인지 부터 생각해 보셔야 겠습니다.
7월 29th, 2009 on pm 3:03
자료 감사히 참고했습니다.
완전완전 고맙습니다.
7월 29th, 2009 on pm 7:54
네, 멋진 사이트 만드세요.
10월 19th, 2009 on pm 4:44
안녕하세요. 플생사모 까페에서 포탈타고 넘어왔습니다.
지금 이 포스팅보고 정말 많은걸 깨우쳤는데요, 브라우저 사이즈가 일정이하로 줄어들게 될때
각 모서리에 있는 원들이 움직이지 않게 하는 방법도 있나요?
지금 네비게이션을 하단에 놓고 브라우저 사이즈에 맞게 위치가 조절이 되게 하였지만
브라우저 크기를 억지로 작게 만들때 한계영역 안으로는 들어오지 않게 하고자 합니다.
방법이 있을까요.. -_뉴;
10월 19th, 2009 on pm 5:31
아래는 액션입니다. 위에 액션을 따가가 고대로 적어보았는데요;;
네비게이션 인스턴스 네임이 bl_mc 입니다.
=====================================================================================
Stage.scaleMode = “noScale”;
Stage.align = “T”;
var keep:Object = new Object();
keep.onResize = function() {
if (bl_mc._y>=150) {
bl_mc._y = Stage.height;
} else {
bl_mc._y = 149
}
};
Stage.addListener(keep);
10월 19th, 2009 on pm 5:43
아!! 자체 해결 했습니다 ^^;
_visible로 제어했습니다. 150을 넘어가면 안보이게끔 해서
좋은 정보 감사드립니다.
10월 19th, 2009 on pm 5:47
아.. 네 ^^
적당한 시행착오는 추리력(=디버깅능력)을 키워줍니다.
해결되셨다니 다행이군요.
11월 5th, 2009 on pm 3:30
너무 감사합니다.^^
덕분에 사이트의 핵심을 구축했네요.ㅋ
이제 세부적인적만 넣으면 될듯.ㅋ
근데 이렇게 만드니 조금 심심한 감이 있어서요..
혹시 리사이즈 될때
바로 움직이지 않고 서서히 움직이게 하려면
예를들어서 800에서 1000으로 가면 지금은 바로 1000이 뜨는데
그렇게 말고 800에서 1000으로 느릿하게 움직이는…
이것저것 해볼려고 해봤는데
잘 안되네요..ㅡ.ㅜ
11월 5th, 2009 on pm 9:32
이 글과 “속성까지 보내서 onEnterFrame 애니메이션” 을 조합한 코드를 만들어보세요.
11월 13th, 2009 on am 9:32
포털타구 들어왔는데.. 정말 좋은정보 감사합니다..
그동안 궁금했던부분이 많이 해결되었어요~ ㄳㄳ
염치없지만 한가지 여쭈어 볼게 있어서 이렇게 글을 남깁니다..
550*400의 Stage에 마우스를 따라다니는 무비클립을 만들었는데요..
웹상에서 플래시를 100%*100%로 불러오면 화면에 꽉차게 플래시가 늘어나기는 하는데
문제는 마우스를 따라다니는 무비클립이 최초 Stage크기인 550*400안에서만 동작을 합니다..
이를 어쩌면 좋을까요..ㅠㅠ
11월 13th, 2009 on pm 9:21
마우스 트레일러에 대한 코드가 어떤지 모르니 저로서도 알 수 있는 방법이 없네요.
1월 7th, 2010 on am 9:54
안녕하세요! 플생사모 카페에서 글보고 왔어요.
웹디자인너이가 되고 싶어서 이제 막 플래시 배우기 시작한 생초보입니다. 도와주세요 ㅠ.ㅠ
제가 올플래시로 개인 홈페이지를 만들고 있는중인데
올려주신 소스 그대로 적용했는데도 웹에서 확인 하니 해당 플래시가 가운데 정렬되질 않구요 오른쪽에 여백이 생깁니다.
올플래시 사이즈가 1024*768이구요. 드림위버에서 플래시 사이즈 100% 설정해서 적용했는데도
오른쪽으로 여백이 생기네요.
그리고 가운데 정렬부분도 혹시나 싶어서 Stage.align = “LT”; 에서 Stage.align = “T”;
위쪽 가운데로 적용해봤는데 양쪽으로 여백이 생깁니다.
해상도에 상관없이 올플래시 사이즈가 꽉차게 할려면 어떻게 해야 될까요?
제 사이트 주소 입니다.http://alans.ivyro.net/
1월 8th, 2010 on pm 12:15
어째서 그런지 모르겠는데 이 댓글이 스팸 분류되어 있었습니다.
다시 끌어내서 원상 복귀 시켰습니다.
아래쪽에서 해결하셨다니 이 질문에 대한 답은 생략하겠습니다.
1월 7th, 2010 on pm 1:21
감사합니다. 덕분에 해결했네요
1월 7th, 2010 on pm 1:35
저기 근데 한가지 궁금한점이 있습니다.
올려주신 예제 파일중에 html파일 같은경우 드림위버로 어떻게 코딩하신건지요?? 코드에 보니 테이블도없고 헤드와바디 사이에 있는 소스는 직접 입력 해야 되는 부분인가요?
드림위버로 어떻게 하신건지 설명좀 부탁드립니다. ㅠ.ㅠ
1월 7th, 2010 on pm 7:23
예전엔 저도 드림위버를 종종 사용하곤 했는데, 언젠가부터는 이미지맵 딸때 외에는 사용하지 않게 되었고.. 요즘은 이미지 맵 딸 일도 별로 없어서 지금 사용하는 운영체제에는 아예 깔아놓지도 않았습니다. 몇년전부터 모든 html 코딩은 에디트플러스에서 하드코딩 합니다.
그러므로 딱히 무슨 방법이 있는게 아닌거죠.
방문해 주셔서 감사합니다.
12월 8th, 2010 on pm 3:19
onresize (2.0) 보고 잘 공부했습니다 그런데
창크기를 조절했을때 무비클립들이 자기 자리를 잡을때까지 좀 시간을 두어 부드럽게 이동하는액션을 알고싶습니다. 액션하고 넣는위치좀 부탁드려도될까요?.. 검색을해도 잘안되서요 ….
12월 8th, 2010 on pm 3:36
resetStage() 함수 내부를 엔터프레임으로 애니메이션을 주거나, 트윈 클래스를 이용하면 됩니다만, 그 구체적인 코드가 알고 싶으신 거라면, 엔터프레임조차 어떻게 사용하는지 모르시는 걸텐데, 코드를 적어드린들 다음 부분에서 또 막힐 것이고, 그렇다면 제가 코드를 적어드리는게 의미가 있는 일인지는 상당히 회의적이네요.
어쨌건 질문하신 내용은 이 포스트 본문에 이어지는 다른 포스트로 쓸 생각을 오래전부터 하고 있었긴 합니다. 요청하신 분이 한분 생겼으니 조만간 글이 쓰여질지도…
12월 8th, 2010 on pm 8:47
안녕하세요 ㅋ 카페에서 보구 찾아왔어요 ㅋ 정말 유용한 정보 감사합니다. 도움이 됐어요 ㅋ
아, 그런데 한가지 질문이 있는데요~
무비클립으로 등록한 이미지는 님께서 말씀하신대로 액션 적용하니까 되더라구요 ㅋ
그런데 트윈을 주는 움직임있는 이미지에도 적용이 가능한가요?
인스텐스 이름 같게 적용하고 해봤더니, 크기가 늘어나기는 하는데 그전에 줬던 트윈동작이 사라져 버리드라구요 ㅠㅠㅠㅠ
죄송합니다. 쟤가 왕 초보라서 도와 주시면 정말 정말 감사할 것 같아요 ㅠㅠ
12월 8th, 2010 on pm 10:52
화면 상황을 알 수 있는게 없어 조언드리기 어렵지만, 아마도 같은 이미지(객체)에 트윈을 적용하신거겠죠. 그런 경우 나중에 적용한 트윈만이 적용되는게 당연한 겁니다.
객체를 한번 감싼다던가 해서 움직임과 늘어남을 각각 다른 대상으로 만드는거죠.
12월 9th, 2010 on am 5:28
감사합니다 그리고 죄송합니다한개만 더물어볼꼐요^^;
제가 씬을 여러개만들려고합니다
첫번째씬(1)에 위의 액션을 넣으니깐 (2)번씬까지 적용이되더라구요
그런데 확인을해보면 일단 swf 파일을 구동시키고 전채화면을하였더니
1번 씬에있는것들은 처음 키자마자 자리를 잘잡는데
2번 씬에있는것은 처음엔반응이없다가 창크기를 조금 만져야 자리를잡더라구요
처음
1씬에서 2번씬으로 이동하면 반응이없고 창크기를 살짝움직여줘야 자리를잡아요
2씬에서 1씬으로 반대로 이동을 했을경우엔 잘되는데
1에서 2씬으로갔을경우만 그러더라구요
혹시나해서 1번씬자체를삭제하고 위 액션을 2번씬에 다시넣고 플레이해보면 문제가없습니다.
왜….그럴까요
12월 9th, 2010 on pm 5:48
본문 23번째 라인에 보면 그냥 resetStage() 함수를 실행한게 보이시죠?
Stage 의 사이즈는 swf 파일의 크기에 달려있고, 이 경우에는 사용자의 브라우저마다 제각각이므로, 어떤 사이즈던간에 자리를 잡을 수 있도록 최초에 함수를 한번 실행해 주는거죠.
힌트가 되셨겠죠?
12월 10th, 2010 on am 1:57
죄송합니다 못알아듣겠어요 …^^; 그냥 씬작업을포기할께요 …감사합니다
12월 11th, 2010 on am 2:35
메인 타임라인에 scene 으로 작업하는건 겪고 계시는 이런저런 어려움이 생깁니다.
타임라인의 구조상 코드와 scene 이 서로 따로 노는 경우가 많기 때문이죠.
scene 을 프레임이나 무비클립으로 바꿔서 작업하는게 좋습니다.
4월 18th, 2011 on pm 2:15
진짜 최고네요.ㅠㅠ 저 여기 맨날 올래요…
디자이너로써 AS정말 넘어야 할 산이였는데 너무나.좋은 글입니다!!
많은 공부 할께요!! 감사감사!!
정말 이런분이..완전 복받으실꺼예요!!!
4월 18th, 2011 on pm 4:16
매일 오실것까지는 없고, rss 를 등록해 놓으면 편리합니다. ^^
8월 11th, 2011 on am 10:04
궁금한게 있는데요 플래시파일에서 center_mc에 해당하는 부분이 제가 만든파일에서는 슬라이드식 무비클립이거든요 그래서 사이즈가 이미지 세개가 슬라이드 되기때문에 긴데요. 그래서 액션을 저렇게 걸면 문제가 생기는데 해결 방안이 없을까요?
8월 11th, 2011 on pm 1:46
화면 상황이 어떤지 알 수 없고, 무슨 문제가 생기는지 쓰지 않으셔서 답변 드리기가 어렵군요.
그리고 같은 질문을 복사해 붙여넣으신 AS3.0 버전 글의 댓글은 지웠습니다.
질문 댓글은 어느 포스트에 달려도 제가 항상 볼 수 있으니 한 번만 올리셔도 되겠습니다. ^^