Web 2.0 and iphone Application Development Workshop. Lab 5: Multimedia on iphone

Transcription

1 Web 2.0 and iphone Application Development Workshop This lab is prepared by: Department of Electrical and Electronic Engineering, Faculty of Engineering, The University of Hong Kong Lab 5: Multimedia on iphone Objective: This is a training program for the students to create an iphone Application which includes the multimedia elements. After this lab session, students should know how to create an iphone application which includes images, audio/video clips. Also, the method for video conversion is also introduced. Introduction: In an iphone application, user can include many multimedia elements into it. The basic multimedia elements included images and audio/video clips. For the build-in media player of iphone devices, the supported audio formats include AAC (8-320 Kbps), Protected AAC, HE-AAC, MP3 (8-320 Kbps), MP3 VBR, Audible (formats 2, 3, 4, Audible Enhanced Audio, AAX, and AAX+), Apple Lossless, AIFF, and WAV. For the supported video formats, they include H.264 video, m4v video,.mp4 video,.mov video; MPEG-4 video. It is not difficult to find a free audio/video converter from the internet to convert the unsupported formats into the format it supports, as iphone devices are so popular nowadays. Equipment: 1. A Macintosh computer with iphone SDK installed. 2. An iphone device such as iphone or ipod touch. 3. ipod USB cable. Multimedia on iphone 1

2 Duration: The duration of this training lab session is about 1.5 hours. Procedure: 1. Download the file lab5.zip from the server. Extract it to your Macintosh computer. 2. In the zip file, you can find the folder called accelerometer. Open this and open 2: 9 20/,.4/0574. It is the template for this lab session. A UIImageView Object 1. First, the methods for adding images to the application interface will be introduced. Open Groups & Files > Classes > multimediaviewcontroller.h, we should define the & 2, 0' 0 :9 09 objects inside 39071,.0. Remember to save your work. 2. To add image files to the xcode project, what we need to do is simply drag-and-drop the image files from Finder to Groups & Files from the Xcode. Click add afterwards. Multimedia on iphone 2

3 3. After that, open Group& Files > Resources > multimediaviewcontroller.xib, add 3 UIImageView objects to View. 2 & 2, 0' 0 objects should have the size of 100x100px while the third one should have the size of 190x210px. You can edit these information from Inspector > Image View Size > View Size > Size & Position, which is on the right hand side of your user panel. 4. Select File s Owner, and then select Inspector > Multimedia View Controller Connections, try to link the & 2, 0' 0 objects in the interface builder to the :9 09 objects defined in 2: 9 20/,' Save your work afterwards. Multimedia on iphone 3

4 5. There are 2 methods to put an image into a & 2, 0' 0 object. The simplest method is to define it directly in the interface builder. Now, open 2: 9 20/,' , select 2 by click the object once. After that, select Inspector > Image View Attributes > Image View > Image. Click the drop down menu, to select You can do the same for the & 2, 0' 0 object Another method for declaring the 2, 0 value of a & 2, 0' 0 Object is using programming language in Xcode. In the function ' 0 / 4,/, add the following line of code, which can define the 2, 0 value of the & 2, 0' 0 Object 2 : Multimedia on iphone 4

5 7. Now, you may try to view your product on your iphone device. Select iphone Device and then click Build and Run. You should see 3 images are displayed on your iphone device. B Audio 1. In order to play an audio file in iphone application, we need to include a framework called :/ 4% , Right Click Groups & Files > Frameworks, select Add > Existing Frameworks, select :/ 4% ,20 47, click add. Multimedia on iphone 5

6 2. After that, open 2: 9 20/,' , add the following line of code to the header file: 3. Open 2: 9 20/,' , there is a self-defined function called 9,5!, :/ 4:9943, it controls the activity after the user taps,:/ Complete the function by copying the missing part to your file: 4. Please note that 8,25 0,; is already added in the xcode project. Save you work. Click Build and Run to see if the audio can be played. C Video 1. In order to play video clips in iphone application, we need to include a framework called 0/,!, 0717, Right Click Groups & Files > Frameworks, select Add > Existing Frameworks, select 0/,!, 0717,20 47, click add. 2. After that, open 2: 9 20/,' , add the following line of code to the header file: Multimedia on iphone 6

7 3. Open 2: 9 20/,' , there is a self-defined function called 9,5!, ' /04:9943, it controls the activity after the user taps ; / Complete the function by copying the missing part to your file:! "#! # $ "# % #! & ' ( )! * * +! ( ( 4. Please note that 8, is already added in the xcode project. Save you work. Click Build and Run to see if the video clip can be played. - End of Lab 5 - Multimedia on iphone 7