Publishing Flash Apps and Games to the Chrome Web Store

Any web app that runs inside of Chrome can be published to the Chrome Web Store, and this means Flash apps are more than welcome to the party. The Chrome Web Store, launching before the end of 2010, is a publishing, distribution, and monetization marketplace for web apps. We welcome great Flash apps and games to publish and sell via the store.

This post is a Quick Start guide for getting your Flash apps into the store in the quickest was possible. Give us 20 minutes and you'll have your Flash app in the Chrome Web Store.

(Don't have a Flash app, just have an HTML or HTML5 web app? We have a Quick Start Guide for Publishing HTML5 Web Apps into the Chrome Web Store as well.)

Assumptions
  1. You have a Flash .swf file ready to go.
  2. You have a Google account.
    1. Don't have one?  Go get one, it doesn't even have to be a GMail account.
  3. You have a credit card handy or you have a credit card added to your Google Checkout account.
Two ways to do this

Sorry, I know you want to get to the good stuff, but there's something we need to explain first.  There are two ways to distribute web apps with the Chrome Web Store: packaged apps and hosted apps.  Choosing an option is not always black and white, but we'll give you some things to think about and we'll run through both options.  You may want to read more about the differences between packaged and hosted web apps.

Packaged Web Apps
  • A good option for developers that want nothing to do with web servers.
  • Totally downloaded and installed onto user's browser.
  • Can only be up to 10MB in size.
  • Can access some Chrome extension APIs
  • Natively run offline.
  • Easier to sell as a one time purchase, no server component required.
  • Doesn't support selling as a subscription.
Hosted Web Apps
  • Served from a web server.
  • Your only option if entire app is bigger than 10MB.
  • Can run offline via the App Cache.
  • Supports one time payments, as well as monthly and yearly subscriptions.
There's no better or worse way to do it, it's really dependent on your circumstances.  We'll show you the Quick Start guide for both methods so you can make the best choice.

Publishing a Packaged Flash Web App

To follow along, check out a fully working packaged Flash example code for the Chrome Web Store.  And remember, this only works if your app's total size, once zipped up, is less than 10MB.
  • Take a screenshot of your app.  The system will resize to 400x275 for you.
    • We'll use this in a moment.
  • Create a directory on your system, call it my_app.
  • Place your .swf file into my_app.
  • Create a 128x128 icon, used for the launcher button and display in the store.
  • Create a 16x16 icon, used for the favicon.
    • Place it into my_app.
  • Create a manifest.json file describing your app.
    • Copy the following manifest.json and change the appropriate fields.
    • Place manifest.json into my_app.
  • Create an index.html file to host your .swf file.
    • Copy the following index.html and change the link to the .swf file.
    • Place index.html into my_app.
  • Zip up my_app.
    • Make sure manifest.json, index.html, your .swf file, and all other files are in the root of the zip, not nested in another directory inside of the zip file.
  • Sign into the Chrome Developer Dashboard with your Google Account.
    • If this is the first time you've published anything (extension or web app) you'll be asked to pay $5 registration fee.  Do this now using Google Checkout.
  • Click the blue "Add new item" button.
  • Upload my_app.zip.
  • Fill in your app's details.
    • Upload the 128x128 icon again.  This is a bug that might be fixed by now.
    • Choose a category.
    • Choose a language.
    • Upload at least one screenshot (the one you took at the beginning of this process).
  • Click Publish Changes.
Congrats!  You've now published a packaged Flash app to the Chrome Web Store!

Bonus Points
  • Link a verified domain in the Edit Details screen.
  • Write a great description in the Edit Details screen.
  • Link a YouTube video showing game play or the app in action in the Edit Details screen.
  • Upload more screenshots.
  • swfobject really helps embed Flash into HTML.  It's much better than the default JavaScript that Flash generates for you.
  • Sell your app via a one-time purchase.
    • Requires a U.S. bank account configured with Google Checkout.
Publishing a Hosted Flash App


Many of the steps here are very very similar to the above instructions for packaged web apps, however the manifest file is different.  Follow the full Quick Start Guide for Hosted Web Apps for all the details and check the example code.  The example code uses Google App Engine but of course this is totally optional.

Example manifest.json for hosted web app:

You'll also want to configure the App Cache so that your Flash app runs even when the user is offline.  The example App Cache lists every file and resource required to run the app.



Summary

The Chrome Web Store provides a publishing, distribution, and monetization platform for Flash apps.  You can quickly package up your Flash app or host it on any web server and publish it to the store for users to find, pay for, install, and enjoy.

For more information, check out the Chrome Web Store docs, join the Chromium Apps discussion group, and follow the Chromium blog.  All the code for this blog post can be found at Flash Examples for Chrome Web Store.

Popular posts from this blog

Lists and arrays in Dart

(This is Part 3 in a series about Dart. Check out Part 2, Function in Dart .) Warning : We expect the Dart libraries to undergo potentially sweeping changes before Dart goes to alpha. This document is relevant as of 2011-12-22. Intro Dart is a "batteries included" effort to help app developers build modern web apps. An important "battery" is the bundled core Dart libraries, providing common and rich functionality. Dart is building a solution for large, complex web apps, and providing well tested, integrated, and common libraries is key to helping a web app developer be more productive out of the box. The Collection libraries are a crucial set of APIs that Dart developers get for free. Much more than simple arrays and maps, the Collection library includes standard ways to filter, iterate, inspect, compose, and sort your data. This post specifically looks at List<E> , Dart's ordered, indexable collection of objects. Aside: The Dart project is lucky
Read more

Converting Array to List in Scala

Now, this has to have a built-in somewhere in Scala , because it just seems too common. So, how to convert an Array to a List in Scala? Why do I need this? I needed to drop to Java for some functionality, which in this case returns an Array. I wanted to get that Array into a List to practice my functional programming skillz. **Update**: I figured out how to convert Arrays to Lists the Scala way. Turns out it's a piece of cake. val myList = List.fromArray(Array("one", "two", "three")) or val myList = Array("one","two","three").elements.toList The call to elements returns an Iterator , and from there you can convert to a List via toList . Nice. Because my first version wasn't actually tail recursive, what follows is a true tail recursive solution, if I were to implement this by hand. The above, built in mechanism is much better, though. object ArrayUtil { def toList[a](array: Array[a]): List[a] = { d
Read more

Null-aware operators in Dart

Image
Three new language features just landed in the latest dev channel build of the Dart ! Collectively known as null-aware operators , these new features will help you reduce the code required to work with potentially null objects. I'm excited for these new abilities, because typing less is always a good thing. Read on to learn more, and be sure to try these new features on Dart Pad . ?? Use ?? when you want to evaluate and return an expression IFF another expression resolves to null. exp ?? otherExp is similar to ((x) => x == null ? otherExp : x)(exp) ??= Use ??= when you want to assign a value to an object IFF that object is null. Otherwise, return the object. obj ??= value is similar to ((x) => x == null ? obj = value : x)(obj) ?. Use ?. when you want to call a method/getter on an object IFF that object is not null (otherwise, return null). obj?.method() is similar to ((x) => x == null ? null : x.method())(obj) Yo
Read more