상상플러스 ::

'2008/08'에 해당되는 글 3건

2008/08/15 플래시 팁 단축키

2008/08/15 Flash 의 wmode

2008/08/14 플래시 공부 사이트

HTML/FLEX 2008/08/15 23:27

Shortcuts of Drawing Tools :

Arrow (A) : 선택툴
Text Tool (T) : 텍스트 입력툴
Pencil (P) : 선그리기 툴
Ink Bottle (I) : 선속성 변경툴
Brush (B) : Fill 그리기 툴
Paint Bucket (U) : Fill 채우기, 속성 변경, Gradient 툴
Eraser (E) : 지우개 툴
Dropper (D) : 속성 복사툴
Magnifier (M) : 돋보기툴
Lasso (L) : 자유선택툴(마술봉툴 포함)

선택과 화면 축소/확대/이동은 편집중에 가장 많이 사용되는 툴이다. 다른 툴을 사용하고 있는 상태에서 이런 기능을 사용하기 위해서 해당 툴로 전환했다가 다시 원래 툴로 돌아오는 것은 귀찮은 일이다. 이런 경우를 위해 다른 툴을 사용하고 있는 중에 잠시 필요한 툴을 불러낼 수 있다.

Shortcuts for Spring-loaded tools :

Arrow (Ctrl) : 선택툴
Lasso (Tab) : 자유선택툴(마술봉툴 포함)
Hand (Space) : 확대화면에서 현재 보이는 위치 이동하기
Zoom In (Space+Ctrl) : 화면 확대
Zoom Out (Space+Ctrl+Shift) : 화면 축소

그 밖에도 편집을 하는데 있어서 편리하게 사용할 수 있는 기능들을 위한 키보드 단축키가 있는데 모두 특별히 버튼이나 메뉴에 없는 것들로 꼭 외워둬야 한다.

Shortcuts for Editting :

Control-Drag a line : 선, Fill 의 외곽선을 드래그해서 변형시킬 때 새로운 꼭지점을 생성
Control-Drag selection : 선택된 개체를 Ctrl 키를 누른 상태에서 드래그하면 복사본이 생긴다.
Shift+Arrow : 선택한 개체를 이동시킬 때 8 픽셀씩 이동(그냥 화살표키는 1픽셀)
Toggle Zoom In/Out - Alt : 돋보기툴 상태에서 확대/축소 상태 변환

참고 : Macintosh 에서는 Control 키는 Command, Alt 키는 Option 키를 대신 누른다.

편집용 외에 단축키

편집툴들의 단축키외에도 알아두면 좋을 단축키들이 많이 있다. 시스템에서 공통적으로 사용되는 기본적인 단축키(Ctrl+N, 새문서)를 제외하고 중요한 것만을 알아보면 다음과 같다.

파일, 편집환경 설정에 관련된 단축키

File and Controlling Editting Environment :

Open as Library (Ctrl+Shift+O) : 해당 문서의 라이브러리만 열어서 사용
Import (Ctrl+R) : 비트맵, 사운드 등을 문서내로 불러들임
Export Movie (Ctrl+Alt+Shift+S) : 현재 문서를 쇽웨이브 플래시 무비로 출력
Duplicate (Ctrl+D) : 선택한 개체의 복사본을 만듬
Edit Symbol/Movie (Ctrl+E) : 무비편집상태와 심볼편집상태 사이를 변환
View Outlines Mode (Ctrl+Alt+Shift+O) : Outline 상태로 보기(가장 빠름)
View Fast Mode (Ctrl+Alt+Shift+F) : Aliased 상태로 보기(빠름)
View Antialias Mode (Ctrl+Alt+Shift+A) : Antialias 상태로 보기(느림)
View Antialias Text Mode (Ctrl+Alt+Shift+T) : Text도 Antialias 된 상태로 보기(가장 느림)
View Grid (Ctrl+Alt+Shift+G) : 눈금 보기(눈금 간격과 색은 Modify/Movie 에서 설정)
Snap On/Off (Ctrl+Alt+G) : Snap(자석) 기능 켜고 끄기
New Window (Ctrl+Alt+N) : 편집상황이 연동되는 창을 연다(포토샵의 New View와 같음)

개체의 변형/조정, 무비 테스트에 관련된 단축키

File and Controlling Editting Environment :

Align (Ctrl+K) : 선택한 개체들간의 정렬, 스테이지에 대한 정렬 조정
Group (Ctrl+G) : 선택한 개체들을 그룹으로 묶어줌
Ungroup (Ctrl+Shift+G) : 선택한 그룹을 해체함
Break Apart (Ctrl+B) : 모든 결합을 해체. 비트맵, 텍스트를 Fill로, 인스턴스와 심볼연결 끊기
Kerning Narrower (Ctrl+Alt+Left arrow) : Kerning(글자간격)을 좁게
Kerning Wider (Ctrl+Alt+Right arrow) : Kerning 을 넓게
Kerning Reset (Ctrl+Alt+Up arrow) : Kerning 변경사항을 해제하고 원래상태로 돌아감
Remove Transform (Ctrl+Shift+Z) : 그룹/텍스트/인스턴스에 가해졌던 변형을 모두 해제
Move Ahead/Behind (Ctrl+Up/Down) : Stacking Order에서의 순서를 하나 올리기/내리기
Bring to Front/Send to Back (Ctrl+Shift+Up/Down) : Stacking Order의 최상위/하위로 이동
Lock/Unlock All (Ctrl+Alt+L/Ctrl+Alt+Shift+L) : 이동, 변형을 금지하게 잠금/잠금 풀기
Optimize (Ctrl+Alt+Shift+C) : 여러개의 커브로 이루어진 개체의 커브를 줄여서 최적화
Play/Stop (Enter) : 저작환경내에서 무비를 재생/정지
Step Forward/Backward (Right/Left) : 한프레임 앞뒤로 이동
Enable Frame Actions/Buttons (Ctrl+Alt+A/B) : 무비내의 프레임 액션/버튼 기능을 켜고 끔
Test Movie (Ctrl+Enter) : 쇽웨이브 플래시 무비를 임시로 출력해서 시험

타임라인에서의 프레임 추가/삭제/복사/붙이기, 레이어 상태변경을 위한 단축키

Controlling layers and frames :

프레임 추가 : 프레임을 추가할 위치에 마우스를 눌러 선택한 다음 F5
프레임 삭제 : 삭제할 프레임을 선택한 다음 Shift+F5
키프레임 추가 : 키프레임을 추가할 위치에 마우스를 눌러 선택한 다음 F6
키프레임 삭제 : 삭제할 키프레임을 선택한 다음 Shift+F6
빈 키프레임 추가 : 빈 키프레임을 추가할 위치할 위치에 마우스를 눌러 선택한 다음 F7
키프레임 위치 이동 하기 : 키프레임을 Control-Drag
마지막 프레임 이후로 프레임 추가/삭제 : 마지막 프레임을 Control-Drag
프레임 복사 : 마우스로 프레임을 드래그해서 선택한 후, Ctrl+Alt+C
프레임 붙여넣기 : 붙여넣을 첫프레임이 위치할 프레임에서 Ctrl+Alt+V
레이어를 잠금상태로 : 레이어버튼(레이어 이름옆의 버튼)을 Control-Click
레이어를 숨김상태로 : 레이어버튼을 Shift-Click
다른 모든 레이어들을 잠금상태로 : 레이어버튼을 Ctrl-Alt-Click
다른 모든 레이어들을 숨김상태로 : 레이어버튼을 Shift-Alt-Click
모든 레이어들을 보통상태로 : 레이어버튼을 Alt-Click

참고 : Macintosh 에서는 Control 키는 Command, Alt 키는 Option 키를 대신 누른다.

이 글에는 트랙백을 보낼 수 없습니다

HTML/FLEX 2008/08/15 20:29

Flash 의 wmode

http://www.communitymx.com/content/article.cfm?cid=E5141&print=true

Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.
Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.
Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.

wmode 를 그다지 신경쓰지 않고 있던 부분이기 하지만 간과하기에는 너무 큰 performance 차이를 보였다. 실제 전에도 웹에 올리기 전(플래시 플레이어에서 확인했을시) 에는 별 무리 없이 돌아가던 사이트가 웹상에 올리고 나면 framerate 가 떨어지는 느낌을 받았던 적이 많았다.
이건 정확히 말하자면 웹상에 올려서라기 보단 html 로 사이트를 봤기 때문이란 생각이 든다.
이전에 포스팅한 글에서 framerate 와 브라우저 간의 관계에서 브라우저 플러그인에서는 과도한 cpu 사용을 막기위한 방법으로 강제로 framerate를 떨어뜨리는 현상을 볼 수 있다.
그래서 html 페이지에서 플래시 파일을 확인하면 framerate 가 떨어지는 것이다.

보통 사이트 제작시에는 wmode 를 설정하지 않았다. default 인 window 로 설정한 것이다.
보통 wmode는 DHTML 을 flash 와 같이 사용하기 위해 설정하는 것으로 알고 있다.
하지만 wmode 와 performance 와의 상관관계가 상당부분 있는 것 같다.

대부분의 레퍼런스 문서나 자료에는 wmode 가 window 일때 가장 에니메이션 성능이 좋다고 나온다고 말하고 있지만 실제 테스트 결과 opaque 가 가장 좋은 framerate 를 보였다.
이부분이 가장 의문시 되었던 점이다. 분명 테스트를 해보고 레퍼런스를 제작했을텐데 왜 이런결과가 나오는 것일까?...레퍼런스에서 나오는 성능은 framerate와는 좀 다른 의미로 쓰인것일까 의문이 들었다.

하지만 이 의문점은 테스트를 하면서 자연스럽게 해결되었다. opaque 로 설정한후 테스트를하면 이전보다 훨씬 높은 framerate 를 보여준다. 하지만 performance 가 눈에 띄게 올라가게 된다.
이는 opaque 모드가 배경을 불투명으로 바꾸어 플래시로 하여금 부담을 줄여준 이유도 있겠지만
이 모드를 적용할시에 framerate 를 높인 이유가 클것이다.

하지만 opaque 모드는 framerate 가 높아지는 대신 cpu 사용량이 올라가게 된다.
사양이 좋은 컴퓨터에서는 큰 무리가 없겠지만 저 사양의 컴퓨터에서의 사용은 어느정도
고려해야한댜.