You are on page 1of 45

Why AppCobra?

AppCobra is a serious tool.

Apps, the mobile web, and HTML5 are the future. You already know that. Thats why you are reading this. You want you, your kids, and/or your students/employees to get a great head start into that future. A future where the skills learned now will be indispensable. And that is where AppCobra comes in. And in this document, we are going to show you why there is nothing like AppCobra. Nothing. Not even close. You see, AppCobra is a serious development tool. AppCobra does more than string a few pictures and words together and put them on your iPhone. With AppCobra, you can do almost anything. AppCobra takes full advantage of all mobile and HTML5 features, not just a small subset. And AppCobra is tremendously scalable. Not only can you put together Apps much like you might put together a PowerPoint presentation, but more experienced users can delve into JavaScript, and the AppCobra API, and really put their skills to good use. As a final plus, you will be creating apps that run on all platforms. iPhone and iPads. Android Phones and Tablets. Blackberry. Windows 8 Tablets and Phones. Macintoshes. PCs. Even Smart TVs.

Lets Have a Look at Some Examples

On the following pages, we will be looking at the sorts of things you can create in AppCobra. You will be surprised at the extensive range of features available how easily they can be implemented, and just what you will be creating. And youll also be pleased to see you are not limited by a few pre-set templates. You have complete control over how your apps look and operate. Choosing anything else will limit your imagination.


Why AppCobra? This document contains several hyperlinks to online content. You can either follow the links directly, or, if you have a mobile device, use a QR Scanning app to scan the QR Codes (see below), and go directly to the provided URLs.

Read This Online at

Help, Examples, and Interactive Tutorials

Just before we get started, and important note. AppCobra includes an extensive online help system (, a support forum (, a huge range of examples (including the source AppCobra projects) (, and a free and extensive series of Interactive Tutorials ( We even have a series of blogs that provide constantly updated hints, tips and guides (

Online Help -

Interactive Tutorials -


Why AppCobra?

AppCobra Examples -

Creating Apps -

Learning About E-Learning -

Nearly fifty interactive tutorials are provided for help you learn AppCobra.


Why AppCobra?

Dozens and dozens of interactive examples complete with source AppCobra proects.

Installing Your Apps

Any apps you create be deployed and distributed immediately. You dont need app store accounts. You dont need any special hardware or any other software. You dont need to wait two weeks for approval. Here is the simple process: Create your App. Upload to the AppCobra server with a single command. Invite a user to the App, or give them the App URL. The user navigates to the app and can then add it to their home screen.

Its done. And it takes only minutes. Teachers can share apps with students. Students can share apps with teachers. And students can share apps with other students, or the whole class.

For more information and examples, please see:


Why AppCobra?

Deploying Your AppCobra Apps -

Startup Screens and Icons

AppCobra will create the appropriate startup screen and icons in all the right sizes and flavours to match all major HTML5 devices, based on a single startup screen and icon you select. So it will look great on any platform.

Using AppCobra, you can add sound effects, record or import voiceover, insert YouTube videos, or your own videos into Apps.

Above a multimedia childrens book. Each page contains animations and audio. The user can navigate from page to page automatically, using the buttons, or on touch devices, by swiping.


Why AppCobra?

Here, inside AppCobra, is the project used to create the App above. See how easy this? You get to see exactly how things will turn out.

Insert YouTube videos, or your own videos, into any app.

Not only can you add audio, but you can customize play and pause buttons, and synchronize 6|Page

Why AppCobra?

events to audio to create elegant multimedia animations.

You can also apply sound effects that play whenever an object is touched or clicked.

Latest Technology
AppCobra uses the latest web features to play audio. This included the HTML5 <audio> feature, as well as the HTML5 Audio API. Technical, sure but what it means is that you have audio which plays as you want it to play. Instant sound, with no buffering. Seamless support for all browsers and audio types. A final fall back for devices that do not support HTML5 audio is a Flash format all created automatically by AppCobra. Audio on iOS devices from web pages has always been a bit tricky. While most devices allow sounds to be preloaded, iOS does not. While most devices can play sound at any time, on iOS any sound must be initiated by a user touch. And finally, iOS does not allow more than one audio object per page. AppCobra, however, gets around all these limitations. The HTML5 Web Audio on iOS devices means: Instant playback no buffering. Sound effects are all preloaded. Playback that does not require a user touch to initiate or play. Multiple sounds at any one time. Sounds that can be played simultaneously if you wish.

Included Sound Effects

AppCobra is provided with over 100 sound effects, in both WAV and AAC format.

E-learning and Assessments

The App and mobile marketplace promises to reshape education no other idea mankind has had since the invention of the printing press.


Why AppCobra?

Let your kids share their knowledge, and create their own apps create their own e-learning. And effective e-learning is more than just asking a question. In this fast paced world, you need to be able to grab attention and keep it. In AppCobra, a complete assessment engine is built right in. It can take care of scoring, reporting, determining passes and fails, and even allows branching based on single answers, or on cumulative scores.

With AppCobra, you can create assessments in e-learning using a range of question types.You determine how they look, how they are presented, and what sort of feedback is given to students.


Why AppCobra?

Using hotspots, creating interactive software simulations is very simple.

Presenting Information.
Here is where the creativity and imagination of you and or your students can shine. Information can be presented in so many interactive and dynamic ways.

Because AppCobra allows so much customization, you can create your own custom interaction and question types.


Why AppCobra?

When teaching concepts, you can set up your information so a user views what they need to view, when they need to view it and even to skip it if they dont.

Mouseovers and touchdowns are wonderful ways that AppCobra allows you to create custom, dynamic, and interactive apps.

Above, weve set up some hyperlinks in the text which wraps elegantly round the image of the snake to present some photos. These hyperlinks could also display new windows of information, or simply link to another step in the app, or perhaps even play video or audio.

10 | P a g e

Why AppCobra?

Here is an illustration of how images can be automatically set to enlarge, if the user wishes to see content at a larger size.

Create books that automatically flow based on inserted images and text and even allow searching

or create more static books, with fixed layout and exactly the same layout on all platforms.

11 | P a g e

Why AppCobra?

3D Features
3D Effects
AppCobra provides a range of features that allow you to create 3D like objects. These work exactly the same for all browsers.

They also work on text as well as images.

3D Reveals
You can also set up objects as 3D reveals hard to show with a screenshot, but great to watch on screen.

12 | P a g e

Why AppCobra?

Once again, AppCobra here shines. Apps should be more than just click here to continue information presenters. You can: Present information in a linear fashion. Allow the user to branch based on selections. Branch based on user performance (score). Provide automatic indexes, bookmarks, and thumbnails to allow the user to navigate. Allow swiping on mobile devices in any direction.

Lets have a look at some of the other ways you can set up navigation and branching within lessons.

13 | P a g e

Why AppCobra?

Above, weve illustrated how you can add thumbnail navigation to your app.

Indexes (or tables of contents) are just as easy to create and maintain. You determine what appears in the index, and how it appears in the index.

Use pop-up, flyout, or drop down menus to provide another means of navigation.

14 | P a g e

Why AppCobra?

With a single click, you can add a bookmarks interface to allow the user to save and navigate to their own bookmarks in your app.

With AppCobra, not only can the user swipe left or right you can control scrolling and swiping in any direction you like.

15 | P a g e

Why AppCobra?

There is even a series of features so you can create your own comic books.

You determine exactly how your app looks and operates.

When creating apps, it is important that your app looks on all platforms how you designed it to look. What looks one way on an iPad may look different on an Android device. Not with AppCobra, however. Your app can look the same everywhere.

AppCobra has a feature that allows fonts to be created as images. This means that your app looks exactly the same on all platforms and exactly the same as it does when you design it. Use any font you like.

16 | P a g e

Why AppCobra?

In this app, you can see it is important that this main paragraph takes up exactly the correct amount of space. In other development tools, this would be almost impossible to ensure.

When adding things like Math Symbols once again a great feature of AppCobra you need to know exactly how those symbols will appear on all platforms. With AppCobra, this is not an issue.

17 | P a g e

Why AppCobra?

With most development tools, if you select a font that the end user does not have on their device, it will be substituted with a different font. Not only will spacing change, but the whole appearance of your app can change. Not an issue with AppCobra.

Another couple of examples where exact layout is crucial to how an app appears and operates. This sort of thing as amazing as it sounds, can simply not be done with other tools.

18 | P a g e

Why AppCobra?

Apply static and dynamic styles, textures, borders, and outlines to objects.

A range of image editing features are built right into AppCobra to enhance your illustrations.

Because AppCobra can render text as an image, this allows such features as drop caps to be applied to the text. 19 | P a g e

Why AppCobra?

Use AppCobra features to generate object backgrounds and borders of any shape, color, or size.

An interactive solar system app, complete with audio. Note that the layout will look exactly the same on all devices and browsers.

Layout Consistency
Weve already mentioned that when you create an app in AppCobra, it plays back exactly the same way and looks exactly the same on all devices. Using AppCobra University as the example, here is the proof.

On the left a device running Android Honeycomb. On the right, an iPhone. 20 | P a g e

Why AppCobra?

On the left, an iPhone running Chrome on the right, the same app running directly in the Safari browser.

On the left running on the iPad in the Safari browse. On the right, running on the iPad after it has been saved as an app.

On the left, FireFox in Windows. On the right, Internet Explorer 10 in the desktop.

21 | P a g e

Why AppCobra?

On the left, FireFox in Windows. On the right, Safari in Windows..

On the left Safari on a Mac. On the right, in IE10 in the Metro interface.

Choose Your Layout Size and Orientation

Although AppCobra can and will size your app as required on any device, you can, if you wish, target your app for a specific device, and match the resolution of that device. Below, you can see the same app resized for three different devices from top to bottom iPad (1024 x 768), Windows 8 Tablet (1366 x 768), and iPad vertical (768 x 1024).

22 | P a g e

Why AppCobra?

Saving as an App
There are several ways you can save your app to any device. First, using a product like PhoneGap, you can save your AppCobra app as a native app, ready to go into the Apple App Store, Blackberry World, or Google Play. AppCobra takes care of all the preparation for you including all icons in various sizes, all required metadata (including keywords, descriptions, and more) even the same screen shots required for the app stores. Second, you can use the features found on most devices to save the app directly to the device desktop. Combine this with the HTML5 download feature supported by AppCobra, and you have the equivalent of a native app in minutes.

23 | P a g e

Why AppCobra?

On the left, an app created in AppCobra saved to the iPhone home screen. AppCobra takes care of the icon, and startup screen. On the right, the app in action, as launched from the home screen.

The same as the above example but this time on the iPad.

Above left, weve added the app we created in AppCobra as a bookmark to the Android Honeycomb home screen. From there, it looks and operates almost exactly the same as a normal, downloaded app. Once again, AppCobra takes care of the icon and startup screen.

24 | P a g e

Why AppCobra?

On the left, the Learning Windows 8 icon has been added to the Windows 8 start screen. AppCobra allows you to select your icon, and prepares it correctly for you. You can also customize the name as it appears in the icon tile even the background color of the tile.

Here, we used the features found in the Chrome browser to add our app as an application shortcut. Once again, the icon and shortcut name is taken care of for you.

See the top left corner near the orange FireFox tab the app has been saved as a pinned tab, and can be started at any time immediately.

25 | P a g e

Why AppCobra?

PowerPoint Import
AppCobra allows you to import PowerPoint presentations. These can be imported as: A series of images; or A series of editable objects so all the content of the presentation are editable after import.

Using our PowerPoint Developers Guide, you can even pre-apply events and actions in the PowerPoint presentation, and they are applied automatically as the presentation is imported.

Ahhh interaction. The lifeblood of a real app. And by interaction we dont just mean click here to continue. We are talking about complete and engaging interaction not just for navigation, but to actually create results unique to each user.

26 | P a g e

Why AppCobra?

You can set any object up so that it can be moved, rotated, and/or scaled by mouse or by touch.

Create and use sliders to allow the user to get involved with dynamic results.

You can even construct dialog boxes to allow users to control what is visible, or how something operating, in your app.

27 | P a g e

Why AppCobra?

This example uses the features found in the AppCobra API to create a simulation of speeds of various people and animals and they race onscreen. The user can select what person or animal to put in each lane.

Here, drag features are used to track where and how the user drags an object on the screen. Usg the API, you can track each movement and drag release to the pixel.

28 | P a g e

Why AppCobra?

This example uses movement and checks where the user touches or clicks on the screen to create an interactive game.

Create surveys, where the results can be emailed directly to you from the app.

29 | P a g e

Why AppCobra?

A classic hangman game created in AppCobra. Try that with any other tool.

Here, the AppCobra jigsaw feature is used as a basis of a jigsaw game.

30 | P a g e

Why AppCobra?

In this interactive game, the user fills in a series of text boxes in order to create a dynamic story. The resultant stories can be saved to the users device, and reloaded at any future time. AppCobra fully supports saving and reading data to the local device using localstorage APIs.

Other Automated App Elements

With a single command, you can add all sorts of objects and elements to your apps.

Add and control clock objects.

31 | P a g e

Why AppCobra?

Create your own digital clocks and timers.

Add calendar objects with a single command and control and keep a track of them using the AppCobra API.

Add and redraw interactive graphs with a single line of code.

32 | P a g e

Why AppCobra?

Add domain or password level protection to your apps.

Progress bars are a snap.

Add other web content, such as web pages and PDF file directly inside your apps. 33 | P a g e

Why AppCobra?

Create tables with the built in table editor. Format individual cells, and even add images.

Use any one of thousands of provided clipart images in your apps.

34 | P a g e

Why AppCobra?

Other elements, such as On/Off sliders, are a breexe.

Mobile Features
In order to create really cool apps, youve got to be able to take advantage of all mobile device features. This includes:


Geolocation. Geolocation works on all devices (assuming a modern browser is used as well as, of course, on mobile devices.

35 | P a g e

Why AppCobra?


With AppCobra, you can check the device accellerometer to see if the device moves on the x, y, or z axis at around 50 times a second.

Touch Interface

We talked a little earlier about how AppCobra allows the user to swipe from page to page and also up and down and also individual objects. You can also, with a simple click support a page curl like effect as the user changes steps.

36 | P a g e

Why AppCobra?

We looked at this image earlier but we wanted to reinforce that full touch interface is supported by AppCobra. In this example, the user can use standard touch gestures to scale, move, and rotate this object or any object.

In this app, weve used a feature of AppCobra called superswiping where a series of images can by scrubbed at high speed, rather than one at aq time.

37 | P a g e

Why AppCobra?

Download to Local Device

AppCobra fully supports the HTML5 download feature. This allows apps to be completely downloaded, and run on a user machine, with no Internet access required.

Add to Home Screen

Any AppCobra created app can be added to the home screen on an iPad or an iPhone, and run exactly the same way as a native app.

38 | P a g e

Why AppCobra?

Above left, weve added the app we created in AppCobra as a bookmark to the Android Honeycomb home screen. From there, it looks and operates almost exactly the same as a normal, downloaded app. Once again, AppCobra takes care of the icon and startup screen.

On the left, the Learning Windows 8 icon has been added to the Windows 8 start screen. AppCobra allows you to select your icon, and prepares it correctly for you. You can also customize the name as it appears in the icon tile even the background color of the tile.

Creating Websites
AppCobra can be used not only to create Apps but also interactive and engaging websites. Below, the website created by AppCobra, at

39 | P a g e

Why AppCobra?

Working with Images

HTML5 includes some wonderful new opportunities to create exciting animations and truly interactive and useful apps thanks in one way to a HTML5 object called the canvas object. Thanks to the canvas object, with AppCobra you can create apps like this:

This app is an image editor, which runs totally in a browser. The user can select and edit their own images. Note that to use this feature in AppCobra, you dont need to know all the JavaScript code related to the canvas object and how it works AppCobra takes care of all that for you.

You can even create your own drawing apps. 40 | P a g e

Why AppCobra?

You can create an app that allows the user to drag an image onto app to add it start working with it.

Here, we added a slider which the user can drag to cross fade one image into another.

41 | P a g e

Why AppCobra?

AppCobra supports the highest quality images available including 32-bit PNG images with alpha transparency. AppCobra also allows automatic and manual compression of images. You can include images at high resolution for Retina display devices. AppCobra will automatically resize and resample images during the app export process. This means that no matter what size it was when imported, it always ends up at the perfect size when you create the app and will always be a lot quicker to download. An added feature is that during export, AppCobra will examine all files and images in your app and remove and redundant images to improve download speed and tighten app size.

AppCobra uses a range of timing features to allow your apps to look professional, and to create your animations. For every object, you can determine an appearance delay, and a disappearance delay. These appearance and disappearance delays can be synchronized with an audio file, if you wish. Every step can contain one or more timeouts that activate events after a certain time like display a message, move to another step, show a movie whatever you like. A range of timers are available like a maximum app time, an app timer, a step timer for each step, and a timeout timer.

42 | P a g e

Why AppCobra?

Add and control clock objects.

Here, a timer displays how long is left in the current step.

Using timing and other AppCobra features allows you to create time lapse apps play the 43 | P a g e

Why AppCobra?

time lapse, in this case, automatically, or manually even in normal, or slow motion.

You can synch the appearance and disappearance of objects to a main audio file. You can also play sounds at any given point in time.

The AppCobra API

In AppCobra, so much can be created just using the drag and drop, or selecting features, WYSIWYG interface. The AppCobra API allows you to take this one step further and use the AppCobra API or JavaScript to further control your lesson. The AppCobra API is designed to link JavaScript to the AppCobra objects. For example, you can set up an event say for example, when a user clicks a button. And you can link that event to any JavaScript code.

44 | P a g e

Why AppCobra?

Above, you can see an example of using JavaScript or the AppCobra API to add even more interaction and flexibility to your code. Look at the example above. There are three lines: showxobject("apple") This shows the object called apple. hidexobject("orange") This hides the object called orange. rotateobject("pear",45) This rotates the object called pear 45 degrees. When applying such things as movement, transparency, rotation, etc, AppCobra automatically translates the JavaScript to work in all browsers. You can use JavaScript variables, set events for page load, page unload, page focus, page lost focus, define events that occur as the lesson loads, or in response to events like audio playing, object appearing, showing a message box and much, much more.

45 | P a g e