This template is for the iphone in principle. It can be used for Ipad too.

http://www.contrechoc.com/crosslab/Shaking.zip

The tiltsensor is used to make a circle move, if the circle bounces against the left, right, bottom, top – side, another page is loaded and after a few seconds removed.
With these ingredients, the “wrist exercise” and the 5 images, make an app.
Start with concepting, than making images, and sounds.

The pages shown are the XIB’s, with “portrait”.

The buttons can be used for the simulator, in the real test on a device these buttons can be removed.

is the first download for these two lessons.

This App recognizes the gestures, touch, pinch, rotate.

Some images on the screen can be replaced and scaled and rotated. The assignment is to make a “imaginary world” of this App (replacing the images) and make a story. (interactive Storytelling)

So starting interactive storytelling, you need:

• to play a bit with the app to see its possibilities
• try out to change the images, background, add images to app,  experiment, (images of text?)
• come up with an idea to make a story with the possibilities provided, scenario
• translate your story for the app possibilities and make  images for it, insert the images into the app
• test if your idea works, come up with solutions if not (these solutions might be the best ideas!)
• prepare a performance for your story, make a movie of the performance, upload to youtube

In the second week we will be able to add sounds too, so leave that option open for the moment.

By the way, here you can find example apps, with code: http://appsamuck.com/

Second week:
added are sounds!
and you can get a “tap” image when a shape is tapped:

http://www.contrechoc.com/crosslab/GesturesWithSounds.zip

you have to dig into the code to find the sounds to replace, and the tap images to replace.
adding other shapes is copy pasting of the right lines of code!

making the .caf sounds is like this:
// in terminal windows on MAC
// beam’s-macbook: contrechoc$ afconvert -f caff -d ima4 trill.wav

also if not just replacing, but really adding sounds, you have to add codelines in the ShortSound.m file.

This download has an example with an animated image:

http://www.contrechoc.com/crosslab/GesturesWithSounds2.zip

http://www.contrechoc.com/crosslab/mobile_design2.ppt.zip

First study how newspapers are translated to an Ipad format. Then discover the rotation, portrait landscape versions.

Our first exercise will be to explore the possibilities of newspaper apps and make our own version using this template for Xcode:

Template for use with NIB (interfacebuilder)
http://www.contrechoc.com/crosslab/AlternateViews.zip

Template for use with images in code (and an extra image on touch)
http://www.contrechoc.com/crosslab/AlternateViews2.zip (without battery and viewcontroller bar)

We discover Xcode and have a first go at this daunting program!

We need a few icons:
Launch image (required for all apps)
Iphone:
320 x 480
640 x 960 (high resolution)
Ipad:
For portrait: 768 x 1004
For landscape: 1024 x 748

Application icon (required for all apps)
Iphone:
57 x 57
114 x 114 (high resolution)
Ipad:
72 x 72

This is a link to the User Design Guide:
http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

There were problems using the Interfacebuilder, text shifts and images too…
Getting the basic Portrait and Landscape Views right in size helped (a bit), not always!

After  making the rotating newspapers we will add some Ipad magic!

(The last movie of the presentation, Ipad magic gives us our first ‘art’ – app idea.)

The idea is to make a transparent Ipad, using an image from for instance your head, putting the image inside the Ipad app, and making a photo in with the Ipad in front of your head….other ideas are possible!

But how to use it for your own projects?

The tag images can be found in the project folder, there are two kinds of images, tags with a thin border and tags with a big border. The tags with a big border are used in this code.

After mending “an Xcode issue”: in ARToolKitPlusWrapper.mm

/*!
Private interface for ARToolKitPlusWrapper
*/
@interface ARToolKitPlusWrapper ()
/*!
The Object from ARToolKitPlus library responsible for detecting markers
*/
//ARToolKitPlus::TrackerSingleMarker *tracker;// ----------->commented out here
@end

@implementation ARToolKitPlusWrapper
ARToolKitPlus::TrackerSingleMarker *tracker; // --------------------->added here


But then how to get our own shapes and images in?
Where is this documented? Anyway we found this out:

make a shape in BLENDER, (you have to know something about BLENDER)
add a UV image (after Unwrap etc)
export as an yourFileName.obj file (mind that the shape has to be selected, and use the UV button in the export menu)

This yourFileName.obj file can be converted using obj2opengl.pl which you can find in the folder “tools”, using terminal window, drag in obj2opengl.pl, drag the yourFileName.obj file behind it and press return.

A new file is generated and has to be dragged in the Xcode project, is a yourFileName.h format file (a header file)

In the code:

add a yourFileName.xml file, look at the other what to do, don’t add something in


<ModelFileName></ModelFileName>


also drag the picture to be uv-ed on the shape into the project.

add

#import "yourFileName.h"

in Object3D.m

and add:

else if ([self.name isEqualToString:@"yourFileName"]) {
self.numberOfVertices = yourFileNameNumVerts;
self.vertices = yourFileNameVerts;
self.normals = yourFileNameNormals;
self.textureCoordinates = yourFileNameTexCoords;
}

into Object3D.m, look for the banana to find the appropriate spot!

Also in the 3D Model code group folder, there is an infolist, where you have to add your model, the XML of the model and the tag image number to link your model on.

In the end, the image has to be 512 x 512 pixels, otherwise it won’t show.

have fun, here is the download with our simple BLENDER experiments:
http://www.contrechoc.com/crosslab/omeryavuz-VRToolKit-experiments.zip

Somehow the speed of the AR animation is not too big, is this because of the generated comments? Can it be made to react faster or is this the limit of the Iphone…

Some students noticed the fact that the moving object was not exactly centered. Wessel found the solution. Also the buttons were not corresponding in action with the actual tilt, when the template was played on a device.

So here are the corrections in code:
imageOnBackGround.frame = CGRectMake(self.view.bounds.size.width/2 + 150*accelerationX -45 ,
self.view.bounds.size.height/2 -200*accelerationY -65,
imageOnBackGround.bounds.size.width,
imageOnBackGround.bounds.size.height );//<———————————–

//NSLog(@”tilt %f %f”,accelerationX,accelerationY);//-1.75 +1.75, -1.75 +1.75

ShakingAppDelegate *appDelegate = (ShakingAppDelegate*)[[UIApplication sharedApplication] delegate];

if ( (1 == 1) && (bounceDelayFlag == FALSE) ){
if (accelerationX > 1.00 )
{

[appDelegate.soundEngine playSound : @"nr1" ] ;
myHeighHit++;

delayTimer = [NSTimer scheduledTimerWithTimeInterval: 1.0 target:self selector:@selector(onTimerDelay) userInfo:nil repeats:NO];
bounceDelayFlag = TRUE;
NSLog(@”right” );
[self.view addSubview:fourthViewController.view ];//<———————————–
[fourthViewController startAnimatedImage];

}
else if (accelerationX <-1.00 ) { [appDelegate.soundEngine playSound : @"nr2" ]; myLowHit++; delayTimer = [NSTimer scheduledTimerWithTimeInterval: 1.0 target:self selector:@selector(onTimerDelay) userInfo:nil repeats:NO]; bounceDelayFlag = TRUE; NSLog(@”left” );

[self.view addSubview:thirdViewController.view ]; //<———————————–

[thirdViewController startAnimatedImage]; } else if (accelerationY > 1.00 )
{
if ( bounceDelayFlag == FALSE ){
[appDelegate.soundEngine playSound : @"nr3" ];
myLowHit++;

[NSTimer scheduledTimerWithTimeInterval: 1.0 target:self selector:@selector(onTimerDelay) userInfo:nil repeats:NO];
bounceDelayFlag = TRUE;
NSLog(@”up” );
[self.view addSubview:firstViewController.view ];//<———————————–
[firstViewController startAnimatedImage];
}
}
else if (accelerationY < -1.00 )
{
if ( bounceDelayFlag == FALSE ){
[appDelegate.soundEngine playSound : @"nr4" ];
myLowHit++;

[NSTimer scheduledTimerWithTimeInterval: 1.0 target:self selector:@selector(onTimerDelay) userInfo:nil repeats:NO];
bounceDelayFlag = TRUE;
NSLog(@”down” );
[self.view addSubview:secondViewController.view ];//<———————————–
[secondViewController startAnimatedImage];
}

}

}

The //<———————————– indicator shows the corrected lines of code.

This correction is incorporated in the templates.

http://www.contrechoc.com/crosslab/templates3.zip

Thx Wessel!

Mind the number of closing curly brackets at the end, these have to match the opening curly brackets.

We used Xcode 4.0 for the first time, quite a difference!

All of this is based on touch: witch three standard functions in the ViewCOntroller.m

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
if ( [[event allTouches] count] >= 1 )
{
}
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
}


In the touchesBegan you can store the starting touchpoint and count the multitouch points.
You can count the touching points in the touchbegan and let that decide what to do.

When touchesEnded occurs you can compare the starting point with the end point and conclude if this was a swipe and which was the direction.

This information is then used to change views, get the next page or the last page etc.

A template to play with can be found here:
template5.zip

You can manage these transitions in the template app yourself:
In BaseUIViewController.m,

you can find:

-(void)loadNextView: (UIViewController *)nextViewController : (UIViewController *)oldViewController{

NSLog(@"transition");
[UIView transitionWithView:self.view duration:5.0

options:UIViewAnimationOptionTransitionCurlUp animations:^{


[oldViewController.view removeFromSuperview];
[self.view addSubview:nextViewController.view];
} completion:NULL];


/* UIViewAnimationOptionTransitionNone UIViewAnimationOptionTransitionFlipFromLeft UIViewAnimationOptionTransitionFlipFromRight UIViewAnimationOptionTransitionCurlUp UIViewAnimationOptionTransitionCurlDown */


}
Between the /* and */ are the so called constants for the transition. Between the /* and */ these are comments and not compiled. The

options:UIViewAnimationOptionTransitionCurlUp animations:^{

codeline is where the current transition is called. Just replace the UIViewAnimationOptionTransitionCurlUp
with one of the other transition contents and you’ll see the other effects. Also you can mange the speed quite easily:
[UIView transitionWithView:self.view duration:5.0

change the duration (in seconds, here 5.0) and it becomes faster or slower.

In the template (imagery will be improved) you can also change from ipad view to iphone view in the simulator quite easily by changing this in the project properties. Just indicate iphone or ipad in the line: Targeted Device family

This is so easy because all the views are coded, and there is no design in the NIB’s.

A template to play with can be found here:
template5.zip

in projectview: frameworks -> add existing framework audiotools

copy from another template from this blogs (template4, project Sounds2) the folder sound from this project into your own project

in your own project search for the …AppDelegate.h into the list of files, add the following sentences on the corresponding places:


#import <UIKit/UIKit.h>
@class SoundButton2ViewController;
//this line under import and or class:
#import "ShortSound.h"
@interface PagingScrollViewAppDelegate : NSObject <UIApplicationDelegate> {
UIWindow *window;
SoundButton2ViewController *viewController;
//this line:
ShortSound* soundEngine;
}
//this line:
@property (nonatomic, retain) ShortSound* soundEngine;
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet SoundButton2ViewController *viewController;
@end

then in the corresponding AppDelegate.m
under the line:

@implementation ….AppDelegate
//add this line:
@synthesize soundEngine;


then where you want the sound:

in the headerfile (.h) add:

#import "PagingScrollViewAppDelegate.h"

in the sourcefile (.m)
create a variable: referring to the AppDelegate mentioned above:


PagingScrollViewAppDelegate *appDelegate = (PagingScrollViewAppDelegate*)[[UIApplication sharedApplication] delegate];
[appDelegate.soundEngine playSound : @"sis" ]; //this line actually plays the sound

and finally the last line plays the sis.cav file.

This sis.cav file , for testing , can be copied from the sound template.

How to get a .cav file is explained in Mobile Design 3. (Using terminal window and afconverter)

To change the sounds, make new sounds, drag these sounds in the project, and change the names of the soundfiles in the ShortSound.m file:

We will learn looking into code and search spots where we can hack and modify.

In this image you see the template we will hack and modify. We will not change anything in the coding but the image names. The backgorund is yellow, we can change the background color in:

BasePageViewController.m

where we see in loadView the line of code:

baseView.backgroundColor =  [UIColor colorWithRed:255.0 green:255.0 blue:0.0 alpha:1];

change the RGB values and see what happens.

IMAGE

in the same file we see:

UIImageView* imageOnBackGround  =  [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"crosslab.png"]];

and we can change the image, just by changing the crosslab.png, the image file name , don’t forget to import the new image in the project by dragging it in the window.

We continue with the file:

PagingScrollViewController.m

In the function -(void)addLogo

we see lots of images and texts, all in red in the Xcode window. This red text can be changed!

The names of the scrolling images are hidden elsewhere, we find them in DataSource.m.

This file is a list of images and subtitles, these can be changed in other image names, and subtitles.

Working like this we get a glimpse of the code and how we can fool around trying to modify an existing template.

SOUND

(Making a new template, see soundButton2, i realized again this was more difficult than expected. So play around with this template changing the sounds, and don’t bother to make this yourself….)

Adding sound.

See blog Mobile Design 4 Sounds for the coding.

The sounds are not mp3 or wav. Sounds have to be in the format of Xcode:

You get the right sound files formats using the terminal window:

the command is: afconvert -f caff -d ima4 soundName.wav and the file will be converted.
// in terminal windows on MAC
// my-macbook: contrechoc$ afconvert -f caff -d ima4 trill.wav

The templates we use in this lesson can be found here:

http://www.contrechoc.com/crosslab/template4.zip

We see this action only on the devices, not in the simulator, therefor we need to upload our rapid prototyped apps to the iphones and ipads.

The template has an object in the middle of the screen, which moves when you tilt the device. When it hits a side a “view” is loaded. This view can be opaque, or transparent (showing only pictures or text without the page).

Opaque view can be indicated in the interfacebuilder (or coded).

For this example four views are programmed, which are only shown by hitting a boundary, and removed after a few seconds. So we have one background, one object and four views to play with, and the action of tilting.

To create more dramatics, i have added sounds too. More on these sounds later on in the course. The sounds cannot be added in the interfacebuilder but must be triggered by code. This is just a copy and paste action of the codes for sounds….

To work with the template provided below in the simulator, I have added some buttons to the interface for testing.

The assignment is to practice with this template on the device. To make a short interactive story. This story can be made up of whole pages, or part of pages (using the transparent pages).

This template can be used:

http://www.contrechoc.com/crosslab/templates3.zip

ANIMATIONS

How to replace the animated pictures of the golf flag in the template shaking animated:

You can simply replace the red names of the pictures in the animation.

These animation can be found in all the four ViewControllers. FirstViewController, SecondCiewControllers

SOUNDS (see also next post, for the lines to add to the code)

The sounds can be replaced copying the sound.h and sound.m files in a project (in shaking these are already included).

The sounds have to be formatted in .caf files using the terminal (spotlight: terminal)  and than:

// in terminal windows on MAC
// macbook: contrechoc$ afconvert -f caff -d ima4 trill.wav
// macbook: contrechoc$

so copy paste the:  afconvert -f caff -d ima4 trill.wav

and change the “trill” name.

Drag the resulting sound file in the project. Add or change the name in ShortSound.m

[soundArray addObject:[[SoundEffect alloc]initWithContentsOfFile:@”boei”]];

Playing your sound can be done this way:

use the name of the sound without the .caf. It needs the appdelegate, which has to be declared above.

ERRORS

If you change the code it can be wrong. Xcode gives errors like this:

Clicking the circle right under gives the problems. May be you can solve them looking at the former code. But Xcode can be nasty if you are not used to it.