Tutorial: Animations

This tutorial shows you how to create a poem maker app. This app consists of a button and three notes, and each note has part of a sentence on it. The first note contains an adjective and a noun, the second note contains a verb and an adverb, and the third note contains a preposition and a noun. Together, these notes form a poem, such as "A delightful blackberry grows slowly inside a cloud." When you click the button, the app generates a random poem and animates the transition between the old poem and the new one.

You will learn to:

Screen showing the Poem Maker sample app.

Before you begin

You should have the following things ready:

  • The BlackBerry 10 Native SDK
  • A device or simulator running BlackBerry 10

You can download the tools that you need and learn how create, build, and run your first Cascades project.

Downloading the full source code

This tutorial uses a step-by-step approach to build our poem maker app from scratch. If you want to look at the complete source code for the finished app, you can download the entire project and import it into the Momentics IDE for BlackBerry. To learn how, see Importing and exporting projects. The app that we build in this tutorial is designed to work on BlackBerry Z10 and BlackBerry Z30 smartphones, but the complete sample app is designed to work on other devices as well.

Download the full source code

Set up your project

Before we start creating our app, create an empty project in the Momentics IDE, making sure to select the Standard empty project template. For more information, see Creating a Cascades project.

After you finish, a new project appears in the Project Explorer view with the name that you specified. Now we need to import the following images:

The background image for the app.

background.png - A textured background

The straw image for the app.

straw.png - A straw that connects the button to the text notes

The background of each text note.

line_background.png - The background of each text note

A rubber plunger used as the unpressed button state in the app.

rubber.png - The button that generates a new poem

A rubber plunger used as the pressed button state in the app.

rubber_depressed.png - An image to place on top of the button that represents the pressed state of the button

We also need to import a file called poemgenerator.js, which contains a custom JavaScript function. We use this function to generate poem text in our app.

To import images and the poemgenerator.js file into your project:

  1. Download the animations_tutorial_assets.zip file.
  2. Extract the assets.zip file to the assets folder of the project that you created.

If you refresh the Project Explorer view, you see the images folder and the JavaScript file in the project's folder structure.

Several other files were created automatically when you created your project. In the src folder, you see applicationui.cppapplicationui.hpp, and main.cpp. These C++ source files implement basic app functions, such as creating the application object, starting the main event loop, and loading a QML file that represents the UI of the app.

In this tutorial, we don't go into the details of these source files. If you want to learn more about what's going on in these files, check out Tutorial: Create your first Cascades app.

Last modified: 2015-03-31

Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus