집 » 음식과 음료 » 플래시 애니메이션을 만드는 방법. Flash CS6에서 새 파일(문서)을 만드는 방법

플래시 애니메이션을 만드는 방법. Flash CS6에서 새 파일(문서)을 만드는 방법

우리 중 많은 사람들이 짧은 플래시 게임을 하면서 시간을 보내는 것을 좋아하지만 이러한 가상 예술 작품이 어떻게 만들어지는지에 대해 생각하는 사람은 거의 없습니다. 한편, 이 기술은 90년대 후반부터 존재해왔다. 창시자는 미국 회사인 Macromedia(현재 Adobe Systems)입니다. 이 시스템은 게임 개발뿐만 아니라 웹 마스터링에도 활발히 활용되고 있습니다. 인터넷상의 대부분의 웹사이트는 Flash에서 실행됩니다(일부 웹사이트는 이미 HTML 5로 전환하고 있음). 또한 Adobe Systems의 아이디어는 Macromedia Flash 응용 프로그램을 만드는 프로그램입니다. 컴퓨터 기술과 거리가 먼 사람이라도 누구나 마스터할 수 있습니다. 하지만 게임을 만드는 방법에 대해 이야기하기 전에 이 플랫폼의 주요 장점과 단점을 살펴보겠습니다.

어도비 플래시의 장점

첫째, 개발 속도입니다. 다른 플랫폼과 달리 플래시를 사용하면 단 한 시간 안에 어떤 게임이든 만들 수 있습니다. Macromedia Flash는 개발자에게 긴 코드 조각을 귀찮게 하지 않으며 즉시 사용할 수 있는 작업 도구를 제공합니다.
둘째, 이 기술은 다른 멀티미디어 콘텐츠와 함께 작업할 수 있는 충분한 기회를 제공합니다. 한 파일을 다른 파일로 변환하는 데 시간과 노력을 낭비할 필요가 없습니다. 이 기술을 사용하면 불필요한 번거로움 없이 모든 그래픽, 사운드 및 비디오 파일을 게임에 통합할 수 있습니다. 이렇게 하면 프로젝트 작업에 아티스트, 작곡가, 편집자를 포함시키고 정말 독특한 제품을 만들 수 있습니다.
셋째, Macromedia는 이 소프트웨어 환경에서 작업을 크게 단순화하는 직관적인 컨트롤과 기능 세트를 자랑합니다. 드래그 앤 드롭 기능, Action Script 명령 메뉴, 사용자 친화적인 도구 모음 및 툴팁을 통해 Adobe 작업이 매우 즐거워집니다.
넷째, 플랫폼의 기능은 콘텐츠 제출 및 배포 측면에서 매우 편리합니다. Adobe Player 웹 확장 덕분에 이 기술을 기반으로 제작된 애플리케이션은 페이지에 간단한 코드를 삽입하여 모든 웹 사이트에 쉽게 배치할 수 있습니다. 이 기술은 또한 모든 운영 체제에서 쉽게 재현할 수 있는 swf 형식의 독립 실행형 애플리케이션 생성을 지원합니다.
마지막으로 다섯째입니다. 이 기술을 사용하면 매우 부드러운 애니메이션과 뛰어난 상호작용성을 갖춘 다채로운 게임을 만들 수 있습니다. 여러 면에서 애플리케이션의 아름다움은 프로그래머가 아닌 아티스트의 재능에 달려 있습니다. 이 속성을 통해 이 플랫폼은 게임 제작에 도전하려는 초보자를 끌어들입니다.

플래시 플레이어의 단점

타임라인에 대한 링크입니다. 기본적으로 Flash 응용 프로그램을 만드는 작업에는 타임라인에 순차적 프레임을 배열한 다음 재생하는 작업이 포함됩니다. 따라서 이 시스템은 애니메이션을 만드는 데 적합합니다. 그러나 현재 대부분의 게임에서 나타나는 추세인 비선형성은 달성되지 않습니다.
성능. 아쉽게도 별로 다르지 않네요 빠른 작업. 따라서 이를 기반으로 유사한 개체가 많은 협동 게임이나 아케이드가 만들어지지 않습니다.
3D를 지원하지 않습니다. 중요한 단점은 플래시 기술이 3차원 모델 및 환경 장면의 생성 및 사용을 지원하지 않으며 대부분의 최신 게임에서 이는 흔들리지 않는 표준이라는 것입니다. 반면에 브라우저는 온라인 게임온라인 게임의 일반적인 특정 제한으로 인해 주로 Flash를 사용합니다.
폐쇄형 플랫폼. Adobe Macromedia는 새로운 기능 추가를 지원하지 않습니다. 다른 소프트웨어 환경(예: Java)에서는 새 속성을 추가할 수 있습니다. 여기서는 개발자 자신만이 이 작업을 수행할 수 있습니다. 그리고 사용자 의견을 고려하여 프로그램을 지속적으로 업데이트한다는 사실에도 불구하고 해당 기능은 계속해서 제한됩니다.

이러한 단점에도 불구하고, 소규모 아마추어 미니게임을 만드는 데에는 플래시가 꼭 필요합니다.

플래시 게임을 만드는 방법: 기본 측면

엔진에서 애니메이션을 만드는 것은 어린 시절의 취미를 연상시킵니다. 페이지 모서리에 프레임별로 그림을 그리고 빠르게 넘기면 그림이 움직이기 시작했습니다. 플래시 애니메이션의 본질은 동일합니다. 그래픽 개체를 타임라인에 프레임별로 배치하고 재생할 때 움직이기 시작합니다. 게임은 더 어렵습니다. 이를 만들려면 ActionScript 3.0 프로그래밍 언어를 마스터해야 합니다. 특별한 책과 교과서(예: Colin Mook의 책 "ActionScript 3.0 for Flash")의 도움을 받아 공부할 수 있습니다. YouTube에는 교육용 동영상도 꽤 많이 있습니다. 이 프로그램을 익히려면 약간의 노력만 필요합니다. 이 작업을 마치면 Flash 게임을 작성하는 방법에 대해 질문이 없을 것입니다.

제목 창(스플래시 화면)
규칙
게임 종료 창

먼저 "제목 창"이 나옵니다. 이것은 플레이어에게 첫인상을 주는 스플래시 화면입니다. 여기에서는 모든 예술적 재능과 상상력을 보여주는 것이 중요합니다.

다음 단계는 규칙 페이지를 만드는 것입니다. 일부 개발자가 이 단계를 무시한다는 사실에도 불구하고 게임의 규칙을 공식화하여 더 이해하기 쉽고 친숙하게 만드는 것이 더 좋습니다. 때로는 외부 페이지나 별도의 창에 작성되기도 합니다.

"배경"은 그래픽 개체가 위치할 환경입니다. 어떤 경우에는 개체가 전체 화면을 차지합니다. 게임 배경은 Adobe Macromedia 도구나 타사 프로그램을 사용하여 만들 수 있습니다(예: Ogmo Editor는 2차원 장면을 만드는 데 탁월합니다). 주제를 정하고 게임의 전반적인 컨셉을 보완하는 것이 중요합니다.

게임이 끝나면 "게임 오버 창"이 표시됩니다. 게임은 다음으로 끝날 수 있습니다. 다른 경우— 플레이어가 이기거나 지거나 단순히 시간/탄약이 부족한 경우. 각각의 경우에 해당 애니메이션 콘텐츠가 포함된 별도의 창이 생성됩니다. 때때로 우승자 목록이 이 창에 삽입됩니다.

따라서 Adobe Flash를 공부하고 나면 누구나 게임을 만드는 방법을 알게 될 것입니다. 기본적인 작동 메커니즘을 이해하는 것만으로도 충분하며, 곧 간단한 게임을 만들 수 있게 될 것입니다. 어떤 사업에서나 마찬가지로 여기서 가장 중요한 것은 충분한 인내와 관심을 보여주는 것이며 그 결과는 오래 가지 않을 것입니다.

인터넷 배너의 아름다운 애니메이션 뒤에 무엇이 있는지 궁금한 적이 있습니까? 아니면 컴퓨터 기술의 도움으로 만들어진 새로운 만화인가요? 대부분의 경우 "육체"를 기반으로 하거나 더 정확하게는 다음과 같이 번역됩니다. 영어 이름플래시 기술. 오늘은 웹사이트의 플래시 애니메이션에 대해 이야기하겠습니다.

플래시 기술

멀티미디어 프레임워크는 Macromedia에서 개발되었습니다. 그러나 흡수(합병) 후 기술에 대한 모든 권리는 새 소유자인 Adobe Systems에게 이전되었습니다.

Adobe Flash의 최신 응용 분야:

웹 애플리케이션을 만드는 것은 상당히 새로운 방향입니다. 웹 사이트를 만들기 위해 Flash를 전체 또는 부분적으로 사용하는 것을 의미합니다. 이 기술을 부분적으로 적용하면 다양한 인터랙티브 메뉴, 애니메이션 버튼 등 개별 디자인 요소가 생성됩니다.

기존의 HTML 기반 리소스와 비교하여 Flash 사이트에는 사용이 제한되는 몇 가지 기능이 있습니다. 여기에는 높은 개발 비용, 서버 리소스 요구, 느린 인터넷 연결로 인한 긴 로딩 시간 및 기타 측면이 포함됩니다.

멀티미디어 기능 구현 - 웹사이트에서 오디오를 듣고 비디오를 재생하기 위해 Flash를 기반으로 만들어진 미디어 플레이어가 자주 사용됩니다. 개발에는 스크립팅 언어 중 하나(일반적으로 JavaScript)의 사용이 포함됩니다.

온라인 광고에서는 애니메이션 배너를 만드는 데 기술이 가장 자주 사용됩니다. 이는 멀티미디어 광고 재생뿐만 아니라 게임 기반 사용자와의 일종의 상호 작용도 의미합니다.

Flash 개발 기본 사항 및 도구

플래시 애니메이션을 만들려면 Adobe의 기존 도구가 가장 자주 사용됩니다.

Adobe Flash Professional – 대화형 애니메이션 제작 프로그램(애니메이터)
Adobe Flash Builder – 웹 애플리케이션 인터페이스를 생성하기 위한 환경입니다.
Adobe Flash Player는 Flash 재생을 위한 브라우저 통합 플레이어입니다.

그 외에도 다양한 타사 응용 프로그램이 이러한 유형의 멀티미디어 콘텐츠를 재생할 수 있습니다. 가장 인기 있는 것은 Gnash, QuickTime 등입니다:

이 기술을 사용하면 모든 유형의 그래픽( 래스터, 벡터, 3D). 또한 오디오 및 비디오 데이터의 스트리밍 릴레이도 지원합니다. 특히 모바일 장치경량 버전인 Flash Lite가 개발되었습니다.

Flash 파일의 주요 표준은 SWF 확장자입니다. 약어는 Small Web Format의 약자입니다. 플래시로 녹화된 영상의 파일 확장자는 FLV, F4V입니다.

Flash의 대화형 애니메이션 개발은 벡터 그래픽을 기반으로 합니다. 덕분에 멀티미디어 플랫폼 지원과 화면 해상도로부터 애니메이션 품질의 독립성을 구현할 수 있었다.

플래시 애플리케이션 파일 크기는 모든 사용자에게 동일합니다. 기술적 인 특성화면 해상도).

Flash의 대화형 애니메이션은 키 프레임 사이의 흐름이 느린 모핑(벡터 유형)을 기반으로 합니다. 데이터를 재생하기 위해 Flash Player가 사용되며 그 작동은 JavaScript 가상 머신의 작동과 여러 면에서 유사합니다. 기술의 소프트웨어 구성 요소는 ActionScript 언어를 사용하여 구현됩니다.

이 기술의 단점은 다음과 같습니다.

클라이언트 시스템의 중앙 프로세서에 과부하가 걸립니다. 이는 플레이어와 함께 사용자 브라우저에 내장된 Flash 가상 머신의 효율성이 낮기 때문입니다.
높은 오류 가능성 - Flash 애니메이션을 재생하면 오류가 발생할 가능성이 높습니다. 또한 Flash 재생 실패는 전체 클라이언트 애플리케이션(브라우저)의 작동에 부정적인 영향을 미칩니다. 이는 Flash 응용 프로그램을 만들 때 프로그램 코드의 내결함성에 대한 제어가 부족하기 때문입니다.
색인 생성 실패 - Flash 콘텐츠에 표시된 모든 텍스트 콘텐츠의 색인이 생성되지 않습니다. 이러한 제한은 이 기술을 기반으로 생성된 리소스의 경우 특히 문제가 됩니다.

타사 플래시 생성 소프트웨어 검토

Sothink SWF Quicker는 Flash 생성의 기본 사항을 시연할 프로토타입 응용 프로그램으로 사용되었습니다. 많은 전문가에 따르면 이 프로그램은 가장 이해하기 쉽고 배우기 쉽습니다.

생성 및 편집 외에도 플래시 편집기는 다른 모든 유형의 웹 애니메이션(GIF, HTML 및 기타 표준)과 "작업할 수 있습니다".

설치 후 프로그램의 사용자 친화적인 인터페이스로 이동합니다. 안타깝게도 구석구석을 헤매고도 인터페이스 언어 스위치를 찾을 수 없었습니다.

이 애플리케이션에서 플래시 애니메이션을 만드는 방법을 이해하기 위해 내장된 템플릿을 사용하겠습니다. 프로그램을 시작하면 즉시 "템플릿에서 새로 만들기" 대화 상자가 나타납니다. 또한, 메인 메뉴 항목 "파일"을 통해 호출할 수 있습니다. 제공된 옵션 중에서 우리는 배너를 만들기로 선택했습니다.

다음 마법사 창의 드롭다운 목록에서 애니메이션이 생성될 템플릿을 선택해야 합니다. 아래에는 선택한 템플릿이 재생되는 작은 프레임이 있습니다.

다음 단계에서는 배너의 크기를 설정하고 애니메이션에서 재생될 텍스트 문구 5개를 입력해야 합니다. 또한 배너를 클릭하여 사용자를 안내할 리소스의 주소를 지정해야 합니다.

프로젝트를 컴파일하고 마법사 창을 닫은 후 내장 플레이어에서 결과 비디오를 볼 수 있습니다. 이렇게 하려면 상단의 녹색 화살표를 클릭하세요.

플레이어를 닫은 후 애플리케이션 인터페이스를 자세히 살펴보겠습니다. 이 창은 두 개의 기본 창으로 구성되어 있습니다. 위쪽 창은 비디오 기간 편집용이고 아래쪽 창은 일반 창입니다. 그래픽 편집기. 각 요소는 별도의 레이어에 있으며 사이드바에 있는 표준 도구를 사용하여 수정할 수 있습니다.

사이트에 제작된 플래시 애니메이션을 공개할 수 있습니다. 상단의 '게시' 버튼을 클릭하여 발행 방법을 선택할 수 있습니다. HTML 코드에 삽입하는 것을 포함하여 선택할 수 있는 세 가지 옵션이 있습니다. 이 프로세스에 대한 자세한 설정은 별도의 "게시 설정" 창에서 확인할 수 있습니다.

* 사용된 프로그램: 플래시 CS3, 포토샵 CS3
* 복잡성: 평균
* 대략적인 완료 시간: 3 시간

포트폴리오 웹사이트는 현대 예술가, 사진작가, 디자이너, 심지어 음악가에게도 매우 중요합니다. 그는 비즈니스와 전문성에 대한 진지한 접근 방식을 보여줍니다. 오늘은 독창적이고 세련된 사진 포트폴리오를 만드는 방법을 보여 드리겠습니다. 현대 시스템플래시 콘텐츠 관리 Moto CMS.

다양한 유틸리티, 구성 요소, 내장된 예제 및 다양한 구조의 빈 사이트 템플릿이 포함된 Moto CMS의 독립 실행형 버전을 사용하겠습니다. 그리고 우리는 가장 간단한 템플릿을 사용합니다. 즉, 처음부터 사진 포트폴리오 웹사이트를 만들 것입니다.

이 가이드에서는 다음 주제를 다룹니다.

* 컨테이너 생성.
* 슬롯 생성(닫기 버튼, 간편 버튼)
* 모듈 생성(음악 플레이어 및 이미지 갤러리).
* 사이트 프리로더 편집
* 웹사이트 페이지를 만들고 콘텐츠로 채웁니다.

또한 Moto CMS 제어판의 기능에 대해서도 알려 드리겠습니다.

우리는 다음이 필요합니다:
* 어도비 포토샵;
* 어도비 플래시 CS3;
* Moto CMS의 독립형 버전(무료 평가판)
* 웹사이트 디자인. PSD 형식.

최종 결과 미리보기

1단계: Moto CMS 파일 다운로드

사진 포트폴리오 웹사이트 제작을 시작하려면 Moto Flash CMS의 독립형 버전을 다운로드해야 합니다. 이 가이드의 모든 단계를 반복하고 Moto CMS의 기능을 이해하려면 평가판으로 충분합니다.

2단계: Moto CMS 파일에 대한 간략한 개요

여기 짧은 리뷰 Moto CMS 파일 및 폴더:

* 구성요소. 이 폴더에는 Adobe Extension Manager에서 관리하는 mxp 구성 요소가 포함되어 있습니다.
* 제어판. 모든 제어판 파일이 포함되어 있습니다.
* 문서. 이 폴더에는 API 문서가 포함되어 있습니다.
* 예. 갤러리 모듈, 뉴스 모듈, 음악 및 비디오 플레이어, 문의 양식 등을 포함하여 가장 단순한 것부터 가장 복잡한 것까지 이미 만들어진 플래시 사이트의 4가지 예가 포함되어 있습니다.
* 템플릿. Moto CMS를 기반으로 웹사이트를 만드는 데 사용할 수 있는 5가지 템플릿. 각 템플릿에는 필요한 파일 세트가 있으며 구조가 다릅니다. 오늘 우리는 이러한 템플릿 중 하나, 특히 템플릿 #1을 사진 포트폴리오의 기초로 사용할 것입니다.
* 읽어보기 파일, Moto CMS로 웹사이트 제작을 시작하는 방법을 설명합니다.

3단계: 로컬 호스팅에서 실행

다음 단계는 포트폴리오 웹사이트의 기반이 될 웹사이트 템플릿을 시작하는 것입니다. 이를 위해서는 로컬 웹 서버가 필요합니다. 우리는 WampServer를 사용합니다. Apache, PHP 및 MySQL 데이터베이스를 사용하여 웹 애플리케이션을 만들 수 있습니다.

웹사이트 템플릿 1번을 시작하려면 폴더 내용을 로컬 서버에 업로드하기만 하면 됩니다. 템플릿_01/templates/ 디렉터리 및 폴더 내용 제어판.

그런 다음 브라우저 주소 표시줄에 URL을 입력하고 끝에 /admin을 추가하여 Moto CMS 제어판으로 이동합니다.

메모: 아직 페이지가 포함되어 있지 않기 때문에 지금은 사이트를 볼 수 없습니다. 404 오류가 있는 페이지가 나타납니다.

4단계: config.xml 편집

우리가 해야 할 일은 사이트의 너비와 높이를 변경하고 배경색을 설정하는 것뿐입니다.

우리 프로젝트의 크기는 980x800 픽셀입니다. 큰 화면에서 크기를 변경하려면 사이트의 너비와 높이를 "100%"로 설정해야 합니다. 그리고 저해상도 화면에 올바르게 표시하려면 사이트의 최소 너비와 높이를 지정해야 합니다(스크롤 막대가 나타남). 배경색검정색(#000000).

5단계: style.css 변경

이제 style.css 파일을 열고 배경색(검은색)을 지정해야 합니다. 그 밖의 모든 내용은 Moto CMS 제어판을 사용하여 편집할 수 있습니다.

6단계: 프리로더 만들기

소스 파일 moto.xfl 및 website.xfl은 각각 flamoto 및 Flawebsite 폴더에 있습니다.
사이트의 프리로더는 moto.xfl에서 생성되어야 합니다. 프리로더는 100개의 프레임으로 구성된 간단한 클립일 수 있습니다.

이 클립의 액션 패널에는 "Stop ();"이라고 씁니다. 첫 번째 프레임의 경우. 그런 다음 원하는 대로 나머지 프레임에 애니메이션을 적용합니다.

“Stop ()”도 씁니다. fla의 타임라인 첫 번째 프레임 동작에서.

moto.fla 파일의 속성에서 사이트 크기(최소 너비 및 높이)를 지정하는 것을 잊지 마십시오.

다음 단계는 프리로더가 사라지는 멋진 애니메이션을 만드는 것입니다. 마지막 프레임에서 “showWebsite()” 기능을 활성화하여 웹사이트를 시작해야 합니다.

website.xfl 파일을 열고 프리로더를 업데이트하세요.

7단계: 웹사이트 배경

Moto CMS 미디어 라이브러리(설정 > 미디어 라이브러리)를 열고 기타 필수 이미지(홈 페이지, 메인 페이지 또는 갤러리용)와 함께 "미디어 추가" 버튼을 사용하여 배경 이미지를 업로드하세요.

그런 다음 제어판으로 돌아가서 새 페이지를 만들고 "사진" 버튼을 사용하여 배경 이미지를 삽입하세요. 이미지를 드래그하여 중앙에 배치하세요.

글꼴 관리자를 사용하면 사용자는 SWF 파일로 저장되고 다운로드할 수 있는 사이트 글꼴을 관리할 수 있습니다.

글꼴을 다운로드하기 전에 먼저 SWF 형식으로 변환해야 합니다. 이를 위해 우리는 온라인 글꼴 생성기- 편리한 온라인 신청는 MotoCMS 팀이 개발한 것으로 TTF 및 OTF 파일을 SWF로 쉽게 변환할 수 있습니다. 우리가 해야 할 일은 확장자가 .TTF 또는 .OTF인 필수 글꼴 파일을 선택하고 이를 Online Font Creator에 추가한 다음 "글꼴 만들기" 버튼을 클릭하고 완성된 SWF 파일을 다운로드한 후 포트폴리오 웹 사이트에서 사용할 수 있는 것뿐입니다. .

사이트 이름 및 슬로건 만들기

새 글꼴이 다운로드되면 텍스트 도구를 사용하고 원하는 글꼴을 적용하여 사이트 이름과 태그라인을 만들 수 있습니다. 슬로건을 만들기 위해 Tahoma 글꼴, 크기: 10, 색상: #727272를 사용합니다. 그런 다음 .PSD의 디자인에 따라 사이트 이름과 슬로건을 조정합니다.

9단계: 홈 페이지에 이미지 추가

사이트의 메인 페이지에 갤러리 이미지를 배치하겠습니다. 이렇게 하려면 왼쪽 도구 모음에서 "사진"을 클릭하여 미디어 라이브러리에서 이미지를 선택하세요. 필요한 경우 메인 페이지 디자인에 맞춰 위치를 조정하세요.

10단계: 하단 메뉴 생성

모양 도구를 사용하여 회색의 좁은 직사각형을 만들고 텍스트 도구를 사용하여 그 위에 버튼을 만듭니다. 사이트 디자인에 따라 모든 것을 조정하십시오.
모든 변경 사항을 저장하고 "미리보기"를 클릭하여 결과를 확인하세요.
내장 메뉴 모듈을 사용하여 메뉴를 생성할 수도 있습니다.

11단계: 콘텐츠 컨테이너 생성

메모: 컨테이너는 콘텐츠를 동적으로 추가할 수 있는 website.fla의 클립입니다. 4가지 유형이 있습니다. 1) 사이트 전체에서 볼 수 있는 개체가 포함된 컨테이너, 2) 레이아웃 개체가 포함된 컨테이너 3) 페이지 개체가 포함된 컨테이너 4) 팝업 창 개체가 포함된 컨테이너.

우리가 선택한 사이트 템플릿 #1에는 기본적으로 두 개의 컨테이너가 있습니다. 하나는 사이트 전체에 표시되는 개체가 있는 컨테이너이고 다른 하나는 페이지 개체가 있는 컨테이너입니다. website.fla 파일을 열면 다음과 같은 내용을 볼 수 있습니다:

이러한 컨테이너는 Structure.xml 파일에 기록됩니다. 너비가 980이고 높이가 800픽셀인지 확인하세요.

사이트 전체에서 볼 수 있는 개체가 포함된 컨테이너:

페이지 개체가 포함된 컨테이너:

배경, 사이트 제목, 태그라인, 회색 직사각형이 모든 페이지에 표시되는 하단 메뉴와 같은 사이트 요소를 만들려면 사이트 전체 개체가 있는 컨테이너에 해당 요소를 배치해야 합니다. Moto CMS 제어판을 사용하면 이 작업을 쉽게 수행할 수 있습니다. 원하는 요소를 클릭하고 위치(웹사이트)를 선택하기만 하면 됩니다. (전체 웹사이트에서).

12단계: 회사 소개 페이지 만들기

빈 페이지 만들기

왼쪽 상단에서 "만들기" 버튼을 클릭하면 새 페이지를 만들 수 있습니다.

필요한 메뉴 버튼을 새 페이지에 연결

이렇게 하려면 메인 페이지로 돌아가서 메뉴 버튼을 새 페이지에 연결하세요. 메뉴 버튼 텍스트를 강조 표시하고 오른쪽에 있는 링크 아이콘을 클릭하면 링크 편집기가 열립니다. 우리의 경우 “포트폴리오” 메뉴 버튼은 사이트의 메인 페이지로 연결되고, “회사 소개” 버튼은 “회사 소개” 페이지로 연결됩니다.

회사 소개 페이지에 배경 이미지 추가

우리는 페이지에 검정색 배경을 추가하기로 결정했습니다. 이렇게 하려면 왼쪽 패널의 "사진" 버튼을 클릭하여 미디어 라이브러리로 이동한 다음 미리 로드된 이미지(일반 검은색 직사각형)를 선택하고 디자인에 따라 페이지에서의 위치를 조정합니다.

"회사 소개" 페이지에 텍스트 추가

"텍스트" 도구를 사용하여 페이지에 텍스트 정보를 추가합니다. 내장된 WYSIWYG 편집기는 사용자가 수행하는 모든 작업을 표시하므로 텍스트 서식 지정이 매우 쉽습니다. 연락처 주소를 추가하는 것도 매우 쉽습니다. 링크 편집기를 열고 이메일 주소를 입력하기만 하면 됩니다.

완료한 후에는 회사 소개 페이지 요소를 페이지 개체 컨테이너에 배치하는 것을 잊지 마십시오. 각 요소를 한 번에 하나씩 선택하고 배치를 선택합니다: 페이지(페이지 콘텐츠).

13단계: 프리로더 이미지 변경

페이지를 탐색할 때 흰색 원형 프리로더를 발견했을 수 있습니다. 이를 구성하려면 website.fla 파일을 열고 라이브러리로 이동하십시오. 프리로더를 마우스 오른쪽 버튼으로 클릭하고 속성을 선택합니다.

심볼 속성 창에서 "기본 클래스 편집" 항목을 선택한 다음 원하는 대로 프리로더에 애니메이션을 적용할 수 있습니다. 프리로더를 비워두고 그래픽 이미지를 삭제하겠습니다.

14단계: 웹사이트 애니메이션

마지막으로 가이드의 가장 흥미로운 부분인 웹사이트 애니메이션에 이르렀습니다. ~에 이 순간, 이미 알고 계시겠지만 단일 컨테이너가 애니메이션으로 표시되지 않기 때문에 사이트는 정적입니다. 따라서 다음 단계는 컨테이너에 애니메이션을 적용하고 다른 애니메이션을 추가하여 사이트에 생기를 불어넣는 것입니다.

기본적으로 컨테이너 애니메이션

콘텐츠 컨테이너는 타임라인에 따라 쉽게 애니메이션을 적용할 수 있습니다. website.fla 파일을 열고 각 컨테이너에 대한 페이드인 애니메이션을 만듭니다.

먼저 사이트 전체에 표시되는 개체를 사용하여 기본 컨테이너에 애니메이션을 적용해 보겠습니다. 이것은 website_holder_1 레이어입니다. 투명도를 적용한 간단한 애니메이션을 하고 있지만, 그 모습을 뭔가로 꾸며보겠습니다. 레이어에 두 번째 키프레임을 만들고 첫 번째 키프레임에 대해 알파를 0%로 설정하고(투명하게 설정) 첫 번째에서 두 번째까지 중간 프레임을 만든 다음 부드러움을 추가합니다.

페이지 개체(page_1_holder_2 레이어)가 있는 컨테이너에 대해 동일한 애니메이션을 생성하되 조금 나중에 나타나도록 하겠습니다.

따라서 레이어에 두 개의 키프레임을 더 추가하고, 첫 번째와 두 번째 프레임에서 컨테이너를 투명하게 만들고, 두 번째 키프레임에서 세 번째까지 부드러워지는 중간 프레임을 만듭니다.

사이트를 컴파일하고 로드하면 각 요소가 애니메이션과 함께 나타나는 것을 볼 수 있습니다. 그러나 한 페이지에서 다른 페이지로 이동할 때 애니메이션은 없고 단지 비정상적인 깜박임만 있습니다. 타임라인의 두 번째 부분이 이를 담당합니다.

이것이 컨테이너의 모양과 사라짐에 애니메이션을 적용하는 방법입니다.

텍스트 글꼴은 시스템 글꼴이므로 컨테이너 레이어의 모든 영화 클립 인스턴스에 대해 블렌드 모드를 일반 레이어에서 레벨로 변경해야 합니다.

추가 컨테이너를 생성하고 애니메이션을 적용합니다.

좋은 플래시 사이트의 경우 이 애니메이션만으로는 충분하지 않으므로 사이트의 다른 부분, 예를 들어 상단 부분(아래 이미지에서 노란색으로 강조 표시), 하단 부분(녹색으로 강조 표시) 및 콘텐츠를 애니메이션으로 만들 것입니다. 자체(빨간색 프레임의 이미지)

상단과 하단 부분은 전체 사이트 수준이므로 이 두 부분에 대해 두 개의 컨테이너를 추가하겠습니다. 컨테이너를 추가하기 전에 크기와 위치를 결정해야 합니다. Photoshop의 슬라이스 도구를 사용하면 쉽게 할 수 있습니다.

상단 부분의 크기는 x=0, y=0, 너비=980, 높이=120입니다.

하단 영역: x=0, y=765, 너비=980, 높이=35.

상단 컨테이너에는 사이트 이름이 포함되고 하단 컨테이너에는 메뉴가 포함되며 다르게 표시됩니다. 또한 전체 화면 모드로 전환하면 화면 상단과 하단에 각각 고정됩니다.

컨테이너의 크기를 결정한 후 구조.xml 파일을 열고 새 컨테이너(사이트 수준에서)를 추가하여 좌표, 너비, 높이 및 깊이를 지정합니다.

.xml 파일에 컨테이너를 추가한 후에는 website.fla 파일에서 컨테이너를 생성해야 합니다. website.fla 파일을 열고 컨테이너에 대한 새 레이어를 만듭니다. 레이어의 순서는 xml 파일에 설정한 깊이 값과 일치해야 합니다.

website_holder_1 레이어에서 빈 영화 클립을 복사하여 website_holder_3 및 website_holder_4에 붙여넣을 수 있습니다.

클립에서는 구조.xml 파일에 지정된 것과 동일한 좌표를 설정합니다.

세 번째 컨테이너의 경우: x = 0, y = 0;

네 번째 컨테이너의 경우: x = 0, y = 765.

클립을 복사했기 때문에 이전 이름이 그대로 유지되었습니다. 찾기 쉽도록 ID별로 변경해 드립니다.

컨테이너 4에 대해서도 동일한 작업을 수행해야 합니다.

타임라인에서는 컨테이너 3과 4의 첫 번째 키 프레임을 설정하여 전체 사이트의 개체가 포함된 컨테이너보다 나중에 나타나기 시작하도록 했습니다. 그런 다음 두 번째 키프레임과 트윈 애니메이션을 만듭니다. 첫 번째 키프레임에는 컨테이너의 시작 위치가 포함되고, 두 번째 키프레임에는 사이트에 있는 컨테이너의 최종 위치가 포함됩니다. 기본 컨테이너가 화면 상단에 나타나므로 이를 첫 번째 키프레임으로 이동합니다. 하단 컨테이너는 하단에 있으므로 첫 번째 키 프레임으로도 이동합니다. 또한 중간 프레임에 애니메이션을 적용하기 위해 이징도 추가합니다.

우리가 얻은 것은 다음과 같습니다.

그런 다음 컨테이너 애니메이션의 첫 번째 키 프레임 수준에 있는 작업 레이어에 다음 코드를 추가해야 합니다.

그런 다음 사이트를 컴파일하고 제어판을 업데이트합니다.

컨테이너에 객체 배치

개체를 선택하면 드롭다운 메뉴의 가능한 배치 목록에 위쪽과 아래쪽이라는 두 개의 새로운 컨테이너가 나타나는 것을 볼 수 있습니다.

상단 컨테이너에는 슬로건이 포함된 사이트 이름을, 하단에는 회색 직사각형으로 표시된 사이트 메뉴를 배치해야 합니다.

하단 용기의 내용물 변경

이제 대형 화면에서는 하단 컨테이너를 화면 하단에 붙이는 것이 바람직합니다. 이렇게 하려면 컨테이너 애니메이션을 다른 클립으로 이동해야 합니다. 왜냐하면 아시다시피 애니메이션 클립을 프로그래밍 방식으로 이동할 수 없기 때문입니다(애니메이션은 작동하지 않음). 이 클립을 website_holder_4_c라고 부르겠습니다.

그런 다음 메인 장면으로 이동하여 컨테이너 3과 4의 첫 번째 키 프레임을 클릭하고 코드를 편집해 보겠습니다.

사이트가 컴파일되면 화면 크기를 어떻게 조정하더라도 하단 컨테이너가 화면 하단에 고정되는 것을 볼 수 있습니다. 화면 해상도가 너무 작으면 하단 컨테이너가 사이트 콘텐츠와 겹치지 않고 그대로 유지됩니다.

15단계: 사이트 콘텐츠 컨테이너에 애니메이션 적용

사이트의 콘텐츠에 애니메이션을 적용하려면 상단 및 하단 컨테이너에 대해 했던 것과 동일한 방식으로 전체 사이트의 개체로 컨테이너에 애니메이션을 적용해야 합니다.

16단계: 연락처 페이지 만들기

새 페이지를 만들기 전에 페이지 템플릿을 업데이트해 보겠습니다. 모든 새 페이지의 템플릿을 "회사 소개" 페이지로 만들어 보겠습니다. 회사 소개 페이지를 마우스 오른쪽 버튼으로 클릭하고 페이지 템플릿 업데이트를 선택합니다.

페이지 템플릿을 업데이트한 후 아래 스크린샷과 같이 "만들기" 버튼을 클릭하고 페이지 이름, 제목을 입력하고 URL을 할당한 후 사이트 구조에서 해당 위치를 선택합니다.

연락처 페이지가 준비되었습니다. 이제 남은 것은 편리한 WYSIWYG 편집기를 사용하여 콘텐츠를 편집하고 링크 편집기를 사용하여 해당 메뉴 버튼에 연결하는 것입니다.

17단계: 단순 슬롯 생성

Moto Flash CMS에서 슬롯은 애니메이션 개체의 역할을 합니다. 슬롯에는 제어판에서 직접 제어할 수 있는 수많은 애니메이션 기능이 포함될 수 있습니다.

먼저 간단한 슬롯을 만든 다음 개선해 보겠습니다.

"닫기" 버튼부터 시작하여 사이트에 이미지로 추가하고 일부 효과를 적용한 다음 "페이지로 이동" -> "홈" 작업을 할당해 보겠습니다.

"닫기" 버튼에 애니메이션을 적용해 보겠습니다. 슬롯을 사용하여 수행할 것이기 때문에 전혀 어렵지 않습니다. website.fla 파일에 슬롯을 만들어 보겠습니다. 이렇게 하려면 "닫기" 버튼의 이미지를 라이브러리로 가져옵니다. Slots 섹션에서 새 영화 클립을 만들고 이를 CloseButtonSlot이라고 불러야 합니다.

클래스를 CloseButtonSlot으로 설정해 보겠습니다. 새 클래스를 만들 필요가 없으며 AbstractMotoSlot 클래스를 상속하기만 하면 됩니다. com.moto.template.shell.view.comComponents.AbstractMotoSlot을 복사하여 기본 클래스 필드에 붙여넣으면 됩니다.

그런 다음 닫기 버튼 이미지를 장면에 추가하고(CloseButtonSlot MovieClip이 열려 있어야 함) 이를 CloseButtonIcon이라는 클립으로 변환합니다. AbstractMotoSlot 클래스에서 슬롯을 상속받았으므로 이것이 기본 애니메이션을 제공합니다. 이제 아름다운 확장/축소 효과를 만들어 보겠습니다.

다음 단계는 새 레이어를 만들고 "Stop();"을 배치할 키프레임을 만드는 것입니다. 메인 표시를 “over”(첫 번째와 두 번째 중지 키 프레임 사이)와 “out”(두 번째와 세 번째 중지 키 프레임 사이)에 배치해 보겠습니다. 스크린샷을 참조하세요.

클립을 사용하여 레이어에 동일한 키프레임과 중간 프레임을 만듭니다.

예를 들어, "닫기" 버튼 위에 마우스 커서를 올리면 시계 방향으로 회전하고, 제거하면 시계 반대 방향으로 회전합니다.

모션에 애니메이션을 적용하기 위해 회전에 밝기를 추가하고 부드럽게 만들어 보겠습니다.

애니메이션이 완료된 후 website.fla 파일을 새 슬롯(Ctrl + Enter)으로 컴파일합니다.

Moto CMS를 사용하여 슬롯 작업을 수행하려면 다음 파일에서 해당 매개변수를 지정해야 합니다: Structure.xml:

librarySymbolLinkage=” ” – 영화 클립 슬롯(클래스 이름)을 내보냅니다.
animation="true" – 슬롯이 애니메이션인지 여부를 나타내는 속성입니다.
resizing=”false” – 슬롯 크기를 조정하는 논리가 있는지 여부입니다.
locked=”false” – 슬롯이 제어판에 표시되어야 하는지 여부입니다.
– 제어판의 슬롯 이름
– 기능을 확장하는 슬롯 속성. 이 예에서는 이를 사용하지 않습니다.