Tag Archives: appcobra

Deploying Your AppCobra Apps

Converting a Word Document to a Mobile App

In this article, we’ll look at how you can turn a Microsoft Word document into an App that will play back directly in any modern browser. No plugins required, no App Stores required – the result is pure HTML5. You can see the result of this example at http://www.appcobra.com/x/KS2/whyappcobra. The AppCobra source project can be found at http://www.appcobra.com/examples/worddoc.kti.

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

How do we do it?

It is actually a very simple process.

The first step is to get your Word document into a series of bitmap, PNG, or JPEG files. PNG would be best. There are several tools that allow this to occur. In fact, there are probably tools that allow this to happen much more easily than the method we outline below.

In our case, here is what we did.

First, we created our Word document, add the images, the layout, the styles – everything we wanted in the document. We made the Word document in landscape, as it would match the screen size of most devices better.

word2

Then we saved it as a PDF document.

We then imported the PDF document into PhotoShop Elements. This software allows you to save each page as a file type of your choice. We saved them as a PNG file. And it fact, we saved it in a size that was double what we needed – this allows us to use Retina Display support if we desired.

word1

In AppCobra, we created a simple template. It consisted of a title bar, and four buttons. We set these buttons up to allow the user to move forwards and backwards, and also to the first or last step in the App.

word3

Then, we created a placeholder in AppCobra (Add Objects / Full List / Placeholder command, and set it up at the size we wanted the pages to come in at.

We then used the Add Objects / Image command, selected the From File option, and navigated to the folder where the images were placed. The only thing we did to these images was to rename the images that started at 1 to 9 to be 01 to 09 – this ensured that the images would all come in at the right order (if you don’t do this, then alphabetically, it goes 18,19,2,20, etc).

We selected all the files, and imported them in one operation.

word4

Essentially, it is now done. However, we added a table of contents to our Word Document. After import, it looked like this:

word5

Currently, this is not functional – because it is just an image.

So, we used the Add Objects / Hotspot command to create a hotspot over each table of contents entry. For each hotspot, we selected the Interact / All Events command, and gave it the action Go to Specific Step. We then set the desired step for each entry. Below, each hotspot is represented by a red dotted outline. The user will not see these, however – all that they know is that if they select an entry in the table of contents, it will go to the appropriate page.

word6

We did add a status bar along the bottom of the screen (using Add Objects / Full List / Import App Status Bar) to automatically denote user progress through the app.

Finally, we checked the App Settings / App Settings command to ensure everything was to our liking.

That’s it  – all done! We then used the Share button to upload to the AppCobra server!

Why AppCobra is the Best Choice for Education

Why AppCobra is a Better Tool for Students and Education.

AppCobra is a serious tool.

Apps, the mobile web, and HTML5 are the future. You already know that. That’s why you are reading this.

You want your kids, and/or your students to be get a great head start into that future. A future where the skills they learn 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, your kids will be creating apps that run on all platforms. iPhone and iPads. Android. Blackberry. Windows 8. Macintosh. Even Smart TVs.

Let’s Have a Look at Some Examples

On the following pages, we will be looking at the sorts of things your kids and students can create in AppCobra.

You will be surprised at the extensive range of features available – how easily they can be implemented, and just what your kids will be creating.

And you’ll 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 kid’s imagination.

Help, Examples, and Interactive Tutorials

Just before we get started, and important note.

AppCobra includes an extensive online help system (http://www.appcobra.com/help), a support forum (support.knowledgepresenter.com), a huge range of examples (including the source AppCobra projects) (http://www.appcobra.com/uni/examples), and a free and extensive series of Interactive Tutorials (http://www.appcobra.com/uni).

We even have a series of blogs that provide constantly updated hints, tips and guides (appcobra.wordpress.com).

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

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

Multimedia

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

Above – a multimedia children’s 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.

Here, inside AppCobra, is the project used to create the App above. See how easy this is? 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 events to audio to create elegant multimedia animations.

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

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.

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.

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.

Using Hotspots,creating interactive software simulations is very simple.

Presenting Information.

Here is where the creativity and imagination of 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.

When teaching concepts, you can set up your information so the
user views what they need to view, when they need to view it – and even to skip
it if they don’t.

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

Above, we’ve 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.

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.

Navigation

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.

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

Above, we’ve 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.

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 cntrol
scrolling and swiping in any direction you like.

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

You determine exactly how your app looks and operates.

Layout

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.

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.

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.

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.

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

We’ve 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.

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.

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).

image067

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.

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, we’ve 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.

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.

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 Developer’s Guide, you can even pre
apply events and actions in the PowerPoint presentation, and they are applied
automatically as the presentation is imported.

Interaction

Ahhh – interaction. The lifeblood of a real app. And by interaction – we don’t 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.

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.

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.

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.

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.

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 userdevice,
and reloaded at any future time. AppCobra fully supports saving and reading
data to the local device using localstoreage 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.

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.

Add domain or password level support to your apps.

Progress bars are a snap.

Add other web content, such as web pages and PDF file directly inside your
apps.

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

Mobile Features

In order to create really cool apps, you’ve got to be able to take advantage of all mobile device features. This includes:

Geolocation

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

Accelerometer

With AppCobra, you can check the device accellerometer to see if the device
moves on the x, y, or z access – ar 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.

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.

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 interface
required.

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 don’t need to know all the JavaScript 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.

You can even 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.

AppCobra supports the highest quality images available.

AppCobra also allows automatic and manual compression of
images.

You can include images at really 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.

Timing

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.

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 time lapse, in this case, automatically, or manually – even in normal,
or slow motion.

Posting Results from an App to a Remote Learning Management System

In this article, we’ll look at how you can create an assessment like app that will play back directly in any modern browser. And, even when the app is run remotely on a user device, post results back to the KP Learner Manager Enterprise Learning Management System. No plugins required, no App Stores required – the result is pure HTML5. You can see the result of this example at http://www.appcobra.com/x/KS2/RemoteAssessment/. You can download the AppCobra project used in this example from http://www.appcobra.com/examples/remoteassessment.kti.

a5

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

Creating the Assessment

AppCobra provides a myriad of features to create assessments – multiple choice, drag and drop, fill in the blanks, drop down lists, true/false, and more type questions can be created. So, our first step in this example was to create a simple series of assessment questions.

a1

a2

a3

Above – some of the example questions we used in this sample. We allowed the user to submit their answer, and also to use an I Give Up button. On this button, we simply used the event Display Message, told the user the answer, and moved to the next step – but the user did not get a score for that question.

For the Submit button, we used the event Check Answer –  which allowed us to determine what sort of feedback was given. In this example, we told the user whether they were right or wrong, and allowed them to try again.

We used the Assessment / Create/Edit Objectives to give each question a value and name – as we were reporting to a Learning Management System, this allows the results to be viewed by seeing the question, what the user selected or entered, and what score they got for that question.

Allowing the User to Save the App Locally

Using the App Settings / App Settings command, we set this app up so that it downloaded totally to the user device. This means the user is able to run the app even when not connected to the Internet.

Submitting the Final Results

On the second to last step in the assessment, we needed to create the step that would allow the user to submit their answers to the remote Learning Management System. It looks as below:

a4This step contained three important objects. First, an editable text object to enter the user name, one to enter the user password, and Submit Results button.

To create the editable text objects, we simply add a normal text object. We give it a border, and select and appropriate font and background color so that it looks like a normal editable text object. Using the Interact menu, we give it the event Freeform Text Entry / Label.

The object where the user enters their name must have the Alias (Properties / Alias command) loginname, and the text object where they enter their password must have the alias password. The password object is set up to be entered as a password (Interact / All Events command).

Finally, the Submit Results button must be given the event (Interact / All Events command) called Submit Results to Remote LMS. When you add this event, you need to add the URL where the Learning Management System is installed – and also select a course name that this app forms a part of.

a7

After this page is created, we ensure it appears after the user has answered the final question. When an app is set up in this fashion, every time a question is answered, the results and progress are saved locally – regardless of whether the user is connected to the Internet or not. Of course, to submit the final results, the user must be connected to the Internet.

That is all that needs to be done. The user can take the assessment at their leisure, and submit their results whenever they wish. The Submit Results to Remote LMS event will handle all eventualities – it checks to see if the user is connected to the web, it monitors the response from the remote site (to determine if the user name and password were entered correctly, or whether the results were accepted. If the results are accepted by the remote LMS, the app will move onto the next step – and on this step, we created a message that indicates to the user that the results were accepted.

a5

Setting up the Remote LMS

This feature currently only works with KP Learner Manager Enterprise LMS, version XI and later.

To allow a user to submit remote results, you need to set the user up with an account in the LMS. The LMS will automatically send them an email with the name and password they need to use to submit the app.

Once results are submitted from the app, an administrator can log into the LMS, and view the results as submitted.

a6Where does the user get the app from?

The user can download the app from anywhere on the same domain as the LMS is installed on. In fact, it can form a part of the online LMS course, or simply a link from your website. Just provide the URL to the app – in this case, http://www.appcobra.com/x/KS2/RemoteAssessment/. You can use david/password as the username and password to submit your results.

Creating an Animated Multimedia Childrens book in HTML5

In this article, we’ll look at how we created an animated, multimedia, children’s book app that will play back directly in any modern browser. No plugins required, no App Stores required – the result is pure HTML5. The final result of using the techniques in this article can be seen at http://www.appcobra.com/x/ks2/tobyoctopus/.

to6

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

The Goal

We wanted to created a simple children’s book – complete with animations, text, voiceover, and navigation control.

to1

This book could be navigated in one of several ways. One, it could be played automatically, so the whole book could be played without user interaction. Second, the user could move from page to page, and start and stop the voiceover as they wished. Finally, we wanted to add a series of thumbnails so the user could move to any page they wish.

Toby the Happy Octopus

Our book was going to be called Toby the Happy Octopus Finds a Friend.

The script was written in Microsoft Word, originally. We simply added our content, refined it, and finally, used AppCobra to create and collate the rest of the content.

We decided to design this app originally to run on a tablet, or desktop device. After we completed the tablet version, we would resize, and make it into a phone version. So, the resolution we decided on was 1024 x 748 pixels. This is the perfect size for the iPad, but would also work extremely well on any other tablet or desktop device, thanks to the AppCobra feature that automatically sizes the content to match the screen size of the device (now done – see http://www.appcobra.com/x/ks2/tobyioctopus).

The Background Image

to2

We created the original image in Photoshop, to get the underwater effect. The shells, and sandy bottom, were taken from our existing photo collection, and we used Photoshop to add a few effects and combine everything together. The result, as seen above, was then imported into our AppCobra app.

The Animations

For this book, we decided to use animations from a site called Animation Factory. This is a subscription site that has a huge range of clipart and other media available for such tasks. We were in particular attracted to the high quality animated GIF files, which seems perfect for this application. So, using this site, we searched for animated images that matched the script we had written.

kpani_oke_octopus_floating_in_place_hg_clr

At times, if an animation could not be found to match our script, we modified the script slightly.

The Font

We wanted to select a font that looked fun, and might be attractive to kids.

to3

We selected a font called Curlz MT. Because AppCobra has the ability to render the text as an image, it meant that this font would look exactly the same on every platform it was played back on, regardless of whether the user had this font available.

We then set about combining the animations and the text.

to4

We used the AppCobra feature called Time Delay, to ensure that the top text appeared first, followed by the animation, and finally, the text at the bottom of the screen. Each of these objects were set to fade in.

We initially looked at moving each of the animations in from the side as they appeared, by decided it interfered with the animations themselves, and so left them as is.

The Voiceover

We wanted to add voiceover to every step. AppCobra allows you to either import, or record directly, any audio or voiceover files you wish.

At some stage, we will record some professional voiceover for this book. But currently, we used a text to voice app to generate the audio files for us. It allows you to see the point, anyway.

We added the voiceover with a small pause/play control at the bottom right corner of the screen. We could have put this anywhere, and made it any size – and even given it any appearance.

to5

We also set the audio to play automatically. Normally, iOS does not support audio autoplay – but AppCobra performs some neat tricks so that as each page is manually turned, the audio will start automatically.

So, audio was recorded, and added to each of the steps (there were 26 steps like this, in total).

Audio is played back in HTML5 for those browsers that support it – but AppCobra also provides a Flash playback fallback option for those browsers or platforms that do not.

Automatic Play

Because we wanted it to be an option that the book would play automatically, we needed to add a timeout object to each steps. We checked the timing of each audio, and added a timeout object on each step that would force that step to move to the new step around 6 seconds after the audio completed playing.

So, at this stage, as soon as the app started, it would play automatically. But we also wanted a manual option – so how did we achieve this? We needed to be able to hide, or show, the timeout objects as required.

To achieve this, we placed all the timeout objects into a group called timeouts. This would make it easier to hide or show these objects as required. For those familiar with AppCobra – we also gave this group the property Maintain Timeline Position.

In a moment, we’ll explain what we did next.

The Startup Screen

We needed a startup screen – to introduce the title, but also to allow the user to select between manual and automatic playback.

to6

Above, you can see we added two buttons – one called Play Automatically, and one called Play Manually.

Each of these buttons actually had to perform two tasks – one was to hide or show the timeout objects as required, and the other was to actually start playback. So, to achieve this, we decided to add some simple JavaScript code to these buttons. If we only wanted to just start the book playing, we could simply have applied the Go to Next Step event to either of these buttons.

So, on the Play Automatically button, we selected the Interact / Add JavaScript Code command. In the dialog box, we added the code below:

to7

The first line, showgroupp(“timers”), ensured that the timers group was visible. This ensured the app would move from step to step automatically. The second line, gotonext(), simply moves to the next step to start playback.

On the second button, Play Manually, we added similar code. However, instead of showgroupp(“timers”), we added hidegroupp(“timers”), to ensure all the timers were hidden. So, using this button, no step would move on automatically.

We are almost there!

Navigation

We also ticked the box in AppCobra App Options to allow the user to swipe from page to page, if using a touch controlled device. As this is essentially a ‘book’, we selected the page curl animation option, which makes the swiping feel as though a page is being turned.

photo 2

For user’s on mouse controlled devices, we needed something else. So we decided to add a left and right arrow near the middle of each side of the screen. We were initially only going to make these visible on desktop devices, but decided to leave them visible for all users.

to8

Thumbnails

Finally, we wanted to add thumbnails for all steps. In AppCobra, this is as simple as adding a thumbnail browser object.

We put this thumbnail browser into a group called thumbs, and gave the group the property Initially Hidden. This is because we don’t want the thumbnails to be visible until the user wants to view them.

In the bottom left hand corner of the screen, we added a small button, and gave it the event Show Group, and told it to show the thumbs group. So, when this button was selected, the thumbnails were shown. The user could select any thumbnails, and move directly to that page.

to9

As soon as the user selects a thumbnail, they move to that page – and the thumbnail bar is hidden automatically.

We selected a size of 280 pixels high for the thumbnails. In AppCobra, you can select any height you like.

So that the user could also close the thumbnail bar automatically, we added a small close button in the top right hand corner of the thumbnail bar. We added this to the thumbs group as well, so that it appeared when the thumbnails appeared. We gave it the event Hide Group, and told it to hide the thumbs group when selected.

We also gave the thumbnail object a movement animation, so that as it appears, it slides in from the bottom of the screen.

That is about all we needed! All done! For now, anyway. We are going to add some more interaction to this app, and provide all the details here for you.

Converting the Tablet sized app to a Phone sized App.

We mentioned above that we wanted to convert the tablet sized app so that it was optimized for an iPhone. And we did just that – see http://www.appcobra.com/x/ks2/tobyioctopus.

Here are the steps we followed – and some tricks we used to speed the process.

  • First, we open the tablet sized app, and used the Apps / Save As command to save a copy.
  • We then selected the App Settings / Canvas command, and selected the iPhone canvas size.
  • We were then asked if we wanted to automatically resize and move all objects to match the new canvas size – so we said yes.

Now we went from step to step to ensure everything looked correct. A couple of things needed adjusting:

  • The audio button needed to be increased in size, and repositioned to match this new size. So, we did this to the first audio button. We then selected the Edit / Copy command, and selected the Copy Dimensions option. Then all we had to do was select each subsequent audio object, choose Edit / Paste, and select the Paste Dimensions command.
  • The bottom text object needed to be moved up a little – so we did this.
  • We adjusted the size of the thumbnails from around 280 pixels to around 90 pixels.

That is all we needed to do. We did turn on Retina Display support, as we were heading for the iPhone.

The result – after adding to the home screen, and running from there:

photo 1

Creating an Image Editor in HTML5

In this article, we’ll look at how you can create an image editor that will play back directly in any modern browser. No plugins required, no App Stores required – the result is pure HTML5. This includes desktops, tablets – even mobile phones. These examples work in Safari, Chrome, iPad, Android, Opera, FireFox, and IE10 and above.

An example, using the techniques in this article, can be seen at http://www.appcobra.com/x/KS2/AppCobraPhotoEditor/. You’ll find links to other examples at the end of this article.

ie2

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

We’ll provide the examples online and also provide the AppCobra projects so you can create and modify your own. You’ll find these links at the end of the article.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

Loading an Image

In the photo editor you’ll be creating, you allow the user to load their own image. Let’s see how this part is done.

To set up an image load button, first use AppCobra to create a button or some other object to attach an event or interaction to.

Second, you need to create or add an image, or a hotspot to the app. This object you create is where the photograph the user loads from their machine will appear. If you want some sort of a placeholder image, add an image. If you want an invisible area, add a hotspot. Take a note of the alias this object has – you’ll need this in a moment.

Below, your canvas may look something like this:

snip1

Next, select the button you created initially (which we’ve labelled Load Image, above), which will allow the user to select a photograph, and select the Interact / All Events command.

In this dialog box that appears, select the Load an Image option from the Perform This Action listbox.

When you do this, a list below this action will appear, called Load Photo into Object. From this list, select the name of the image or hotspot you created above to display the photo the user loads.

snip3

Above, we selected an object called placeholder. Below, you can see how we have set up our canvas in AppCobra – the button at the top, and the hotspot below, where the image will appear.

From here, that is all you need to do. When you preview or run this app, when the user selects the Load Photo button, they will be able to select a photo from their local machine, or device.

snip4

snip5

snip6

Once the image is loaded, you can do what you want with it. To edit the image, however, it needs to be transferred to a canvas object.

To create a canvas object, select the Add Objects / Full List / Canvas Object command. Then draw the canvas object onto the AppCobra canvas.

To transfer the image into the canvas object, some code needs to be executed. The code to execute is this:

imagetocanvas(theimage, thecanvas)

where theimage is the name of the object where the user loaded image appears, and thecanvas is the name of the canvas object that will be used for editing.

There are two ways you can do this.

First, add another button. Then, select the Insert / Run JavaScript Code command.

In the dialog box that appears, enter the following text:

imagetocanvas(theimage, thecanvas)

snip7

When the user selects this button, the image will be copied from the theimage object, to the thecanvas object, and will appear there. In the case above, the image in the object called “placeholder” will be transferred to the canvas object called “mycanvas“.

There is another way this can done, automatically.

Whenever an image is loaded by the user, a JavaScript routine called ximageloaded() is run. Normally, this does nothing, but you can add this code, using the App Settings / Includes command, as you can see below:

snip8

Using this technique means the image is transferred to the canvas object automatically, straight after the user loads the image.

If you wish, you can even make the original image not visible (by putting it on a different step, or putting it into a group that is not initially visible).

Editing the Image

Once the image is in a canvas object, the following routines can be run, using the Insert / Run JavaScript Code command.

canvasgreyscale(canvas, left, top, width, height)

Where canvas is the name of the canvas object. Turns the image in the canvas to a grayscale image. Optionally, left, top, width, and height can be added to determine a target area in the canvas where the effect is applied.

canvasbrighten(amount, canvas, left, top, width, height)

Where canvas is the name of the canvas object. Brightens the canvas by amount. Can be negative to darken the image. Optionally, lefttopwidth, and height can be added to determine a target area in the canvas where the effect is applied.

canvassaturate(amount, canvas, left, top, width, height)

Where canvas is the name of the canvas object. Saturates (increases color) the canvas by amount. Can be negative to desaturate the image. Optionally, lefttopwidth, and height can be added to determine a target area in the canvas where the effect is applied.

canvascontrast(amount, canvas, left, top, width, height)

Where canvas is the name of the canvas object. Increases contrast of the image in the canvas by amount. Can be negative to lower contrast in the image. Optionally, lefttopwidth, and height can be added to determine a target area in the canvas where the effect is applied.

canvasrgb(r, g, b, canvas, left, top, width, height)

Where canvas is the name of the canvas object. Increases or decreases the red, green and/or blue components of the image in the canvas by r, g and/or b. Optionally, lefttopwidth, and height can be added to determine a target area in the canvas where the effect is applied.

canvassharpen(amount, canvas, left, top, width, height)

Where canvas is the name of the canvas object. Sharpens the image in the canvas by amount. Amount in this case can be 1 to 5. Optionally, lefttopwidth, and height can be added to determine a target area in the canvas where the effect is applied.

addimagetocanvas(theimg,thecanvas,left,top,width,height, alpha, rotate)

Allows to add another image to the image already in the canvas. theimg is the source image to add, thecanvas is the canvas with the image in it. Left, top, width, and height determine where the image appears. Alpha, from 0 to 1, is the transparency of the new image, and rotate is the angle of the image to add.

Saving the Edited Image

There are actually a number of ways to save the image – or rather, let the user save the image locally. You can execute this code:

savecanvas(canvas, thestring)

This will pop up a message box, with the text thestring. The image in canvas will be saved. The user will have to make a selection for the image to be saved.

Other Image Routines

Other routines that can be run include:

canvastoimage(canvas, image)

Copies an image from the canvas into an image.

canvastocanvas(fromcanvas, tocanvas, left, top, width, height, targetleft, targettop)

Copies an image from one canvas to another. left, top, width, and height determine what part of the source canvas is copied, and targetleft and targetright are the target coordinates.

trimimage(image,left,top,width,height)

Crops an image using the coordinates given.

resizeimage(image,width,height)

Resizes image to width and height.

imagetoimage(image1,image2)

Copies an image from image1 to image2.

getcanvascontext(canvas)

Returns the context of the canvas for when you want to manually edit the canvas.

showloader(overob)

Shows a loader object directly and centered over the overob object.

saveimagelocal(canvas,localname)

Saves the image in the canvas canvas to a local file called localname. Note that this is saved in the apps sandbox, and can only be accessed  by your app.

loadimagelocal(localname,target)

Loads the image localname in the image object target. You cannot load just any file in this manner – only an image you saved previously using the saveimagelocal command.

Examples

See these examples:

This example is at the most simple – let’s the user load an image: http://www.appcobra.com/x/KS2/LoadinganImage/ (get AppCobra source project here)

This example goes one step further – loads the image, and then lets the user transfer the image to the canvas: http://www.appcobra.com/x/KS2/LoadinganImage2/ (get AppCobra source project here)

This one puts it all together. Loads the images, transfers to the canvas, let’s the user edit the file, and finally, saves it: http://www.appcobra.com/x/KS2/LoadinganImage3/ (get AppCobra source project here)

This example lets you load an image (and it loads the image straight to the canvas), and then select a border for that image. Also shows an alternate save method: http://www.appcobra.com/x/KS2/LoadinganImage4/ (get AppCobra source project here)

This example lets you load an image (and it loads the image straight to the canvas). It further allows you to combine other images on the canvas – with random positioning, transparency, and rotation: http://www.appcobra.com/x/KS2/LoadinganImage5/ (get AppCobra source project here)

In this example, we allow the user, after loading an image, to determine exactly where the grayscale effect can be applied on the loaded image: http://www.appcobra.com/x/KS2/LoadinganImage6/ (get AppCobra source project here)

Here is an advanced example: http://www.appcobra.com/x/KS2/AppCobraPhotoEditor/

The Future of App Stores?

What is the future of app stores? Will they be required in the future? Apps – yes. But app stores?

Just a few short years ago, making an app meant getting it into the Apple App Store.

It’s a lot trickier now. Apart from the Apple App Store, there’s Google Play, Blackberry World, Windows Store, Amazon App Store, Mac App Store, and the Chrome Web Store. Among others.

The Apple App Store and Google Play are estimated to reach over 1,000,000 apps during 2013.

Most, apart from the big or very successful players, choose one or two stores. And that can be expensive and painful enough. And even when in an app store – you may truly be one in a million. And getting noticed among those numbers is not easy.

Each of those stores have their own software development kits, developer agreements, and submission and review procedures. Wouldn’t it be good if you only had to develop once, and your app worked on all platforms? Wouldn’t it be good if you determined what your app looked like, how it worked, what it contained, and where and how it was deployed?

You can. With HTML5.

So why doesn’t everyone develop in HTML5?

Firstly, there is a distinct lack of decent development tools. AppCobra is the standout here. Without something like AppCobra, creating an ‘app’ from scratch using HTML5 is a lot of work. Different platforms use different touch support and code, and CSS standards are mired by custom prefixes that perform the same function. What metatags are required for what platforms? Why doesn’t my startup screen appear? How do I provide my icon so that it works on all platforms?

Secondly, all browsers render text differently. What fits on four lines on an iPad may need five in Android, throwing your carefully laid out app into chaos. And, apart from Arial and one or two others, there are no standard fonts. So Arial it is. HTML5 does support downloadable fonts – but please.

AppCobra allows you to use any font, anywhere, and the text layout can look the same on all devices.

Look at the following examples.

ipadiPhone

androidAndroid

ie10IE10 / Windows 8

chromeWindows Chrome

Third – the cornucopia of screen/devices sizes and aspect ratios. How is it possible to make your app look good on all devices without having multiple copies? It is possible, of course, to create a HTML5 app that will reflow content based on screen size. For some apps, this may work. For others, like games, this is more difficult. It’s a pain. And a compromise like this never really works.

BlackBerry Emulator

AppCobra apps will resize as required – and keep all layout as you designed it. It looks the same on all platforms. Touch and mouse support can be included in the same app.

With AppCobra you can create an app at a standard phone size, create all the content and logic, save a copy, and resize to a tablet based app. Finally, adjust look and feel.

Fourth – you want to earn money. Getting into one of the app stores is still the best way to do this. But times are changing, and this won’t always be the case. However, using software like PhoneGap, you can, if you wish, turn your HTML5 / AppCobra app into a native app for iOS, Android, and other platforms.

Some HTML5 app advantages:

  • HTML5 leverages existing HTML and JavaScript skills.
  • Apps work on all platforms.
  • During development, can be shared and tested by anyone you wish, on any device.
  • Apps can be converted to app store native apps using PhoneGap, if required.
  • Apps can be deployed when and where you like. Your app can be saved directly from your website to the iOS home screen. Or the Android home screen as a bookmark. Or to the Windows 8 Start screen. From there, it looks and feels essentially the same as any app.
  • There are no developer agreements to sign. No review or submission procedures. No waits to make changes. No fees to pay. Nothing to license.
  • HTML5 apps can contain more features than you realize. Below, we list some of the features you may not realize exist. This list does not include standard HTML features of which you are probably aware.
    • Access to user photos. You can load photos directly from the user machine or camera.
    • Photo and Text manipulation. The HTML5 canvas object allows you to modify images and text in any way you like – right down to pixel level.
    • Drawing support. Allow the user to draw – right on the screen.
    • Geolocation. Get the latitude and longitude of the user.
    • Accelerometer. Access the device accelerometer to sense device movement.
    • Full control of audio and video.
    • Complete touch and gesture response.
    • Complete animation, movement and appearance control.
    • Orientation. Determine device orientation.
    • HTML5 Manifests. Allow apps to download and run offline.
    • Offline storage. Store much more content on user devices.
    • Drag and Drop support. Drag objects directly onto the browser.
  • Add the features above to the features that AppCobra also provides, like:
    • Automatic index generation.
    • Thumbnail support.
    • Clocks and calendars. Math symbols. Drop down, fly-out, and popup menus. Progress bars. Button generators. Hotspots, tables, user generated graphics.
    • Automatic creation of app icons for Android, iOS, Windows, Macintosh, and other platforms.
    • Automatic startup screen generation.
    • Automatic save of app position.
    • Automatic ‘nonapp’ and ‘orientation’ detection and warnings. Show different content based on orientation. Dynamic resize of pages.
    • Complete assessment and scoring engine. SCORM support. Remote submitting of app results when app taken offline.
    • Set objects to allow users to drag, resize, and/or rotate.
    • Dynamic hiding and showing of content and multimedia. Synchronize events to multimedia.
    • Retina display support. Mouse wheel support. Keyboard support. Shake detection. Full page movements, swiping, and page curl swiping.
    • Custom API support.
    • Complete timing control.
    • And a lot more.

All this might make you at least think – shouldn’t I be developing in HTML5?