[adobe] 플래쉬(FLA) 를 HTML5 로 변환하는 컨버터 "Wallaby" 공개

2011년 3월 8일 어도비사에서 공개한 Wallaby 는 기존에 fla 파일인 플래쉬 파일을 html5 기반으로 간단하게 변환 시켜주는 툴이다.

HTML5, CSS3, SVG, JQuery 등으로 거의 동일한 내용으로 변환 해준다고 한다. 단 액션은 아직 지원안돼며 하단에  Features and Support 에 지원/미지원 여부를 참고 하시길~

현재는 아직 정식버전 상태는 아니고 앞으로 개발 내용이 기대되는군요~

skyand96.com

skyand96.com

[ 다운로드 링크 : http://labs.adobe.com/downloads/wallaby.html ]

아쉽게도 윈도우7 64비트인터라 직접 테스트는 못해본;;;

맥도 지원한다고 하네요 ㅎㅎ 32비트 운영체제만~


--------------------------------------------------------------------------------------------------
아래의 내용은 파란닷컴 UX디자인팀 글내용중 에서 가져왔습니다. (http://www.motiontrack.co.kr/353)
--------------------------------------------------------------------------------------------------

- 주요기능

1. Flash CS5 버전만 컨버팅 가능.

2. 타임라인을 이용한 모션 가능(move, rotation, scale, guide motion) 단, image skew 및 3D기능은 미지원.

3. 트윈에 easing값 적용 가능.(그래프를 이용한 easing 컨트롤 포함)

4. color effect는 alpha만 가능.(filter, blending mode, brightness, tint, advanced 미지원)

5. blending 모드 미지원.

6. 마스크 미지원

7. 액션스크립트는 지원하지 않으나 유일하게 stop();은 지원.

8. allow smoothing 가능. 기능을 사용하지 않아도 자동으로 적용됨

9. shape motion은 웹에서 이미지 부분이 액박으로 보이지 않는 현상이 생김. (폰트 및 Break Apart 포함)


- ADVICE

1. 최대한 이미지명은 영문으로 한다.
   Flash의 Library에 있는 이미지를 직접 폴더에 생성시켜 html에서 사용하므로 최대한 이미지명은 영문으로 제작.

2. 비트맵 이미지를 사용.
   플래시에서 shape를 사용하게 된다면 컨버터시 svg파일(xml형태의 벡터 그래픽 값을 가진 파일)을 생성하게 됩니다.
   이 파일은 프레임별로 생성되는데 비효율적으로 보입니다. 그리고 svg파일이 로컬 상태에서는 보이나
   웹에서는 보이지가 않습니다. 왠만하면 비트맵 이미지를 사용하여 제작하는 것이 바람직해 보입니다.

3. 용량 및 최적화 작업
   플래시에서는 자체적으로 이미지의 퀄리티를 조절할 수 있습니다.
   하지만, 컨버터하게 되면 플래시에서 불러 들렸던 원본 이미지의 퀄리티를 사용하게되므로 용량이 swf파일 대비 큼니다.
   그러므로 최대한 png파일보다는 gif나 jpg파일을 사용해야할 것 입니다. 작업 전 이미지를 최적화해도 되고
   컨버터한 후에 생성된 이미지파일들을 최적화해도 될 것 같습니다.

4. 모션이 많아 트윈을 많이 사용할 경우 튀는 현상이 있습니다. 최소한으로 필요한 영역에만 사용하는 것이 좋음.

5. 이미지가 로드되면 바로 모션이 이루어지므로, 초반에 모션이 끊어져 보일 수 있음.(딜레이 혹은 이미지용량을 최대한 줄임)

--------------------------------------------------------------------------------------------------

아래는 사용방법동영상

http://youtu.be/1MrXPYIHF7I


--------------------------------------------------------------------------------------------------
어도비사 labs (http://labs.adobe.com/wiki/index.php/Wallaby)
--------------------------------------------------------------------------------------------------
Introduction

Welcome to the Wallaby Technology Preview. Wallaby is an application to convert Adobe Flash Professional CS5 files (.FLA) to HTML5. Wallaby has a very simple UI which accepts as input a FLA file and exports HTML and support files to a user-selected folder. There is also an option to launch the default application assigned for the .html extension. Once Wallaby is launched it will stay active until closed and can be used to process any number of files one by one. Wallaby has a window where warnings and errors are displayed. These are typically warnings describing unsupported features for Wallaby's FLA to HTML5 conversion. The warnings can be expanded in a window to show the context of where the unsupported feature exists in the Flash project. The focus for this initial version of Wallaby is to do the best job possible of converting typical banner ads to HTML5. Wallaby does a good job of converting graphical content along with complex, timeline-based animation to HTML5 in a form that can be viewed with browsers using a Webkit rendering engine. Supported Webkit browsers include Chrome and Safari on OSX, Windows, and iOS (iPad, iPhone, iPod). Wallaby's design goal was not to produce final form HTML ready for deployment to web pages. Instead it focuses on converting the rich animated graphical content into a form that can easily be imported into other web pages in development with web page design tools like Dreamweaver. The web page designer will likely want to add interactivity and design elements such as video and sound before deployment. This initial version of Wallaby has several unsupported features due to the complexity of FLA files and the inability to represent some Flash Professional features in HTML5. The major ones include no conversion of:

• ActionScript
• Movies
• Sound

Also some design elements such as Filters are not supported. For a detailed list of supported and unsupported features see the Features and Status page. Wallaby's primary design goals were to get the best quality and performance on browsers within iOS devices. These devices are known to have a relatively slow JavaScript interpreter. For this reason Wallaby's HTML5 export avoids usage of complex JavaScript by making extensive use of CSS3 for animation and SVG for graphical content. Wallaby's output uses JQuery for HTML DOM access. Typical output from Wallaby includes 3 files plus an asset folder for SVG and image content. The three files exported are the HTML file, a CSS file and a JavaScript file.

Installer

Wallaby is delivered as a stand-alone native AIR application installer. It makes use of Adobe dynamic link libraries including Flame 2.1, Flamingo, Bravo and AdobeLinquistic. It also installs support files (CMaps, Jquery, Javascript and other files). These are all self-contained with the Wallaby installer. Wallaby is as 32-bit application available for both Windows and Macintosh platforms.

Macintosh

Wallaby for Macintosh will work on both OS 10.5 and 10.6 although primary testing was with 10.6. Wallaby Macintosh requires no other installed software.

Windows

Wallaby for Windows will work with Windows 7, Windows Vista and Windows XP although primary testing was with Windows 7. Wallaby for Windows requires the "Microsoft Visual C++ 2008 SP1 Redistributable Package (x86)" be installed on your machine if it’s not already installed. Microsoft Visual C++ 2008 SP1 Redistributable Package (x86) can be found here or by searching for "Microsoft Visual C++ 2008 SP1 Redistributable Package (x86)" in the Microsoft download center here.

Operation

Once installed, Wallaby may be launched and kept open. Files may be opened via entering the URL, browsing or dropping file(s) and/or folder(s) onto the conversion window. The conversion will proceed and a completion status returned. Complex files may display a busy icon. Unsupported features may be displayed in the warnings window. Unsupported features are mostly just dropped and do not affect other output. But they are displayed as a warning that the visual output of the HTML may not match the FLA file's behavior. The context of unsupported features can be displayed by clicking on the warning message. Default behavior is to place all files in the same folder as the input file. This behavior can be modified via UI. When all conversions are complete, the Wallaby app can be closed. For more information please see the ‘Help’ link in the main window.

Command Line Operation

Wallaby can now be driven from via a command line interface which allows you to specify an input file and an output file. If you wish to process folders you will have to write a script walking the files in a folder and then call Wallaby for each file. For more information please see the ‘Help’ link in the main window.

Release Notes

Installer

• Wallaby is delivered as a 32-bit application for Windows and Macintosh.

Browser Issues

• Wallaby is designed to emit HTML5 files compatible with Webkit based browsers.
• The only supported Webkit browsers at this time are Chrome and Safari on OSX, Windows, and iOS (iPad, iPhone, iPod). Because Wallaby uses Webkit specific animation primitives, animation will not work and has not been tested on other browsers.

Multi-Browser Issues

• There is a known Webkit issue with complex timeline animations that crashes all Webkit browsers. This seems to increase in frequency with complex animations and on slower devices. It is rare for simple animations. Webkit fixed this bug on 1/26/2011 (http://trac.webkit.org/changelist/76708) but is not clear when this fix will end up in Chrome and Safari browsers.
• We have logged and are tracking several Webkit bugs. Most of these issues are not visible because of changes to the HTML/CSS/SVG content but this often results in non intuitive conversion of the original content.

IOS - IPad, IPhone & IPod Touch

• We have tested with iOS 4.2
• Prior iOS versions have known masking issues with Wallaby generated HTML files.
• Zooming in and out can cause odd artifacts in the browser. This is a bug in the browser.
• Masked artwork sometimes displays a faint border around the masked area. This is a bug in the browser.

Chrome

• We have tested with Chrome 8.0.552.215
• Several issues (undocumented) have been observed in prior versions.

Safari

• We have tested with Safari 5.0.3
• A few known animation issues with 'static' content dropping.

Features and Support

Feature	Implementation	Status	Notes
3D transforms	Unsupported
ActionScript 1,2	Unsupported
ActionScript 3	Unsupported
Blend Modes	Unsupported	Unsupported by HTML or CSS
Button - visuals (normal, hover, active)	SVG, CSS	Complete	Buttons inside of a button are not supported
Button - events	Unsupported	Requires JavaScript for actions
Compiled Clips	Unsupported	Requires Actionscript support
Components	Unsupported	Most require Actionscript and Compiled Clip support
Fills - gradients or images	SVG	Complete
Fills - solid colors	SVG	Complete
Filters (DropShadow, Glow, Blur, ColorMatrix)	SVG	Unsupported	Supported by SVG but not Safari and Safari Mobile
Filters - Advanced (Bevel, Gradient Bevel/Glow)	Unsupported	No SVG, HTML, or CSS support
FrameSets	HTML and Javascript	Complete
Gradients	SVG	Complete
Images	HTML or SVG	Complete	A few formats have issues with alpha
Inverse Kinematics	Unsupported	Right click on the Armature and select 'Convert to Frame by Frame Animation'
Layers - Art/Normal	SVG	Complete
Layers - Folder	Complete
Layers - Guide	Complete
Layers - Mask	SVG Mask Artwork, Webkit Clip	Partial	No support for multiple framesets in Mask layer, several Webkit bugs
Scale 9 graphics	Unsupported	Need to dynamically scale
Paths - Cubic & Quadratic	SVG	Complete
Scenes	Complete
Sound - Stream, Event	Unsupported
Strokes - gradients or images	Unsupported
Strokes - solid colors	SVG	Partial	No advanced dashing (i.e. Dotted, Hatched, Stippled, Ragged)
Text - Classic Static	SVG	Partial	Text Limitations
Text - Classic Dynamic, Input	SVG	Partial	Text Limitations
Text - Font Embedding	SVG	Complete	Text Limitations
Text - TLF	SVG	Partial	Text Limitations
Timelines	Partial	Nested timelines difficult and there are a few known bugs
Tweening - Shape	Complete	One SVG file is created for each frame of a Shape Tween. This can cause a large number of SVG files for complex animations using Shape Tween leading to playback performance issues on iOS devices. Some of the complex cases may not convert correctly.
Tweening - Classic	CSS3 animation	Partial	No Filters or ColorMatrix support
Tweening - Motion	CSS3 animation	Partial	No Filters, Brightness, Tint or Advanced Color support
Video - Embedded/External	Unsupported

Text Limitations

We currently emit both Classic and TLF text as SVG text blocks which are included in an HTML wrapper. This provides generally good mapping of the FLA features to HTML/SVG but there are a variety of issues. Font embedding is done by use the SVG font mechanism.

Font Embedding

• No support for different anti-alias modes like FLA provides. This is a Flash Player feature that has no support in HTML.

Common Text

• There may be line break differences from the original FLA
• There may be subtle differences in glyph spacing/positioning
• Subscript and superscript text at different position and font size
• Selectable text is not supported
• Links/Anchors are not supported
• Vertical text is not supported; it will be ignored
• Justified text will become left aligned if using the 'Use device fonts' anti-alias mode
• As with other graphic types, text does not support:
  • Blend modes
  • Filters (this includes the TLF 'Color Effect')

Classic Text

• Input text is not supported; it is read only for now

TLF Text

• Linked containers are not supported; only the first text block will be shown
• Inline graphics are not supported
• Editable text is not supported; it is read only for now
• Tab stops cause file failures
• Kerning will be lost for text with the 'Use device fonts' anti-alias mode
• The 'Character' attribute 'Rotation' is not supported
• The 'Character' attribute 'Strikethrough' is not supported
• The 'Character' attribute 'Underline' is not supported
• The 'Character' attribute 'Highlight' is not supported
• The 'Advanced Character' attribute 'Digit Case' is not supported
• The 'Advanced Character' attribute 'Digit Width' is not supported
• The 'Advanced Character' attribute 'Break ' is not supported
• The 'Advanced Character' attribute 'Ligatures' is not supported
• The 'Paragraph' attribute 'Text Justify' is not supported
• The 'Container and Flow' attribute 'Columns' is not supported
• The 'Container and Flow' attribute '1st Line Offset' is not supported
• The 'Container and Flow' attribute 'Alignment' is not supported