사용 안내서 취소

Animate용 FLA 파일을 최적화하는 모범 사례

  1. Adobe Animate 사용 안내서
  2. Animate 소개
    1. Animate의 새로운 기능
    2. 시각적 용어집
    3. Animate 시스템 요구 사항
    4. Animate 키보드 단축키
    5. Animate에서 여러 파일 유형을 사용한 작업
  3. 애니메이션
    1. Animate의 애니메이션 기본 사항
    2. Animate에서 프레임 및 키프레임을 사용하는 방법
    3. Animate의 프레임별 애니메이션
    4. Animate에서 클래식 트윈 애니메이션을 사용하여 작업하는 방법
    5. 브러시 도구
    6. 모션 안내선
    7. 모션 트윈 및 ActionScript 3.0
    8. 모션 트윈 애니메이션 정보
    9. 모션 트윈 애니메이션
    10. 모션 트윈 애니메이션 만들기
    11. 속성 키프레임 사용
    12. 트윈으로 위치에 애니메이션 적용
    13. 모션 편집기를 사용하여 모션 트윈을 편집하는 방법
    14. 트윈 애니메이션의 모션 경로 편집
    15. 모션 트윈 조작
    16. 사용자 정의 속도 추가
    17. 모션 사전 설정 만들기 및 적용
    18. 애니메이션 트윈 범위 설정
    19. XML 파일로 저장한 모션 트윈을 사용한 작업
    20. 모션 트윈과 클래식 트윈의 비교
    21. 모양 트위닝
    22. Animate에서 뼈 도구 애니메이션 사용하기
    23. Animate에서 캐릭터 리깅으로 작업하기
    24. Adobe Animate에서 마스크 레이어를 사용하는 방법
    25. Animate에서 장면으로 작업하는 방법
  4. 대화형 기능
    1. Animate로 버튼을 만드는 방법
    2. Animate 프로젝트를 다른 문서 유형 포맷으로 변환
    3. Animate에서 HTML5 Canvas 문서를 만들고 게시하기
    4. Animate에서 코드 조각을 사용하여 대화형 기능 추가하기
    5. 사용자 정의 HTML5 구성 요소 만들기
    6. HTML5 Canvas의 구성 요소 사용
    7. 사용자 정의 구성 요소 만들기: 예제
    8. 사용자 정의 구성 요소의 코드 조각
    9. 모범 사례 - Animate를 사용한 광고
    10. 가상 현실 제작 및 게시
  5. 작업 영역 및 작업 과정
    1. 칠 브러시 만들기 및 관리
    2. HTML5 Canvas 문서에서 Google Fonts 사용
    3. Creative Cloud 라이브러리와 Adobe Animate 사용
    4. Animate의 스테이지 및 도구 패널 사용
    5. Animate 작업 과정 및 작업 영역
    6. HTML5 Canvas 문서에서 웹 글꼴 사용
    7. 타임라인과 ActionScript
    8. 여러 타임라인을 사용한 작업
    9. 환경 설정
    10. Animate 제작 패널 사용
    11. Animate로 타임라인 레이어 만들기
    12. 모바일 앱 및 게임 엔진용으로 애니메이션 내보내기
    13. 객체 이동 및 복사
    14. 템플릿
    15. Animate의 찾기 및 바꾸기
    16. 실행 취소, 다시 실행 및 작업 내역 패널
    17. 키보드 단축키
    18. Animate에서 타임라인을 사용하는 방법
    19. HTML 확장 만들기
    20. 이미지 및 애니메이션 GIF에 대한 최적화 옵션
    21. 이미지 및 GIF에 대한 내보내기 설정
    22. Animate의 에셋 패널
  6. 멀티미디어 및 비디오
    1. Animate의 그래픽 객체 변형 및 결합
    2. Animate에서 심볼 인스턴스를 만들고 작업하기
    3. 이미지 추적
    4. Adobe Animate에서 사운드를 사용하는 방법
    5. SVG 파일 내보내기
    6. Animate에서 사용할 비디오 파일 만들기
    7. Animate에서 비디오를 추가하는 방법
    8. Animate로 객체 그리고 만들기
    9. 선 및 모양 변형
    10. Animate CC의 획, 채우기 및 그래디언트
    11. Adobe Premiere Pro 및 After Effects 작업
    12. Animate CC의 색상 패널
    13. Animate에서 Flash CS6 파일 열기
    14. Animate의 클래식 텍스트 작업
    15. Animate에 아트워크 가져오기
    16. Animate의 가져온 비트맵
    17. 3D 그래픽
    18. Animate의 심볼 작업
    19. Adobe Animate로 선 및 모양 그리기
    20. Animate의 라이브러리 작업
    21. 사운드 내보내기
    22. Animate CC의 객체 선택
    23. Animate의 Illustrator AI 파일 작업
    24. 블렌드 모드 적용
    25. 객체 배열
    26. 명령 메뉴를 사용한 작업 자동화
    27. 다국어 텍스트
    28. Animate에서 카메라 사용하기
    29. 그래픽 필터
    30. 사운드 및 ActionScript
    31. 드로잉 환경 설정
    32. 펜 도구로 그리기
  7. 플랫폼
    1. Animate 프로젝트를 다른 문서 유형 포맷으로 변환
    2. 사용자 정의 플랫폼 지원
    3. Animate에서 HTML5 Canvas 문서 만들고 게시하기
    4. WebGL 문서 만들고 게시하기
    5. iOS용 AIR에 맞추어 애플리케이션을 패키징하는 방법
    6. Android용 AIR 애플리케이션 게시
    7. 데스크톱용 Adobe AIR에 맞춘 게시
    8. ActionScript 게시 설정
    9. 모범 사례 - 애플리케이션에서 ActionScript 구성
    10. Animate에서 ActionScript를 사용하는 방법
    11. Animate 작업 영역의 액세스 가능성
    12. 스크립트 작성 및 관리
    13. 사용자 정의 플랫폼에 대한 지원 활성화
    14. 사용자 정의 플랫폼 지원 개요
    15. 사용자 정의 플랫폼 지원 플러그인 작업
    16. ActionScript 3.0 디버깅
    17. 사용자 정의 플랫폼에 대한 지원 활성화
  8. 내보내기 및 게시
    1. Animate CC에서 파일을 내보내는 방법
    2. OAM 게시
    3. SVG 파일 내보내기
    4. Animate를 사용하여 그래픽 및 비디오 내보내기
    5. AS3 문서 게시
    6. 모바일 앱 및 게임 엔진용으로 애니메이션 내보내기
    7. 사운드 내보내기
    8. 모범 사례 - 모바일 장치 콘텐츠 만들기 팁
    9. 모범 사례 - 비디오 규칙
    10. 모범 사례 - SWF 애플리케이션 제작 지침
    11. 모범 사례 - FLA 파일 구조화
    12. Animate용 FLA 파일을 최적화하는 모범 사례
    13. ActionScript 게시 설정
    14. Animate용 게시 설정 지정
    15. 프로젝터 파일 내보내기
    16. 이미지 및 애니메이션 GIF 내보내기
    17. HTML 게시 템플릿
    18. Adobe Premiere Pro 및 After Effects 작업
    19. 애니메이션의 빠른 공유 및 게시
  9. 문제 해결
    1. 해결된 문제
    2. 알려진 문제

 

Animate 문서 최적화

문서 파일 크기가 커짐에 따라 다운로드 시간이 길어지고 재생 속도가 빨라집니다. 문서가 최적의 상태로 재생될 수 있도록 여러 가지 조치를 취할 수 있습니다. Animate에서는 제작 프로세스의 일부로 문서에 대해 몇 가지 최적화 작업을 자동으로 수행합니다. 문서를 내보내기 전에 다양한 전략을 통해 파일 크기를 줄여서 문서를 더욱 최적화할 수 있습니다. 또한 SWF 파일을 제작할 때 압축할 수 있습니다. 문서를 변경할 때마다 다양한 컴퓨터, 운영 체제 및 인터넷 연결 환경에서 문서를 실행하여 테스트합니다.

문서 최적화

  • 동작 여부에 상관없이, 두 번 이상 나타나는 모든 요소에는 심볼을 사용합니다.

  • 애니메이션 시퀀스를 만들 때는 가능한 한 트위닝된 애니메이션을 사용합니다. 트위닝된 애니메이션이 일련의 키프레임보다 파일 공간을 적게 차지합니다.

  • 애니메이션 시퀀스의 경우에는 그래픽 심볼 대신에 동영상 클립을 사용합니다.

  • 각 키프레임에서 변경 영역을 제한하고 가능한 한 작은 영역에서 액션이 이루어지도록 합니다.

  • 비트맵 요소는 이동시키지 않도록 합니다. 비트맵 이미지는 배경이나 정적 요소로 사용합니다.

  • 가능한 한 최소 사운드 형식인 MP3를 사용합니다.

요소 및 선 최적화

  • 요소를 그룹화합니다.

  • 애니메이션 과정에서 변하는 요소와 변하지 않는 요소를 레이어를 사용하여 분리합니다.

  • [수정] > [곡선] > [최적화]를 사용하여 모양을 나타내는 데 사용되는 선의 개수를 최소화합니다.

  • 파선, 점선, 불규칙선 같은 특별한 선 유형의 수를 제한합니다. 실선이 메모리를 적게 차지합니다. 또한 [연필 도구]를 사용하여 만든 선이 브러시 획보다 메모리를 적게 차지합니다.

텍스트 및 글꼴 최적화

  • 글꼴 및 글꼴 스타일의 수를 제한합니다. 포함된 글꼴을 사용하면 파일 크기가 커지므로 가능한 한 포함된 글꼴을 사용하지 마십시오.

  • 글꼴 포함 옵션의 경우에는 전체 글꼴을 포함하지 않고 필요한 문자만 선택합니다.

색상 최적화

  • 심볼 속성 관리자에서 [색상] 메뉴를 사용하여 한 심볼에 대한 여러 개의 인스턴스를 다양한 색상으로 만듭니다.

  • [색상] 패널([윈도우] > [색상])을 사용하여 문서의 색상 팔레트를 브라우저 전용 팔레트와 일치시킵니다.

  • 그래디언트는 가능한 한 사용하지 마십시오. 그래디언트 색상으로 영역을 채우려면 단색으로 영역을 채울 때보다 약 50바이트의 공간이 더 필요합니다.

  • 알파 투명도는 가능한 한 사용하지 마십시오. 재생 속도가 느려질 수 있습니다.

문서 표시 속도 향상

문서 표시 속도를 향상시키려면 [보기] 메뉴의 명령을 사용하여 렌더링 품질 기능을 끕니다. 이 기능을 켜면 추가 계산 작업을 수행해야 하므로 문서 표시 속도가 느려집니다.

이러한 명령을 사용해도 Animate에서 문서를 내보내는 방법에는 변화가 없습니다. 웹 브라우저에서 Animate 문서의 표시 품질을 지정하려면 objectembed 매개 변수를 사용합니다. [제작] 명령을 사용하면 자동으로 이 작업을 수행할 수 있습니다.

  1. [보기] > [미리 보기 모드]를 선택하고 다음 옵션 중에서 선택합니다.

    외곽선

    해당 장면에서 모양의 외곽선만 표시하므로 모든 선이 얇은 선으로 표시됩니다. 따라서 그래픽 요소의 모양을 간단하게 다시 지정하고 복잡한 장면을 빨리 표시할 수 있습니다.

    빠르게

    앤티앨리어싱을 끄고 드로잉의 색상 및 선 스타일을 모두 표시할 수 있습니다.

    앤티앨리어싱

    선, 모양 및 비트맵에 대한 앤티앨리어싱을 켜서 스크린에서 모양과 선의 가장자리를 매끄럽게 표시합니다. 이 옵션을 사용하면 [빠르게] 옵션보다 다소 느리게 그려집니다. 앤티앨리어싱은 몇 천(16비트) 또는 몇 백만(24비트) 가지의 색상을 제공하는 비디오 카드에 가장 적합합니다. 16색상 또는 256색상 모드에서는 검정 선이 매끄럽게 표시되지만 색상은 빠르게 모드에서 더 보기 좋게 나타납니다.

    텍스트 앤티앨리어싱

    모든 텍스트의 가장자리가 매끄럽게 표시됩니다. 큰 글꼴 크기에 가장 적합하며 텍스트 양이 많으면 속도가 느려질 수 있습니다. 이 모드가 가장 일반적인 작동 모드입니다.

    전체

    스테이지의 모든 내용 전체를 렌더링합니다. 이 경우 표시 속도가 느려질 수 있습니다.

그래픽 및 애니메이션 최적화

최적화 및 단순화된 애니메이션이나 그래픽을 만들기 전에 프로젝트를 계획하고 개요를 작성합니다. 애니메이션의 파일 크기와 길이에 대한 목표를 설정하고 개발 프로세스 전체에서 테스트합니다.

다음과 같은 지침에 따라 그래픽과 애니메이션을 최적화합니다.

  • 그래디언트를 사용하지 마십시오. 그래디언트를 처리하려면 많은 색상과 계산이 필요하므로 컴퓨터 프로세서에서 렌더링하기가 더 어렵습니다.

  • 위와 같은 이유로 SWF 파일에서 사용하는 알파 또는 투명도의 양을 최소화합니다.

    투명도를 포함하는 애니메이션 객체를 사용하면 프로세서 처리량이 많아지므로 최소한 적게 사용해야 합니다. 비트맵 위의 투명한 애니메이션 그래픽은 특히 프로세서 처리량이 증가하는 원인이 되므로 최소한으로 유지하거나 전혀 사용하지 말아야 합니다.

    Animate로 가져오기에 가장 적합한 비트맵 형식은 PNG입니다. PNG는 Adobe의 Macromedia Fireworks에 대한 기본 파일 형식입니다. PNG 파일에는 각 픽셀에 대한 RGB 및 알파 정보가 있습니다. Fireworks PNG 파일을 Animate로 가져올 경우 FLA 파일에서 그래픽 객체를 편집하는 일부 기능이 유지됩니다.

  • 비트맵을 과도하게 압축하지 않고 비트맵을 최적화합니다. 웹에는 72-dpi 해상도가 최적입니다. 비트맵 이미지를 압축하면 파일 크기가 줄어들지만 너무 많이 압축하면 그래픽 품질이 저하됩니다. [제작 설정] 대화 상자에서 JPEG 품질에 대한 설정이 이미지를 과도하게 압축하지 않는지 확인합니다. 대부분의 경우 이미지를 벡터 그래픽으로 표시하는 것이 선호됩니다. 벡터 이미지를 사용하면 이미지가 다수의 픽셀 대신에 계산에서 만들어지기 때문에 파일 크기가 줄어듭니다. 품질을 유지하면서 이미지의 색상 수를 제한합니다.

     이미지 품질이 저하되고 프로세서 처리량이 많아지므로 비트맵을 원래 크기보다 크게 확장하지 마십시오.

  • SWF 파일에서 _alpha 레벨을 0 또는 1로 변경하는 대신 _visible 속성을 false로 설정합니다. 스테이지의 인스턴스에 대해 _alpha 레벨을 계산하면 프로세서 처리량이 많아집니다. 인스턴스의 가시성을 해제하면 CPU 주기와 메모리가 절약되므로 더 매끄러운 애니메이션이 SWF 파일에 제공될 수 있습니다. 에셋을 언로드하고 다시 로드하는 대신 _visible 속성을 false로 설정합니다. 이렇게 하면 프로세서 처리량이 줄어듭니다.

  • SWF 파일에서 사용하는 선과 점 수를 줄입니다. [곡선 최적화] 대화 상자([수정] > [모양] > [최적화])를 사용하여 드로잉에서 벡터 수를 줄입니다. 추가 최적화를 위해 여러 번 수행 옵션을 선택합니다. 그래픽을 최적화하면 파일 크기가 줄어들지만 너무 많이 압축하면 품질이 저하됩니다. 하지만 곡선을 최적화하면 파일 크기가 줄어들고 SWF 파일 성능이 향상됩니다. 다른 결과를 생성하는 곡선 및 점에 대한 특수한 최적화를 위해 타사 옵션을 사용할 수 있습니다.

최상의 결과를 얻으려면 애니메이션 내용을 생성하는 다양한 방법을 시도하고 각 옵션을 테스트합니다.

프레임 속도(초당 프레임 수 또는 fps로 측정됨)가 높을수록 SWF 파일에서 매끄러운 애니메이션이 생성되지만 특히 오래된 컴퓨터에서는 프로세서 처리량이 많아질 수 있습니다. 여러 다른 프레임 속도로 애니메이션을 테스트하여 가능한 가장 낮은 프레임 속도를 찾습니다.

스크립트 애니메이션 샘플은 Animate 샘플 웹 페이지(www.adobe.com/go/learn_fl_samples_kr)를 참조하십시오. 샘플 zip 파일을 다운로드하고 압축 해제하여 ActionScript2.0/Animation 폴더로 이동한 다음 샘플에 액세스합니다.

애니메이션 프레임 속도 및 성능

애니메이션을 애플리케이션에 추가하는 경우 FLA 파일에 설정할 프레임 속도를 고려하십시오. 프레임 속도는 SWF 파일 및 이를 재생하는 컴퓨터의 성능에 영향을 줄 수 있습니다. 프레임 속도를 너무 높게 설정하는 경우, 특히 여러 에셋 또는 ActionScript를 사용하여 애니메이션을 만드는 경우에는 프로세서 문제가 발생할 수 있습니다.

그러나 프레임 속도는 애니메이션이 얼마나 자연스럽게 재생되는지에 영향을 미치므로 프레임 속도 설정값을 고려할 필요가 있습니다. 예를 들어, 속성 관리자에서 12fps(초당 프레임 수)로 설정된 애니메이션은 초당 12프레임을 재생합니다. 문서의 프레임 속도가 24fps로 설정된 경우 애니메이션이 12fps로 재생될 때보다 더 자연스럽게 재생되는 것처럼 보입니다. 그러나 24fps의 애니메이션은 12fps로 재생될 때보다 더 빨리 재생되므로 총 지속 기간(초)이 더 짧습니다. 따라서 보다 높은 프레임 속도로 5초짜리 애니메이션을 만들어야 하는 경우 낮은 프레임 속도로 재생할 때보다 더 많은 프레임을 사용하여 5초를 채워야 하므로 애니메이션의 총 파일 크기가 커집니다. 일반적으로 24fps의 5초 애니메이션은 12fps의 5초 애니메이션보다 파일 크기가 더 큽니다.

 onEnterFrame 이벤트 핸들러를 사용하여 스크립트 애니메이션을 만드는 경우 애니메이션은 타임라인에 모션 트윈을 만든 경우와 마찬가지로 문서의 프레임 속도로 실행됩니다. onEnterFrame 이벤트 핸들러 대신 setInterval(ActionScript 2.0 언어 참조 설명서 참조)을 사용할 수도 있습니다. 이 경우 프레임 속도에 의존하지 않고 지정된 간격으로 함수를 호출할 수 있습니다. onEnterFrame과 마찬가지로, setInterval을 사용하여 함수를 더 자주 호출할수록 애니메이션은 프로세서 리소스를 그만큼 더 많이 사용합니다.

런타임에 애니메이션이 자연스럽게 재생되는 최저 프레임 속도를 사용하십시오. 그러면 사용자 프로세서의 부하를 줄일 수 있습니다. 30~40fps 이상의 프레임 속도는 런타임에 프로세서에 많은 부하를 주면서도 애니메이션의 모양에는 그다지 큰 변화가 없습니다.

가능한 한 개발 프로세스 초기에 애니메이션의 프레임 속도를 선택합니다. SWF 파일을 테스트하는 경우에는 애니메이션의 지속 기간을 확인하고 SWF 파일 크기를 확인하십시오. 프레임 속도는 애니메이션 속도에 많은 영향을 미칩니다.

필터 및 SWF 파일 성능

애플리케이션에서 너무 많은 필터를 사용하는 경우 많은 양의 메모리를 사용하게 되어 Flash Player 성능이 저하되는 문제가 발생할 수 있습니다. 필터가 연결된 동영상 클립에는 두 개의 32비트 비트맵이 있으므로 너무 많은 비트맵을 사용하는 경우 이러한 비트맵으로 인해 애플리케이션에서 많은 양의 메모리를 사용하게 될 수 있습니다. 따라서 컴퓨터 운영 체제에서 메모리 부족 오류가 발생될 수 있습니다. 오늘날의 컴퓨터에서는 스테이지에서 수천 개의 비트맵을 사용하는 경우처럼 애플리케이션에서 지나치게 많은 필터 효과를 사용하지 않는 한 메모리 부족 오류가 거의 발생하지 않습니다.

그러나 메모리 오류가 있는 경우에는 다음과 같은 상황이 발생합니다.

  • 필터 배열이 무시됩니다.

  • 동영상 클립이 일반 벡터 렌더러를 사용하여 그려집니다.

  • 동영상 클립에 대한 비트맵이 캐시되지 않습니다.

    메모리 부족 오류가 발생한 후에는 동영상 클립에서 필터 배열 또는 비트맵 캐시를 사용하지 않습니다. 플레이어 성능에 영향을 미치는 또 하나의 요인 적용하는 각 필터에 대해 quality 매개 변수에 사용하는 값입니다. 값이 높을수록 효과를 렌더링하는 데 CPU와 메모리가 많이 사용되는 반면, quality 매개 변수를 낮게 설정할수록 컴퓨터 리소스가 덜 사용됩니다. 따라서, 너무 많은 필터의 사용을 피해야 하며 가급적 낮은 quality 설정을 사용해야 합니다.

     100픽셀 x 100픽셀 객체가 한 번 확대되면 내용의 크기가 200픽셀 x 200픽셀이 되므로 4배의 메모리를 사용하게 됩니다. 두 번 확대할 경우 모양은 원래 100픽셀 x 100픽셀의 64배 메모리를 사용하는 800픽셀 x 800픽셀 객체로 그려집니다. SWF 파일에서 필터를 사용하는 경우에는 항상 SWF 파일의 컨텍스트 메뉴에서 확대/축소 메뉴 옵션을 사용하지 않도록 설정합니다.

    잘못된 매개 변수 유형을 사용하는 경우 오류가 발생할 수 있습니다. 일부 필터 매개 변수의 경우 특정한 유효 범위가 지정되어 있습니다. 유효 범위를 벗어난 값을 설정할 경우 값이 범위 안에 속하는 유효 값으로 변경됩니다. 예를 들어, quality는 표준 작업에 대해 값이 1 ~ 3이어야 하며 0 ~ 15의 값만 설정할 수 있습니다. 15보다 높은 값은 15로 설정됩니다.

    일부 생성자에는 입력 매개 변수에 사용되는 배열의 길이에 제한이 있습니다. 잘못된 배열이나 크기가 적당하지 않은 배열을 사용하여 회선 필터 또는 색상 매트릭스 필터를 만드는 경우 생성자가 실패하고 필터가 생성되지 않습니다. 그리고 나서 필터 객체가 동영상 클립의 필터 배열에서 하나의 항목으로 사용되는 경우 해당 필터 객체가 무시됩니다.

    : 흐림 필터를 사용하는 경우 2, 4, 8, 16 및 32와 같은 2의 제곱이 되는 blurX 및 blurY의 값을 사용하면 보다 빨리 계산할 수 있어서 성능을 20% ~ 30% 향상시킬 수 있습니다.

비트맵 캐싱 및 SWF 파일 성능

비트맵 캐싱을 사용하면 애플리케이션에서 동영상 클립을 변경하지 않을 경우 성능을 향상시킬 수 있습니다. MovieClip.cacheAsBitmap 또는 Button.cacheAsBitmap 속성을 true로 설정하면 Flash Player에서 동영상 클립의 내부 비트맵 표현이나 버튼 인스턴스를 캐싱합니다. 복잡한 벡터 내용을 포함하는 동영상 클립의 성능이 향상됩니다. 캐시된 비트맵이 있는 동영상 클립의 모든 벡터 데이터가 기본 스테이지가 아닌 비트맵에 그려집니다.

 비트맵은 가장 가까운 픽셀 경계에 물리는 확장 및 회전되지 않은 픽셀로 기본 스테이지에 복사됩니다. 픽셀은 부모 객체에 일대일로 매핑됩니다. 비트맵 경계가 변경되면 비트맵이 확장되지 않고 다시 만들어집니다.

버튼 또는 동영상 클립 인스턴스 캐싱에 대한 자세한 내용은 다음 항목을 참조하십시오.

  • ActionScript 2.0 학습의 ActionScript를 사용한 동영상 클립 캐싱 및 스크롤

  • ActionScript 2.0 학습의 동영상 클립 캐싱

    대부분의 내용이 정적이고 자주 회전하거나 크기가 조절되지 않는 동영상 클립에는 cacheAsBitmap 속성을 사용합니다. 이와 같은 동영상 클립에서 cacheAsBitmap 속성을 사용하면 동영상 클립 변환 시(xy 위치가 변경되는 경우) 성능이 향상될 수 있습니다.

    동영상 클립에 캐싱을 활성화하면 표면이 만들어지며, 복잡한 벡터 애니메이션을 빠르게 렌더링할 수 있는 등 여러 이점이 발생합니다. 경우에 따라서는 캐싱을 사용해도 성능이 향상되지 않으며 심지어 성능이 저하될 수 있습니다.

    캐시된 데이터의 전체적인 성능은 인스턴스 벡터 데이터의 복잡도, 변경하려는 데이터의 양, opaqueBackground 속성의 설정 여부 등에 달려 있습니다. 작은 영역을 변경할 경우 표면과 벡터 데이터 중 어느 것을 사용해도 결과는 비슷합니다. 응용 프로그램을 배포하기 전에 두 가지 경우를 모두 테스트합니다.

비트맵 캐싱 기능이 필요한 경우

다음과 같은 경우에는 일반적으로 벡터 그래픽을 최적화하여 비트맵 캐싱을 사용할 경우 큰 이점을 얻을 수 있습니다.

복잡한 배경 이미지

섬세하고 복잡한 벡터 데이터 배경 이미지가 포함된 애플리케이션을 사용할 경우입니다. 성능을 향상시키려면 해당 내용을 선택하여 동영상 클립에 저장한 다음 opaqueBackground 속성을 true로 설정합니다. 배경이 비트맵으로 렌더링되고 빠르게 다시 그려지므로 애니메이션은 더 빠르게 재생됩니다.

스크롤 텍스트 필드

스크롤 텍스트 필드에 대량의 텍스트를 표시하는 애플리케이션을 사용할 경우입니다. 스크롤 경계선으로 스크롤이 가능하도록 설정(즉, scrollRect 속성을 설정함)한 동영상 클립 안에 텍스트 필드를 배치합니다. 이렇게 하면 지정된 인스턴스에 대해 빠른 픽셀 스크롤을 수행할 수 있습니다. 사용자가 동영상 클립 인스턴스를 스크롤하면 스크롤된 픽셀은 위쪽으로 이동하며 전체 텍스트 필드가 다시 생성되는 대신 새롭게 표시되는 영역만 생성됩니다.

윈도우 시스템

윈도우가 겹쳐지는 복잡한 구조가 포함된 애플리케이션을 사용할 경우입니다. 각 윈도우는, 예를 들면 웹 브라우저 윈도우처럼 열려 있거나 닫혀 있을 수도 있습니다. cacheAsBitmap 속성을 true로 설정하여 각 윈도우를 표면으로 표시하면 각 윈도우는 서로 분리되고 캐시됩니다. 사용자는 윈도우를 드래그하여 서로 겹쳐지게 할 수 있으며, 각 윈도우에서는 벡터 내용을 다시 생성할 필요가 없습니다.

비트맵 캐싱의 사용을 피해야 할 경우

비트맵 캐싱을 잘못 사용하면 SWF 파일에 부정적인 영향을 미칩니다. 표면을 사용하는 FLA 파일을 작성할 경우 다음 지침을 준수해야 합니다.

  • 표면(캐싱이 활성화된 동영상 클립)을 과도하게 사용하지 않습니다. 각 표면은 일반 동영상 클립보다 메모리를 더 차지하므로 렌더링 성능을 향상시킬 경우에만 표면을 활성화하는 것이 좋습니다.

  • 캐시된 비트맵은 일반 동영상 클립 인스턴스보다 훨씬 더 많은 메모리를 소비할 수도 있습니다. 예를 들어, 스테이지에서 크기가 250픽셀*250픽셀인 동영상 클립이 캐시될 경우 250KB가 소비되는 반면에, 동일한 크기의 캐시되지 않는 일반 동영상 클립 인스턴스는 1KB를 소비합니다.

  • 캐시된 표면에 확대/축소를 적용하지 않습니다. 비트맵 캐싱을 남용하면 특히 내용을 확대 및 축소할 경우 상당한 양의 메모리가 소비됩니다(앞의 항목 참조).

  • 표면은 대부분 정적인, 즉 움직임이 거의 없는 동영상 클립 인스턴스에 대해 사용합니다. 이 경우에 인스턴스를 드래그하거나 이동할 수 있지만 인스턴스의 내용은 움직이거나 크게 변경되어서는 안 됩니다. 예를 들어, 인스턴스를 회전하거나 변형하면 해당 인스턴스는 표면 및 벡터 데이터간에서 전환되는데, 이는 처리하기 어려운 작업이며 SWF 파일에 부정적인 영향을 미치기도 합니다.

  • 표면을 벡터 데이터와 혼합하면 Flash Player 또는 컴퓨터에서 수행해야 하는 처리 작업이 증가됩니다. 가능하면 표면을 서로 그룹화하는 것이 좋으며, 예를 들면 윈도우 애플리케이션을 작성할 경우가 그렇습니다.

Flash Player에서 구성 요소를 사용한 작업

구성 요소 프레임워크를 사용하여 구성 요소에 기능을 추가할 수 있지만 이 경우 애플리케이션의 파일 크기가 상당히 증가할 수 있습니다. 구성 요소는 서로 간에 상속합니다. 하나의 구성 요소가 Animate 문서의 크기를 증가시키지만 동일한 프레임워크를 사용하는 후속 구성 요소로 인해 반드시 크기가 더 증가하는 것은 아닙니다. 구성 요소를 스테이지에 추가할 경우 파일 크기가 증가하지만 일정한 지점이 되면 구성 요소가 클래스를 공유하고 이러한 클래스의 새 복사본을 로드하지 않기 때문에 크기가 일정하게 유지됩니다.

동일한 프레임워크를 공유하지 않는 여러 구성 요소를 사용할 경우 SWF 파일의 크기가 증가할 수 있습니다. 예를 들어, XMLConnector 구성 요소는 17K를 SWF 파일에 추가하고 TextInput 구성 요소는 24K를 문서에 추가합니다. ComboBox 구성 요소를 추가할 경우 이 구성 요소는 이전 구성 요소의 프레임워크에 속하지 않기 때문에 28K가 추가됩니다. XMLConnector 구성 요소가 데이터 바인딩을 사용하기 때문에 클래스는 6K를 SWF 파일에 추가합니다. 이러한 모든 구성 요소를 사용하는 문서는 다른 구성 요소가 파일에 추가되기 전에 77K의 크기를 가집니다. 따라서 새 구성 요소를 문서에 추가할 때는 SWF 파일 크기를 신중하게 고려합니다.

구성 요소는 부모 SWF 파일의 라이브러리에 존재해야 합니다. 예를 들어, 애플리케이션은 사용하는 구성 요소의 복사본이 해당 라이브러리에 있어야 합니다. 이는 런타임 로드되는 자식 SWF 파일에만 이러한 구성 요소가 필요한 경우에도 마찬가지입니다. 구성 요소가 올바르게 작동하도록 이러한 사항이 요구되며 부모 SWF 파일의 다운로드 시간이 약간 증가합니다. 하지만 부모 라이브러리는 부모에 로드되는 SWF 파일에서 상속 또는 공유되지 않습니다. 각 자식 SWF 파일은 동일한 구성 요소의 고유한 복사본을 가진 애플리케이션에 다운로드되어야 합니다.

이전 버전과의 호환성이 있는 SWF 파일을 제작할 계획인 경우 해당 호환성을 가진 구성 요소가 무엇인지 잘 알고 있어야 합니다. 다음 표는 여러 Flash Player 버전의 구성 요소 지원에 대한 정보를 제공합니다.

구성 요소

Flash Player 6(6.0.65.0) 및 이전 버전

Flash Player 6(6.0.65.0)

Flash Player 7 및 8

Flash Player 9

ActionScript 3.0

지원되지 않음

지원되지 않음

지원되지 않음

지원됨

ActionScript 2.0

지원됨

지원됨

지원됨

지원됨

V2 UI 구성 요소 집합

지원되지 않음

지원됨

지원됨

지원됨

미디어 구성 요소

지원되지 않음

지원되지 않음

지원됨

지원됨

데이터 구성 요소

지원되지 않음

지원되지 않음

지원됨

지원됨

V2 UI 구성 요소가 작동하도록 [제작 설정]에서 [Flash Player 6r65에 맞게 최적화] 옵션을 선택 취소합니다.

구성 요소 스타일 및 성능 최적화

ActionScript 2.0을 사용하는 경우 구성 요소 프레임워크에서 프로세서 처리량이 가장 많은 호출 중 하나는 setStyle 호출입니다. setStyle 호출은 효율적으로 실행되기는 하지만 구현 과정에서 프로세서 처리량이 많아집니다. setStyle 호출이 항상 필요한 것은 아니지만 이 호출을 사용할 경우에는 성능에 어떤 영향을 주는지 주의하십시오.

성능을 향상시키려면 SWF 파일에서 스타일을 객체에 로드, 계산 및 적용하기 전에 스타일을 변경합니다. 스타일을 로드 및 계산되기 전에 변경할 수 있으면 setStyle을 호출할 필요가 없습니다.

스타일을 사용할 때 성능을 향상시키려면 객체가 인스턴스화될 때 각 객체에서 속성을 설정합니다. 인스턴스를 능동적으로 첨부할 경우, 다음 ActionScript와 같이 createClassObject()에 하려는 호출의 initObj에서 속성을 설정하십시오.

createClassObject(ComponentClass, "myInstance", 0, {styleName:"myStyle", color:0x99CCFF});

스테이지에 직접 배치하는 인스턴스의 경우 각 인스턴스에 대해 onClipEvent()를 사용하거나 하위 클래스(권장)를 사용할 수 있습니다. 하위 클래스에 대한 자세한 내용은 ActionScript 2.0 학습의 하위 클래스 작성을 참조하십시오.

구성 요소의 스타일을 다시 지정해야 할 경우 Loader 구성 요소를 사용하여 애플리케이션에서 효율성을 향상시킬 수 있습니다. 다른 구성 요소에서 여러 스타일을 구현하려면 각 구성 요소를 고유한 SWF 파일에 배치합니다. Loader 구성 요소에서 스타일을 변경하고 SWF 파일을 다시 로드할 경우 SWF 파일의 구성 요소가 다시 만들어집니다. 구성 요소가 다시 만들어지면 스타일의 캐시가 비워지며 구성 요소에 대한 스타일이 다시 설정되고 다시 참조됩니다.

 SWF 파일의 모든 구성 요소 인스턴스에 단일 스타일을 적용하려면 _global.styles을 사용하여 스타일을 전역에서 변경하십시오.ComponentName을 사용하여 전역적으로 스타일을 변경합니다.

런타임 공유 라이브러리 사용

런타임 공유 라이브러리를 사용하여 다운로드 시간을 줄일 수 있는 경우가 있습니다. 일반적으로 이러한 라이브러리는 보다 큰 애플리케이션에 필요하며 사이트의 수많은 애플리케이션이 동일한 구성 요소나 기호를 사용할 경우에도 필요합니다. SWF 파일의 공통된 에셋을 외부화하면 클래스를 반복적으로 다운로드할 필요가 없습니다. 공유 라이브러리를 사용하는 첫 번째 SWF 파일은 다운로드하는 데 더 오래 걸리는데 이는 SWF 파일과 라이브러리가 모두 로드되기 때문입니다. 라이브러리가 사용자의 컴퓨터에서 캐시된 다음 모든 후속 SWF 파일이 해당 라이브러리를 사용합니다. 큰 애플리케이션의 경우에 이 프로세스를 통해 다운로드 시간을 크게 줄일 수 있습니다.

특수 문자 표시

컴퓨터 운영 체제는 지역별 특정 코드 페이지를 갖고 있습니다. 예를 들어, 일본의 컴퓨터는 영국의 컴퓨터와 다른 코드 페이지를 가집니다. Flash Player 5 및 이전 버전은 코드 페이지에 의존하여 텍스트를 표시하지만 Flash Player 6 이상 버전은 유니코드를 사용하여 텍스트를 표시합니다. 유니코드는 모든 언어에 대한 문자를 포함하는 범용 문자 세트이기 때문에 텍스트를 표시하기 위한 더 안정적인 표준화된 방법입니다. 대부분의 최신 애플리케이션은 유니코드를 사용합니다.

유니코드 이스케이프 시퀀스를 사용하여 Flash Player 6 이상에서 특수 문자를 표시할 수 있습니다. 그러나 UTF-8 또는 UTF-16으로 인코딩된 텍스트(유니코드)를 로드하지 않거나 유니코드 이스케이프 시퀀스를 사용하여 특수 문자를 표시하지 않을 경우 모든 문자가 올바르게 표시되는 것은 아닙니다. 유니코드 차트는 유니코드 웹 사이트(Unicode.org)를 참조하십시오. 일반적으로 사용되는 이스케이프 시퀀스 목록은 이 단원의 뒤에 있는 표를 참조하십시오.

유니코드가 아닌 애플리케이션은 운영 체제의 코드 페이지를 사용하여 페이지에서 문자를 렌더링합니다. 이 경우에 표시되는 문자를 코드 페이지에서 지정하므로 사용자의 운영 체제에 있는 코드 페이지가 애플리케이션의 코드 페이지와 일치할 경우에만 문자가 올바르게 표시됩니다. SWF 파일을 만드는 데 사용된 코드 페이지는 최종 사용자의 컴퓨터에 있는 코드 페이지와 일치해야 합니다. 국제적인 사용자에게 제공되는 애플리케이션의 경우에는 코드 페이지를 사용하는 것이 좋은 방법이 아니며 이 경우에는 대신에 유니코드를 사용합니다.

코드에서 System.useCodepage를 사용하여 SWF 파일이 유니코드 대신에 시스템의 코드 페이지를 사용하도록 합니다.

외부 위치에서 비 유니코드로 인코딩된 텍스트를 로드할 때 이 텍스트가 사용자 컴퓨터와 동일한 코드 페이지를 사용하여 인코딩된 경우에만 이러한 프로세스를 사용합니다. 두 조건을 모두 충족할 경우 텍스트는 문제 없이 표시됩니다. 이러한 조건을 모두 충족하지 않을 경우 유니코드 및 유니코드 이스케이프 시퀀스를 사용하여 텍스트에 형식을 지정합니다. 이스케이프 시퀀스를 사용하려면 타임라인의 프레임 1에 다음 ActionScript 2.0을 추가합니다.

this.createTextField("myText_txt", 99, 10, 10, 200, 25); 
myText_txt.text = "this is my text, \u00A9 2004";

이 ActionScript는 텍스트 필드를 만들고 텍스트 필드에 저작권 기호(©)를 포함하는 텍스트를 입력합니다.

SWF 파일에서 운영 체제의 코드 페이지를 사용하도록 할 수 있으며, 이 페이지는 useCodepage 속성에 의해 제어됩니다. Animate가 SWF 파일을 내보낼 경우 해당 파일은 기본적으로 유니코드 텍스트로 내보내지며 System.useCodepagefalse로 설정됩니다. 특수한 텍스트나 국제적인 시스템의 텍스트를 표시하면서 문제가 발생한 경우 시스템의 코드 페이지를 사용하면 잘못 표시되는 텍스트의 문제를 해결할 수 있습니다. 하지만 System.useCodePage는 항상 마지막 수단으로만 사용해야 합니다.

시스템의 코드 페이지를 사용하려면 다음 ActionScript 2.0 코드 줄을 타임라인의 프레임 1에 배치합니다.

System.useCodepage = true;
<< 여기에 AS3 예도 필요합니다. 참조:
dev/qa. >>

 특수 문자는 사용자의 컴퓨터에서 사용 중인 글꼴에 해당 문자가 포함된 경우에만 표시될 수 있습니다. 확실하게 알 수 없는 경우에는 해당 문자나 글꼴을 SWF 파일에 포함합니다.

다음 표에는 일반적으로 사용되는 여러 유니코드 이스케이프 시퀀스가 포함되어 있습니다.

문자 설명

유니코드 이스케이프 시퀀스

em 대시()

\u2014

등록 기호(®)

\u00AE

저작권 기호(©)

\u00A9

상표 기호(™)

\u2122

유로 기호()

\u20AC

백슬래시(\)

\u005C

슬래시(/)

\u002F

여는 중괄호({)

\u007B

닫는 중괄호(})

\u007D

보다 큼(<)

\u003C

보다 작음(>)

\u003E

별표(*)

\u002A

문서 다운로드 성능 테스트

Flash Player에서는 사용자가 설정한 프레임 속도에 맞춰 재생하려고 하지만 실제 재생되는 프레임 속도는 사용 중인 컴퓨터에 따라 달라질 수 있습니다. 특정 프레임에 필요한 데이터가 다운로드되기 전에 다운로드되고 있는 문서가 이 프레임에 도달하면 이 데이터가 다운로드될 때까지 문서가 일시 정지됩니다.

다운로드 성능을 그래픽으로 표시하려면 대역폭 프로파일러를 사용하면 됩니다. 대역폭 프로파일러는 사용자가 지정한 모뎀 속도에 따라 전달되는 각 프레임의 데이터 양을 보여 줍니다.

 (Animate만 해당) 대역폭 프로파일러는 Animate에서 사용할 수 없습니다. 대신에 Animate와 함께 Adobe Scout를 사용할 수 있습니다. 자세한 내용은 Animate와 함께 Adobe Scout 사용을 참조하십시오.

Animate에서는 다운로드 속도를 시뮬레이션할 때 정확한 모뎀 속도가 아니라 일반적인 인터넷 성능 추정값을 사용합니다. 예를 들어, 28.8Kbps의 모뎀 속도를 시뮬레이션하도록 선택하면 Animate에서는 일반적인 인터넷 성능을 반영하여 실제 속도를 2.3Kbps로 설정합니다. 또한 프로파일러는 SWF 파일에 대한 추가 압축 지원을 보완합니다. 따라서, 파일 크기가 줄어들고 스트리밍 성능이 향상됩니다.

loadMoviegetUrl 등의 ActionScript 호출을 사용하여 외부 SWF 파일, GIF 및 XML 파일, 변수를 플레이어로 스트리밍할 때, 데이터는 스트리밍에 대해 설정된 속도로 전송됩니다. 기본 SWF 파일에 대한 스트리밍 속도는 추가 데이터 요청에 따른 대역폭 감소에 의해 줄어듭니다. 지원하려는 각 컴퓨터와 각 속도에서 문서를 테스트합니다. 이렇게 하면 가장 느린 연결과 컴퓨터에서도 문서가 별다른 무리 없이 실행되는지 확인할 수 있습니다.

느리게 재생되는 프레임에 대한 보고서를 만들어 이러한 프레임의 일부 내용을 최적화하거나 제거할 수도 있습니다.

[동영상 테스트] 및 [장면 테스트] 명령을 사용하여 만든 SWF 파일의 설정을 변경하려면 [파일] > [제작 설정]을 사용합니다.

다운로드 성능 테스트

  1. 다음 중 하나를 수행합니다.
    • [컨트롤] > [장면 테스트] 또는 [컨트롤] > [테스트]를 선택합니다.

      장면 또는 문서를 테스트하는 경우 Animate에서는 [제작 설정] 대화 상자의 설정을 사용하여 현재 선택 항목을 SWF 파일로 제작합니다. SWF 파일은 새 윈도우에서 열리며 곧바로 재생됩니다.

    • [파일] > [열기]를 선택하고 SWF 파일을 선택합니다.

  2. [보기] > [다운로드 설정]을 선택한 다음, 다운로드 속도를 선택하여 Animate에서 시뮬레이션할 스트리밍 속도를 결정합니다. 속도를 사용자 설정으로 입력하려면 [사용자 정의]를 선택합니다.

  3. SWF 파일을 보는 경우에는 [보기] > [대역폭 프로파일러]를 선택하여 다운로드 성능을 그래프로 표시합니다.

    프로파일러의 왼쪽 부분에는 문서, 문서의 설정, 문서의 상태 및 스트림에 대한 정보가 표시됩니다.

    프로파일러의 오른쪽 부분에는 타임라인 헤더 및 그래프가 표시됩니다. 그래프에 있는 각 막대는 문서의 개별 프레임을 나타내고 막대의 크기는 해당 프레임의 크기(바이트 단위)에 해당됩니다. 타임라인 헤더 바로 아래에 있는 빨간색 선은 지정된 프레임이 [컨트롤] 메뉴에 설정된 현재 모뎀 속도로 실시간으로 스트리밍되는지 여부를 나타냅니다. 막대가 빨간색 선 위로 확장된 경우 문서는 해당 프레임이 로드될 때까지 기다려야 합니다.

     (Animate CC만 해당) 대역폭 프로파일러는 Animate CC에서 사용할 수 없습니다. 대신에 Animate와 함께 Adobe Scout를 사용할 수 있습니다. 자세한 내용은 Animate와 함께 Adobe Scout 사용을 참조하십시오.

  4. [보기] > [다운로드 시뮬레이션]을 선택하여 스트리밍을 설정하거나 해제합니다.

    스트리밍을 해제하면 웹 연결을 시뮬레이션하지 않은 채 문서가 시작됩니다.

    참고: (Animate만 해당) 다운로드 시뮬레이션 옵션은 Animate에서 사용할 수 없습니다.

  5. 그래프에 있는 막대를 클릭하여 왼쪽 윈도우에 해당 프레임의 설정을 표시하고 문서를 중단합니다.
  6. 필요하면 다음 액션 중 하나를 수행하여 그래프의 보기를 조정합니다.
    • [보기] > [스트리밍 그래프]를 선택하여, 어떤 프레임으로 인해 일시 정지되었는지 표시합니다.

      이 기본 보기에는 각 프레임을 나타내는, 연한 회색과 진한 회색의 대체 블록이 표시됩니다. 각 블록 옆에는 상대적인 바이트 크기가 표시됩니다. 첫 번째 프레임은 심볼의 내용을 저장하므로 대개 다른 프레임보다 큽니다.

    • [보기] > [프레임별 그래프]를 선택하여 각 프레임의 크기를 표시합니다.

      이 보기를 사용하면 어떤 프레임으로 인해 스트리밍이 지연되는지 확인할 수 있습니다. 그래프의 빨간색 선을 넘은 프레임 블록이 있는 경우 Flash Player는 전체 프레임이 다운로드될 때까지 재생을 중단합니다.

  7. 테스트 윈도우를 닫고 제작 환경으로 돌아갑니다.

    대역폭 프로파일러를 사용하여 테스트 환경을 설정한 후에는 SWF 파일을 테스트 환경에서 직접 열 수 있습니다. 이 파일은 Flash Player 윈도우에서 열리며 대역폭 프로파일러 및 선택된 다른 보기 옵션을 사용합니다.

     (Animate만 해당) 대역폭 프로파일러는 Animate에서 사용할 수 없습니다. 대신에 Animate와 함께 Adobe Scout를 사용할 수 있습니다. 자세한 내용은 Animate와 함께 Adobe Scout 사용을 참조하십시오.

최종 보고서 생성

  1. [파일] > [제작 설정]을 선택하고 [Animate] 탭을 클릭합니다.

  2. [크기 보고서 생성]을 선택합니다.
  3. [제작]을 클릭합니다.

    Animate에서 확장명이 .txt인 텍스트 파일을 생성합니다. 문서 파일이 myMovie.fla이면 텍스트 파일의 이름은 myMovie Report.txt가 됩니다. 보고서에는 각 프레임, 모양, 텍스트, 사운드, 비디오 및 ActionScript 스크립트의 크기가 프레임별로 표시됩니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?