Android devices are officially not supported yet with Storyline’s current HTML5 output. Still, there is a good chance that an HTML5-published project does work on your Android device. When I first started working with Storyline, I had done a test with a Samsung Galaxy SII and the result was acceptable (at least it wasn’t worse than HTML5 in an iOS device’s browser). Too bad, there is no Android player app, similar to the Mobile Player for iPad, but one can always dream :-). That made me wonder if it would be possible to somehow package Storyline’s HTML5 output into an Android app. The answer turned out to be quite simple – Yes, all you need is PhoneGap Build!
PhoneGap Build is a web-based service (the basic account level is free to use) that allows developers to upload HTML5/CSS/JavaScript content and have the service build apps for various platforms in one go. For example, you can upload an app and build apps for iOS, BlackBerry and Android with the click of a button. I’m sire the reality is a bit more complex than that, but the basic concept is straight forward:
Step 1: Develop your content with the tools that you already know, including Storyline
Step 2: Publish as HTML5
Step 3: Add some additional components, like app icons and a config.xml file to the output folder. There is some good info on icons available here.
Step 4: Zip up the content and log into PhoneGap Build
Step 5: With any required security certificates, provisioning profiles and keys in place (this initial setup will take some time and work to get and upload all these item, especially if you want to publish iOS app as well), start the build process
Step 6: Download and install the app on your device or publish to an AppStore.
I tested this process with a simple Storyline project and while some of the elements, e.g. buttons behaved somewhat sluggish, the app worked reasonably well. See some screenshots of the app running on my phone here. I still have a Flash plugin installed on my Galaxy device and given a choice, I’d rather run the Flash version of a Storyline project. However, that’s not an option going forward, HTML5 is here to stay.
I’m sure that future versions of Storyline will provide full support for Android, but for now you might be okay with either running Storyline’s HTML5 output on an Android device’s browser or take the plunge and try creating an app!
Hi,
Well done – always wanted to try this
What goes into the config.xml file?
Ron
Hi Ron, the config.xml file contains basic information about the app, e.g. the app name, permissions to access device functions and the name and location of the icon images. Here is some info on this: https://build.phonegap.com/docs/config-xml.
Hope that helps,
Michael
Hi Michael,
Can you share the config.xml and what other additional components are required, so it will be helpful for newbie’s like me.
Thank you
Hi, I doubt my config.xml file will be of much use to you, because each config file is unique to an application, with app-specific permissions, icon resources, etc. In any case, here is the one I used for my test app: http://dev.keypointlearn.com/xcl71_SL/AndroidApp/config.xml. You’ll have to adapt this to your app.
I noticed you also have a map.html file in your phonegap/storyline directory – is this file necessary for the build?
Martinique, the map.html file is not required for the build process. I just used this file to test how a web object (in this case, a customized Google map) would be displayed.
One other question – I’m hoping someone can help with this. My zipped file is 20.6MB. PhoneGap only supports 15MB or less. I am unable to reduce the size of the images, so I need some other options. Does anyone have any suggestions? Worse case, I can shorten the animation lengths in the original Storyline file…
I had seen posts about this issue months ago, but thought by now they would have increased (or eliminated) the size limit. The only suggestion that comes to mind, is to try and package the apps locally (using PhoneGap, not the web-based PhoneGap Build service).
Hi Michael,
How do we setup a key file?
For my test, I used the Create certificate option under the Deployment tab in the Flash CS6 publish dialog. If you don’t have Flash, you can use a command in the Android SDK, see here for info:http://developer.android.com/tools/publishing/app-signing.html
Hi, great work you guys are doing. I tried packaging my storyline HTML5 and its work well but I noticed that my audio playing, what could be responsible for that, I don’t know if anyone has experience this. I need and advice on how to fix this. Thanks.
Larry.
Have you updated Storyline to its latest version, Update 5? This may fix some of your issues; but remember, Android is not yet officially supported with Storyline’s HTML5 output.
Did your example app use any audio or video files?
I did have one short audio file and a simple video in my testfile. Playback performance was hit-and-miss on a Samsung Galaxy SIII.
Hey,
Thank you for this description. I was able to install the “app” on android. But the content is not centered horizontally. You can only see the far left corner. Is there something to consider regarding the story size or player settings?
You might want to experiment with the Storyline Browser Size and Player Size settings. You’ll find these setting in the Player Properties dialog, under ‘Other’. I had set mine to ‘Browser size: Resize browser to fill screen’ and ‘Player size: Scale player to fill browser window’ and that worked on my Android device.
Hey,
Thank you for your promt reply.
I tried these settings on my first test. Unfortunately it did not work, even though the output is displayed correctly as a normal online output on my android.
My settings:
browser size: Resize browser to fill screen
Player size: Scale player to fill browser window
Story size: 850 (height) X 640 (width)
I have choosen thise size because it looks good on iPhone even if the browser controls are not hidden for online output. Can you please tell me the size of your project? Maybe this is the problem.
The dimensions of my test app were 480 * 762. Just like you, I had originally developed this test file to run in my Android device’s browser and I wanted to account for the browser controls and address bar. When I later converted this to an app, it scaled up to the device’s full screen height as expected.
Hey Michael,
This article was a great help for me, but the sound files and videos couldn’t be played, I wonder if there’s something that I didn’t pay notice to.
I’m using SL2 update 7.
Sound and videos worked in my test on a Samsung Galaxy S5. Make sure your device meets the Storyline system requirements. See here: http://www.articulate.com/support/storyline-2/system-requirements-for-articulate-storyline-2
Hello,
I am exploring how to make an app with Storyline. I am very much a novice when it comes to coding. In Step 3 above I am looking at your output folder, and I am wondering about the content in it. It looks like you dropped the Storyline zip package into the folder, but where did all the other content come from? What generated the index file? Is the main folder the Storyline output uncompressed with the Storyline zipped folder dropped in? Do you zip that folder? I am sure I sound very ignorant, but I am just not getting it.
The ‘other’ content is required by PhoneGap and described in the PhoneGap developer docs.
Thanks, still trying to figure all this out.
Is there a way to edit the app image that displays on the main screen to something different other than the Storyline image?
Are you asking about the app icon that is displayed on the phone screen? If yes, then of course that icon can be edited to show any image you want.
Thank you for the quick response! I am new to this. How is the performance? Does the course lag?
It’s HTML5 content running in an app shell. So, all the limitations of Storyline HTML5 content apply.
Hi. Still a newbie and converted my Storyline project to HTML5, zipped.
However I see a bulk of additional files to be added in PhoneGap before convertion. Do you have a link to, say, create the ‘index’ file, ‘Map’, ‘config’.
I see you attached a zipped ‘My Storyline V3’ folder. It isn’t generated by Storyline2, isn’t it, because I don’t see any zipped folder in my output. Thanks in anticipation Michael!
The Map.html file was an html page I created myself to be used as an example in a Storyline web object. For all other additional files, e.g. config see the PhoneGap help files. The zip file contains all the files (published Storyline content, icon files, additional bits) for upload to PhoneGap.
Thanks Michael. Presently studying how to write the config.xml . Just wanted to confirm => is the story_html5.html renamed to index.html before zipping to phonegap?
Yes.
Great I have my new App and working.
The only thing is that the internet links within the HTML5 file are not activated in the apk.
Am I missing something. I think we should be using isn’t it?
= “*”
No application packages have been built at this time.
This may mean that they are in the process of building, or that the developer has not issued a build yet. Please check back again later.
Every time I get same error, can you please help me to solve this.
This seems to be a PhoneGap issue (not a Storyline problem), check their help/support/online community.
Thanks Mike for your valuable help!! Im facing an unique problem. I have published SL file. Next, added html code in the bottom of the index file to run a background music in loop, works fine, but when converted it into an App, the bg music is playing twice at a time througout the app, so the same bg music is overlapping. Any help in this regard is much appreciated.