iPhone Development using Objective C – Xcode

Learn how to make Mobile Applications was one of my main goals in taking Interactive Multimedia program at Sheridan College. Prof. Dan Zen gave us a quick overview of Xcode and we developed a quick application using Date Picker Component.

What is Xcode:
Xcode is a suite developed by Apple, for developing software for Mac OS X or iOS. If you are a registered developer, Xcode can be downloaded for free from Apple Developer website (http://developer.apple.com/xcode/). The Xcode suite includes most of Apple’s developer documentation and Interface Builder, an application used to construct graphical user interface. Objective C is an Object Oriented, C based programing language used to develop most Mac Application and Xcode is based on Obective C.

My Experiments with Xcode:
As I don’t have a Mac I did my experiments with my friend in her Mac. First we created a new Xcode project. The two files in which we coded are .h and .m files. The Interface Builder is where we can see the views and add components.

Code for DateViewController .m file:

// DateViewController.m
// Created by Florence Kwok on 11-03-15.
// Copyright 2011 __MyCompanyName__. All rights reserved.

#import “DateViewController.h”

@implementation DateViewController
@synthesize myLabel, myPicker;

/*
// The designated initializer. Override to perform setup that is required before the view is loaded.
– (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
*/

/*
// Implement loadView to create a view hierarchy programmatically, without using a nib.
– (void)loadView {
}
*/

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
– (void)viewDidLoad {
[super viewDidLoad];

NSLog(@”Hi from IMM”);
}

– (IBAction)setDate: (id)sender{

//myLabel.text= myDate;

NSDate *myDate2 = myPicker.date;

myLabel.text= myDate2.description;

NSString *myDate = myDate2.description;
NSLog(@”Date Picked = %@”, myDate);

}

/*
// Override to allow orientations other than the default portrait orientation.
– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/

– (void)didReceiveMemoryWarning {
// Releases the view if it doesn’t have a superview.
[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren’t in use.
}

– (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}

– (void)dealloc {
[super dealloc];
}

@end

Code for DateViewController.h file:

// DateViewController.h
// Created by Florence Kwok on 11-03-15.
// Copyright 2011 __MyCompanyName__. All rights reserved.

#import

@interface DateViewController : UIViewController {
IBOutlet UILabel *myLabel;
IBOutlet UIDatePicker *myPicker;
}
@property (nonatomic, retain) IBOutlet UILabel *myLabel;
@property (nonatomic, retain) IBOutlet UIDatePicker *myPicker;
– (IBAction)setDate: (id)sender;
@end

Image of Date Picker App:

Links for help:

Posted in Uncategorized | Leave a comment

Packager for Android AIR

Adobe launched Adobe AIR 2.5 in 2010 for devices running Android 2.2. Adobe also released tools for developing Android applications in Flash Platform like Flash Builder Burrito. Prof. Dan Zen introduced me to this technology and with his help I developed some games for Android devices using Flash. I find it easier when compared to iOS.

Few words about becoming an Android Developer:

Becoming an Android Developer is free. Go to http://developer.android.com and download the SDK and install it. You might need to install JDK (Java SE Development Kit) before installing SDK.

Once you install SDK, download components, using the graphical UI of the Android SDK and AVD Manager. The Android SDK and AVD Manager’s Available Packages panel shows the SDK components that are available for you to download into your environment. Once you install the components, launch the emulator where you can test your application. Now go to command prompt and change the directory to ‘Program Files à Android à android-sdk à platform-tools’ and type “adb devices”, which will list the android devices or emulator instances connected to the system.

Now download Adobe AIR 2.5 SDK and install it in flash. I also downloaded Adobe Flash Professional CS5 Extension for AIR 2.5. Grab the Runtime.apk file from ‘runtimes à air à android à emulator’ folder and place it in to ‘Program Files à Android à android-sdk à platform-tools’ folder. Now in the command prompt type “adb install Runtime.apk”. This will put AIR on devices connected, so that your Flash application works on the device. Each time when you connect an Android device or create an emulator you need to type “adb install Runtime.apk” in the command prompt.

My Experiments in Publishing Android app from Flash:

I created a simple app in Flash to test on Android device. I changed the publish setting to Adobe AIR. Under deployment tab I created a certificate. You can key in any name and password for your Certificate. It really doesn’t matter. After publishing, you will get an .apk file of your app. I placed my .apk file in Program Files à Android à android-sdk à platform-tools’ folder and run “adb install appName.apk” from command prompt.  I tested my app in both emulator device (Android 2.2) and in Android device (Viewpad7 by Viewsonic). It was really cool. 

Links for help:

Posted in Technology | Leave a comment

Packager for iPhone – a Flash CS5 feature:

The Packager for iPhone is a feature of Adobe Flash Professional CS5, which offers Flash Developers to use Action Script 3.0 to deliver iOS applications for devices like iPhone, iPad, iPod etc. Flash CS5 has the ability to publish Flash application iOS. As a part of our course, prof. Dan Zen introduced us to this technology and with his help I developed some games for iOS using Flash. This was really a mind blowing experience.

Few words about becoming an iPhone Developer:

Before you start developing applications for iPhone you will need to register in the Apple iPhone Developer program (http://developer.apple.com). There are three different programs you can enrol in. There is free version in which you can download the iPhone SDK and develop apps in your desktop. It won’t allow you to upload the app to an iOS device. The standard program, costs $99/year, allows you to develop applications and distribute in the App store. The enterprise program, costs $299/year, is meant for companies which develop and distribute in-house application.  Luckily as I am a student of Sheridan, I was able to enrol for standard program without paying $99.

iOS Dev Center:

This is the online for your iPhone Development Account. You can download sample codes, user guides etc. from here. Once you login to the iOS Developer Account, it will take you through the necessary steps to get your application on to your device. This portal allows you to create developer certificate and provisioning profile. It also allows you to install your application on to the device.

Flash CS5:

With the ability to publish iOS application, Flash CS5 comes with many features which can be of great use for developing iOS applications.

  1. Accelerometer: Flash.sensors.Accelerometer class gives us the ability to interact with accelerometer in iOS. iOS uses accelerometer to detect rotation, gravity, translation, shake etc.
  2. GeoLocation: Flash.sensors.Geolocation class enables us to interact with devices location sensor.
  3. TouchEvent: Flash.events.TouchEvent class is use to detect when user touches the screen
  4. GestureTransformEvent: The GestureTransformEvent class can detect four different types of gestures: swipe, rotate, pinch and zoom, and pan.
  5. StageOrientation:

My Experiments in Publishing iOS app from Flash:

First I created an Apple development Account. After signing in to the Apple iOS Dev Center, I generated a Certificate Signing Request to obtain Developer Certificate. Then I installed OpenSSL and convert the certificate to a P12 file.

In the provisioning portal I added the device using its UDID (obtained using iTunes) and created an app ID.  After this I created a provisioning profile using the app ID and the developer certificate. Provisioning profile allows you to test specified app on a specified device using your specified developer certificate. To test more than one app you need to create more provisioning profile.

In Flash I created a new file using iPhone OS. I created a small Pacman game using accelerometer class. In iPhone OS Settings, under General tab I added included files like .mp3 files and .swf file. Under Deployment tab I added my development certificate and the Provisioning profile. Under Icons tab I added the .png image as icon for my app. Once I hit publish, an .ipa file is created. I dropped this file under the apps tab in iTunes and synch it with my iPod. I was really excited to see my first game on iOS.  

Here is the video link for my Pacman game demo :

 

 
Links for help:
Posted in Technology, Uncategorized | Leave a comment

My Experience with Robin Technology

“Robin” is an amazing flash technology with which we can develop multiuser games or application without any complex server scripting language. This technology is developed by our Program Co-ordinator, Dan Zen.

Few Words about Robin Technology:        

Robin allows us to develop multiuser games, applications and chat in Adobe Flash. It is a set of classes in flash, which helps a flash developer to develop multiuser system without any complex server scripting. The backend coding of robin is done in PHP.

This is the Flowchart for Robin Technology

For more details about Robin Technology, samples, code and video, go to http://robinflash.wordpress.com 

My experiments with Robin Multiuser Technology:          

I created a small game using Robin. My game involves the player helping  Jerry, who is being chased by tom, to reach his home. I used the code from love.as. You can find love.as file inside the “Download Robin ZIP” file in http://robinflash.wordpress.com  . I replaced guy with Jerry and girl with Tom.

The first user who connected to the server can move Jerry and the second user can move Tom. Whenever Tom hits Jerry a message pops up.

When Jerry reaches his home a Thank you message will be displayed on the screen.

Posted in Technology | Leave a comment

My Experience with Penguin Technology

I got introduced to a new Technology called “Penguin”, as a part of our course, Interactive Multimedia. This is a very interesting piece of code created by Prof. Dan Zen, with which we can develop “Mobile Tilt Games or Applications” in flash.

Few Words about Penguin Technology:        

Penguin Technology allows us to emulate mobile device rotation and translation in Flash so that we can develop Mobile Tilt Games or Application.  

Penguin Technology comes with a Penguin Tilt Emulator. This creates tilt data and stores it as an XML file on your machine. Penguin is a simple class that retrieves XML which provides tilt and translation of the device.  An event is triggered when any of the properties (roll, pitch, yaw, forward, right or down) is changed.

 

For more details about Penguin Technology, samples, code and video, go to http://penguinsflash.wordpress.com 

Penguin Technology and Accelerometer Class:

Flash 10.1 introduced a new user interface feature called Accelerometer which also supports tilt. The Accelerometer Class is currently only available for AIR 2, Flash Player 10.1, Flash Lite 4, and iPhone Flash apps. On Android phones you will only be using this feature if the phone runs Flash Player 10.1.

  Penguin Technology Accelerometer
Class Custom made class by Inventor Professor Dan Zen com.danzen.interfaces.penguin.Penguin Introduced in Flash 10.1. flash.sensors.Accelerometer
Test Emulator Penguin Tilt Emulator Flash Emulator in Device Central
Events Event.CHANGE AccelerometerEvent.UPDATE
Properties roll, pitch, yaw, forward, down, right accelerationX, accelerationY, accelerationZ

My experiments:

I created a small tilt game using Accelerometer class. I tried making a simple version of the old Pacman Game(credited to Namco Ltd.), where all motions of Pacman is controlled by tilting the device.

In order to check whether the device has accelerometer capabilities, you need to retrieve the  “.isSupported property” of the Accelerometer class. The value of this property is true if it is supported, and false if it is not supported. In order to see or test the game on the emulator, go through Control ->Test Movie and make sure that in Device Central is checked.

 Two classes we need to import into the project to use Accelerometer are:

import flash.sensors.Accelerometer;
import flash.events.AccelerometerEvent;

In the AccelerometerEvent.UPDATE method, the Accelerometer sensor properties, accelerationX and accelerationY  are stored in two variables.

moveX = -e.accelerationX;
moveY = e.accelerationY;

In the ENTER_FRAME event method, x and y properties of Pacman is constantly updated to the value retrieving from Accelerometer sensor. Thus x and y properties of the Pacman is controlled by tilt motion.

pacman.x += moveX * speed;
pacman.y += moveY * speed;
if (moveX<0) {pacman.scaleX = -1;}     //to flip Pacman
if (moveX>0) {pacman.scaleX = 1;}

I randomly placed some popcorn on the stage. When Pacman hits each of the popcorns, the popcorn disappears and the score increment by 10.

for (var i:uint=0;i<candyNum;i++){
            if (pacman.hit.hitTestObject(candyArray[i].hitBox)){
                        if(this.contains(candyArray[i])){
                                    this.removeChild(candyArray[i]);
                                    scoreUpdate();
                        }
            }
}

There is a countdown timer and the game will be over when time is over or Pacman finish all popcorns.

Posted in Technology | Leave a comment

My Experience with Ostrich Technology

I am an Interactive Multimedia Student at Sheridan College. As a part of our course I got introduced to an amazing technology called “Ostrich Technology”, created by our Program Co-ordinator, Dan Zen. This is a very interesting and entertaining piece of programming that can be used to create interactive gesture apps.        

 Few Words about Ostrich Technology:        

 Ostrich Technology allows us to locate motion using Flash and a simple webcam. Some of us may be familiar with similar tech concepts used in gaming consoles like Wii, Xbox and PS3.         

 Ostrich Technology captures motion by calculating the difference between colour in adjacent video frames. It subtracts each point of frame colour with the next one. When there is a colour difference there is a motion. Then a threshold is calculated and changes the colour to green. There is a method in Flash by which we can create a rectangle arround the green colour. This rectangle is called “Motion rectangle” and cursor is placed in such a way that it is always on the top left of the Motion rectangle.  Thus you can make things follow your motion or create buttons which trigger when things rollovers or holds over the button.

 For more details about Ostrich Technology, samples, code and video, go to http://ostrichflash.wordpress.com      

  My experiments with Ostrich Technology:          

 I created a small game using Ostrich. My game involves the player helping  Jerry, who is being chased by tom, to reach his home. I combined the code from fairy.as and samplebutton.as. You can find fairy.as and samplebutton.as files inside the “Download Ostrich ZIP” file in http://ostrichflash.wordpress.com  . I replaced Fairy with Jerry and made Tom to follow him by giving a damping effect to his movement.

Code I used to give damping effect is :

 //make Tom to follow Jerry with a damping effect
   var damp:Number = .1;
   var differenceX:Number = jerry.x – tom.x;;
   var differenceY:Number = jerry.y – tom.y;;
   tom.x = tom.x + differenceX * damp;
   tom.y = tom.y + differenceY * damp;

I used onHold method of OstrichButton to display new screen once Jerry reach home.

                         

 

         

     

     

     

            

       

       

                  

 I used OstrichCursor and OstrichButton in developing this. Jerry is attached to the OstrichCursor and Tom follows Jerry.Jerry’s home is a OstrichButton and once Jerry reaches home, the game is over.  

 

 

 

Posted in Technology | Leave a comment