Convert Flash to HTML5

{loadposition adposition4}

Overview

Recent, many people have denigrated the Flash Player for having security flaws in its design. Steve Jobs was outspoken stating that Apple devices would not support the Flash Player; and during this same period, the advent of HTML5 was embraced as the new future of online animation, multimedia and web based games. For web developers and enthusiasts like myself, who are not ready to give up creating interactive web content with Flash, the idea that Flash might go away, or not step up to the challenge of a new era in online multimedia, seemed extremely disappointing.

{loadposition adposition5}The good news is that starting with Flash CS6, users have the capability of exporting Flash movies directly to HTML5 bypassing the Flash movie player. It must be stated that the current ability to export Flash to HTML5, is not without bugs, it still in its infancy,  but is a welcome and exciting development.

Toolkit for CreateJS

The Adobe Labs original project for developing a Flash to HTML5 conversion tool was named Wallaby. This tool has now been released as a downloadable Adobe Flash Extension called Toolkit for CreateJS. You can download the Toolkit for CreateJS for free from the Adobe website, it will work with Flash CS6 only. Once you have it downloaded, extract the zipped folder and double click on the .msi file to create a .zxp package that can then be installed with the Adobe Extensions Manager. Once the Toolkit for CreateJS is installed in the Adobe Extensions Manager you can access it through the Flash authoring environment by going to: Window > Other Panels > Toolkit for CreateJS. The Toolkit is based on an open source project of Javascript libraries and tools called CreateJS that is designed to work with HTML5. 

{loadposition adposition6}The upside of the Toolkit for CreateJS is that it exports all of the Flash graphics, animations, and sounds to individual assets and Javascript files that support Canvas for HTML5; the downside is that it does not support Actionscript 1.0 to 3.0 and Flash’s built in 3D tools. Even though the Toolkit does not convert Actionscript to Javascript yet, it does leave you in the position to be able to do it yourself by separating out assets like graphics and sound and and animations and creating readable Javascript for the timeline animations. Adobe has an article that walks you through a project that incorporates just this ability to develop and migrate a Flash game to HTML5 including the necessary Actionscript to Javascript conversions, you can visit the article here: http://www.adobe.com/devnet/createjs/articles/getting-started.edu.html

One of the benefits of using CreateJS is that since it is an Open Source project, development will hopefully be widely supported and ongoing.

 

{loadposition adposition9}

Swiffy

Swiffy is Google’s Flash SWF-to-HTML5 conversion project. Like Adobe’s Toolkit for CreateJS Swiffy can also convert Flash graphics and animations to HTML5 but unlike Adobe’s Toolkit, Swiffy can also convert Actionscript 2.0 to Javascript. The flash sound Class is not supported. Unlike the Toolkit for CreateJS which separates the Flash file into its component assets the exported html5 file seems difficult to work with if you wanted to continue to modify the code and work out the bugs in the conversion. Swiffy works by converting the Flash .swf file to HTML5. I personally plan on checking the release notes page frequently for sound class support!  

{loadposition adposition4}

Examples

You can RIGHT+Click on the animations below to see if they are Flash or not?

This is an example of a Flash Movie SWF

The same Flash movie as HTML5 through Swiffy. Can you tell the difference?

Video Tutorial

In this tutorial, I cover downloading, installing, and running Toolkit for CreateJS and Swiffy. Using some Flash movie files, I demonstrate how to export them HTML5, and evaluate the quality of the results. 

 

{loadposition adposition8}

 

Week 14 – Building a Flash Website – Part 5

Overview

This week I work on creating a Flash image gallery using Actionscript 3 and Flash UI Components. The image gallery will consist of a page/keyframe with thumbnail images, that when clicked on will load an image file to a UI viewer component

Video Tutorials

 

 

 

 

 

 

Create a Banner Ad with Flash

{loadposition adposition4}

{loadposition adposition5}Overview

Flash is frequently used to make small advertisements called "banner ads." By creating a banner ad with Flash it is very easy to add motion, sound, interactivity and video. You have probably seen banner ads on various websites like Yahoo and ESPN. Try going to http://yahoo.com or http://movies.yahoo.com and right-clicking on an advertisement. While you are pressing the right mouse button down you will see a sub-menu. If at the bottom of the sub-menu it says "About Adobe Flash Player xx.xx.xx" you are hovering over a Flash banner ad, also called a Flash .swf file or Flash movie.

Wikipedia has an interesting page about Banner Ads and their history and how the function as a marketing tool: http://en.wikipedia.org/wiki/Web_banner the page even mentions Flash.

Banner ads are typically formatted in predictable horizontal and vertical sizes, designed to best catch your attention at various places on a webpage. Here are some typical sizes in pixel dimensions:

  1. Leaderboard, 728 x 90 (horizontal, usually at the top of the webpage)
  2. Full Banner, 468 x 60 (horizontal, usually above or below article content)
  3. Square Pop-Up, 250 x 250 (usually placed within article content or popping-up above) 
  4. Skyscraper, 120 x 600 (vertical, usually placed on the side edge of a webpage)

 

    Video Tutorial

    In these multi-part video tutorials, I cover many introductory Flash concepts while creating a simple banner ad.

     

    {loadposition adposition10}

     

    {loadposition adposition4}

    {loadposition adposition9}

    {loadposition adposition8}

     

     

      Week 11 – Building a Flash Website – Part 2

      Overview

      This week continues on the process of making a website using Flash CS5. In the first three videos tutorials below I work on setting up navigational buttons that will help the user go to different ‘pages’ on the Flash website. Using Flash, instead of the buttons taking the user to different pages, the buttons actually jump the Flash playhead to different frames on the Flash movie timeline. This gives the user the experience of going to different webpages when in fact it is all captured within the single Flash movie.

      Video Tutorials

      Week 10 – Building a Flash Website – Part 1

      {loadposition adposition4}

      Overview

      Last week we created an intro flash movie that is meant to play before your website loads. {loadposition adposition5}This week we will start working on the actual Flash website that loads after the introductory movie plays. In the tutorials below I demonstrate how I build a Flash CS5 website from the ground up. You will need to come up with your own graphics, image files and ideas for your site. Maybe you have a friend who needs a website for a small company or you can create a personal portfolio website as a online resume. Regardless it helps to have a direction even if it is a general idea to start from. 

      Assignment Week 12 – Begin You Flash Website

      This is an ongoing assignment/project you will turn your Flash website in at the end of the semester so save all your files. You will need to have all the files for your website organized in a centralized folder.

      {loadposition adposition9}

      Video Tutorials

       {loadposition adposition4}

      {loadposition adposition10}

       

       

       

       

       

      {loadposition adposition8}