Flash에서 HTML, CSS 및 JavaScript로 이동

2000년대에는 Flash를 사용하여 구축된 웹 사이트를 보는 것이 일반적이었습니다. 웹 사이트의 소스를 보면 HTML과 포함된 SWF 파일이 거의 표시되지 않는 경우가 많습니다. 이것은 몇 가지를 의미했습니다. 첫째, 브라우저는 기본적으로 Flash를 지원하지 않으므로 Flash 플러그인을 다운로드해야 했습니다. 브라우저는 콘텐츠를 읽기 위해 SWF로 이동하는 것이 어렵다는 것을 알게 되었습니다. 무엇보다도 이것은 SEO와 접근성에 해로운 영향을 미쳤습니다.

2007년에는 아이폰이 출시되었습니다. 플래시를 지원하지 않았습니다. 2015년 Google은 모든 YouTube 동영상을 HTML5로 옮겼습니다. 2017년 7월, Adobe는 2020년까지 Flash 작업을 중단할 것이라고 공식 발표했습니다. 사람들은 Flash가 당시 HTML, CSS, JavaScript가 할 수 없었던 일을 할 수 있기 때문에 Flash를 사용했습니다. 웹 표준이 얼마나 멀리 왔는지(그리고 앞으로 어떻게 될 것인지) 보는 것은 놀라운 일입니다.

이전에는 Flash에서만 가능했던 많은 일을 오늘날 우리는 할 수 있습니다. 뿐만 아니라 훨씬 더 접근하기 쉽고 성능이 뛰어난 방식으로 이를 수행할 수 있습니다. Flash가 할 수 있는 몇 가지 획기적인 일과 오늘날 이를 수행하는 방법에 대해 살펴보겠습니다.

면책 조항 : 나는 Flash를 사랑하고 항상 내 마음에 자리를 잡을 것이지만 적어도 나에게는 시간이 지났습니다. 궁금한 점이 있을 경우를 대비하여: Flash에서 실행되는 인터페이스와 엔진, 특히 게임이 여전히 너무 많으며 이 기사에서는 이와 관련된 몇 가지 문제를 다룹니다.

동영상

Flash가 예고한 훌륭한 것 중 하나는 2002년에 기본 지원을 제공하는 비디오였습니다. 2009년이 되어서야 <video> 태그가 Chrome, Safari 및 Firefox에 도입되었습니다. 게다가 IE(Internet Explorer) 8은 <video> 태그를 지원하지 않았고, IE 9가 출시된 2011년이 되어서야 지원을 받았습니다.

Flash는 다음과 같이 <object> 태그를 사용합니다.

 <object class codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0" width="320" height="400"> <param name="movie" value="filename.swf"> <param name="quality" value="high"> <param name="play" value="true"> <param name="LOOP" value="false"> <embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="https://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object>

가장 멋진 코드는 아니지만 작동했습니다.

이제 우리는 간단하게 <video src="filename.mp4" /> 작성할 수 있습니다. 여러 브라우저에서 서로 다른 비디오 형식을 인식하는 것이 중요하지만 가장 인기 있는 것은 MP4, Ogg 및 WebM입니다. 한 단계 더 나아가 <video> 태그를 지원할 뿐만 아니라 대체 및 유용한 대안을 제공할 수 있습니다.

 <video width="320" height="400"> <source src="filename.mp4" type="video/mp4" /> <source src="filename.webm" type="video/webm" /> <source src="filename.ogv" type="video/ogg" /> <!-- Flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=filename.mp4" width="320" height="400"> <param name="movie" value="flash-player.swf?videoUrl=filename.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=placeholder.jpg&file=flash-player.swf?videoUrl=filename.mp4" /> </object> <!-- Text Fallback --> <p>No video support found. Please download the video below, or upgrade your browser: https://browsehappy.com/</p> </video> <ul> <li><a href="linktomovie.mp4">MP4 format</a></li> <li><a href="linktomovie.ogv">Ogg format</a></li> <li><a href="linktomovie.webm">WebM format</a></li> </ul>

비디오 배경

YouTube는 <video> 태그를 사용하고 API를 가지고 있기 때문에 전체 화면 배경 동영상을 만들 수 있습니다. 예를 들어 다음 YouTube 비디오 링크 코드를 사용합니다.

 https://www.youtube.com/embed/iMhq63PX8cA?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1

다른 매개변수를 사용하여 비디오가 작동하는 방식을 변경할 수 있습니다.

 controls=0 Hides the controls. showinfo=0 Hides extra information. rel=0 Hides related content. autoplay=1 Auto plays the video when the site is loaded. loop=1 Loops the video. mute=1 Mutes the sound.

전체 목록은 IFrame Player API를 확인하세요.

CSS를 사용하여 비디오를 제자리에 고정하고 화면을 채우도록 설정할 수 있습니다.

 .video { background: #000; position: fixed; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }

그리고 미디어 쿼리를 사용하여 비디오를 중앙에 설정하고 올바른 종횡비를 유지하는 데 도움을 줄 수 있습니다.

 @media (min-aspect-ratio: 16/9) { .video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video { width: 300%; left: -100%; } }

다음은 Mr. Smashing Magazine이 직접 발표한 예입니다.

상호 작용 및 게임

Flash가 뛰어난 또 다른 기능은 상호 작용과 게임이었습니다. 인기 있는 웹사이트 Miniclip은 2001년에 설립되었으며 다양한 Flash 게임을 호스팅했습니다. 2008년에는 9억 파운드(약 9600억 원) 이상의 가치로 평가되었으며 오늘날에도 여전히 사용되고 있습니다.

그냥 반사판

JUST A REFLEKTOR는 Flash의 기능에 필적하거나 능가하는 인터랙티브 뮤직 비디오입니다. 다양한 웹 기술을 사용하여 이제 모바일 장치를 사용하여 비디오와 상호 작용할 수 있을 뿐만 아니라 한 지점에서 웹캠을 사용하여 실제로 뮤직 비디오에 등장하는 것이 가능합니다!

큐브 슬램

오늘날 Cube Slam과 같은 환상적인 웹 기반 Chrome 실험이 온라인에 있습니다. Cube Slam은 WebRTC(개방형 웹 기술)를 활용한 게임으로, 브라우저 내에서 영상 채팅과 게임을 즐길 수 있습니다. Flash는 화상 채팅에 많이 사용되었지만 WebRTC에 비해 여러 가지 단점이 있었습니다. Flash 플러그인에 의존하고 미디어 서버가 필요하고 다양한 보안 문제와 성능 저하가 있었습니다.

HTML5 게임 엔진

많은 HTML5 및 JavaScript 게임 엔진이 있습니다. 다음 예제에서는 canvas 와 WebGL 을 사용합니다. WebGL(웹 그래픽 라이브러리)은 <canvas> 태그 내에서 대화형 2D 및 3D 그래픽을 허용하는 JavaScript로 구축된 API입니다.

프로젝트에 관한 Good Boy Digital의 자체 게시물에서 언급했듯이(예제 작성자):

"Star Wars Arcade는 HTML5 및 WebGL 기술로 가능한 것의 한계를 뛰어넘었습니다. 이를 통해 앱을 다운로드하지 않고도 데스크탑과 모바일 브라우저 모두에서 원활하게 작동하는 단일 빌드를 만들 수 있습니다. 모든 기기에서 '앱과 같은' 경험을 통해 누구나 즉시 즐길 수 있습니다. 비밀번호도, 앱 스토어도 없습니다. URL을 누르고 플레이하세요!"

— 굿보이 디지털, 스타워즈 아케이드 사례 연구

저는 특히 이 비트를 좋아합니다. "URL을 누르고 플레이하세요!" 웹에 대한 나의 초기 "와우" 기억 중 하나는 1999년에 나만의 웹사이트를 갖고 웹에 연결된 모든 컴퓨터에 해당 URL을 입력하고 볼 수 있었던 것입니다. 이것이 실제로 가능하다는 것이 나에게는 절대적으로 믿어지지 않는 것처럼 보였습니다(그리고 오늘날까지도 계속해서 나를 놀라게 합니다!).

브라우저 지원

오늘날에도 여전히 관련이 있는 Flash로 무엇인가(특히 게임)를 구축할 때의 이점 중 하나는 브라우저 지원입니다. 오늘날 브라우저 지원은 일반적으로 꽤 좋으며 Can I Use는 특정 사양에 대한 브라우저 지원 상태를 빠르게 찾는 데 도움이 될 수 있습니다. 그러나 여전히 문제를 일으킬 수 있는 불일치가 있습니다. 따라서 작업 중인 Flash 플러그인과 함께 설치된 브라우저만 지원한다면 브라우저 간 문제가 발생하지 않을 가능성이 큽니다.

타이포그래피

Flash는 원래 애니메이션 도구로 설계되었습니다. 이처럼 타이포그래피에는 다양한 한계가 있었다.

플래시에는 픽셀 그리드 시스템이 있었습니다. 타이포그래피가 격자에 X:100.3 :100.7 로 배치되어 픽셀 격자에 맞지 않으면 흐릿하게 보일 것입니다.

결과적으로 픽셀 글꼴이 그리드에 배치되고 선명하게 유지되기 때문에 유용하다는 것을 알았습니다. 여기서 또 다른 제한 사항은 8픽셀 글꼴을 사용했지만 10픽셀로 설정하면 그리드와 정렬되지 않고 다시 흐려지는 것입니다.

고맙게도 오늘날 HTML과 CSS에는 도움이 되는 도구가 많이 있습니다. 글꼴을 px (픽셀) 단위의 절대 단위로 설정하거나 요즘 더 일반적으로 ems 및 rems 을 사용하여 반응형 웹 디자인을 지원할 수 있습니다(이에 대해서는 나중에 자세히 설명하겠습니다).

Flash와 타이포그래피의 또 다른 문제는 글꼴이었습니다. 장치에서 글꼴을 사용할 수 없는 경우 대체 글꼴이 제공됩니다. Flash에서 이를 피하기 위해 .swf 파일에 글꼴을 포함할 수 있습니다. 하지만 이렇게 하면 파일 크기가 늘어나 SWF가 다운로드되어 나타나는 데 걸리는 시간이 늘어납니다.

즉, Flash로 가능한 것은 sIFR(Scalable Inman Flash Replacement)이었습니다. sIFR은 HTML 텍스트가 Flash로 대체되도록 허용했습니다. 이전에는 사용자 정의 글꼴을 사용하기 위해 이미지를 사용했습니다. 그러나 이미지를 사용하면 텍스트를 선택할 수 없었고 수동으로 이미지를 만들어야 했습니다. sIFR에서 계속해서 개발자들은 Cufon을 생각해 냈습니다. Cufon은 SVG 및 VML 버전의 글꼴을 사용하여 Flash 사용을 피했습니다. sIFR보다 빠르며 Flash 플러그인이 필요하지 않았습니다. 그러나 이 기술로는 텍스트를 선택할 수 없었습니다.

오늘날 CSS @font-face 규칙과 다양한 표준 웹 글꼴을 사용할 수 있습니다.

• 구글 폰트
• 타이프킷
• 글꼴 다람쥐

크롬과 파이어폭스(그리고 곧 사파리도 가능)에서는 CSS에 font-display 가 있습니다. 사용자 정의 글꼴을 사용하는 경우 기본적으로 브라우저는 사용자 정의 글꼴을 가져올 때까지 기다립니다. 사용자 정의 글꼴을 얻을 수 없는 경우 백업 글꼴을 사용합니다(속도는 브라우저에 따라 다르지만 일반적으로 3초). 이를 FOIT(보이지 않는 텍스트의 섬광)라고 합니다. 이 시나리오를 개선하기 위해 다음을 사용할 수 있습니다.

 @font-face { font-display: swap; }

swap 을 사용하면 백업 글꼴을 사용하여 즉시 텍스트를 볼 수 있습니다. 사용자 정의 글꼴이 로드되면 브라우저에서 해당 글꼴로 백업을 교체합니다. 이렇게 하면 사용자는 콘텐츠가 제공되는 즉시 읽을 수 있습니다.

생기

Flash가 매우 잘한 것 중 하나는 트위닝이었습니다. 트위닝은 요소에 애니메이션을 적용하는 데 사용됩니다. Flash에서는 키프레임에 요소를 만들고 타임라인을 따라 해당 키프레임을 복제한 다음 트윈을 추가할 수 있습니다.

HTML과 CSS를 사용하면 @keyframes , transform 및 animation 을 사용하여 동일한 애니메이션을 적용할 수 있습니다.

 <div class="box"></div>

 .box { width: 100px; height: 100px; background-color: #333; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } div { animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-direction: alternate; } 

Chrome 개발자 도구를 사용하면 Chrome Dev Tools → Cmd + Shift + P → Animation 으로 이동하여 애니메이션을 검사하고 조정할 수 있습니다.

애니메이션을 다룰 때 발생할 수 있는 잠재적인 성능 문제를 디버깅하는 것도 가능합니다. Chrome 개발자 도구에는 '성능' 탭이 있습니다. 이것을 클릭한 다음 "녹화" 원 아이콘을 클릭하면 다양한 유용한 정보를 볼 수 있습니다. 이 기술은 제가 Mind's Annual Report 2012-13, 특히 Mind 상점의 위치를 ​​보여주는 애니메이션 원이 있는 지도가 있는 웹사이트 섹션을 작성할 때 큰 도움이 되었습니다. 처음에는 지도 섹션이 시작 시 로드되어 다시 그리기 문제가 발생했습니다. "성능" 탭을 사용하여 이를 식별하고 업데이트할 수 있었기 때문에 지도가 표시될 때만 지도 애니메이션이 시작되었습니다.

벡터 그래픽

웹은 많은 이점을 얻었고 여전히 파일 크기를 신중하게 고려하여 큰 이점을 얻고 있습니다. 2000년대 초에 웹은 대부분 느린 전화 접속 모뎀을 사용하는 데스크톱 컴퓨터에서 보았습니다. 간단한 이미지를 로드하는 데 몇 초 또는 몇 분이 걸릴 수 있습니다. 이를 돕기 위해 Flash는 벡터 그래픽을 많이 사용했습니다. 적절한 경우 JPEG 또는 GIF 이미지 대신 벡터 그래픽을 사용하면 파일 크기가 크게 줄어들어 웹에서 더 빨리 로드됩니다.

지난 몇 년 동안, 특히 Sara Soueidan 덕분에 SVG(확장 가능한 벡터 그래픽)가 웹에서 점점 더 널리 보급되었습니다. SVG는 웹용 벡터 그래픽을 생성할 수 있게 해주는 XML 기반 마크업입니다. 그것은 애니메이션과 매우 잘 작동하며 나는 이것을 활용하는 일부 웹사이트를 구축하는 기쁨을 누렸습니다. Mind report 웹사이트(이전에 언급됨) 및 How Clean Is England? 사라가 트위터에서 언급한 것! 고마워 사라!

반응형 웹 디자인

오늘날 Flash로 웹 사이트를 구축할 때의 주요 함정 중 하나는 미디어 쿼리가 없다는 것입니다. 오늘날 모바일 및 태블릿 사용량이 데스크톱 사용량을 넘어섰습니다. 최고의 경험을 제공하려면 이러한 모든 장치에서 액세스할 수 있는 웹사이트를 만들어야 합니다. 많은 장치에서 Flash는 전혀 로드되지 않으며 로드되더라도 표시 영역의 너비를 위반하거나 크기가 조정되어 사용할 수 없게 될 가능성이 큽니다.

미디어 쿼리를 사용하여 콘텐츠에 응답하는 레이아웃을 만들 수 있습니다. 다음은 예입니다.

 <div class="someContent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est excepturi enim id ratione blanditiis voluptate dolore necessitatibus culpa maxime eius assumenda eveniet dolores odit sunt repellat, rerum amet delectus vel.</p> </div>

 .someContent { color: green; } @media screen and (min-width: 400px) { .someContent { color: yellow; } } @media screen and (min-width: 600px) { .someContent { color: red; } } 

액션스크립트와 자바스크립트

ActionScript는 Flash에서 사용되므로 Flash 플러그인이 필요하다는 점에서 앞서 언급한 SWF 파일과 동일한 함정이 있습니다. 반면에 JavaScript는 모든 최신 브라우저에서 쉽게 사용할 수 있습니다.

둘 다에 변수를 설정하는 예와 차이점을 살펴보겠습니다.

 var x:Number = 42;

 var x = 42;

ActionScript를 사용하여 변수가 숫자임을 선언합니다. 변수에 다른 것이 할당되면 오류가 발생합니다. JavaScript는 느슨하게 형식화되어 있습니다. 즉, 변수를 문자열과 같은 다른 것으로 할당할 수 있습니다.

 var x = '42';

JavaScript에서 숫자인지 확인하려면 typeof(x); , 그리고 이것은 "숫자"를 출력할 것입니다. 또 다른 옵션은 function 를 만들고 isNaN 을 사용하여 "숫자가 아님"인지 여부를 감지하는 것입니다.

 function isNumber(value) { if (isNaN(value)) { return value + ' is not a number.'; } return value + ' is a number.'; } console.log(isNumber(42)); // "42 is a number." console.log(isNumber('forty two')); // "forty two is not a number."

협동

HTML, CSS, JavaScript(및 기타 많은 코딩 언어)를 사용하여 Git과 GitHub는 협업을 매우 쉽게 만듭니다. 예를 들어, GitHub를 통해 Smashing Magazine의 "Author Template" HTML을 편집하려면 "Fork" 버튼을 클릭하면 됩니다. 이렇게 하면 내 이름으로 파일 버전(리포지토리라고도 함)이 생성됩니다. 그런 다음 내가 원하는 대로 수정하고 풀 요청을 제출할 수 있습니다. 이렇게 하면 Smashing Magazine의 소유자가 내 pull 요청을 검토하고 수락하거나 거부할 수 있습니다. 일단 수락되면 코드는 기본 저장소로 이동합니다.

이러한 방식으로 작업하는 데에는 여러 가지 큰 이유가 있습니다. 항상 작업 백업이 있습니다. 이전 버전의 작업으로 되돌릴 수 있고 협업이 매우 쉬워집니다. 누군가가 웹사이트의 한 섹션이나 CSS 또는 JavaScript에서 작업할 수 있으며 각 팀 구성원이 완료하면 변경 사항을 검토하고 필요에 따라 가져올 수 있습니다.

Flash에서도 동일하게 시도했다면 매번 .fla 파일을 저장하고 전송하는 것이 훨씬 더 어려울 것입니다. 여러 사람이 동일한 .fla 에서 작업하는 경우 상황이 매우 혼란스러울 수 있습니다. HTML, CSS 및 JavaScript를 사용하면 코드에서 "diff"를 수행할 수 있으므로 코드를 비교하고 검토할 수 있습니다. 특정 코드 청크를 선택하거나 가져오거나 추가 검토 및 작업을 위해 주석을 달 수도 있습니다.

결론

Flash는 제가 웹사이트 구축을 시작한 이유 중 하나였습니다. 그것은 많은 영역에서 개척했고, 이것은 사람들이 그것으로 놀라운 것을 창조하도록 이끌었습니다. 수년에 걸쳐 웹이 크게 발전했습니다. 그러나 Flash 지원 중단에 대한 Adobe의 공식 발표는 우려를 불러일으키고 있습니다. Flash를 사용하는 수백만 개의 웹사이트가 사라진다면 정말 안타까운 일이 될 것입니다. Flash와 Shockwave를 오픈소스화하자는 청원이 있습니다. 나는 우리가 영원히 잃지 않기를 바랍니다. 우리는 훌륭하고 이상한 시간을 보냈습니다. 내가 언급하는 "이상한"의 고전적인 예를 보여 드리겠습니다.

함께 부르고 싶다면 여기 가사가 있습니다.