Monthly Archive for October, 2006

Project epilogue : Veracruz

* 로딩타임을 최소화한 transition movie로 각 컨텐츠의 도입부를 구성
–> 최소 80KB/S 의 전송속도 이상에서 로딩없는 무비를 볼수 있게 하였지만 영상에서의 사운드 유무에 따라 로딩에서의 문제점이 발생하였다. 사운드가 함께 임베드된 flv 파일은 스트리밍 사운드의 사용으로 일정량(약 20%) 을 로딩해야지만 플레이가 가능했다. 따라서 사운드과 비디오를 분리하여 사운드를 최대한 압축하여 sync를 event 사운드로 설정하고 사용하여 해결.

* 네트워크 지연률 –> 네트워크의 반응속도가 느려지게 되면 로딩없는 transition 무비 구성 자체가 불가능하게 된다. 로딩타임이 생긴다는 것이 아니라 서버와의 반응이 완료될때까지의 시간 지연으로 인해 딜레이가 생기게 된다.
영상자체를 transition movie 로 구성할 경우 반드시 체크해야할 사항이다.

* 영상 Layer 위치와 performance 관계 —> 영상재생시 하위 Layer 에 복잡한 이미지가 있을경우 performance 가 올라가게 된다. 알파 채널을 사용한 영상도 아닌데 이러현상이 발생한다. 반드시 wmode 를 opaque 로 설정하거나 영상재생시 반드시 하위 Layer 에 있는 객체들은 모두 clear 하고 사용하는것이 원할한 영상재생에 있어 도움이 될것이다.

추석연휴도 반납한체 작업한 사이트가 드디어 끝났다.
사흘 밤낮으로 일한 모든 피곤이 별탈없이 사이트를 오픈 했다는 것만으로도 풀리는것 같다.
트래픽이 높아서 그런지 현대쪽의 네트워크가 불안정해 바로바로 사이트가 접속되지 않아 좀 아쉽다.

크기가 큰 동영상과 큰 이미지가 스크롤되는 형태라서 사이트 최적화에 많은 신경을 썼지만 그래도 모든 유저가 보기엔 무리일듯 싶다.

1130941920

현대자동차 LUV 베라크루즈 온라인 카탈로그
http://ad.hyundai-motor.com/catalog/veracruz/index.html

*Award

FWA  site of the day (2006.11.13)

코리아 디자인 어워드 2006  디지털 미디어 부분
http://news.mk.co.kr/newsRead.php?no=554678&year=2006
http://mdesign.design.co.kr/in_magazine/sub.html?at=view&p_no=1&info_id=39376&c_id=00010001

wmode and performance

  • Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.
  • Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don’t need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.
  • Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.

wmode 를 그다지 신경쓰지 않고 있던 부분이기 하지만 간과하기에는 너무 큰 performance 차이를 보였다. 실제 전에도 웹에 올리기 전(플래시 플레이어에서 확인했을시) 에는 별 무리 없이 돌아가던 사이트가 웹상에 올리고 나면  framerate 가 떨어지는 느낌을 받았던 적이 많았다.

이건 정확히 말하자면 웹상에 올려서라기 보단 html 로 사이트를 봤기 때문이란 생각이 든다.

이전에 포스팅한 글에서 framerate 와 브라우저 간의 관계에서 브라우저 플러그인에서는 과도한 cpu 사용을 막기위한 방법으로 강제로 framerate를 떨어뜨리는 현상을 볼 수 있다.

그래서 html 페이지에서 플래시 파일을 확인하면 framerate 가 떨어지는 것이다.

보통 사이트 제작시에는 wmode 를 설정하지 않았다. default 인 window 로 설정한 것이다.

보통 wmode는 DHTML 을 flash 와 같이 사용하기 위해 설정하는 것으로 알고 있다.

하지만 wmode 와 performance 와의 상관관계가 상당부분 있는 것 같다.

대부분의 레퍼런스 문서나 자료에는 wmode 가 window 일때 가장 에니메이션 성능이 좋다고 나온다고 말하고 있지만 실제 테스트 결과 opaque 가 가장 좋은 framerate 를 보였다.

이부분이 가장 의문시 되었던 점이다. 분명 테스트를 해보고 레퍼런스를 제작했을텐데 왜 이런결과가 나오는 것일까?…레퍼런스에서 나오는 성능은 framerate와는 좀 다른 의미로 쓰인것일까 의문이 들었다.

하지만 이 의문점은 테스트를 하면서 자연스럽게 해결되었다. opaque 로 설정한후 테스트를하면 이전보다 훨씬 높은 framerate 를 보여준다. 하지만 performance 가 눈에 띄게 올라가게 된다.

이는 opaque 모드가 배경을 불투명으로 바꾸어 플래시로 하여금 부담을 줄여준 이유도 있겠지만 이 모드를 적용할시에 framerate 를 높인 이유가 클것이다. 하지만 opaque 모드는 framerate 가 높아지는 대신 cpu 사용량이 올라가게 된다.

사양이 좋은 컴퓨터에서는 큰 무리가 없겠지만 저 사양의 컴퓨터에서의 사용은 어느정도고려해야한댜.

http://www.communitymx.com/content/article.cfm?cid=E5141&print=true

Frame rates in the Flash Player

[퍼온글]
There have been numerous posts about frame rate issues in Flash over the years, sometimes with quite inconsistent tips and workarounds. As we are approaching the final phase of development for Flash Player 9 at Adobe our bug database is filling up with duplicate bugs concerning old known issues. What is frustrating to designers is that they perceive the Flash Player changing its behavior over the past few releases, although it has not. Well, that might actually be the problem.

Flash uses a relative timing model, meaning it does not really care about a global frame rate, but will instead try to enforce frame intervals as best as it can. Say you have f.ex. set your frame rate to 30 frames/sec. That means that the Flash Player will try to wait for 33 milliseconds before trying to display the next frame (excluding the time it takes to render the frame). This loose timing causes all kinds of problems. First, the Flash Player depends on high level OS events to deliver timing messages. In the worst case this means the use of WM_TIMER, dependence on the NetScape plugin API or in the best case we use multimedia timers provided by a special Internet Explorer API. Second, we round frame intervals to milliseconds since Windows and MacOS can’t support fractional time intervals. Third, the OS, the browser and the Flash Player will add overhead to the code executed on each frame, meaning that in the end the actual frame rate will sway between -10 to +5 frames/sec from the actual selected frame rate, depending in what environment you play it in. In Flash Player 8 and Flash Player 9 new overhead is originating mostly from the GC, something for which there is no workaround. As I said we do not calculate frame rates on a global basis so we can’t correct it actively.

Lets talk about maximum frame rates. In Internet Explorer this is 100 frames/sec. Why? Because the minimum time slice Windows timers can provide is 10 milliseconds. What about FireFox? FireFox does not use special timers and made a decision to limit the maximum frame rate for plugins. Why? The thinking is that users constantly complain that plugins take too much CPU time. A valid complaint I think and every designer who puts online ads out there at higher than 8-12 frames/sec and more that 2 or 3% CPU usage should be ashamed. While a single ad will not be a problem, most pages easily serve 2 or 3 ads on a single page.

The Mozilla team also decided that plugins would get no time when they are on a hidden tab so it would not render the browser unresponsive or less responsive by adding new tabs. So do not be surprised if your SWFs and FLVs do no play on hidden tabs. Apple went even a step further in Safari: If the browser is not active, plugins will only get about 4 frames/sec, mainly to save battery and avoid the dreaded noise of the fans. Try it, go to Google Video, play a video and then switch to another application. The frame rate will drop to about 4 frames/sec. While we could drive our own background thread and work around this, there is a reason they decided to take these steps. We would be ill advised to just hack around it.

What does this mean? Well, the frame rate you select does not really mean too much and you should not depend on it in a way to be accurate to the millisecond. This especially goes for ANY sort of synchronization. If you need synchronization your only choice is placing code in ActionScript which will ‘correct’ your timing or workarounds like placing a streaming sound on your main time line (In which case we use the audio device to report time correctly to the nanosecond. Due to bugs this does not work correctly on Linux right now, which is the reason audio and video are out of sync, even for FLVs :-( )

What does the future hold? As I explained in a earlier post we will likely add synchronization primitives into the player to allow SMILE like global timing at some point. But there is also a good chance we’ll limit what users can actually do when it comes to frame rates and overall CPU usage. There are various ways we could enforce low CPU usage. SWF files originating from a different domain (speaking advertisement) could get a lower priority and have a frame rate cap which would be user selectable. Secondly, with the advent of GPU support in the OS there will be a time when we finally add VBL wait, meaning tearing free drawing. In most cases this means the maximum frame rate will be 60 frames/sec. On high CPU load we might actually cut this into half, e.g. 30 frames/sec. OS X already does this in certain conditions.

firefox 와 safari 에서 유독 flash framerate 가 떨어지는 현상이 있다고 느꼈었는데… 강제로 플러그인에서 막아놓은 결과였다. 무분별한 framerate 의 사용으로 인해 사이트가 느려지고 사용자 컴퓨터가 다운되는 걸 막기 위한 궁여지책이 아닌가 생각든다.
flash player 9 에서는 framerate 0.1 에서 1000까지 지원한다고 나와있지만 과연 어느정도의 성능을 보여줄지..
위에서 언급한 내용대로라면 플레이어 근본을 바꾸지 않는다면 힘들다는 생각이 들지만 AS3 을 기반으로 제작한 flash player 9 의 성능은 AVM2 로 전혀 새로운 머신으로 탈바꿈했다고 하니 한번 기대해 볼만하다.
근데 사운드가 포함된 stream 파일도 200-300 framerate 를 지원할까궁금하다.

Advanced progressive download

대부분의 flash video 를 사용할경우 progressive download 방식을 활용하여 용량 큰 무비를 사용할 수 있게 한다.
하지만 이 방식은 단순히 영상을 플레이하는데 목적이 있을때만 적용가능한 일이다.
다시말해 비디오자체를 트랜지션(transition) 무비로 사용할 경우 적절하지 못한 방법이다.
영상을 트랜지션 무비로 사용하려면 로딩타임이 존재하면 안된다.
flv 파일을 사용하여 progressive download 로 트랜지션 무비를 구현할경우 초기화 타임이 생기게 되어
약간의 딜레이가 생긴다.(이는 사운드 파일을 포함했을경우 더 큰 영향을 준다.)

테스트해 본 결과 레퍼런스에는 권장하지 않는 방법이긴 하지만 swf 파일안에 video 파일을 임베드하는 방법이 위의 문제를 가장 잘 해결할수 있는것 같다. 이 방법에는 사운드 싱크에 문제가 있긴 하지만 오디오 파일이 존재하지 않을경우 가장 딜레이 없이 영상을 플레이 할 수 있는 방법이다.

하지만 사운드가 포함될 경우에는 문제가 있다.
사운드 싱크의 해결을 위해 stream 으로 설정할 경우 로딩없는 플레이가 적용되지 않는다.
반드시 20%정도 로딩이 완료되어야지만 그때서 재생이 되는 현상이 발생한다.

사운드 싱크가 그리 큰 문제가 되지 않는다면 사운드 sync 를 stream 이 아닌 event 로 설정해야 원하는 로딩없는 플레이를 할 수 있다. 물론 사운드의 압축한 상태는 충분히 작은 상태로 만들어야 한다.

따라서 로딩없는 transition movie 를 구성하기 위해서는 사운드가 없는 비디오파일을 재생할 경우 가장 잘 적용되고 사운드가 포함될 경우에는 사운드 파일의 sync 를 event 로 설정해서 최대한 압축한후 사용해야한다.

Optimization of the flash site

가끔 빈 클립에 플래시 파일을 로드해서 사용할 경우 원래 제작한 플래시 파일보다
framerate 가 현저히 떨어지는 경우가 있다.
차이점이라면 단지 빈 클립에 로드를 했다는 점…….!!!!!!!!

결국 이 차이점이 performance 측면에서 엄청난 결과를 가져왔다.
만약 이런 현상이 본인이 제작한 플래시 컨텐츠에서 발생했다면 반드시 빈클립의 좌표점을 확인해보자…
빈클립 절대 좌표의 중심점이 원점(0,0)이 아닐경우 플래시 상대좌표 계산으로 연산속도가 떨어지는 현상이 발생한다.
특히 슬라이딩 범위가 큰 플래시 무비를 제작할경우 더욱 차이가 확연하다.