HyperStudio - Web Apps for Mobile Devices


Stacks exported as an HTML5 web page are also “web app enabled”.  That means that the stack, once opened on an iPhone, iPad or Android device, and then saved to the Home Screen, will from then on operate “locally”, without needing an Internet connection.


      
   

                                                                 (click above and save to your Home Screen)


To make your own HyperStudio Web App, follow these simple steps with HyperStudio for Mac, HyperStudio for Windows, or HyperStudio Author.




Export the stack to HTML5 and save it in a Dropbox folder.  This example uses Dropbox, but you can also use your own server.




If you are exporting a “menu” stack that connects to additional stacks in your project, select “Levels = 2” in HyperStudio Author:





2) Get the link and email it to yourself (or others)


Get the Dropbox public link for the index.html file in the stack's folder and email it to yourself (or others).





3a) Safari on iPhone:


Using Safari on the iPhone, open the stack from the link with a live Internet connection.  You will probably get this alert:




iOS limits the local storage from a particular website (in this case dropboxusercontent.com) to 25mb or 50mb, depending on which version of iOS you are using. This increase only needs to be done once.  Be aware though that stacks that are larger than 25mb will not be possible to store locally as a web app.  You can check the size of your web app by looking at the folder size in the Finder of what you have stored in Dropbox:




Once you have opened the stack in Safari, navigate it a bit to make sure it's all been downloaded into memory, and then use the "Open In" button on the iPhone, and choose "Add to Home Screen":




On the menu that then appears, choose "Add to Home Screen":




It will then prompt you to name the icon for the web app:




That's it!  You've now made your own HyperStudio App on your iPhone/iPad! 


     
        


From now on, whenever you launch this icon from the Home Screen, you can navigate the stack without needing an active Internet connect. Another big advantage is that card-to-card transition times will be much faster than when a stack is navigated online.


Note: Sometimes on the iPhone, Safari prompts with this alert:




Even though it’s actually not necessary to have Internet connected at that point.  You can touch “OK”, and the web app of the stack will load normally.



3b) Safari on iPad:


Using Safari on the iPad, open the stack from the link with a live Internet connection. 


Once you have opened the stack in Safari, navigate it a bit to make sure it's all been downloaded into memory, and then use the "Open In" button on the iPad, and choose "Add to Home Screen":




On the menu that then appears, choose "Add to Home Screen":




It will then prompt you to name the icon for the web app:





That's it!  You've now made your own HyperStudio App on your iPhone/iPad! 




Note: Sometimes on the iPad, Safari prompts with this alert:




Even though it’s actually not necessary to have Internet connected at that point.  You can touch “OK”, and the web app of the stack will load normally.


Note2: For reasons that have not yet been fully worked out, sometimes stacks hosted on Dropbox which are then opened on the iPad don’t always properly cache the stack data. If you experience problems with the stack not operating locally, try putting the stack folder on a standard web-page server.  Here is the Cell City stack on a non-Dropbox server:   http://bit.ly/1doT7vW


If you aren’t able to get the Dropbox-hosted stack to cache locally on your iPad, try the above link.



3c) For Android (Shown on Nexus 7, Android 4.2.2):


For Android, it's very similar:  After opening the web-page app (HyperStudio HTML5 export) in Chrome on an Android device, save the URL as a bookmark using the Favorites (star) button:


 


and name it:




Once saved, touch the menu icon to get to the bookmarks screen:







Then in the bookmarks tab, touch and hold the bookmark for the webpage until you get the pop-up menu to "Add to Home Screen". 




You will then get an icon for that HS stack on your Android home screen.





Try It Out With These Links:


Here is a link to the "Cell City as a Basketball Game" stack on my Dropbox folder, which can be made into a locally run (no Internet connection needed) Web App by following the steps above:


https://dl.dropboxusercontent.com/u/15950810/CellCityWA/index.html


and here is the Cell City stack from which the exported HTML5 web app was made:


https://dl.dropboxusercontent.com/u/15950810/Cell%20City%20for%20Mobile%20Web%20App.stack


It's very similar to the original HyperStudio Home Stack Cell City example, but I removed the "Home" buttons from the stack, since there is at that point no "Home Stack" to return to.


Have fun! And let me know about any web apps that you create!