플래셔님들!!! 제 플래시가 가벼워 질려면 제가 어떤 노력을 해야 합니까?
플래시는 그저 메뉴나 좀 만들고 간단한 애니메이션이나 기타 등등을 만들거나
편집하는 수준은 됩니다만 아주 저질 작품만을 만들기에 그냥 사거나 무료들을
구입해서 편집이나 하고 살다가 제가 어쩌다 호언장담을 해 버려서 어떤 사이트의
플래시를 모작하기에 이르렀습니다.
아직 디테일하게 제작은 하지 않았고 이런 저런 있는 소스들을 합쳐서 사용해서
약간 지저분합니다만 용기내서 올려봅니다.
(소시, 원더걸스 사진있음?ㅎㅎㅎ)
일단 이혜영의 쇼핑몰 메인의 플래시를 모작했으니 이혜영씨 사이트 주소를 먼저
올려 놓겠습니다.
이혜영 : http://www.mdstory.com/
모작한 플래시 : http://nmedix.cafe24.com/index_090624.htm
아래의 플래시는 샘플용으로 제가 모작한 플래시이고 위의 주소는 이혜영씨가
운영하시는 쇼핑몰 메인입니다.
구성이라던가 1~2픽셀이 롤오버시 트러져 보인다거나 하는 지적보다는
그저 샘플용이고 러프하게 표현한 밑 그림에 불과 하오니 완성도 보다는
질문 내용에 대한 답을 중심으로 도움 주셨으면 합니다.
질문을 드리겠습니다.
1. 이혜영씨 사이트비해 플래시가 아주 무겁습니다? 제가 어떤 노력을 해야
가벼워지는 건지 님들에 최적화 방법에 대한 노하우를 조금이라도 전수하여
주십시요.
2. 저는 주로 PNG파일을 사용해 이미지를 플래시에 삽입하는데 어쩐 확장자를
써야 더 가벼워 지는 지요.
최적화에 관한 2가지 질문이었으나 그 외 최적화법에 대한 도움도 부탁드립니다.
이혜영씨의 사이트에 비해 현저하게 무겁기에 올리는 글이오니 프래셔님의
도움이 간절합니다.
여기 올리려 테이블로 대충 끼워넣은 플래시라 파폭, 크롬등에서는 어떻게 보일지
모르겠습니다. 익스로 봐주시길.......
편집하는 수준은 됩니다만 아주 저질 작품만을 만들기에 그냥 사거나 무료들을
구입해서 편집이나 하고 살다가 제가 어쩌다 호언장담을 해 버려서 어떤 사이트의
플래시를 모작하기에 이르렀습니다.
아직 디테일하게 제작은 하지 않았고 이런 저런 있는 소스들을 합쳐서 사용해서
약간 지저분합니다만 용기내서 올려봅니다.
(소시, 원더걸스 사진있음?ㅎㅎㅎ)
일단 이혜영의 쇼핑몰 메인의 플래시를 모작했으니 이혜영씨 사이트 주소를 먼저
올려 놓겠습니다.
이혜영 : http://www.mdstory.com/
모작한 플래시 : http://nmedix.cafe24.com/index_090624.htm
아래의 플래시는 샘플용으로 제가 모작한 플래시이고 위의 주소는 이혜영씨가
운영하시는 쇼핑몰 메인입니다.
구성이라던가 1~2픽셀이 롤오버시 트러져 보인다거나 하는 지적보다는
그저 샘플용이고 러프하게 표현한 밑 그림에 불과 하오니 완성도 보다는
질문 내용에 대한 답을 중심으로 도움 주셨으면 합니다.
질문을 드리겠습니다.
1. 이혜영씨 사이트비해 플래시가 아주 무겁습니다? 제가 어떤 노력을 해야
가벼워지는 건지 님들에 최적화 방법에 대한 노하우를 조금이라도 전수하여
주십시요.
2. 저는 주로 PNG파일을 사용해 이미지를 플래시에 삽입하는데 어쩐 확장자를
써야 더 가벼워 지는 지요.
최적화에 관한 2가지 질문이었으나 그 외 최적화법에 대한 도움도 부탁드립니다.
이혜영씨의 사이트에 비해 현저하게 무겁기에 올리는 글이오니 프래셔님의
도움이 간절합니다.
여기 올리려 테이블로 대충 끼워넣은 플래시라 파폭, 크롬등에서는 어떻게 보일지
모르겠습니다. 익스로 봐주시길.......
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 21개
다만 PNG가 무거운건 아실테고..
gif 내지 psd를 그대로 받아오는걸 고려해보세요. 실질 용량면에선 그거 훨 우월합니다.
png를 불러와서 swf 최적화 과정에서 이미지 훼손이 생길 수도 있습니다.
jpg란 것이 이미지 압축 시 정도에 따라 이미지 바보되듯 말이죠.
무비 제어보단 스트립트 제어로 많이 옮겨보는 것도 가벼워질 수 있기도 합니다.
이미지를 많이 써야하는 경우는 일정 부분의 무거움을 감수해야겠죠.
이미지를 최소화하고 XML 연동해서 불러오는 것도 일정 부분의 딜을 감수해야하고..
때론 결손 마저 생기니.. 이래 저래..
가끔은 이미지 결손이 무서울 때..
레이어 포함이 아닌 일반 이미지도.. psd로 넘겨서 받으면 이미지 결손 없이 꽤 높은 압축률을 보이기도 합니다.
이미지 특히 벡터 이미지는 일러스트레이터에서 곧바로 복사하여 플래시에서 이미지 심볼로 잡고
사진은 그냥 원하시는 수준으로 넣고(질이 떨어진 이미지를 넣으면 답이 없으므로)
출력하실 때(swf 생성) jpg 해상도 열심히 조정해 보세요. 용량은 줄어들면서 해상도에 영향을 받지 않는 범위대가 나옵니다.
액션스크립트 파일인 as를 효율적으로 사용하고(중복 사용시 효율적입니다.), 잘 아시겠지만 scene 나누어 필요에 따라 불러오는 방식을 사용하면 됩니다.
주로 해외에서 제작되는 통 플래시 사이트는 이런 식으로 제작되더군요. 여기에 xml까지 써서 더욱 최적화시키고요.
추가로 사용하신 이펙트 소스가 어떤 것인지 잘 모르겠지만 그 효과를 내는 소스가 큰 것(애프터이펙트로 제작한 것 같고)이 있고 작은 것(플래시에서 작업한 것)이 있습니다. 만일 큰 것을 넣으셨다면 플래시 이펙트로 조정하셔야 합니다.
보기보다 상당한cpu점유율을 자랑합니다.
그리고 움직임이 뚝뚝 끊기는데요..프레임 속도를 40~50사이로 조정하심이 어떨지요.^^
그 외에는 큰 무리 없어 보입니다.
즐플 하세요^^
이미지만 jpg나 png로 불러왔고 (흑백과 칼라 두 개의 모드이죠.)
나머지는 모두 플래시에서 그린 것입니다.(아니면 일러스트레이터에서 그린 것을 이미지 심볼로 등록하고 이것을 다시 ctrl+b 로 블레이크해서 플래시에서 글라디언트를 넣어 준 것일 수도 있습니다. 요즘 플래셔는 기본적으로 일러스트를 하거든요. 이때 주의할 것은 일러스트레이터에서 글라디언트로 가져오면 용량이 커집니다.)
이렇게 배경 이미지 제작하고 텍스트야 플래시에서 아웃라인 있는 것으로 만들면 되고 바닥 역시 같은 방식으로 만들면 됩니다.
그리고 그림자가 들어가 있는데 이것 역시 플래시에서 직접 드로잉하거나 아니면 일러스트로 그려와 위와 같은 방식으로 플래시에서 글라디언트 효과를 주면 됩니다.
애니메이션 효과는 고작 버튼 뿐이니 실제 용량은 그리 크지 않겠습니다.(사진은 반드시 이미지 심볼로 등록해놓고 버튼에서 배경레이어와 사진레이어로 나누어 주어야 합니다.
나머지는 scene에서 순서대로 배치하면 해당 예제와 같은 사이트가 만들어집니다.
대충 이런 식으로 만들면 부담없는 용량이 됩니다.
이렇게 용량을 줄이고 최적화시킬 수 있는 플래시 버전인 바로 CS3부터입니다. 그 이전 버전에서는 엄두를 못 내던 다양한 작업이 가능해졌죠.
저는 플래시를 쓰면서 가능 힘든 점이 이 플래시의 그리기 기능이 좀처럼 쉽게 되지 않고 표현하고자 하는 것들을 구체화 시키기가 힘이 들더라구요. 일단 일러에서 만들어 옮겨가는 방향으로 방향을 잡아야 겠습니다.
여유가 좀 되면 제작방에 올렸으면 하는데.......
에혀.....
너무 감사드리구요. 도움주셔서 감사합니다.
이미지를 될수있으면 xml로 불러들이는것이 추후 변경할때 편하면서 swf파일의 용량이 줄어듭니다.
에펙라인 보다는 한번 번쩍하는 효과가 더 좋을것 같습니다욤~~!!
건승하세요~~
일단 제가 보기엔 프레임 속도를 약간 올려주시고
그라디언트를 조금 자제하셔야 할거 같네요
이미지들때문에 마우스오버시 상태가 상당히 느려지는거 같네요
암튼 뭐 하면서 조금씩 늘어나는거지요 ~~
전 ㅡ.ㅡ;; 최적화 같은건 생각도 안하고 작업합니다만;; ㅋㅋㅋ
그래도 이쁩니다 ^^ㅋ 화이팅하세요!!
도움말씀 감사하고 님도 힘찬 하루 되세요!
벤치마킹하신 이혜영 사이트도 플래시에서 그린부분은 전혀없이 올 png이미지 파일들입니다.
가장 많이 적용하는 방법은 네비/메인무비/퀵메뉴? 등 다 분할하시는 방법입니다.
플래시로 구현하는 방법은 많은분들이 적어주셨고 능히 알고 계실듯하네요.
다 쪼개주세요^^
이혜영 사이트도 보시면 허청나게^^ 짜개져 있습니다.
어찌보면 너무 당연한 작업방식이기도 하구요.
감사합니다. 즐~점심 되세요~!