What is Pokki?
Pokki enables web developers to create and distribute connected HTML5 desktop applications called Pokkies. - pokki.com
Pokki in a nutshell:
Pokki is basically a html5 web browser that sit on your toolbar that lets you run all your web apps as desktop app. Think of it as Google Chrome web store on your toolbar and having all those great apps running live on your desktop while you work and play.
(If you already have Pokki installed and up and running you can skip steps 1-3)
1: Go and download Pokki (it's free) http://www.pokki.com/
2: Run and install it.
3: After you install the program, you should see Pokki icon next the the start menu.
4: Click on the start menu and go to the folder called Pokki and click on Toggle Dev Tools.
5: Now you should see another Pokki icon on the right inside the toolbar and a message.
(Skip step 6 if you already have a CS2 ready html5 app)
6: Open up Construct 2 and load your game, then export your file to HTML5 web site.
7: Create 3 images for your icon with the following names and sizes
icon-19x19.png
icon-29x29.png
icon-42x42.png
and save them into the images folder in your app folder.
8: Create a file call manifest.json in the root folder where you have your index.html and channel.html, with the following lines of code.
(Replace Your Apps Name with the name of your app)
{
"name": "Your Apps Name",
"version": "1.0",
"icon-19x19": "images/icon-19x19.png",
"icon-29x29": "images/icon-29x29.png",
"icon-42x42": "images/icon-42x42.png",
"description": "A basic description of your apps.",
"popup": "index.html",
"background_page": ""
}
9: Right click on the Pokki icon on the right toolbar and click on add pokki...
10: Locate your app folder and hit ok. If everything goes right, you should see your app icon appear on the left next to the Pokki icon.
Cheers and have fun making apps and games.
-------------------------------------
Adding a minimize button
1: Locate and open index.html in your app root folder with an text editor (Note Pad).
2: Add the following lines of code to the style sheet.
a#minimize {
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 21px;
height: 12px;
cursor: pointer;
background:url(images/minimize.png) 0px -2px no-repeat;
border-bottom-left-radius: 3px;
-webkit-transition: background-color 0.3s linear;
}
3: Add the following anchor tag blow the <body> tag.
<a id="minimize" href="#"></a>
4: Add the following lines of java-script code below the first <script> tag and press save.
var minimize = document.getElementById('minimize');
minimize.addEventListener('click', pokki.closePopup);
5: Right click and save the image below to the images folder in your app folder.
The image below is a white line, you might have to highlight it to find it.
[
]
-------------------------------------
Example Files:
conkki.rar