Mobile learning with Flash Lite 2 and Adobe Captivate

The use of the mobile phone as a device to deliver its learning contents for learning at a distance, Mobile Learning (m-learning), has already passed its experimental stage and has received excellent feedback from the tutors and students alike who have used it. Mobile devices can carry out complex programs, load multimedial elements such as audio and video, speed up a browser, and surf the web.

Flash Lite is a mobile device player that permits us to enjoy the contents created by Flash. We all know the characteristics that have made Flash famous on the web, and we have also seen and used the excellent didactic contents created with this technology, which lends itself so successfully as an instrument for learning thanks to its interactivity and multimedia capabilities. Now the second version of Flash Lite, Flash Lite 2.0,offers an efficacious technology for creating contents for the mobile giving support to ActionScript 2, the possibility to launch videos in 3GP format, to load and to parse XML files, to save data on the mobile device, and to load external images and sounds. Developers worldwide have created many types of Flash content for mobile devices: games, utilities, RSS readers, screensavers, animated wallpapers, and so forth. To understand what is possible with Flash, you might check out the Flash Lite Exchange on the Adobe site, which has at least 162 Flash Lite applications.

In this article, you will learn how to integrate Flash Lite and Adobe Captivate together to create learning objects for mobile phones.

In the example you will find a recorded tutorial to demonstrating how to send an SMS message using a common mobile. For this demonstration, the Remote S60 mobile application, clones the screen of the mobile phone on a personal computer desktop. Remote S60 helps you create screen shots and allows you to record AVI movies from the screen of your mobile phone. In this case, you'll learn how to use Captivate to record a Remote S60 screen to a SWF file. Then you'll build a simple Flash Lite application that loads the SWF file.

Adobe Captivate 2

• Try
• Buy

Flash Professional 8

• Try
• Buy

Sample files:

• flashlite_demofiles.zip (ZIP, 612K)

Learning objects with Adobe Captivate for Flash Lite

In creating a learning object for a device like the mobile phone wtih Adobe Captivate, you must keep in mind the mobile device that will be viewing the Adobe Captivate content. Apart from the setting of some options in export phase, which allows you to select options for Flash Lite 2.0, you must first of all consider the smaller screen dimensions and the different measurements from device to device. I examine this subject more thoroughly in my blog, Nokia S60 platform UI screen resolutions for Flash Lite. For this example, I set a screen resolution of 170x208 pixels. This is the classic S60 UI resolution supported from the first S60 devices, from the Nokia 7650 phone through to the latest Nokia 3250 music phone. To have a complete list of S60 phones, Nokia has created a site dedicated to these models: S60.com.

Creating a tutorial with Adobe Captivate is really simple.

On opening the program, see the Set Up (Figure 1), which shows the basic operations you can carry out with the program. Select the option Record new movie select Record or Create New Movie. The recording stage appears.

Figure 1. The Adobe Captivate start page

When you consider that you have to create content for a particular device, the option you select is one that allows you to define the precise size and position for the recording window (Figure 1.1). This allow you to insert the dimensions of the recording rectangle as 176 x 208 pixels, and to position it on the screen.

Figure 1.1. Select the type of movie to create

In the example you will find a recorded tutorial demonstrating how to send an SMS message using a common mobile phone. For this demonstration, the Remote S60 mobile application clones the screen of the mobile phone on a personal computer desktop. Remote S60 helps you create screen shots and allows you to record AVI movies from the screen of your mobile phone.

Before starting with registration, deselect the Record Narration option.

By clicking Record, Adobe Captivate starts recording your desktop automatically. You can stop it by pressing the Delete key (on PCs). When you are finished recording, Adobe Captivate processes the recording and opens the slides captured.

The final result of the recorded example is in the file sendsms.cp, which contains 14 slides. Adobe Captivate allows you to edit and modify the slides that it has automatically captured. To edit the content, select the Edit tab on the right of the Storyboard tab.

Selecting this option will display all slides on the left and on the right, the details of the selected slides and a Timeline. You can work within this interface to see the duration of the various topics.

Figure 1.2. The Timeline is similar to Flash Timeline and allows you to edit the appearance of objects in the slide

You can also insert text captions within your slides.

In Adobe Captivate, in the Insert menu, select Text Caption to create a text box. It is possible to select different types of graphics, and set size and font font type. In this examle, I selected a Text Caption option of Adobe Captivate Blue, with black Arial font, size 12px bold.

Figure 2. Insert a new Text Caption

When you are finished editing the Adobe Captivate demo, you can export the finished movie. After various tries, I managed to understand which options to deselect and select to make the content appropriate for Flash Lite 2, which I'll explain next.

To export a movie, go to the file menu and select Publish. A dialog box appears, and you can select export type. For this example, I exported the movie with the format Flash (SWF). Give the movie a name and decide which folder to save it in. In the lower right of the Publish dialog box, notice the Preferences key that allows you access to the advanced options for export. You will apply the following changes to the content to make it compatible with Flash Lite 2.

Figure 3. Click the Preferences button

On the first tab of the Preferences window, Start and End, deselect the option, Loading Screen, which automatically runs a preloader for the entire movie.

Figure 3.1. Click the Preferences button

Within the Start and End tab on the Preferences window, select the next tab, Preferences, which contains the options most compatible with Flash Lite. You must select various Adobe Captivate export options to make the SWF file compatible with Flash Lite 2. In order to do so, deselect the following options when exporting your Adobe Captivate content: Advanced movie compression, 508 compliance,Compress compiled SWF file, Include Breeze Metadata (this option is present only if you have Breeze Presenter installed on the machine).

Figure 3.2. The Preferences tab on the Preferences window

Click OK and confirm all the options. The final result is sendsms_final.swf. With this setting, it is impossible to have any type of e-learning output, or the possibility to track any user-generated data. This information is contained in metadata inside the SWF file, which Flash Lite 2 cannot access.

Load Adobe Captivate movies into Flash Lite

The sendsms_final.swf file that you have just created is now ready to be copied onto the mobile device and sent.

Make sure that your mobile device is compatible with Flash Lite 2 and that the player has already been installed on it. You can find out whether your device is Flash Lite 2.0 compatibible on the supported devices page, and you can download Flash Lite 2.0 player here.

You can use a Bluetooth connection or USB transfer with software like the Nokia PC Suite to tranfer the SWF file onto the mobile device. Once you have the content, you can select it and send it to Flash Player to see it loaded.

The only inconvenience is that the movie will not appear as Full Screen automatically; the user will need to select the Soft Key option on the left.

Now you'll create a short demo that consists of a very simple Flash Lite 2 shell with a button that sends the movie.

Open Flash 8 Professional (make sure that you have installed the Flash Lite 2.0 update for Flash Professional 8). From the start page, create a new project for the mobile device by selecting Create from Template. Select Global Phones and select Flash Lite 1.1-Symbian Series 60 Template.

Figure 4. Flash 8 start page

Flash 8 start page

A new project will be created with the dimensions of the stage set at 176 x 208 pixels, or, the dimensions of a model S60 mobile screen. Create a Button type movie clip on the first frame of the Timeline give it the application name load_btn. Insert the following ActionScript code on the first frame at the ActionScript level on the Timeline:

load_btn.onPress=function()}
           loadMovie(“sendsns_final.swf”,1):
}

The final code on the first frame is as follows :

fscommanda(FullScreen”,true);
_focusrect=false;
load_btn.onPress=function(){
          loadMovie(“sendsms_final.swf”,1):
}
stop();

Save the file and name it main.fla.

Now export the movie. Select File > Publish Settings. Make sure you export the file for Flash Lite 2.0 as shown in Figure 5:

Figure 5. Publish a Flash Lite 2 movie

Publish a Flash Lite 2 movie

Before copying the two files (main.swf and sendswf_final.swf) onto the mobile device, you can test the movie inside Flash 8. Select Commands > Test Movie (or Command/Ctrl + Return/Enter for the shortcut key). This command launches the Flash 8 Mobile Emulator to simulate the movie as it will work on the mobile device.

Now you only need to copy the files onto your mobile and run them!

Figure 6. The Flash Lite 2.0 shell

Limitations of the Flash 8 mobile emulator

If you wish to use Flash 8 to develop Flash Lite content when you select Command/Ctrl-Return/Enter to test the movie, you must load the mobile emulator, which you can use to run and debug mobile applications on the mobile handset of your choice to see how your content appears. One of the features I love is the possibility to rotate the content on the emulated mobile screen (from the View menu) 90 degrees clockwise or counterclockwise.

The emulator is a very helpful tool because now you can test movies without physically moving them to your phone. Still, don't forget that it’s just an emulator and it cannot do the following:

• simulte FSCommand2 control
• simulate some handset attributes
• simulate performance
• simulate the mobile memory consumption

The future of Mobile Learning

Mobile Learning is a new frontier in learning at a distance. And as in all new fields there are still a lot of things to discover and try out. The idea that users always have a device in hand enables us to imagine people studying at any moment during the day. The topic becomes even more interesting the moment in which it is possible to use mobile technology like Flash Lite integrated with software like Adobe Captivate or Flex, which allows developers to create rich and interactive content and to involve the learner.

And like Benjamin Franklin said:

"Tell me and I forget. Teach me and I remember. Involve me and I learn."

—Benjamin Franklin

About the author