집 > 테스트

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

플래시 사이트 생성 ndash; 문제가 다소 복잡합니다. 이를 위해서는 프로그래밍, 컴퓨터 그래픽, 사이트 최적화 및 홍보의 기초, 결국 개발 환경 및 프로그래밍 언어 액션 스크립트 2.0에 대한 지식 수준 모두에서 플래시 자체를 잘 알아야 합니다. 또는 현재 우선 순위가 더 높은 액션 스크립트 3.0.
Flash 응용 프로그램은 Adobe Flash Professional ndash에서 개발되었습니다. 웹 응용 프로그램, 영화, 게임, 모바일 응용 프로그램 및 기타 임베디드 장치와 같은 콘텐츠를 만드는 데 사용되는 멀티미디어 프로그램입니다.
플래시 ndash; 독특한 현상. 이전에는 이 제품을 "Macromedia Flash"라고 했으나 Adobe에 인수된 후 이 프로그램은 2005년부터 "Adobe Flash"로 알려지게 되었습니다. Flash 애니메이션은 웹 페이지 스트리밍에 사용됩니다. 때때로 플러시 ndash; 이것은 html 페이지의 일부이며 전체 페이지가 완전히 Flash로 만들어졌거나 전체 사이트가 Flash로 만들어졌습니다. 결과 Flash 파일은 컨텐츠를 보기 위해 특별한 무료 브라우저 플러그인이 필요한 특수 swf("ShockWave Flash") 파일이며 공식 Adobe 웹 사이트에서 쉽고 빠르게 다운로드하여 설치할 수 있습니다. 플래시 무비의 장점은 매우 빠른 로딩과 인터랙티브한 벡터 애니메이션 작업이었습니다. 전체 비디오가 화면에 표시되기 전에 플래시를 로드할 수 있습니다. 즉, 애니메이션 보기를 시작할 때 옵션을 구현할 수 있으며 화면의 나머지 "스트림"은 백그라운드에서 로드됩니다.
벡터에 사용된 플래시 그래픽과 프로그램 코드를 사용하면 일부 래스터, 비디오 조각, 프로그램 코드를 대체할 수 있는 완전한 기능의 응용 프로그램을 만들 수 있지만 훨씬 더 최적화되고 스트림에 더 적은 대역폭이 사용되며 프로세서 전력이 줄어듭니다. 소모됩니다. 벡터 렌더링 외에도 Flash Player(Flash 영화 보기에 필요한 플레이어)에는 런타임 상호 작용 스크립트를 지원하는 가상 머신(AVM(ActionScript Virtual))이 포함되어 있으며 비디오, mp3도 지원합니다.
기존의 그래픽 유형을 고려하고 Flash가 직접 작동하는 벡터 그래픽의 장점을 살펴보겠습니다.
모든 그래픽은 래스터, 벡터, 3D의 세 가지 유형으로 나눌 수 있습니다. TV 모니터에서와 같이 래스터 그래픽에서 각 이미지는 일련의 작은 ndash 요소로 구성됩니다. 픽셀 ndash; 그림 요소의 약어입니다.
도트 그래픽의 원리는 매우 간단합니다. 어린아이가 학교에서 셀을 그리면 여기에서만 이 셀이 훨씬 작아집니다. 이러한 유형의 그래픽은 구현 및 처리 및 표현이 모두 간단하며 구현, 그림 정보의 입력 또는 디지털화를 자동화하는 것이 기술적으로 편리합니다.
그러나 래스터 그래픽에는 단점이 있습니다. 부피가 크고 결과적으로 파일 무게가 커지고 이미지를 축소하거나 확대하면 사진의 품질이 손실됩니다.
벡터 그래픽의 그래픽 정보 코딩은 다릅니다. 모든 이미지는 ndash 등고선으로 지정됩니다. 수학적 개체. 이러한 윤곽선은 여러 번 이동, 크기 조정, 크기 조정이 가능한 독립 개체입니다. 선은 선 자체를 나타내는 공식인 시작점으로 설정됩니다. 덕분에 패턴을 변경할 때 항상 비율이 정확하게 유지됩니다. 벡터 그래픽은 또한 개체 지향 그래픽입니다. 드로잉은 윤곽선 두께, 색상, 선 스타일 등의 고유한 특성을 갖는 직선 및 곡선, 타원, 직사각형, 닫힌 모양 및 열린 모양 등의 개별 개체로 구성되어 있기 때문입니다. 디.
벡터 그래픽은 자원 면에서 경제적이며, 이에 대한 정보는 각 포인트에 대한 정보가 아닌 수식의 형태로 저장되며, 색상 설명은 파일 크기를 크게 늘리지 않습니다. 벡터 그래픽은 이미지 품질의 손실 없이 쉽게 수정할 수 있습니다. 로고, 글꼴 등을 만들 때 명확한 윤곽선을 유지하는 것이 기본적인 그래픽 영역이 있습니다.
벡터는 프린터와 같은 모든 출력 장치의 해상도를 최대한 활용합니다. 이미지는 항상 고품질로 보이며 모든 것이 프린터 자체에만 의존합니다.
또한 벡터 그래픽의 장점은 래스터 그래픽으로 쉽게 변환되지만 그 반대는 아니라는 점! 동일한 수단으로 처리할 수는 없지만 래스터 그래픽 개체를 포함할 수 있습니다.
벡터 그래픽의 심각한 이점은 텍스트와 이미지를 통합하는 수단, 각각에 대한 하나의 접근 방식, 최종 제품을 만드는 기능으로 간주됩니다. 가장 인기 있는 벡터 그래픽 편집기는 CorelDRAW, Adobe Illustrator 및 Adobe Flash입니다.
벡터는 사실적인 이미지를 만들 때 제한됩니다. 명확하고 만화 같은 ndash; 예, 하지만 소나무나 구름을 공식화하는 방법은 다음과 같습니다. 그래픽 정보를 입력할 때도 문제가 있습니다. 예를 들어 스캐너는 이미지에 대한 정보를 픽셀 단위로 전송합니다. 즉, 광선의 반응에 따라 각 지점의 위치와 색상이 표시됩니다. 개체별로 다 커버할 수 없고, 위에서 쓴 것처럼 모든 이미지를 형식화할 수는 없습니다.

Flash는 보편적으로 인기를 얻었습니다. 만화 배너는 거의 모든 웹 페이지에 나타납니다. 그들은 대화식이며 애니메이션을 재생하며 네트워크에서 작업할 때 중요한 디스크 공간을 거의 차지하지 않습니다.
애니메이션은 일정 시간 동안 각 플래시 프레임을 표시하여 생성됩니다. 프레임이 많으면 움직이는 착시가 생긴다. 이전 플래시 기술은 GIF 애니메이션으로 등장했지만 플래시의 가능성은 훨씬 더 넓습니다. 따라서 탐색 요소, 음성 만화, 애니메이션 로고, 계산기, 다양한 대화형 요소 집합이 있는 전체 사이트 및 플래시에서 만들 수 있는 애니메이션의 기적을 만들 수 있습니다. 매우 인상적이고 웹을 위한 다른 기술은 할 수 없습니다. 그런 능력을 자랑합니다.
플래시 애니메이션을 무비라고 합니다. 애니메이션 가능성은 애니메이션에 국한되지 않고 메뉴, 그림, 링크, 텍스트 등 다양한 개체에 애니메이션이 적용됩니다.
프로그램이 시작되면 작업 공간과 도구 모음이 있는 창이 열리고 작업 중에 연결할 수 있는 추가 창이 있습니다. 타임라인 작업을 위한 탭, 오류 확인 설정 등도 표시됩니다. 이 프로그램에서 영화는 기성품을 그리거나 가져와서 만들어지며 ndash 작업 창의 특정 영역에 배치됩니다. 장면(단계) 및 프레임은 타임라인(타임라인)을 사용하여 생성됩니다.
영화에는 여러 장면이 있을 수 있으며, 영화를 시작할 때 의도적으로 순서를 변경하지 않는 한 생성된 순서대로 재생됩니다. 이를 통해 개별 에피소드를 편리하고 빠르게 변경하고 순서를 변경할 수 있습니다.
애니메이션 자체는 프레임을 차례로 변경하고 내용을 변경하여 수행됩니다. 즉, 필요한 매개 변수가 있는 개체가 프레임에 추가됩니다. 스테이지의 개체는 회전할 수 있고, 위치, 색상, 투명도, 모양, 크기를 설정할 수 있으며 다른 개체에서도 마찬가지입니다.
애니메이션은 다음과 같은 방법으로 만들 수 있습니다.
프레임별 애니메이션 ndash; 각 프레임의 드로잉은 손으로 이루어지며 프레임은 연속적으로 이동합니다.
계산된(트위닝된 애니메이션) ndash; 초기 및 최종 프레임(키 프레임이라고 함)만 만들어지고 그 사이에 프로그램 자체가 프레임을 만듭니다. 이러한 애니메이션의 두 가지 유형: 모션(모션 트위닝, 모션 매개변수가 변경될 때 회전, 크기, 위치), 모양(모양 트위닝);
프로그래밍 방식으로 ndash; 객체 변경을 위한 매개변수가 Action Script 프로그래밍 언어의 명령을 사용하여 설정되는 경우.
영화 작업 과정에서 원본 데이터는 .fla 확장자를 가진 특수 파일에 저장됩니다. 여기에는 모든 개체가 있는 장면과 영화에 포함되지 않았지만 영화에서 생성된 개체에 대한 추가 매개변수와 사운드 옵션, 주석, 스크립트 코드, 프로그램 설정 등이 포함됩니다. 이러한 소스를 만든 후에는 인터넷 ndash에 적합한 형식으로 변환해야 합니다. 즉, SWF이므로 영화를 게시하거나 코드를 컴파일합니다. 이렇게 하면 원하는 동영상 형식으로 재생하는 데 필요하지 않은 정보가 파일에서 제거됩니다. 따라서 파일 크기가 최소화되고 사용자가 빠르게 로드합니다. 이러한 파일은 ndash에서 별도로 열 수 있습니다. 플레이어는 그것을 재생할 것이지만, 당신은 그것을 어떤 html 페이지에든 객체로 연결할 수 있습니다.

필름은 조립식 ndash 요소로 만들어집니다. 표준(기호) 또는 기호. 참조는 영상에서 반복적으로 사용되는 이미지, 버튼, 애니메이션, 동영상 등이다. 생성하거나 가져올 수 있습니다. 일단 생성되면 기호는 특별한 ndash 저장소에 저장됩니다. 도서관. 필름을 조립하는 과정에서 필요한 곳에 삽입되는 것은 표준(라이브러리에 보관되어 있는)의 인스턴스(Instance)이지 매번 완전하게 삽입되는 것은 아니다. 그리고 언제 어디서나 삽입할 수 있습니다. 이 경우 인스턴스 매개변수를 원하는 대로 변경할 수 있습니다(위치, 크기, 크기, 회전, 굽힘, 투명도, 톤 등). 반면 참조 기호 자체는 변경되지 않습니다. 이것은 매우 편리한 ndash입니다. 매번 요소를 새로 만들거나 복사할 필요가 없으며 요소는 하나이며 원하는 만큼 수정합니다. 그리고 게시 과정에서 swf 형식으로 생성된 최종 비디오 파일은 한 곳에 직접 참조 개체가 있고 나머지 모든 ndash에는 참조 개체가 있는 방식으로 조합됩니다. 단지 그것을 가리키는 포인터일 뿐입니다. 거의 동일한 요소를 복사하는 것과 비교하여 이러한 방식으로 비디오의 무게가 얼마나 줄어들었는지 상상해 보십시오.
표준은 다음과 같습니다.
황소; 무비클립(moviklip) ndash; 사운드, 그래픽, 애니메이션이 포함되며 프로그래밍 방식으로 스크립팅할 수 있습니다.
황소; 그래픽(그래픽) ndash; 정적 도면, 애니메이션, 사운드, 그러나 프로그래밍 방식으로 제어되지 않음
황소; 버튼(버튼) - 사진, 사운드 포함 다른 유형의 심볼 참조와 비교하여 4개의 프레임만 포함하며 다양한 마우스 이벤트가 발생할 때 버튼 상태의 변화를 보여줍니다.
참조 기호를 직접 생성하기 전에 유형을 설정해야 하며 나중에 변경할 수 있습니다.
참조 기호 및 해당 인스턴스 외에도 동영상에는 외부 파일, 글꼴의 이미지가 포함될 수 있습니다.
Adobe Flash ndash의 전체 비디오; 이것은 일련의 프레임(Frames)이며 지정된 속도로 차례로 표시됩니다. 그들은 타임라인의 도움으로 일합니다. 눈금의 왼쪽에는 이름을 설정해야 하는 레이어가 오른쪽 ndash에 있습니다. 개체로 채워지는 일련의 빈 프레임이 만들어지고 스테이지에 배치됩니다. 프레임이 개체로 채워지자 마자 색상이 회색으로 변경됩니다. 키프레임은 검은색 점으로 표시됩니다. 타임라인에서 현재 프레임은 빨간색 ndash 마커로 표시됩니다. 얇은 빨간색 선이 수직으로 통과하는 재생 헤드로 모든 레이어와 라쿠오를 가로지르며 트라코를 봅니다. 각각의 현재 프레임. 화면에 표시되는 것은 이러한 프레임, 즉 무비 클립 형식의 내용입니다.

상호 작용 및 본격적인 사이트를 만드는 기능을 구현하기 위해 Adobe Flash는 Action Script 프로그래밍 언어를 사용합니다.
동영상을 대화형으로 만들기 위해 Flash는 스크립트 프로그램(script-script)을 사용하고 ActionScript에 일련의 지침(액션)이 포함되어 있으며 특정 이벤트가 발생할 때 실행됩니다. 사용자가 버튼을 누르고 동영상의 특정 프레임에 도달하거나 마우스 움직임, 휠, 특정 영역 위에 포인터 위치 지정 및 기타 여러 가지에 대한 반응. 스크립트 명령은 이벤트가 발생할 때 Flash가 반응하는 방식을 결정합니다.

이벤트 구현 시 수행되는 스크립트 명령어는 클립, 프레임, 버튼에 대해 지정되며, 이는 액션(명령) 화면(액션 프레임, 액션 무비클립), 액션 버튼 하단의 특수 탭에서 수행됩니다.
가능한 이벤트:
키 누르기 ndash; 사용자가 키보드 키를 누를 때 기능 매개변수는 키의 이름입니다.
호버(롤오버) ndash; 마우스 포인터가 개체 위에 있지만 마우스가 눌러지지 않은 경우;
릴리스 ndash; 포인터가 프로그래밍된 버튼 위에 있을 때 마우스 버튼을 놓으면, 즉 사용자가 조작기를 클릭하면 laquo;mouseraquo;
ndash를 누르십시오. 포인터가 프로그래밍된 버튼 위에 있는 동안 마우스 버튼(왼쪽)을 누른 경우. 이 경우 가시적 이미지가 아닌 작동 영역이 고려되며 이는 히트 프레임에서 결정됩니다.
제거(롤아웃) ndash; 버튼 위에 마우스 포인터가 있었지만 눌리지 않았고 마우스가 프로그래밍 가능한 버튼에서 멀어졌습니다.
Shift(드래그 아웃) - 마우스 버튼을 개체 위에 놓고 누르고 제거합니다.
릴리스 외부 ndash; 개체에서 마우스 버튼을 눌렀다가 개체 외부에서 사용자가 손을 뗀 경우;
드래그 오버 ndash; 포인터가 개체에 설정되고 마우스 왼쪽 버튼이 눌려지고 떼지 않지만 포인터가 개체 뒤로 이동한 다음 다시 반환됩니다.

ActionScript 3.0 언어는 ActionScript 2.0과 비교할 때 객체 지향 프로그래밍의 기초를 기반으로 한다는 점에서 더 현대적입니다. 주요 개념이 클래스, 개체, 해당 속성 또는 속성, 그리고 이 개체에 내재된 메서드인 경우.
ActionScript는 Flash Player의 일부인 가상 머신(Virtual Machine ActionScript)을 사용하여 실행됩니다.
모든 프로그램 코드의 기초는 ActionScript에서 다음과 같이 설정되는 변수입니다. var ndash; 이 섹션에서 변수가 지정되고 그 유형이 결정된다는 것을 의미하는 특별한 플래시 명령; 이름 ndash; 변수 이름, 텍스트 숫자 형식으로 지정되지만 숫자로 시작하지 않습니다. 입력 ndash; 변수 유형 표시(숫자 - 숫자, 논리적 ndash; 부울, 텍스트 - 문자열 등). 즉, 다음을 지정합니다. Var x: String;
변수 이름 뒤에 콜론을 포함하고 줄 끝에 세미콜론을 포함해야 합니다. 코드를 실행하는 동안 값과 그에 따른 변수 유형이 변경될 수 있습니다.
많은 양의 데이터를 보유하는 변수를 배열이라고 합니다. AC 3.0에서. Array: Var Mas: Array 유형으로 지정됩니다.
모든 배열 요소는 0부터 시작하여 번호가 지정되므로 예를 들어 첫 번째 요소에 액세스하려면 Mas를 지정해야 합니다. 즉, 대괄호 안에 배열에서 원하는 요소의 위치를 ​​나타냅니다.
코드 자체는 주어진 ndash 이벤트에서 발생하는 명령 시퀀스를 설명하는 기능으로 구성됩니다. 마우스 클릭, 키 누름, 특정 값 도달 등
함수는 예약어 함수를 사용하여 지정한 다음 이름 - 이름 - 모든 텍스트 숫자 이름을 지정하지만 숫자로 시작하지 않으면 괄호() 안에 ndash 함수의 매개변수를 지정할 수 있습니다. 입력으로 제공되는 것은 없을 수 있으며 콜론과 함수가 반환하는 데이터 유형 또는 void ndash; 함수가 아무것도 반환하지 않을 때. 그런 다음 전체 함수 코드를 중괄호( )로 묶습니다. 그리고 필요한 경우 이름과 매개변수를 지정하여 함수에 액세스합니다: ​​이름() "AC 3.0의 조건. if(x==y) 연산자를 통해 설정됩니다. 즉, 대괄호 안에 비교 조건 자체를 지정해야 합니다. 루프는 for()를 통해 정의되며, 여기서 매개변수는 괄호 안에 설정됩니다: 카운터 변수, 변경 단계.
각 객체는 매개변수 또는 속성으로 특징지어지며 addEventListener 함수를 사용하여 플래시의 객체에 이벤트 리스너를 연결할 수 있습니다. 이 리스너는 객체와 함께 발생하는 이벤트를 처리하고 이에 대한 반응이 프로그래머가 함수에 설명하면 프로그램이 그에 따라 반응합니다.

이것은 플래시 사이트를 만들 때 알아야 할 아주 작은 부분일 뿐입니다. 사이트를 처음부터 만들 필요는 없으며 필요에 따라 구매하고 수정할 수 있는 특별한 템플릿이 있습니다(예: templatemonsters 사이트). 디자인은 이미 완전히 개발되었으며 콘텐츠를 변경해야 하며 소프트웨어 구현에서 필요한 모든 것을 다시 프로그래밍할 수 있습니다. 그런 다음 도메인과 호스팅을 구입하고 swf가 연결된 html 파일을 배치해야 합니다.
책 읽기(예: 책 laquo; 100% 튜토리얼 M.Flash MXraquo; 작업 및 기사에 도움이 됨), 포럼에서 동료로부터 배우기(demiart, flasher.ru), 그리고 가장 먼저 어시스턴트가 되어야 하는 것은 무엇입니까? 공식 Adobe 웹 사이트에서 도움말을 참조하십시오. Opsian 언어 ActionScript는 매우 상세하고 상세하며 예제가 표시되며 자료도 러시아어로 제공됩니다.
동영상을 만든 후에는 게시해야 합니다. 파일 메뉴 항목 게시 옵션에서 프로그램의 게시 옵션을 설정할 수 있습니다. 비디오를 업로드할 형식, 그래픽 및 사운드에 대한 품질 설정 및 기타 여러 가지를 나타냅니다. swf 파일이 있으면 완성된 응용 프로그램으로 사용할 수 있습니다. 변경하려면 생성된 비디오를 업데이트해야 합니다. ndash 소스를 편집해야 합니다. fla 파일을 만들고 다시 게시하십시오.

다행히 대부분의 활동적인 인터넷 사용자는 플래시 게임을 만들 수 있습니다. 초보자의 경우 초기 프로그래밍 기술조차도 많은 도움이됩니다 (그런데 습득하는 것은 그리 어렵지 않습니다. 욕망이있을 것입니다). 사실, 많은 특수 플래시 게임 디자이너(예: Macromedia Flash) 중 하나를 마스터하려면 시간이 필요합니다.

많은 소프트웨어 사이트에는 무엇보다도 이러한 생성자가 포함되어 있습니다. 일반적으로 컴퓨터에 설치하면 사용자에게 특별한 문제가 발생하지 않습니다. 선택한 프로그램은 필요한 모든 변경 사항과 함께 등록 및 설치되어야 함을 기억하십시오. 그러면 충실하게, 즉 중단 없이 제공됩니다. 대부분의 게임 디자이너는 영어로 만들어지지만 러시아어로 된 크랙이나 버전을 찾을 수 있습니다. 종종 설정 자체에 모국어를 설정할 수 있는 창이 있습니다.

플래시 게임을 만드는 방법: 사전 준비

디자이너를 마스터하기 전에 앉기 전에 이미 게임에 대한 대략적인 시나리오인 스토리라인이 있어야 합니다. 애니메이션과 디자인에 대해 미리 생각하는 것이 좋습니다. 이렇게 하면 시간을 크게 절약할 수 있습니다. 플래시 게임을 만들기 전에 원하는 유형을 결정하십시오. 영감을 얻으려면 플래시 게임 라이브러리가 있는 사이트를 방문하십시오.

전문가는 초보자가 아케이드 게임과 같은 간단한 응용 프로그램을 만드는 것으로 시작하는 것이 좋습니다. 그래야만 더 복잡한 유형의 게임으로 이동하고 자신만의 전략을 세울 수도 있습니다. 모든 장르가 편리하게 분류되는 동일한 생성자에서 미래 장난감의 유형을 선택할 수 있습니다. 예를 들어 아케이드를 활성화하십시오(더블 클릭).

플래시 게임을 만드는 방법: 게임 디자이너에서 일하기

템플릿을 열고 애니메이션 개체 및 정적 개체 섹션에서 원하는 개체를 템플릿으로 끕니다. 질감과 색상을 선택하여 배경을 만듭니다. 개체의 경우 색상 팔레트를 사용하여 색상을 선택합니다. 애니메이션 플레이어를 사용하여 활성화되지 않은 다른 기능을 확인하십시오. 설정에서 게임 캐릭터(아케이드) 또는 개체(논리 장난감)의 움직임 수준을 설정합니다.

필요한 모든 작업을 완료한 후 디버거를 시작합니다. 이 모드에서는 모든 레벨에서 시작하여 자신의 게임을 진행할 수 있습니다. 이것은 성능을 테스트하기 위해 중요합니다. 감지된 오류를 제거하고 플래시 게임을 다시 확인하십시오. 모든 것이 정상이면 변경 사항을 저장합니다.

플래시 게임을 만드는 방법: 게임을 "생각나게"

이제 플래시 아이디어의 원래 이름을 생각해내고 짧은 주석을 작성할 수 있습니다. 시작 화면 디자이너를 사용하여 게임을 위한 멋진 시작 화면을 만드십시오. 변경 사항도 저장하십시오.

오류와 오작동을 찾기 위해(또는 찾지 않기 위해) 처음부터 끝까지 자신의 플래시 게임을 살펴보십시오. 당신의 작품을 비판적으로 살펴보는 것은 나쁘지 않습니다. 좋은 책이나 영화처럼 게임이 시작, 사건 전개, 결말 등 논리적이고 잘 정의된 부분을 갖는 것이 매우 중요합니다.

게임의 깨끗한 버전을 친구에게 보내십시오. 가장 정직한 비평가가 귀하가 달성한 결과를 평가하게 하십시오. 글쎄, 그 후에 이미 플래시 게임을 웹에 업로드할 수 있습니다.

욕망은 있지만 지식이 없는 경우 플래시 게임을 만드는 방법은 무엇입니까?

이 문제에 대해 너무 걱정하는 수많은 사용자에게 우리는 확실히 대답하고 싶습니다. 어떤 지식도 아무데서나 올 수 없다는 것을 기억하십시오. 모든 새로운 사업은 어딘가에서 시작해야 합니다. 시간이 지남에 따라 게임을 만드는 데 어떤 지식이 부족한지 이해하기 시작할 것입니다. 당신은 조언을 구하고, 추천을 찾고, 관련 문헌을 읽기 시작할 것입니다. 덕분에 당신의 기술이 점점 더 발전하기 시작할 것입니다. 새로운 것을 두려워하지 마십시오. 그렇지 않으면 원하는 것을 결코 얻지 못할 것입니다. 행운을 빕니다!

프로그래밍 언어에 대한 지식 없이 플래시 게임을 만드는 프로그램입니다. 논리적 블록과 미리 준비된 이미지에서 게임을 만들 수 있습니다.

언젠가, 아마도 이미 몇 년 전에 우리 웹 사이트에 Game Maker 프로그램이 등장하여 프로그래밍 언어에 대한 지식이 거의 없어도 게임을 만들 수 있었습니다!

지금까지 이 페이지는 우리와 가장 많이 논의된 페이지 중 하나였으며 종종 댓글에서 온라인으로 플레이할 수 있는 게임을 만드는 데 사용할 수 없다는 불만이 있습니다. 오늘 우리는 다시 게임 개발 주제로 돌아가서 여전히 플래시 게임을 만들 수 있는 유사한 프로그램을 고려할 것입니다. 스텐실!

프로그램 기능

Stencil의 도움으로 모든 장르의 2D 게임을 만들 수 있지만 무엇보다도 프로그램 엔진이 다양한 rpg 슈터를 위해 "날카롭게" 되었습니다. 구조적으로 프로그램은 원하는 경우 타사 응용 프로그램을 사용하지 않고 처음부터 게임을 만들 수 있는 전체 도구 세트입니다.

"닫기" 또는 "다시 표시 안 함" 버튼(프로그램이 시작될 때마다 이 창을 보고 싶지 않은 경우)을 사용하여 프로그램의 새 버전에 대한 정보가 있는 팝업 창을 닫고 대신 다음 창이 나타납니다.

여기에서 Stencil 개발자 커뮤니티에서 자체 계정을 만들 수 있습니다. 원칙적으로 계정을 만들 필요는 없지만(이를 위해 아래의 "나중에 알림" 버튼 클릭) 등록하면 StencilForge라는 온라인 저장소에서 추가 템플릿과 작업을 다운로드할 수 있는 기회가 주어집니다. 아프다 :). 계정을 생성하려면 "계정 생성" 버튼을 클릭하고 등록 양식으로 이동하십시오.

여기에서 사용자 이름, 비밀번호(2회) 및 이메일 주소로 표준 필드를 채우고 "가입" 버튼을 클릭합니다. 모든 것이 잘되면 프로그램 시작 창의 인터페이스가 마침내 당신 앞에서 열립니다.

시작 창 인터페이스

외부적으로 Stencil 시작 창의 작업 공간은 여러 영역으로 나뉩니다.

맨 위에는 전통적으로 메뉴 표시줄과 도구 모음이 있습니다. 모든 주요 설정 및 제어 버튼이 여기에 수집됩니다. 도구 모음 아래에 작고 좁은 회색 줄무늬가 있습니다. 여기에는 탭(예 - Stenyl 인터페이스는 다중 탭으로 매우 편리함)과 탭 사이를 빠르게 전환할 수 있는 버튼(오른쪽)이 포함되어 있습니다.

기본 작업 공간은 두 부분으로 나뉩니다. 왼쪽에는 프로그램 섹션에 대한 탐색 모음이 있고 오른쪽에는 현재 활성 상태에 따라 변경되는 기본 콘텐츠(메인 화면의 게임 목록)가 있습니다. 동작 모드. 하단에는 다음을 수행할 수 있는 몇 가지 추가 버튼이 있습니다.

  1. Stencil이 생성된 게임의 모든 리소스와 게임 자체를 저장하는 폴더를 엽니다(왼쪽 하단 모서리에 있는 "게임 폴더 보기" 버튼).
  2. 프로그램 작업에 대한 교육 과정을 시작합니다(오른쪽 하단 모서리에 있는 녹색 패널의 "집중 과정 시작"). 그건 그렇고, 옆에 훈련을 받겠다는 제안을 숨길 수있는 버튼도 있습니다 ( "이것을 다시 표시하지 마십시오").
  3. 게임 아이콘을 두 번 클릭하는 것과 유사한 목록에서 현재 선택된 게임을 엽니다(오른쪽 하단 모서리에 있는 "게임 열기").

Stencil의 가능성을 스스로 탐색하려면 교육 과정을 이수하고(통과하는 것이 바람직함) 아이디어에 가장 적합한 기성품 게임 중 하나를 열고 모든 것이 어떻게 작동하는지 확인할 수 있습니다. 그리고 나는 우리 사이트의 상징과 가상 거주자 인 Frida Best의 모험에 대한 게임을 만드는 예에서 프로그램 작업을 연구 할 것을 제안합니다!

Stencil에서 게임 제작을 시작하는 방법

게임을 만들기 전에 Stencil에서 게임의 표준 예를 살펴본다면 기본적으로 모두 매우 단순하고 단일 화면이며 측면 보기가 있다는 것을 알아차렸을 것입니다. 마우스 슈팅으로 다이나믹한 탑다운 슈터를 만들어 가겠습니다! 모든 것이 "큰" 게임과 같습니다. :).

프로젝트의 경우 기성 템플릿 중 하나의 논리를 변경할 수 있지만 간단한 방법을 찾고 있지 않으므로 "처음부터", "하드코어"만 :). 이렇게 하려면 작업 공간 도구 모음에서(또는 "파일" - "새로 만들기" 메뉴에서) "새 게임 만들기" 버튼을 클릭하고 다음 창으로 이동합니다.

여기에서 프로젝트에 대해 미리 선택된 기능 및 작업 세트를 사용하여 장르별로 게임 템플릿을 선택할 수 있습니다. 그러나 처음부터 게임을 만들 것이므로 "빈 게임" 항목을 선택하고 "다음" 버튼을 클릭합니다.

다음 단계에서는 몇 가지 기본 설정을 지정해야 합니다.

"이름" 필드에서 게임 이름을 지정해야 하고 "화면 크기" 섹션에서 너비(너비)와 높이(높이)를 픽셀 단위로 지정하여 경기장의 크기를 설정해야 합니다. 그런 다음 "만들기" 버튼을 클릭하고 게임 편집기 인터페이스로 직접 이동합니다.

기본적으로 게임의 전체 리소스 트리가 왼쪽에 수집되고 오른쪽에 작업 영역 자체가 수집되는 "대시보드" 탭이 우리 앞에 열립니다. 여기에서 "트리"의 구조에 대해 몇 가지 설명을 하는 것이 적절할 것 같습니다.

이는 4개의 분기로 구성되며, 그 중 처음 2개에는 표준 리소스 세트(RESOURCES) 및 논리(LOGIC)가 포함되고 마지막 2개는 선택적으로 수동으로 로드된 리소스 팩(RESOURCE PACKS) 및 확장(EXTENSIONS)을 저장할 수 있습니다.

여기서 주요 분기는 RESOURCES 분기입니다. 여기에는 다음 섹션이 포함되어 있습니다.

  1. 액터 유형 - 모든 게임 캐릭터의 스프라이트가 여기에 저장되고 애니메이션 동작 및 서로 상호 작용이 구성됩니다.
  2. 배경 - 이 섹션에서는 게임에 필요한 모든 배경을 저장할 수 있습니다. 또한 배경은 배경(배경)과 전경(전경) 모두에 사용할 수 있으므로 배경을 서로 겹쳐서 예를 들어 시차 효과를 얻을 수 있습니다.
  3. 글꼴 - 원본 비문을 만들기 위해 다양한 아름다운 글꼴을 업로드할 수 있는 섹션입니다. 그러나 Stencil은 영어 문자 집합에서만 작동할 수 있으므로 글꼴 파일에 러시아어 문자를 추가하려면 일부 라틴 문자를 해당 문자로 바꿔야 합니다.
  4. Scene은 게임 레벨을 만들고 편집하는 곳입니다. 여기에서 모든 스테이지의 모양을 설정하고 모든 캐릭터, 보너스 및 기타 게임 요소를 배치할 수 있습니다.
  5. 소리 - 각각 게임에 사용된 모든 소리의 저장소입니다.
  6. Tilesets - 타일을 저장하는 특수 분기 - 게임 레벨을 구축하는 데 사용할 수 있는 특수 스프라이트.

타일 ​​생성 및 구성

이 게임이나 저 게임을 구현하는 순서에 대한 명확한 의견은 없습니다. 현시점에서는 누구에게나 편리하지만 다음 알고리즘을 추천합니다.

첫 번째 장면 만들기 - 캐릭터 만들기 - 적을 만들기 - 파워업 만들기 - 나머지 단계 만들기

Stencil에서 장면을 만들려면 장면 분기에서 모양을 그려야 합니다. 그러나 그리기 위해서는 먼저 "그리기"할 수 있는 블록이 있어야 합니다. 프로그램의 이러한 블록을 타일(타일)이라고 하며 Tileset 섹션에 저장됩니다.

타일셋은 타일셋에 로드하는 간단한 이미지 매트릭스입니다. 기성품 매트릭스(하나 또는 여러 행의 동일한 크기의 여러 이미지로 구성된 그림)를 업로드하거나 기존 세트를 별도의 그림으로 보완할 수 있습니다.

먼저 새 타일 세트(타일 세트 섹션의 "새로 만들기" 버튼)를 만들어야 합니다. 그러면 위의 스크린샷과 같은 창이 표시됩니다. 이미지를 업로드하려면 "이미지 선택" 버튼을 클릭하고 열리는 탐색기 창에서 원하는 이미지로 미리 준비된 파일을 선택해야 합니다.

이미지가 로드되면 너비와 높이로 레이아웃 매개변수와 치수를 설정한 후(모든 것이 올바르게 표시되는 경우) "추가" 버튼을 클릭하여 이미지를 세트에 추가할 수 있습니다.

매트릭스의 각 이미지(타일)에 대해 게임 캐릭터 및 개체와의 상호 작용 매개 변수를 구성할 수 있습니다. 이렇게 하려면 원하는 타일을 선택하고 다음 창에 액세스합니다.

오른쪽 창 상단에 "충돌 경계" 섹션이 열립니다. 여기에서 개체와 게임 캐릭터의 상호 작용 경계를 나타내는 임의의 모양을 선택할 수 있습니다. 기본적으로 모든 타일에는 "정사각형" 매개변수(정사각형)가 있어 타일을 완전히 통과할 수 없고 단단하게 만듭니다. 캐릭터(예: 바닥)에 대해 타일을 "투명"하게 만들어야 하는 경우 "충돌 없음" 매개변수를 설정하는 것으로 충분합니다.

테두리 외에도 하단 패널의 "프레임 삽입" 버튼을 사용하여 프레임을 추가하여 각 타일에 애니메이션을 설정할 수 있습니다. 기본적으로 애니메이션 속도는 100밀리초이지만 이 숫자는 프레임마다 임의로 변경할 수 있습니다.

이렇게 하려면 마우스 왼쪽 버튼으로 원하는 프레임을 두 번 클릭하고 열리는 창에서 필요에 따라 지연 표시기를 변경합니다. "프레임 편집" 버튼으로 열리는 내장 그래픽 편집기를 사용하여 선택한 프레임을 수정할 수도 있습니다.

Stencil의 장면 렌더링

타일 ​​세트가 형성된 후에는 추가된 이미지에서 완성된 게임 공간의 형성인 다음 단계로 진행하는 것이 논리적입니다. 장면 섹션에서 "새로 만들기" 버튼을 클릭하면 됩니다. 버튼을 누르면 장면 설정 창으로 이동합니다.

여기서 "이름" 필드에 장면의 고유한 이름을 설정하고 치수(타일(기본값) 또는 픽셀의 너비와 높이)를 지정하고 선택적으로(즉, 자체 요청에 따라) 배경을 설정해야 합니다. 새로운 장면을 위한 색상. "확인"을 클릭하고 레벨 편집기로 들어갑니다.

그래픽 편집기처럼 보입니다. 중앙에는 레벨을 그리는 작업 공간이 있습니다. 왼쪽과 상단에는 작은 도구 모음이 있습니다. 오른쪽에는 팔레트 패널, 타일 세트 선택 및 레이어 관리가 있습니다. 이제 어떻게 작동하는지...

먼저 작업 공간의 배경을 그립니다. 이렇게 하려면 오른쪽 패널에서 "팔레트" 탭과 "타일" 탭을 활성화하고 표시된 목록에서 원하는 타일을 선택합니다. 그런 다음 왼쪽 패널에서 연필 도구를 선택하고 선택한 타일로 원하는 영역을 그립니다.

레이어 지원으로 인해 타일은 서로 겹칠 수 있으므로 예를 들어 "레이어 0" 레이어에서 배경 기판이 위에 있다는 사실을 고려하여 레벨을 구성하는 것이 가장 논리적입니다. 장애물과 캐릭터가 있는 레이어, 다양한 카운터와 게임 표시기가 있는 더 높은 레이어.

레이어는 "레이어" 패널 아래의 버튼을 사용하여 제어할 수 있습니다. 레이어 생성, 삭제, 이동 및 이름 바꾸기 버튼이 있습니다. 또한 레이어 이름 오른쪽에 있는 눈 모양의 버튼을 클릭하여 모든 레이어를 숨기거나 표시할 수 있습니다.

캐릭터 생성

첫 번째 장면을 만든 후에는 다양한 재생 가능한 캐릭터로 장면을 채울 차례입니다. Stencil에서는 "액터"라고 하며 "액터 유형" 섹션에 각각 저장됩니다. 액터는 동일한 원칙에 따라 생성되므로 게임의 주인공인 Frida를 생성하는 예를 사용하여 이 프로세스를 고려할 것입니다.

새 액터를 추가하려면 앞서 언급한 액터 유형 섹션으로 이동하여 "새로 만들기" 버튼을 클릭하면 됩니다. 우리는 이미 습관적으로 새 게임 개체의 이름을 지정하는 방법에 대해 다시 묻습니다. 그러면 캐릭터 애니메이션 편집 창이 우리 앞에 나타납니다.

여기 왼쪽에는 액터의 추가된 애니메이션 목록이 표시되고(기본값은 빈 프레임 "애니메이션 0") 오른쪽에는 이러한 동일한 애니메이션을 추가 및 구성하기 위한 도구가 있습니다.

빈 애니메이션을 선택하고(또는 하단에 더하기가 있는 버튼을 클릭하여 새 애니메이션을 추가) 오른쪽에 있는 "프레임을 추가하려면 여기를 클릭하십시오" 필드를 클릭하십시오. 그 후에 세트에 새 타일을 추가하기 위한 유사한 창과 유사한 이미지 추가 창이 열립니다. "이미지 선택" 버튼을 클릭하고 원하는 이미지를 선택한 다음 레이아웃과 크기를 조정합니다(필요한 경우).

모든 것이 설정되면 추가 창의 오른쪽 하단에 있는 "추가" 버튼을 클릭합니다. 애니메이션은 왼쪽 섹션에 미리보기로 표시되어야 합니다.

이제 프레임 속도(프레임 중 하나를 두 번 클릭)와 애니메이션의 이름(이름)(복잡한 프로젝트에 매우 유용), 반복 재생(루핑) 재생(기본적으로 활성화됨)과 같은 일부 추가 매개변수를 조정하기만 하면 됩니다. ), 동기화 및 스프라이트의 기본 포인트(Origin Point) 원점(기본값 - 중앙).

오른쪽 섹션의 하단 도구 모음에는 일련의 버튼이 있습니다. 그들은 허락한다:

  • 애니메이션에 새 프레임 추가(프레임 가져오기)
  • 외부 편집기에서 선택한 프레임을 편집합니다(프레임 편집(외부)).
  • 외부 편집기에서 프레임 생성(Create Frame(External));
  • 내장 편집기(Edit Frame)에서 프레임을 편집합니다.
  • 프레임 제거(프레임 제거);
  • 복사 프레임(복사 프레임);
  • 프레임 삽입(프레임 붙여넣기);
  • 한 프레임 뒤로(뒤로 이동) 또는 앞으로(앞으로 이동) 이동합니다.

캐릭터의 매개변수 및 동작 설정

위에서 우리는 Frida가 달리는 모습을 애니메이션으로 만들었습니다. 두 개의 프레임만 사용하여 수평으로 반사된 동일한 그림입니다. 이제 우리는 마우스와 키보드를 사용하여 여주인공의 움직임을 제어할 수 있는지, 그리고 무대에 그린 장애물과의 충돌에 적절하게 반응하는지 확인해야 합니다.

먼저 충돌을 설정해 보겠습니다. 이렇게 하려면 열린 탭 목록 아래에 있는 줄을 보고 "충돌" 버튼을 찾으십시오.

기본적으로 충돌 영역은 전체 애니메이션 스프라이트를 둘러싸고 있는 정사각형입니다. 즉, 물체의 전체 영역에 걸쳐 충돌 이벤트가 발생합니다. 그러나 실제로 우리 그림에는 아이디어에 따라 어떤 것과도 상호 작용해서는 안되는 추가 요소 (예 : Frida의 경우 블래스터)가 가장 자주 포함됩니다. 이 섹션의 도움으로 모든 충돌 영역을 설정할 수 있습니다.

먼저 Frida의 주변 영역을 그녀의 신체 크기로 축소합니다. 여기서 우리는 마우스로 영역을 이동할 수 없으며 "현재 모양" 섹션의 4개의 숫자 매개변수가 설정에 사용된다는 점을 고려해야 합니다. 먼저 영역의 수평(왼쪽 가장자리부터)과 수직(위부터) 오프셋을 설정한 다음 충돌 영역의 새 너비와 높이를 지정합니다.

아래에는 "물리적 속성" 섹션 아래에 그룹화된 몇 가지 매개변수가 더 있습니다. 여기에서 "센서가 있습니까?" 확인란이 있습니다. 그리고 그룹의 개념.

"센서"플래그를 활성화하면 선택한 영역이 더 이상 물리적 개체가 아닙니다. 문자 또는 그 일부는 다양한 장애물에 대해 "투명"하게되지만 동시에 유지됩니다. 특정 조건에서 모든 작업을 시작하는 기능.

실생활의 예는 레이저를 사용하는 현대 신호일 수 있습니다. 레이저 자체는 볼 수 없지만 만지면 알림 프로세스가 시작되어 잘못된 위치를 올랐습니다. :)

자, 그룹은 무엇입니까 ... 우리 캐릭터가 그의 손에 블래스터가 없지만 그가 (더 정확하게는 그녀 :)) 적을 양배추로 자르는 칼을 가지고 있다고 가정합니다 (그런데 Frida에는 레이저가 있습니다 소스 코드의 블레이드;)).

임무는 검으로 적을 만지면 적이 죽지 만 우리가 놓치고 적이 Frida를 때리면 그녀의 에너지 중 일부가 제거된다는 것입니다. 그리고 여기서 주요 문제는 우리의 임팩트 애니메이션이 사실 Frida와 검이 동시에 존재하는 그림이라는 것입니다 ...

검의 동작을 그림에 묶으면 애니메이션을 재생할 때 히로인을 만지는 사람이 타격으로 죽을 것입니다. 그리고 그림을 다른 기능과 매개 변수를 가진 여러 개체로 나누기 위해 그룹 메커니즘이 발명되었습니다.

기본적으로 캐릭터 자체에 해당하는 영역이 하나만 있습니다("액터 유형과 동일"). 그러나 주 작업 영역 위에 있는 그리기 도구를 사용하여 "그룹 편집" 버튼을 사용하여 새 가상 개체를 만들고 그룹을 설정할 수 있습니다.

충돌의 경우 아마도 그게 전부입니다. 이제 저는 가장 기본적인 것, 즉 무대에서 배우의 행동을 설정하는 것을 제안합니다. 이렇게 하려면 "동작" 섹션으로 이동해야 합니다.

기본적으로 처음에는 여기에 작업이 없지만 왼쪽 하단 모서리에 있는 "동작 추가" 버튼을 클릭하여 추가할 수 있습니다. 캐릭터를 제어하거나 무대에서 다른 배우와 상호 작용하기 위해 바로 사용할 수 있는 기능 목록이 표시됩니다.

예를 들어, 저는 배우가 어떤 방향으로든 원을 그리며 움직이는 "8 Way Movement" 동작을 선택했습니다. 이제 왼쪽 목록에서 추가된 작업을 선택하고 오른쪽에서 매개변수를 구성할 수 있습니다.

스테이지에 액터 추가 및 레벨 테스트

지침을 따랐다면 이미 게임에 필요한 최소 리소스가 있어야 합니다. 무대에 배우를 추가하고 연주 공간의 성능을 테스트하는 방법을 배우는 것이 남아 있습니다.

이전에 만든 장면의 편집기로 돌아가서 팔레트(팔레트)를 다시 활성화하지만 이제 타일 대신 "액터"(액터) 탭을 켭니다. 연필 도구를 사용하여 장면에 추가할 수 있는 이전에 만든 캐릭터 목록이 표시됩니다.

우리에게는 한 명의 주인공이 있으므로 연필로 한 번만 클릭하면 그녀를 무대에 추가할 수 있습니다. 그리고 이제 진실의 순간이 다가왔습니다 - 첫 번째 테스트! 프로젝트의 사전 컴파일을 시작하려면 장면이 있는 탭의 오른쪽 상단 모서리에 있는 "장면 테스트" 버튼을 클릭하기만 하면 됩니다. 시간이 지나면(첫 번째 컴파일은 항상 더 오래 걸립니다) 플래시 플레이어에서 작업을 감상할 수 있습니다.

측면에 게임이 있는 플레이어 자체 외에도 게임 로그를 표시하는 창이 있습니다. 그들의 도움으로 우리는 작업의 문제를 신속하게 찾고 수정하려고 할 수 있습니다.

보시다시피, 우리는 이미 Frida를 다른 방향으로 움직일 수 있지만 무대 자체는 움직이지 않고 우리의여 주인공이 무대의 보이는 부분의 가장자리를 벗어나 자마자 사라집니다 ... 무질서 :). Frida에 "Camera Follow" 동작을 추가하거나 이벤트를 사용하여 원하는 매개변수를 설정하여 문제를 해결할 수 있습니다.

또한 표준 커서를 십자형 커서와 같이 더 적합한 것으로 바꾸는 것이 유용할 것입니다. 새 액터를 십자형으로 추가하고 충돌 영역을 제거한 다음 표준 "커스텀 마우스 커서" 동작을 사용하여 장면에 연결하여 이를 구현할 수 있습니다.

스텐실의 이벤트 시스템

Stencil의 간단한 게임은 표준 동작(동작)만 사용하여 만들 수 있지만 비표준이 필요한 경우 "이벤트" 섹션에서 액터와 장면에 대해 구성된 이벤트를 사용하는 것에 대해 이미 생각해야 합니다.

사실 행동(Behaviors)도 이벤트를 기반으로 구축되지만 시각적 인터페이스가 있어 편집이 더 쉽습니다. 여기서는 특정 작업을 수행하는 기능 블록을 직접 처리합니다.

이벤트 창은 세 섹션으로 나뉩니다.

  1. 왼쪽 섹션에는 이벤트 목록과 이를 관리(생성/삭제/이동)하기 위한 버튼이 있습니다. 이벤트를 추가하려면 "이벤트 추가" 버튼을 클릭한 다음 드롭다운 목록에서 원하는 그룹을 선택하고 필요한 특정 기능을 지정해야 합니다. 생성된 이벤트의 오른쪽에는 필요한 경우 비활성화할 수 있는 확인란이 있습니다.
  2. 오른쪽 섹션에는 사용 가능한 모든 작업 목록이 10개 섹션으로 그룹화되어 있으며 각 섹션은 해당 버튼으로 활성화됩니다. 편의를 위해 각 섹션의 작업은 주제별 탭으로 정렬되고 고유한 색상이 있습니다. 하단에는 3개의 탭이 더 있습니다. 기본적으로 작업 목록이 있는 "팔레트"(팔레트) 탭이 활성화되어 있습니다. 두 번째 탭인 "속성"은 지역 변수(자세한 내용은 아래 참조)를 표시하고 세 번째 탭인 "즐겨찾기"는 즐겨찾는 작업을 표시합니다.
  3. 중앙 섹션은 작업 공간입니다. 여기에서 행동 블록과 이벤트의 다양한 조합을 사용하여 이러한 행동이 발생하는 캐릭터 행동의 최종 예를 형성합니다. 결합은 블록을 작업 공간으로 드래그한 다음 블록에 지정된 매개변수를 편집하기만 하면 됩니다. 함수는 서로 결합되어 메인 이벤트 블록에 포함된 블록들로만 구성된다는 점을 염두에 두어야 합니다. 따라서 현재 불필요하지만 유용한 특정 조합을 일시적으로 제거하려면 일반 구조에서 여유 공간으로 이동하기만 하면 됩니다. 시간이 지남에 따라 작업이 완전히 불필요한 것으로 판명되면 작업 공간의 오른쪽 상단에 있는 휴지통으로 이동하여 완전히 삭제할 수 있습니다.

사실, 우리는 이미 이벤트 생성 알고리즘에 대해 설명했지만, 유감스럽게도 보편적인 권장 사항을 줄 수는 없습니다. 각 게임마다 이벤트가 다르며 이벤트가 상당히 많을 수 있습니다. 예를 들어, 프로그램과 함께 아카이브에서 찾을 수 있는 Frida에 대한 게임의 소스 코드를 살펴보십시오. 그러나 이벤트 작업은 개인적인 창의성이므로 이것은 지침일 뿐입니다. :)

물리 및 속성 설정

당신과 나는 이미 많은 것을 다루었지만 게임을 만들 때 매우 중요할 수 있는 몇 가지 추가 주제는 다루지 않았습니다. 저는 우리 배우와 장면의 모든 종류의 속성을 설정하는 것에 대해 이야기하고 있습니다. 이 매개변수는 마지막 두 탭에 저장됩니다. 첫 번째는 "물리학"입니다.

장면과 배우의 경우 물리 설정 탭이 다르게 보입니다. 장면 물리 설정 탭에는 수평 및 수직 중력 설정의 두 가지 매개변수만 있습니다. 액터의 물리적 매개변수 설정 섹션의 모양은 위의 스크린샷에 표시되며 다양한 옵션이 있는 5개의 탭으로 구성됩니다.

  1. 일반 탭. 여기에 세 가지 매개변수가 있습니다. 액터 유형(고정, 플랫폼(주어진 규칙에 따라 이동할 수 있지만 다른 액터는 이동할 수 없음) 및 이동 가능), 액터 회전(회전 가능 여부) 및 영향 중력의.
  2. "무게"( "무게") 탭. 이 탭에서 가상 물체의 질량과 관성을 설정할 수 있습니다.
  3. "재료" 탭을 사용하면 특정 재료로 만들어진 실제 개체의 동작을 시뮬레이션할 액터의 특성을 설정할 수 있습니다. "사전 설정 재료" 드롭다운 목록에서 사전 설정 중 하나를 선택하거나 액터의 마찰 및 탄성 특성을 수동으로 설정할 수 있는 옵션이 있습니다.
  4. 감쇠 탭은 선형(예: 공기) 및 각도(회전 중) 저항과 같은 값을 도입하여 환경과 배우의 상호 작용 매개변수를 미세 조정할 수 있는 기능을 제공합니다.
  5. "고급" 탭에서는 이전 섹션에 포함되지 않은 다양한 추가 설정에 액세스할 수 있습니다. 여기에서 단순화된 물리 모델(게임 최적화), 충돌 영역 자동 감지, 재충돌 이벤트 및 액터에 일시 중지를 적용하는 기능을 활성화할 수 있습니다.

우리는 물리학을 알아냈고 이제 "속성" 버튼을 눌러 호출되는 속성을 살펴보겠습니다.

이전의 경우와 마찬가지로 속성은 장면과 배우에 따라 다릅니다. 장면 속성에서 이름("이름"), 치수("크기" 섹션) 및 배경 색상("배경 색상")을 지정할 수 있습니다.

액터의 속성에서 이름 외에 개체의 설명("설명" 필드), 액터가 속한 그룹("그룹 선택" 섹션) 및 모바일용 애니메이션 레이어를 지정할 수 있습니다. 장치 (프로그램의 무료 버전에서는 게임을 휴대 전화 형식으로 내보낼 수 없기 때문에 여기에서 아무 것도 변경할 수 없습니다.

그러나 이것은 Stencil에서 사용할 수 있는 모든 설정이 아닙니다. 일반 게임 설정은 기본 도구 모음에서 "설정" 버튼을 눌러 사용할 수 있습니다.

설정 창에서 왼쪽에는 매개변수 그룹 목록이 있고 오른쪽에는 모든 종류의 옵션이 포함된 기본 영역(때로는 여러 탭으로 분할됨)이 있습니다. 여기에서 우리는 다음 섹션에 관심이 있습니다.

  1. "설정"("설정"). 첫 번째 설정 그룹으로 게임을 약간 개인화할 수 있습니다. 이 그룹에는 세 개의 탭이 있습니다. 그 중 첫 번째("메인")에서 게임에 새 이름, 간단한 설명, 미리보기 이미지 및 아이콘을 지정할 수 있습니다. "디스플레이" 탭에서 게임 공간의 최종 크기가 구성되고 마지막 것("고급")에서 단순화된 물리를 활성화하고 앤티 앨리어싱 매개변수를 설정할 수 있습니다.
  2. "로더"("로더"). 이 그룹에서는 게임이 완전히 로드되기 전에 표시될 프리로더(로더)의 모양을 부분적으로(무료 버전의 몇 가지 제한 사항을 고려하여) 사용자 지정할 수 있습니다. 이미 4개의 탭이 있습니다. 첫 번째("일반" - 일반)에서 사이트에 대한 링크를 지정하고 다른 리소스에서 게임의 복사 방지를 활성화할 수 있습니다(두 번째 줄에 허용된 사이트 목록이 쉼표로 구분됨) 및 로더 중 하나 스킨. 모양 탭에서 부트로더 화면 색상과 배경 이미지를 설정할 수 있습니다. "바 스타일" 탭을 사용하여 로더 스트립의 크기를 지정할 수 있고 "바 색상"을 사용하여 각각의 색상을 설정할 수 있습니다.
  3. "속성"("속성"). 이 설정 그룹은 가장 기본적인 것 중 하나입니다! 여기에서 게임에 사용되는 전역 변수를 제어할 수 있습니다(변수에 대한 자세한 내용은 아래 섹션 참조).
  4. "통제"("관리"). 이름에서 알 수 있듯이 이 그룹에서는 특정 게임 작업이 수행되는 키보드 버튼을 재구성하고 추가할 수 있습니다.
  5. "그룹"("그룹"). 우리는 이미 그룹의 메커니즘을 조금 더 높게 고려했습니다. 여기에서 생성된 모든 그룹을 보고 편집할 수 있습니다.

사실 이것이 Stencil 무료 버전에서 플래시 게임을 만드는 데 필요한 모든 설정입니다. 그러나 이 섹션은 설정에 관한 것이므로 프로그램 자체의 매개변수는 언급하지 않는 것이 죄입니다. "파일" 메뉴에서 "기본 설정" 항목을 활성화하여 액세스할 수 있습니다.

이 프로그램은 다국어 인터페이스를 지원하지만 현재는 영어로만 현지화되어 있으므로 두 번째 탭인 "작업 공간"으로 바로 이동했습니다. 사실 Stencil의 세 번째 버전에서는 로드된 스프라이트에서 적응형 이미지를 자동으로 생성하는 기능이 나타났습니다.

그리고 기본적으로 스프라이트가 두 배로 늘어나 그래픽 품질이 저하됩니다. 이러한 일이 발생하지 않도록 하려면 배율 필드에서 표준(1x)을 선택하여 이미지 크기 조정을 비활성화하는 것이 좋습니다.

또한 세 번째 탭인 "편집자"를 살펴보는 것이 좋습니다. 여기에서 그래픽, 사운드 및 텍스트 처리를 위한 작업을 Stencil에 내장된 편집기가 아닌 외부 고급 편집기와 연결할 수 있습니다.

변수에 대해 조금

우리는 Stenyl 작업의 거의 모든 뉘앙스를 고려했지만 가장 강력한 기능 중 하나인 변수 작업에 대해서는 다루지 않았습니다.

모든 프로그래밍 언어의 변수를 사용하면 다양한 이벤트에 대해 작업을 수행할 수 있으며 특정 숫자(숫자 변수), 조건(부울 변수), 텍스트(문자열 변수) 등을 통해 이벤트를 표현할 수 있습니다. 변수의 주요 기능은 미리 결정된 한계 내에서 모든 값을 대체하는 기능입니다. 변수의 간단한 예: 클래스의 수행자. 오늘은 Ivanov, 내일은 Petrov, 모레는 Sidorov가 될 수 있습니다. :).

우리의 경우 "근무 중" 변수는 세 가지 값 중 하나를 취할 수 있으며 지정된 조건(예: 목록의 성의 순서)에 따라 자동으로 대체됩니다.

스텐실에서 변수는 지역적이거나 전역적일 수 있습니다. 일부 이벤트 또는 동작의 프레임워크 내에서 로컬 변수를 선언할 수 있으며 지정된 동작에 대해서만 작동합니다. "속성" 섹션을 호출하여 이벤트 편집기에서 로컬 변수를 생성할 수 있습니다.

여기에는 여러 탭이 있습니다.

  1. "Getters" 탭을 사용하면 모든 계산 또는 직접 지침에서 값을 받을 변수를 설정할 수 있습니다.
  2. "Setters" 탭을 사용하면 이전에 생성된 변수에 대한 값을 설정할 수 있습니다.
  3. "Games Attributes" 탭은 전역 변수 블록을 저장하고 원하는 경우 새 변수를 추가할 수 있습니다(비록 아래에서 더 나은 방법을 고려할 것입니다).
  4. 목록 탭은 데이터 배열을 생성하는 기능을 제공합니다.
  5. 기능 탭은 생성된 기능을 구성하는 데 사용됩니다.

지역 변수를 생성하는 알고리즘은 간단합니다. 먼저 "Getters" 탭에서 새 블록을 생성한 다음 "Setters" 탭에서 새로 생성된 변수를 찾아 작업 공간에 블록을 추가하여 일부 변수와 동일하게 만듭니다. 게임 매개변수. 그게 다야 - 변수가 선언되고 유효한 값 세트를 받았습니다.

Stencil의 전역 변수(Game Attributes)는 전체 게임에 대해 즉시 설정되며 모든 이벤트 또는 동작에서 호출할 수 있습니다. 위에서 언급했듯이 "게임 속성" 탭의 "속성" 섹션에서 생성할 수 있습니다.

그러나 설정의 "속성" 섹션을 사용하여 생성된 모든 변수를 보고 관리하는 것이 훨씬 더 편리합니다(도구 모음의 "설정" 버튼 또는 이벤트 편집기의 "게임 속성" 탭의 "게임 속성 표시") ):

여기에 전역 변수의 전체 목록이 있으며 "새로 만들기" 버튼을 눌러 새 변수를 만들 수 있습니다. 새 변수의 경우 창을 떠나지 않고 즉시 유형(숫자, 텍스트, 부울 또는 배열)과 시작 값을 설정할 수 있어 매우 편리합니다.

전역 변수를 사용하면 플레이어가 새로운 레벨로 이동할 때 그 데이터가 저장되고 게임 자체가 켜져 있는 한 메모리에 저장되기 때문에 다양한 카운터를 구현하는 것이 매우 편리합니다. 또한 재생 중인 애니메이션을 추적하기 위해 전역 변수를 사용하는 것이 좋습니다.

액터에 이벤트에서 특정 스프라이트를 제공하면 아래 변수에서 이 스프라이트에 특정 값을 할당할 수 있습니다(예: 일련 번호 또는 애니메이션 이름). 따라서 액션을 변수에 바인딩하면 이 변수를 원하는 값으로 설정하여 언제든지 호출할 수 있습니다.

게임 퍼블리싱, 가져오기 및 내보내기

마지막으로 간략하지만 Stencil 작업의 기본 원칙에 대해 알게 되었습니다. 게임을 만들고 테스트한 결과 모든 것이 작동하는 것으로 판명되었다고 가정해 보겠습니다. 이제 프로젝트의 게임을 인터넷에 게시할 수 있는 실제 SWF 파일로 바꾸는 것은 귀하에게 달려 있습니다. 이렇게 하려면 "게시" 메뉴를 열고 "웹" 목록에서 "플래시" 항목을 클릭하기만 하면 됩니다.

게임 파일 컴파일이 시작된 후 결과 플래시 파일을 저장할 위치와 이름 아래에 요청이 나타납니다. 우리는 저장하고 그게 다입니다 - 게임이 준비되었습니다 :).

역 프로세스는 게임을 가져오는 것입니다. 가져오기 기능 덕분에 다른 사용자의 게임 프로젝트를 열어 예를 들어 이 기능이나 저 기능을 구현하는 방법을 볼 수 있습니다.). 파일 메뉴에서 게임을 가져올 수도 있습니다. 가져오기가 성공하면 게임이 프로젝트 목록의 메인 화면에 나타납니다. 그러나 여기에서는 약간의 예약을 할 가치가 있습니다.

문제는 새로운 Stencil 3.0은 이전 버전에서 만든 프로젝트와 부분적으로만 호환되므로 가져온 게임 프로젝트의 기능이 완전하지 않거나 최악의 경우 게임이 전혀 시작되지 않아 오류가 발생한다는 것입니다. . 몇 가지 옵션이 있습니다. 오류를 찾아 수정하거나, 모든 것을 있는 그대로 두십시오. :)

프로그램의 장점과 단점

  • 프로그래밍 기술이 거의 또는 전혀 없이 게임을 쉽게 만들 수 있습니다.
  • 거의 모든 장르의 게임을 만드는 능력;
  • 기성품 행동 및 게임 리소스의 대규모 컬렉션;
  • 게임 프로젝트를 교환하는 능력;
  • 플래시 게임을 만들 때 제한이 없습니다.
  • 프로그램 자체와 제작된 게임 모두에서 다소 높은 리소스 집약도;
  • 스테이지에 있는 제한된 수의 개체 - 많을수록 게임 실행 속도가 느려집니다(시작 실패까지).
  • 키릴 글꼴은 지원하지 않습니다(라틴 알파벳의 벡터 이미지를 편집하여 필요한 문자로 교체해야 함).
  • 새 버전의 프로그램과 이전 버전에서 만든 게임 프로젝트의 불완전한 호환성.

결과

오늘날 존재하는 플래시 게임을 만들기 위한 모든 프로그램 중에서 Stencil은 조작의 용이성과 가능성의 폭 사이에서 가장 합리적인 절충안입니다. 좋은 소식은 무료 버전에서 디자이너의 기능이 거의 무제한이어서 모든 아이디어를 거의 완전히 구현할 수 있다는 것입니다.

그러나 "거의"를 잊지 마십시오 ... 사실 Stencil 자체는 아시다시피 리소스를 많이 요구하는 JAVA 시스템을 기반으로 작동합니다. 이 부하에 게임이 생성하는 부하를 추가하면 정상적인 작동을 위해서는 최신의 강력한 컴퓨터가 필요하다는 것이 밝혀졌습니다.

이것은 첫 번째 "거의"입니다. 그리고 두 번째는 무대 위의 개체 수에 대한 암묵적인 제한으로 이미 전달에서 언급했습니다. 이러한 개체가 타일일 뿐 많은 개체가 있는 경우에도 테스트 중 오류가 발생하고 개체 수를 줄일 때까지 게임이 시작되지 않을 수 있습니다.

요약하면 Stencil은 모든 종류의 캐주얼 플래시 게임과 횡스크롤 슈팅 게임을 만드는 데 이상적인 엔진이 될 것입니다. 또한 플래시 게임 제작을 연습한 후 라이선스 유형 중 하나를 구매할 수 있으며 약간의 메커니즘을 변경하여 Android 및 iOS에서 지원하는 형식으로 게임을 이식할 수 있습니다. 그리고 이것은 플레이 마켓이나 앱 스토어에 게임을 올려서 돈을 버는 진정한 방법입니다!

마지막으로 진지하게 게임 개발에 참여하기로 결정한 모든 사람들에게 행운을 빕니다. 알고리즘이 처음으로 작동하도록 하면 게임을 시작할 때 컴파일러가 넝마 속에 앉아 침묵합니다. :)

추신 소스에 대한 열린 활성 링크가 표시되고 Ruslan Tertyshny의 저자가 유지되는 경우 이 기사를 자유롭게 복사하고 인용할 수 있습니다.

* 사용 프로그램: 플래시 CS3, 포토샵 CS3
* 복잡성: 중간
* 예상 리드 타임: 3 시간

포트폴리오 사이트는 현대 예술가, 사진 작가, 디자이너, 심지어 음악가에게도 매우 중요합니다. 그는 비즈니스와 전문성에 대한 진지한 접근 방식을 보여줍니다. 오늘은 최신 Flash 콘텐츠 관리 시스템인 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단계: Localhost에서 실행

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

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

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

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

4단계: config.xml 편집

사이트의 너비와 높이를 변경하고 배경색을 설정하기만 하면 됩니다.

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

5단계: style.css 변경

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

6단계: 프리로더 생성

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

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

우리는 또한 "중지 ();"를 씁니다. fla에서 타임라인의 첫 번째 프레임의 동작에서.

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

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

website.xfl 파일을 열고 프리로더를 업데이트합니다.

7단계: 사이트 배경

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

그런 다음 제어판으로 돌아가서 새 페이지를 만들고 "사진" 버튼을 사용하여 배경 이미지를 삽입하십시오. 이미지를 드래그하여 가운데에 맞춥니다.

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

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

웹사이트 이름과 슬로건 만들기

새 글꼴이 업로드되면 텍스트 도구를 사용하여 사이트 제목과 슬로건을 만들고 원하는 글꼴을 적용할 수 있습니다. 슬로건을 만들기 위해 우리는 글꼴 Tahoma, size: 10, color: # 727272를 사용합니다. 그 후 .PSD의 디자인에 따라 사이트의 이름과 슬로건을 조정합니다.

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

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

10단계: 하단 메뉴 만들기

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

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

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

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

이러한 컨테이너는 structure.xml 파일에 작성됩니다. 너비가 980이고 높이가 800px인지 확인하십시오.

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

페이지 개체가 있는 컨테이너:

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

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

빈 페이지 만들기

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

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

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

정보 페이지에 배경 이미지 추가

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

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

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

완료되면 페이지 개체가 있는 컨테이너에 About Us 페이지 요소를 배치하는 것을 잊지 마십시오. 각 요소를 하나씩 선택하고 배치: Page(페이지 콘텐츠)를 선택합니다.

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.

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

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


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

웹사이트_홀더_1 레이어에서 빈 동영상 클립을 복사하여 웹사이트_홀더_3 및 웹사이트_홀더_4에 붙여넣을 수 있습니다.

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

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

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

클립을 복사한 이후로 이전 이름이 남아 있습니다. 찾기 쉽도록 아이디에 따라 변경합니다.

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

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

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

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

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

컨테이너에 개체 배치

개체를 선택하면 드롭다운 메뉴의 가능한 배치 목록에 위쪽과 아래쪽이라는 두 개의 새 컨테이너가 표시됩니다.

슬로건이 있는 사이트 이름은 상단 컨테이너에, 사이트 메뉴는 회색 사각형으로 하단 컨테이너에 위치해야 합니다.

하단 컨테이너의 내용 변경

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

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


사이트를 컴파일하고 나면 화면 크기를 어떻게 조정해도 하단 컨테이너가 화면 하단에 고정되는 것을 확인할 수 있습니다. 화면 해상도가 너무 작으면 하단 컨테이너가 사이트 콘텐츠와 겹치지 않고 제자리에 유지됩니다.

15단계: 콘텐츠 컨테이너 애니메이션

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

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

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

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

"연락처" 페이지가 준비되었습니다. 이제 편리한 WYSIWYG 편집기를 사용하여 내용을 편집하고 링크 편집기를 사용하여 해당 메뉴 버튼에 연결하는 일만 남았습니다.

17단계: 단순 슬롯 생성

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

먼저 간단한 슬롯을 만든 다음 개선하려고 합니다.

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

닫기 버튼에 애니메이션을 적용하는 것은 슬롯을 사용하여 수행하기 때문에 전혀 어렵지 않습니다. website.fla 파일에 슬롯을 만들어 보겠습니다. 이를 위해 "닫기" 버튼의 이미지를 라이브러리로 가져옵니다. 슬롯 섹션에서 새 동영상 클립을 만들고 이름을 CloseButtonSlot으로 지정해야 합니다.

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

그런 다음 CloseButtonIcon 이미지를 스테이지에 추가하고(CloseButtonSlot MovieClip이 열려 있어야 함) 이를 CloseButtonIcon이라는 클립으로 변환합니다. AbstractMotoSlot 클래스에서 슬롯을 상속했기 때문에 메인 애니메이션이 제공됩니다. 이제 멋진 확장/축소 효과를 만들 것입니다.

다음 단계는 "Stop();"을 넣어야 하는 위치에 새 레이어를 만들고 키프레임을 만드는 것입니다. 기본 레이블을 "위"(첫 번째 및 두 번째 정지 프레임 사이)와 "밖"(두 번째 및 세 번째 정지 키프레임 사이)에 배치합니다. 스크린샷 참조:

클립 레이어에 동일한 키와 중간 프레임을 만듭니다.

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

모션 애니메이션에 회전 밝기와 이징을 추가해 보겠습니다.

애니메이션이 완료되면 새 슬롯으로 웹사이트.fla 파일을 컴파일합니다(Ctrl + Enter).

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

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