Displaying date from a date picker in xCode

Our professor, Dan, introduced us to xCode, Interface Builder and the iOS Simulator in one of our last few Multimedia Pioneering classes. These are the main development tools for the IOS platform. xCode is a code editor also known as IDE (Integrated Development Environment), which is quite popular amongst the Mac users and is normally used to develop applications. Interface Builder allows us to create interfaces visually. There are built-in buttons, sliders and tab-bars etc that can be dragged onto your application interface. They can be customized to your preference, through color palettes and different panels.

iOS applications are developed in objective-C using the Cocoa framework (it is Apple Inc.’s API for the Mac OS X operating system). iOS applications have an AppDelegate, which acts as the main application class. The various screens of the application viewed by the user are comprised of UIViewControllers that manages several views. The classes folder consists of “.h” file, as well as, “.m” files. “.h” file is where we declare all our methods and properties, and are then integrated in the “.m” files.

In class, we decided to display a date from a built-in component, date picker (myPicker), on to a textfield (myLabel).  We open up DateViewController.h file, which is located in the classes folder, and add the properties and instance variables that we are going to use for our application. Comments are in red color and code is in black (Bold).

//We start off by importing the ukit.h file, which is a user interface kit that is responsible for providing all the visual graphics for the iPhone, such as, windows, text boxes, multi-touch gestures etc.

#import <UIKit/UIKit.h>

// * is a syntax to declare a variable. In this case, we have “*myLabel” for the UILabel and “*myPicker” for UIDatePicker.

//@interface says that this is a declaration of the class viewViewController.  The “:” (colon) specifies the superclass.

//IBOutlet – When you create an object to be visible, you use the keyword IBOutlet, for example: IBOutlet UILabel *myLabel;

@interface viewViewController : UIViewController {

IBOutlet UILabel *myLabel;

IBOutlet UIDatePicker *myPicker;

}

//The @property declares the property.

//The “retain” in the parenthesis specifies that the setter should retain the input value.

@property (nonatomic, retain) IBOutlet UILabel *myLabel;

@property (nonatomic, retain) UIDatePicker *myPicker;

 

// ” -”  A single dash before a method name means it’s a instance method.

//setDate method is added and needs to be tagged as an IBAction, in order for it to be recognized by the interface builder. IBAction alerts Interface Builder that “setDate” is an action for target/action connections. IBAction could also be known as an action method or “private function” in the as3 script.

– (IBAction)setDate:(id)sender;

//@end symbol ends the class declaration.

@end

We then open our DateViewController.m, which is known as the implementation file. It contains the actual code for the methods. Here we will add the following code..

@implementation viewViewController

//@synthesize tells the compiler to create accessor methods for each @property declaration. In this case, it created for myLabel and myPicker.

@synthesize myLabel, myPicker;

DateViewController.m has many methods that are commented out and are not necessary for what we are doing. The only one we need to uncomment is the viewDidLoad method.

//ViewDidLoad method is from our viewController class. This method is called, whenever the view is loaded.

– (void)viewDidLoad {

[super viewDidLoad];

//NSLog is like trace in as3 script.

NSLog(@”Hi from viewViewController”);

}

– (IBAction)setDate:(id)sender {

//NSlog logs messages to the console in Objective-C . The NSLog() function adds %@ token for objects. The NSLog function calls the description method on the object, and prints the NSString which is returned.

NSLog(@”date picked = %@”, myDate);

myLabel.text = myDate;

// NSDate inherits from: NSObject. It stores a date and time that can be compared to other dates and times. In this case, it stores the date in the myPicker and adds it to myDate2. This will display the date the user has picked and it displays it on the label field (myLabel.text).

NSDate *myDate2 = myPicker.date;

myLabel.text = myDate2.description;

 

Links

The links provided at the bottom are researched very carefully. If you go through these as I have them listed, it will definitely help you learn what you need for app development. Some of them do overlap a bit but provides a lot of detail.

1) This link is one of the best ones I could find. It is a pure theory based website that provides us with an overview on not only xCode and interface builder but also what programming and objective-C is. It is also goes through the MVC (Model, View, Controller) framework. It is a good refresher for people who are getting back into programming again and will pick it up quickly.

http://designthencode.com/scratch/

2) Although Dan went through the steps with us in detail, but this website allows us with a step by step process, starting from, how to register with Apple, to installing xCode, and learning all the fundamental tools of app development.

http://mobile.tutsplus.com/series/beginning-ios-development/

3) Here is a good website, that provides us with a good visual walkthrough of xCode and Interface builder.

http://www.ifans.com/forums/showthread.php?t=137183

4) Here is a good tutorial that specifically goes through creating To-Do list with SQL lite. The reason I have added this tutorial is because we have looked briefly into SQL lite (database engine) in our Application Development 2 class.

http://www.xcode-tutorials.com/creating-a-to-do-list-using-sqlite-part-1/

5) Wow, such a cool link. This guide allows us to convert our single-language applications into multilingual application. A replacement of country code is needed into the resource files. I think you will understand what I mean, once you read this article.

http://www.icanlocalize.com/site/tutorials/iphone-applications-localization-guide/#1

6) I just wanted to add one more website to the list, which I feel will be helpful in organizing your workspace. This website also provides us with fourteen essential tips, tricks, how-tos and resources needed for iPhone development in xCode.

http://mobileorchard.com/14-essential-xcode-tips-tricks-and-resources-for-iphone-devs/

Android Packager

Android Packager allowed us to install are flash-created applications onto the Android phone/tablet.  I think the main goal of these sorts of assignments is to get the installation process correctly.

Installation Process

Dan provided us with a step by step process to create an Android emulator as well as the Adobe Air onto Flash CS5. After downloading the android program, we went on to install it and then downloaded a few packages from the emulator creation window and created a new emulator. We tried out several Android emulators, but the one that worked the best was the 2.2 version. We then downloaded the Adobe Air SDK 2.5, from which we took the runtime.apk file and copied it over platform-tools folder of the android. We went into the DOS window (PC) and went through a few steps to successfully install the android emulator device.

PC vs MAC

At home, I tried the steps on Mac and was quite successful in installing my application. The process was exactly the same as it was for the PC.  However, when I was installing the iPhone package from my mac, it was alot easier then it was to do it through the PC.

Android Package vs iPhone Package

I felt that the installation process of the iPhone package was alot more professional  then compared to the Android process, which I felt was an easier one but a lengthier one. We did had to go through more steps in creating the iPhone then the Android.

Here is a good blog article, which gives a clear and concise breakdown and key differences between the Air for Android and IOS Packager capabilities.

http://floatlearning.com/2010/10/key-differences-in-air-for-android-and-ios/

Here is an article that talks about Flash being slightly faster on an Android.

http://jobemakar.wordpress.com/2010/04/18/flash-is-speedy-on-android/

This articles provides us with two different steps to install Android Package files onto the Android. The second process provided is exactly the same as what we followed.

http://yuwienetwork.blogspot.com/2011/01/two-ways-to-install-apk-android-package.html

 

Overall Experience

It was a challenging process to go through but a great process to learn for future use. I think i am confident enough to say that I can create an application and successfully move it onto an Android phone.

 

Sending Dexter to the iPhone.

Well, where should I start with this one? Hmmm? I’ve had a love and hate relationship with this assignment. I can’t believe how excited I was to see myself learn how to convert and transfer our flash project to the iPhone, but at the same time I found myself so frustrated. Initially, I couldn’t even get a simple flash file to transfer over to the iPhone, even after following all the steps correctly, anyway, more on that later. Lets start at the beginning…

Dan went through with the steps of creating a certificate in class. We were then able to download the certificate from the IOS DEV center at the Apple’s Developer website.  Provisioning files were also downloaded from the website, which are used for testing on specified devices. Devices were then added on as well, in the Devices section. The certificate was then converted to .p12 format file, so that it could be used for publishing.

I decided to upload my “Save Dexter” (Tilt project) to the iPhone. I just felt that it would be a great idea to try out my game and actually use the iPhone to tilt rather then the penguin emulator. I thought it would be a great choice for me to show it off at the Open House. Personally, thought I did a decent job with it. It had decent graphics and the game play looked smooth.

Problems and Troubleshooting

I ran into problems, while publishing even a simple test file. I created a small rectangle in flash and published it as an .ipa format, for the iPhone.  I dragged it to the iTunes and synced it up with the iPhone. I was able to upload it perfectly but when I decided to replace or add another app on to it, I was not able to do that.

I received an error during the syncing process in the iTunes. The error message was something along the lines of…”the application does not have a valid entitlement.” It was quite frustrating because I followed exactly the same steps that I did the first time around but I was not able to get it on there. My classmate, Kim and my Professor, Dan, helped along the way and we went through the process together but were not able to figure it out.

I kept on playing around with the “publish” settings in Flash. I clicked on the “publish” settings under File. The “publish” window popped up, and then I went to the “Flash” tab and changed the “player” to iPhone IOS. Normally, you DON’T have to do this. You could just click on File > iPhone OS Setting and publish it from there, it is the same thing but for some odd reason, it didn’t work for me. Anyway, I kept having the same problem throughout. It would work for me sometime and sometime it wouldn’t.

Eventually, I was able to put Dexter on to the iPhone but my Tilt wasn’t working because I used the Penguin Emulator for the project before. I imported the Accelerometer class and created a new Accelerometer object. Some how I was just not able to figure it out.

HERE IS PARTS OF THE CODE THAT I USED.

Accelerometer class.

import flash.sensors.Accelerometer;

import flash.events.AccelerometerEvent;

 

In the public class…

private var myAcc:Accelerometer = new Accelerometer();

Added the EventListener in the constructor code…

myAcc.addEventListener(AccelerometerEvent.UPDATE, doTilt);

 

In the function doTilt() I added…

private function doTilt(e:Event)

{

moveX = e.accelerationX;

moveY = e.accelerationY;

}

Conclusion – I’m quite disappointed with how this assignment went for me. The error of uploading on to the iPhone really set me back and was not able to get it to work perfectly like I usually do for all my projects.  Eventually, I was able to put it up on iPhone but was not able to make the tilt work in time.

 

Here are a few great links that I looked up…

Testing the iPhone packager in Flash CS5

The first one in particular is related to our project. It talks a blogger’s experience using the iPhone packager. He used the Tweener class for the effects. He also talks about his experience with the Accelerometer Class, which is, actually, new in the AS3.

http://labs.makingwaves.com/2010/03/24/testing-the-iphone-packager-in-flash-cs5/

Developing games using Adobe Packager for iPhone

Here is another great blog about game development for iPhones. The blogger talks about his experience and specifically, talks about the multi-touch code. It is something that I also wanted to use for my project.

http://csharksgames.blogspot.com/2010/11/developing-games-using-adobe-packager.html

 

Packager for iPhone: Render Performance

Here is a great article that talks about the Render performance in the iPhone. It is an in-depth tutorial about the vector vs bitmap performance in the iPhone. Really would ask everyone to go over this tutorial. It would allow people to get the best results on to the iPhone.

http://www.yeahbutisitflash.com/?p=986

How to use Adobe’s iPhone Packager without an Apple Developer Subscription

Here is a step by step process of how to use Adobe’s iPhone Packager without an Apple Developer Subscription. You need a jailbroken iPhone for this though but good and informative steps.

http://www.instructables.com/id/How-to-use-Adobes-iPhone-Packager-without-an-Appl/

 

WA 1 – Final Assignment – Final Blog

Wow! My last “Web Authoring I” project, and boy was this one interesting. I created an mp3 player, which might be easy enough for some but for someone who has no experience prior to this course, it was challenging. I was thinking of creating a game at first, but felt I have created one for the tilt assignment in Multimedia pioneering. Fresh out of our club project, I was influenced by sound and being a music lover, it seemed like a natural move to do something music related. I decided to create a customized mp3 player, where you can change your backgrounds by the buttons provided at the bottom.

Understanding the Classes

There were hundreds of tutorials on creating hundreds of different mp3 players with hundreds of different methods but nothing that made me understand the concept on why we used some of the classes that are available in actionscript 3. I just wanted to break it down to the simplest task, such as creating a simple mp3 player, building a sound spectrum and then customize it to my own liking. I think my understanding became a bit easier because I was already looking at sound recorders and note detection and many different classes and methods such as microphone class to help us understand, well, “sound,” in Flash and it has been a great learning experience for me. SoundMixer class was a method that has been introduced in AS3. It gives us a method called computeSpectrum that takes a shot of the existing sound wave and inserts it in the ByteArray Object.  There are fixed floating values of 512, with half of them representing left channel and the other half representing the right channel. Lastly, it was the SoundTransform object that set up the volume, right speaker and left speaker. Adobe provides a good example on how to create a spectrum and was very helpful to me. I have to say that Adobe.com is a great website, they broke everything down to the last tiny bit, made it easier for a noobie like me, to understand it.

Troubleshooting

The problems that I did face were figuring out how I can allow the user to play their own songs on to the mp3 player and the other concept that I could not figure out was how I could have an interactive background for my mp3 player. User can interact with it and while listening to songs. I tried creating just a moving background, and importing it as an swf file in my mp3player.fla and calling it through my library but it did not work. These are the few things that held me back but I was very relieved with the final product.

Design

I have created all the designs in Illustrator. Creating different backgrounds for different kinds of moods and songs.

Conclusion

Web Authoring I, has definitely been a learning experience for me and definitely a challenging one. At times I find a few things to be really easy and sometimes I find them to be really overwhelming. I noticed that I enjoy it a lot more when I do a lot of research and breaking everything down. Hopefully, I will wrap my head around programming a lot quicker in the next few months to come. I really want to do well in this class and I just hope I keep at it. I’m also looking forward to creating our portfolios as well.

 

I have uploaded my swf onto the imm server. Here is a link to it

http://imm2.sheridanc.on.ca/~shahidja/wafinal/mp3player.swf

 

Multi-User Project – “The Love Slide”

Yes! It is what it sounds like but more on that later. Lets start with a little explanation on Robin, which is actually a Flash and PHP multiuser server system. Robin lets you code and create multi-user games and chat rooms.

This project was a quick one, but definitely an interesting one because I got to learn and play with multi-user technology and most importantly I got to customize it.

Concept

So the concept is a funny one, well depends on how you look at it. The term is about to come to an end and we are all very tired. So I decided to humor myself a little. So the name of the program is “The Love Slide,” it is what it sounds like. It is actually based on an old rock song, written about sex. I decided to look for some tribal symbols, mostly tattoos actually, one, which represents a penis (the arrow head one) and the other, which represents a vagina (the red one). Each user controls one of them. Once, you get those two symbols together, you see a bunch of sperm on screen. Please don’t hate me Dan! It is just an idea! : )

Design

The penis and vagina symbols, as well as the sperm were created in adobe Illustrator.

Troubleshooting

Boy did I have a hard time making ROBIN work! The key was to follow the steps exactly how you taught us to do but at times, you still sort of miss things but I’m glad I’ve been taking notes and it helped me get through some of the problems I was having. The other problem I was having was scaling the symbols. I wanted them to remain a specific size, when the users would move them around. The problem I was having was that they scaled way too large when the users brought them close to each other. I figured it out by simply importing the symbols to a size that I wanted and that helped the size remain consistent. The other problem, that pretty much, everyone of us was having was that sometimes one of objects would show up and the others wouldn’t on someone else’s computer, but, what we noticed is that it was more of a server issue and the symbols would come and go sometimes. Lets hope, when I show it to you tomorrow, it works perfectly!

Tilt Project – “Save Dexter!”

I have to start by saying WOW! I am loving all the new assignments and features that we are learning in Flash. Starting off with “Motion Capture” and now getting done with “Tilt Technology.”  It is basically, an “accelerometer,” within mobile devices that has the capability to know how your phone is being moved, tilted or shaken. The movement of the phone, is being sensed, and the application or  game then acts accordingly. I think a good example of tilt technology would be looking at an image or a browser in your iPhone. So if you tilt or move your phone in an angle, lets say, in a  “landscape” or “widescreen” type mode, the image or the browser will also change angle accordingly. PhoneSaber is one of many tilt technology applications that you can take a look at. The iPhone accelerometer  detects the movement of the phone and matches it with the animated light-saber on the phone. So if you move your phone around, you can see the movement as well as hear the sound of the light-saber. Similarly, tilt, is quite popular within mobile games, where the phone itself becomes a controller, which gave me ideas for my project.

Concept

Being a fan of games, I quickly, went into search mode to see what type of game I can make and I liked the idea of the dodgeball game  but I wanted the ball doing the dodging. I just felt that tilt technology gives us a good smooth motion of a ball. I also liked the idea of giving this ball a bit more of a personality, and named him “Dexter.” He is named after a character on a show, also called, “Dexter” that I watch on HBO. He is a serial killer (unlike our Dexter) and  finds himself hiding and dodging the police all the time. I decided that our Dexter would need some spaceships to dodge and a planet that he calls home.  So every time you take Dexter home, you score a point and every time you are hit by an alien spaceship, you loose a point.

Design

FIrst, I decided to design the game in Flash but I found myself a little frustrated because I was not used to drawing out characters in Flash, unless it is absolutely needed. I realized it was taking too long so I decided to go back to my comfort zone, which is Illustrator and decided to export my designs as swf file and import it in Flash. SWF format gave me a nice smooth and rich transition to Flash,  as compared to jpeg or bmp format.

Troubleshooting with Code

I think the problems that I was having were mostly in how to make the spaceships move RANDOMLY and at different times. First, I decided to use a timer and addEventListener to each of the ship. So once a spaceShip does a tween.yoyo, I would call another function to do another tween.yoyo, which kind of worked, but it looked quite awkward. On the other hand, using the tweenlite with yoyo option worked perfectly!. I took my sweet time figuring out the score system though. I found tons of different types of code, and none that I could really understand. I made a rather simple  score system with a hitTestObject option to increase or decrease the score. I’m sure there are many other ways out there, which i will research and make the game better. Overall, I think I am quite happy with my project, and will definitely look into making it into a full game after adding a few new features in the game, like countdown timer, sound and firing bullets.

Source

http://www.emanueleferonato.com/

http://flashpunk.net/

‘Motion Capture’ Blog

The technology that we were introduced to in class was motion-detection. A webcam acts as an input that senses your every movement. For example, you are sitting in front of a webcam, and watching yourself on the computer screen. You wave your finger around, and the cursor on the screen moves with it. Being a gamer, the first thing that came to mind, was the Wii console, which I felt, uses pretty similar, if not, the same motion-sensing technology.  It is revolutionary and has changed the gaming world forever. It heightened my excitement, and I decided to do my very own game. I wanted to combine my love for comic books and games and come up with a superman game. It is a pretty simple concept with superman fighting the bad guys in the city of Metropolis. The users are controlling superman, and are suppose to battle the villains. The users will get to see and hear comic book effects and sounds, as soon as there is confrontation between superman and the villains.

Visuals – As a designer, I wanted to come up with a simple design, which would not be too overwhelming, and would distract the users from the game. I wanted the users to feel that they are looking at an interactive comic book page, which I hope, I achieved.

Coding – There are three AS files that I looked at from Dan’s samples, the OstrichCamera.as, fairy.as and samplebutton.as. These were there samples that were closer to what I wanted to do with my program. The challenges that I had were the use of sprite, movie clip classes and using sound. The other challenge was either using an ‘if statement – hitTestObject’, when superman hits the villain. I figured out that we are not really “hitting” the other object but are motion over it.  I think with some trouble shooting, I figured it all out, thankfully.

– Flight from Sahara, is one of the games that I researched. It not only senses motion but also senses sound. The user motions to move the plane and make noises to shoot at the opposing planes.

– Erick Souza, a flash platform developer, also did a few experiments with motion-detection. Please click here to see some of these experiments.

I went through AS files of other motion-sensing games and concepts, and compared them to Dan’s AS files, in order, to get a better understanding of motion-detection. What I noticed is the frequent use of BitmapData class. From Adobe Help, I gathered that it manipulates bitmap images in various ways at runtime. I have some idea of how it works and also understand the use of this class, depending on the idea we have, but I was wondering if Dan could give us a bit of an explanation of this class.