순수한 FLASH 웹사이트를 만드는 방법
플래시를 일정 기간 배운 후 많은 친구들이 올플래시 웹사이트 제작에 관심을 갖기 시작했습니다. 풀플래시 웹사이트는 기본적으로 그래픽과 애니메이션을 기반으로 하기 때문에 텍스트 내용이 많지 않고 주로 평면과 애니메이션 효과를 사용하는 애플리케이션에 더 적합합니다. 예: 기업 브랜드 홍보, 특정 온라인 광고, 온라인 게임, 개인화된 웹사이트 등
전체 Flash 웹사이트를 만드는 것은 HTML 웹사이트를 만드는 것과 유사합니다. 먼저 웹사이트의 주제, 사용할 요소, 재사용해야 하는 요소 등을 포함하여 구조적 관계 다이어그램을 종이에 그려야 합니다. , 그리고 요소들 간의 관계, 요소가 어떻게 움직이는지, 어떤 음악 스타일을 사용할지, 전체 웹사이트를 몇 개의 논리적 블록으로 나눌 수 있는지, 다양한 논리적 블록을 어떻게 연결하는지, Flash를 사용하여 전체 사이트를 구축하거나 웹 사이트의 초기 부분에만 사용하는 등의 모든 사항을 고려해야 합니다.
풀플래시 웹사이트 구현에 따른 효과는 다양하지만 기본 원칙은 동일하다. 메인 장면을 표준 화면비와 전체 레이아웃 구조를 제공하는 '스테이지'로 활용하고, "배우"는 웹사이트 하위 열의 특정 콘텐츠가 하위 열의 콘텐츠 구조에 따라 더 많은 하위 열을 파생할 수 있습니다. "무대"의 기초로서 메인 장면은 기본적으로 자체 콘텐츠를 변경하지 않고 유지하며 다른 "배우" 아이덴티티의 하위 범주 및 하위 하위 범주를 필요에 따라 메인 장면으로 가져옵니다.
기술적인 관점에서 볼 때, 다수의 개별 플래시 작품의 제작 방법을 숙지하고, swf 파일 간의 호출 방법에 대해 자세히 알아본다면 전체 플래시 웹사이트를 만드는 것이 그리 복잡하지는 않을 것입니다.
참고 과정 : 웹사이트 구조 기획 ->플래시 장면 기획 ->재료 준비 ->별도 제작 ->전체 통합
1. 플래시 웹사이트 전체 제작과 단일 플래시 작품 제작의 차이점
2. 일반적으로 사용되는 기술
1. 중요한 ActionScript 코드 제어
2. 텍스트 가져오기
p>
3. 예시 제작 분석
1. 본 예시의 웹사이트 구조 기획
2. 홈페이지 장면 index.swf 제작
3. 서브씬 카툰(200208.swf)
4. 2차 서브씬 제작(200208_frog01~200208_frog05)
5. About에서 텍스트 가져오기
IV.참고 사항
사례 분석을 통해 전체 Flash 웹사이트의 기본 제작 방법을 간략하게 소개했습니다. Flash를 좋아하는 친구들에게 실제적인 도움이 되기를 바랍니다. 가까운 미래에 멋진 플래시 웹사이트를 만나보세요! 본 글에서 플래시 웹사이트 예제 소스 파일을 다운로드하세요
1. 전체 플래시 웹사이트 제작과 단일 플래시 작품 제작의 차이점
1. p>
단일 플래시 작품의 장면과 애니메이션 과정, 콘텐츠가 모두 하나의 파일에 담겨 있는 반면, 전체 플래시 웹사이트의 파일은 여러 개의 파일로 구성되어 있으며 개발 요구에 따라 계속해서 확장할 수 있습니다. 전체 Flash 웹사이트의 파일 애니메이션은 해당 파일에 있습니다. 애니메이션 효과는 Action의 가져오기 및 점프 제어를 통해 얻을 수 있습니다. 여러 SWF 파일을 동시에 로드할 수 있으므로 화면에 겹쳐서 표시됩니다.
2. 다양한 제작 아이디어
단일 플래시 작품의 제작은 일반적으로 독립된 파일로 이루어집니다. 장면. 완전한 Flash 웹사이트를 제작하려면 전반적인 이해가 필요합니다. 다양한 파일을 전환하고 제어하여 전체 Flash 웹사이트의 역동적인 효과를 얻으려면 제작자가 명확한 아이디어와 좋은 제작 습관을 가지고 있어야 합니다.
3. 파일 재생 과정이 다릅니다
일반적으로 하나의 플래시 작업은 모든 파일을 하나의 파일에 포함해야 합니다. 효과를 보려면 기본적으로 파일이 나올 때까지 기다려야 합니다. 플레이를 시작하기 전에 다운로드했습니다. 그러나 전체 Flash 웹 사이트는 여러 파일로 결합되어 있으며 이는 시간 흐름 측면에서 Flash 소프트웨어 제품의 특성에 더 부합합니다.
파일 크기를 더 작게 만들 수 있으며, 다른 파일을 차례로 로드하여 인터넷 배포에 더 적합합니다. 이는 또한 방문자가 오랜 대기 시간으로 인해 탐색을 포기하는 것을 방지합니다.
2. 일반적으로 사용되는 기술
1. 중요한 ActionScript 코드 제어
특히 Flash MX에는 많은 기능이 추가되었기 때문에 이것이 완전한 Flash 웹사이트를 구현하는 핵심입니다. 강력한 기능 이 부분에 대해서는 다른 정보를 참조하십시오. 여기에서는 전체 Flash 웹사이트를 만드는 데 사용해야 하는 더 중요한 ActionScript 기능 중 일부만 소개합니다.
loadMovieNum("url",level[,variables])
loadMovie("url",level/target[,variables])
함수 설명:
원래 로드된 동영상을 재생하는 동안 SWF 또는 JPEG 파일을 로드하세요.
매개변수 설명:
url 로드할 SWF 또는 JPEG 파일의 절대 또는 상대 URL에는 폴더 또는 디스크 드라이브 설명이 포함될 수 없습니다.
레벨은 swf 파일을 레이어 형태로 동영상에 로드합니다. 레이어 0이 로드되면 로드된 swf 파일이 현재 재생 중인 동영상을 대체합니다. 2층은 1층보다 높습니다.
대상은 경로 선택기를 사용하여 대상 MC를 획득하고 교체할 수 있습니다. 로드된 동영상에는 대상 MC의 위치, 크기, 회전 각도와 같은 속성이 있습니다. (개인적으로는 .swf가 로드되는 위치를 제어할 때 더 편리한 Target을 사용하는 것이 더 좋다고 생각합니다.)
variables 선택적 매개변수, 변수를 보낼 때 사용할 HTTP 메소드(GET/POST)를 지정하는 경우 그렇지 않은 경우 이 매개변수를 생략하세요.
레벨: Flash에서는 여러 SWF 파일을 동시에 실행할 수 있습니다. Flash에서 SWF 파일을 로드하면 시스템 기본값은 _Flash0 또는 _Level0이고 후속 영화의 순서는 다음과 같습니다. level0---level16000에 배치됩니다. 첫 번째로 로드된 SWF 파일은 _Flash0 또는 _Level0이라고 하고, 첫 번째 레이어에 로드된 두 번째 SWF 파일은 _Flash1 또는 _Level1이라고 합니다. 전제는 이전에 로드된 파일이 종료되지 않았다는 것입니다. 그렇지 않으면 첫 번째 SWF 파일이 플러시되고 첫 번째 파일도 메모리에서 종료됩니다.
참고: 외부 동영상을 Level0 레이어 또는 Level0에 로드하면 원본 동영상이 일시적으로 교체되며, 다시 사용하려면 다시 로드해야 합니다. 레벨 한 번에 하나의 영화만 존재할 수 있습니다. LoadMovie와 UnLoadMovie를 사용할 때는 Level 간의 관계에 특히 주의해야 합니다. 그렇지 않으면 한 번에 하나의 Movie만 재생하고 이전 Movie를 Unload하려는 경우 불필요한 문제가 발생합니다.
unloadMovieNum(level)
unloadMovie[Num](level/"target")
함수 설명: Flash Player에서 로드된 동영상을 삭제합니다.
매개변수 설명: 위와 동일
loadVariables ("url" ,level/"target" [, 변수])
함수 설명:
외부 파일(예: 텍스트 파일 또는 CGI 스크립트, ASP(Active Server Page), PHP 또는 Perl 스크립트에서 생성된 텍스트)에서 데이터를 읽고 Flash Player 수준에서 변수 값을 설정합니다. 대상 무비 클립에 있습니다.
매개변수 설명:
url 변수가 있는 절대 또는 상대 URL
level 이러한 변수를 받는 Flash Player의 수준을 지정하는 정수.
대상은 로드된 변수를 받는 동영상 클립의 대상 경로를 가리킵니다.
변수 선택 매개변수, 변수 전송에 사용되는 HTTP 메소드(GET/POST)를 지정합니다. 그렇지 않은 경우 이 매개변수는 생략됩니다.
gotoAndPlay(scene,frame)
함수 설명:
지정된 장면의 지정된 프레임으로 이동하여 해당 프레임부터 재생을 시작합니다. 장면을 지정하지 않으면 재생 헤드는 현재 장면의 지정된 프레임으로 이동합니다.
매개변수 설명:
scene 전송할 장면의 이름입니다.
frame 이동할 프레임의 번호 또는 레이블입니다.
2. 로딩 제작
네트워크 전송 속도를 고려하면 index.swf 파일이 상대적으로 큰 경우 시청자가 기다리도록 유도하는 로딩을 설계하기가 매우 어렵습니다. 완전히 수입되기 전에 인내심을 갖고 기다려야 합니다. 동시에, 잘 디자인된 로딩은 때때로 웹사이트에 대한 길을 열어줄 수 있습니다.
일반적인 접근 방식은 먼저 MC에 로드를 하고 장면의 마지막 위치에 end와 같은 라벨을 설정한 다음 ifFrameLoaded를 사용하여 다운로드가 완료되었는지 확인하는 것입니다. , gotoAndPlay를 사용하여 전체 Flash의 재생을 제어합니다.
로딩 파일을 예로 들어 장면에 MC를 삽입합니다.
ifFrameLoaded("end"){
gotoAndPlay("재생 시작 위치" );
}
3. 텍스트 가져오기
전체 Flash 웹사이트를 만드는 과정에서 우리는 종종 필요한 양의 텍스트 콘텐츠를 접하게 됩니다. 콘텐츠 성능은 위에서 소개한 프로세스와 동일합니다. 최종 성능 효과와 처리 방법은 여전히 위치에 따라 약간 다릅니다.
방법 1. 텍스트 그래픽 방법
텍스트 내용이 많지 않고 텍스트 내용을 좀 더 동적으로 만들고 싶다면 이 방법을 사용할 수 있습니다. 필요한 텍스트를 여러 Flash 구성 요소로 만들고 해당 위치에 배열합니다. 텍스트 그래픽 방식의 파일 로딩은 위에서 소개한 처리 방식과 유사하며, 원리도 유사하다. 구체적인 동적 효과는 모두가 고려할 사항이므로 여기서는 소개하지 않겠습니다.
방법 2. 직접 가져오기 방법
텍스트 가져오기 방법은 loadVariables를 통해 독립적인 .txt 텍스트 파일을 플래시 파일로 가져올 수 있습니다. 수정 시에는 txt 텍스트만 수정하면 됩니다. Flash 관련 파일을 수정하는데 매우 편리합니다.
Var 설정: 텍스트 상자 속성의 변수 이름(변수 이름 참고).
텍스트 상자가 있는 프레임에 ActionScript 코드를 추가합니다.
loadVariables("Variable name.txt","")
일반 쓰기 text file.txt (파일 이름은 임의로 지정), 텍스트 시작은 "변수 이름="이고, 정식 텍스트 내용은 "=" 뒤에 작성됩니다.
3. 예시 제작 분석
일반 제작 과정:
웹사이트 구조 기획 ->플래시 장면 기획 ->재료 준비 ->별도 제작 ->전체 통합
1. 이 예에 대한 웹사이트 구조 계획
웹사이트 열: 뉴스, 정보, 이메일, 갤러리, 만화, 애니메이션
하위 열 정보 : Feiyingis, Member, Relationship, ContactUs
빨간색 선 부분이 메인 장면(무대)을 구성하며 각 하위 열은 홈페이지에 이름만 유지되며 속성은 버튼입니다.
파란색 선의 내용은 하위 장면(배우)입니다. 하위 장면의 내용은 하나의 파일로 만들 수도 있고, 여러 개의 독립된 파일로 만들어서 가져올 수도 있습니다. 필요에 따라 메인 장면(스테이지)을 추가합니다.
2. 홈페이지 장면 index.swf 제작
전체 플래시 웹사이트는 메인 장면, 하위 장면, 보조 하위 장면으로 구성됩니다.
HTML 웹사이트를 만드는 것과 유사하게 일반적으로 메인 장면 index.swf를 만듭니다. 주요 콘텐츠에는 화면비, 배경, 열 탐색 버튼, 웹사이트 이름 및 기타 "홈페이지" 정보가 포함됩니다. 마지막으로 html 파일로 게시하거나 직접 html 페이지를 만들어 보세요. 내용은 테이블이고 그 안에 index.swf의 임베디드 코드가 작성됩니다.
주요 장면 배열:
파란색 선 부분은 웹사이트 이름, 저작권 및 기타 고정 정보 영역으로 일반적으로 플래시 애니메이션 가장자리에 위치합니다.
주황색 선 내용은 웹사이트 열 탐색 버튼으로, 일반적으로 특정 영역에 고정되어 있습니다. 버튼은 필요에 따라 정적 또는 동적 효과로 만들 수 있으며 MC 변경 사항을 포함하는 버튼도 만들 수 있습니다.
녹색 선은 하위 파일을 메인 장면으로 가져오기 위한 데모 영역입니다.
하위 파일 로딩에 있어서는 LoadMovieNum, UnloadMovieNum 두 가지 제어 함수를 주로 사용합니다. 위에서 언급한 중요한 ActionScript 코드 제어를 참고하시기 바랍니다.
여기서는 하위 칼럼인 만화 제작을 예로 들어보겠습니다. 메인 장면 파일의 인덱스에 Cartoon 버튼이 있습니다. Cartoon 버튼을 클릭하면 만화 폴더에 200208.swf 파일을 가져오려고 합니다. 따라서 장면에서 Cartoon 버튼을 선택하고 액션 코드를 추가합니다:
on(release){
loadMovieNum("phanto/200208.swf",1); >
unloadMovieNum(2);
}
여기에서는 레벨을 1로 설정했습니다.
3. 하위 장면 200208.swf 제작
이제 Cartoon 하위 열에 가져와야 할 200208.swf 파일을 결정합니다. 하위 파일. 따라서 200208.swf 파일의 인터페이스에는 5개의 그래픽 버튼과 5개의 독립 하위 파일을 가져오기 위한 제목만 포함되어 있습니다.
200208.swf
그림에서 볼 수 있듯이 200208.swf 파일에는 Bu_2_frog01부터 Bu_2_frog05까지 버튼 속성이 있는 5개의 작은 아이콘이 포함되어 있습니다. 필요한 효과는 해당 파일을 클릭하여 200208_frog01.swf를 200208_frog05.swf로 각각 가져오는 것입니다.
장면에서 Bu_2_frog01을 선택하고 이 버튼에 ActionScript를 추가합니다:
on(release){
loadMovieNum("phanto/200208_frog01.swf",2 );
}
Bu_2_frog02를 클릭하고 이 버튼에 ActionScript를 추가하세요:
on(release){
loadMovieNum("만화/ 200208_frog02.swf",2);
}
......
해당 버튼을 호출하려면 5개 버튼에 해당 동작을 설정하세요. 파일.
참고: 여기서는 레벨을 2로 설정했는데, 이는 메인 장면 1을 유지하고 구별하기 위해 설정된 가져온 레벨 수입니다. 다음 레벨의 레이어를 가져와야 하는 경우 레벨 수가 증가합니다. 3 등으로 비유됩니다.
4. 2차 서브 씬 제작(200208_frog01~200208_frog05)
여기서 2차 서브 씬은 상위 레벨과 관련된 컨텐츠로 마지막 입니다. 이 예제 클래스의 3단계 구조에서. 이 수준은 주로 전체 Flash 웹사이트의 특정 콘텐츠 부분으로, 세부적인 그림, 텍스트, 애니메이션 콘텐츠가 될 수 있습니다.
여기서 연결해야 할 것은 컨텐츠인 특정 사진인데, 메인 장면과 같은 비율로 swf 파일로 만들어 주어야 합니다. 예:
200208_frog01
200208_frog02
이 장면은 가장 낮은 수준의 장면으로, 메인 콘텐츠의 표시 부분으로 더 깊이 들어갈 수 있습니다. 필요에 따라 특정 애니메이션 효과를 얻을 수 있습니다. 장면의 마지막 프레임에 중지 ActionScript 코드인 stop()을 추가해야 합니다. 이렇게 하면 장면 애니메이션의 반복 동작이 중지될 수 있습니다.
메인 장면으로 완전히 가져온 효과
5. 정보에서 텍스트 가져오기
파일 인덱스에서 이 예의 정보 하위 열을 봅니다. fla 정보 버튼의 동작을 설정합니다:
on(release){
loadMovieNum("aboutus.swf",1)
unloadMovieNum(2) ;
p>
}
aboutus.fla 파일에 텍스트를 표시하기 위한 텍스트 상자를 만듭니다. 텍스트 상자 속성을 Multiline, Var:aboutus로 설정합니다(이 변수에 유의하세요). 이름).
텍스트 상자가 있는 프레임에 ActionScript 코드를 추가합니다.
loadVariables("aboutus.txt","")
aboutus.swf 파일이 속합니다. 아래에 일반 텍스트 파일인 about.txt를 작성합니다. 텍스트의 시작은 "aboutus="이고, 정식 텍스트 내용은 "=" 뒤에 작성됩니다.
텍스트 파일을 메인 장면으로 완전히 가져오는 효과
IV.참고
1. 모든 하위 파일의 길이 및 너비 속성에 주의하세요.
사진 수준의 관점에서 볼 때 전체 Flash 웹사이트는 Photoshop의 레이어 구조와 매우 유사합니다. 각 하위 장면을 레이어 파일로 간주할 수 있으며 하위 파일은 길이와 너비 내에 나타납니다. 배경의. 위치 지정을 용이하게 하기 위해 하위 파일과 메인 장면을 동일한 화면비로 유지할 수 있으며 이는 레이아웃 정렬에 매우 편리합니다. 그렇지 않으면 setProperty 문을 사용하여 해당 위치를 주의 깊게 제어해야 합니다.
2. 파일 게시 시 투명 모드에서 html 옵션 게시에 주의하세요
각 하위 파일을 투명 모드로 게시해야 하는 이유는 하위 파일의 화면 비율은 기본적으로 메인 장면의 비율과 동일합니다. 하위 파일에 배경색이 있으면 메인 장면의 내용이 포함됩니다.
설정 방법: 게시 설정에서 html 옵션을 확인하고 그림과 같이 html 패널에서 windowsmode:TransparentWindowless를 선택합니다.
3. 텍스트 가져오기를 사용할 때 텍스트 파일 시작 부분의 내용은 "텍스트 상자 속성의 Var 정의와 동일한 이름의 문자열"이어야 합니다. 또한 텍스트를 가져와야 하는 swf 파일과 가져온 txt 텍스트 파일이 동일한 디렉터리에 있어야 합니다.
4. "데드 링크"를 방지하려면 파일 간 호출이 올바른지 주의 깊게 확인하세요.