Tag Archives: tablets

Captivate Mobile Development Workflow: Getting Started

Posted on 31. Mar, 2011 by captivatehero.

0

This is the first in a series of posts where I’ll step you through the mobile development workflow for Adobe Captivate 5.

You will start your new project in Captivate and then use Adobe Device Central to target your smartphone or tablet. For this exercise you will be developing for a Motorola Droid X device, but you can use these same steps for any device listed in Device Central.

You will be able to perform these steps if you have the Adobe eLearning Suite 2 installed. If you don’t have the Suite, you can download the 30-day trial at Adobe.com.

Creating the Mobile Project .CPTX File

In Adobe Captivate 5:

1. Select File > New Project > New Mobile Project…

Adobe Device Central CS5 launches. You will now need to find the device you are going to profile. For this exercise we are going to focus on the Motorola Droid X.

2. In the upper right corner of the Adobe Device Central interface, select the Browse option to connect to the online device profiles.

Note: You must have an internet connection to view the mobile profiles.

A list of devices fills the Device Library Panel. You will now search for our targeted device: Motorola Droid X.

device_central_23. In the search criteria box, type the search term: DroidX.

4. Select the Motorola Droid X device that has been created by Adobe.

device_central_3

5. Drag and drop the device profile over to the Test Devices panel. You should see the device profile begin to download.

device_central_4

device_central_5

6. In the Test Devices Panel, click on the profile for Motorola Droid X.

You now have a detailed view of the device. There are six information areas: General, Flash, Bitmap, Video, Web and Community. Take a moment to explore each of these areas.

7. Click on the Flash detailed view.

8. In the Addressable Size dropdown options select: N/A Landscape 90° + Fullscreen.

9. The Addressable size is now 854 x 442. This will be the pixel dimensions of your Captivate 5 file.

device_central_6

Your application will be played in a landscape view on the Droid X. The Addressable size compensates for the Android OS application bar that occupies the upper 38 pixels of the screen. Keep in mind that you will need to tell you users to turn the device clockwise 90 degrees to watch the Captivate movie properly.

10. In the upper right corner of the Device Central interface, click on the Create option.

device_central_7

11. In the New Document panel, set the following values:

device_central_8

Note: Set to Fullscreen is deselected. That feature will not work in the default Android web browser. Add Playback Controls has also been deselected because the default Captivate navigation skin is too small to use on a mobile device.

12. At the bottom of the panel check the Use Custom Size option and set the width to 854 px and the height to 442 px.

This is the dimension of the playable area on our target device when turned at 90 degrees clockwise.

13. Click the Create button located in the lower right corner of the New Document panel.

device_central_9Adobe Captivate 5 launches a new .CPTX file with the dimensions that you set. You can now start building out your mobile presentation.

Well, this is a great start to your mobile project. In my next post I’ll continue the workflow and talk about design considerations for small screens.

Forever Captivated!

- The Captain

Note: If you are looking to accelerate your Captivate mobile development - I will be holding a one day online class April 29, 2011 and on June 3, 2011.

Continue Reading

Creating Mobile Content with Adobe Captivate 5 for Android

Posted on 22. Mar, 2011 by captivatehero.

2

android_captivateThanks to everyone who attended my session yesterday at the Adobe Learning Summit. I received some great feedback, and I’m looking forward to continuing the the drive towards more mobile Captivate content in the marketplace.

Here are some resources from my presentation:

Droid Sans Fonts (From Font Squirrel)

Note: In my presentation I referenced Droidfonts.com. They are charging $30.00 for each font (thanks Joe Ganci), but I was always under the impression that the fonts were part of the Android Open Source Project and free for developers.

Here are the slides from the presentation.
Much of my presentation was demonstrating Captivate content on a Motorola DroidX so I don’t have as many slides as I typically do for a 60 minute presentation.

There were a lot of cameras going off when this slide went up - so here’s an overview of Captivate events on a touchscreen:

Captivate Events for Touchscreens

Captivate Events for Touchscreens

One really interesting thing happened during my presentation that was a happy accident:

In Flash player 10.1 you are not able to use a Captivate text entry interaction while the Flash application is set to Full Screen mode. (This is do to security issues with that version of the player.) I was going to demonstrate this, but to my surprise it worked! Then it dawned on me that I installed Flash Player 10.2 on my phone a few days ago.

Here’s the feature description from the Adobe website on the text input feature in 10.2:

Input text using native device virtual keyboards with TextField support if no physical keyboard is detected. A virtual keyboard is automatically raised and lowered when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing.”

I’m now confident that you can take your application full screen without any negative impact to interactions in Captivate.

If your interested in learning more about how to leverage your content on Android smartphones, iPhone, iPad and Android tablets - I will be teaching a new class on April 29, 2010.

Forever Captivated!

- The Captain

Continue Reading