smart media : 동영상 강의 : Phonegap App
-
인터랙션 만들기 5단계 - config.xml 설정 후 Phonegap App으로 만들어주기 (10:14)
스마트폰에서 동작할 수 있도록 Phonegap App으로 만드는 과정을 소개합니다. 맨처음 등장할 제작사 장면을 만들어둡니다. 첫번째 장면의 파일명은 반드시 index.html 이어야 합니다. 그리고 icon 파일과 config.xml 파일이 필요합니다. 아이콘 파일명도 반드... -
인터랙션 만들기 4단계 - 클릭하면 화분을 던지는 곰의 인터랙션 (21:01)
아래의 경우와 동일한 방법입니다만 약간 다른 점은, 화분을 던질듯 말듯 모션을 취하고 있는 곰의 모습(A)과 클릭하면 화분을 던지는 곰의 모습(B)입니다. 즉 이전의 올빼미 경우는 A가 서있는 정지 상태였다면 이번 경우는 두 가지가 모두 액션을 가지고 있... -
인터랙션 만들기 3단계 - 인터랙션 심벌의 구조화 및 Script 적용하기 (12:41)
서있는 올빼미(A)와 날아가는 올빼미(B)가 만들어졌다면 이들을 하나의 Symbol로 만들어줘야 합니다. 먼저 서있는 위치(stand)와 날아가는 위치(fly)를 Marker 입력으로 구분해주었습니다. 이후 이 심볼안에 들어가서 타임라인 상에서 간격을 벌려주고 클릭하... -
인터랙션 만들기 2단계 - 클릭하면 날아가는 올빼미를 위한 모션작업 (11:08)
특정한 캐릭터를 클릭하는 경우 모션으로 반응하는 것으로 좀 더 재미있는 콘텐츠를 만들 수 있습니다. 이를 위해서 서있는 올빼미(A)와 날아갔다 다시 돌아오는 올빼미(B)가 필요합니다. 특히 B의 경우 자체적인 모션을 하는 것이 또다른 움직임을 연출할 경... -
인터랙션 만들기 1단계 - Resize 스크립트 적용하기 (7:44)
HTML 페이지를 모바일앱으로 만들 경우 뿐만 아니라 일반 PC환경 사용자의 해상도를 고려하자면, 페이지의 해상도 문제는 해결해야할 부분입니다. 화면의 크기가 어떻든 그에 맞춰 보일 수 있게 해주는 Script를 이용하면 간단히 이러한 문제를 해결할 수 있습... -
Edge Animate 13단계 - GIF Animator에서 움직이는 GIF 애니메이션 만들기 (6:24)
After Effect에서 Image Sequence로 추출된 이미지를 가지고 이제 GIF Animator라는 프로그램에서 움직이는 GIF 애니메이션을 만드는 방법을 소개합니다. 이번 예제에 필요한 프로그램 설치는 아래의 수업자료실 게시물에서 확인하세요. http://www.drtwin.com... -
Edge Animate 12단계 - After Effect의 모션을 추출하여 애니메이션 만들기 (7:21)
After Effect에서 만들어놓은 움직임을 Edge Animate에서 애니메이션 클립으로 만들려면 Image Sequence 즉 일련의 이미지로 뽑아내어야 합니다. 현재 CC Page Turn 기능을 이용하여 페이지가 넘어가는 듯한 장면을 연출했습니다. 이것을 JPEG Sequence로 추출... -
Edge Animate 11단계 - 상대경로의 이해 및 버튼액션 만들기 (13:13)
장면이 모두 만들어졌기 때문에 이들을 연결시킬 네비게이션을 만들어봅니다. 먼저 상대경로의 개념을 이해해야만 합니다. 자신(html 파일)을 기준으로, 현재 자기가 위치한 폴더는 . 으로 표현하며 자기를 포함하고 있는 상위폴더를 지칭하는 것은 .. 입니다.... -
Edge Animate 10단계 - Intro 페이지 만들기 (12:02)
예제의 마지막 페이지인 인트로 페이지를 만드는 것입니다. 이는 여러분이 조별작업에서 조이름을 정하고 로고를 만들어서 프러덕션 이름을 나타내는 과정입니다. 재미는 연출을 위하여, 떨어지는 글자에 원숭이들이 깔리는 것을 연출하려고 시도하였으며 Moti... -
Edge Animate 9단계 - Motion Path 이용한 모션만들기 (14:50)
세번째 장면을 만드는 과정인데, 이번 동영상에서는 Motion Path 기능이 가장 중요합니다. 아래의 이미지처럼 Motion Path를 선택합니다. 그리고 움직임을 준 후, Path의 곡선을 조정해줍니다. 다운로드 : HTML5_Edge_Animate_09.exe