Next Metro Main Features

Complications

Complications get their name from the traditional watch industry and mean anything on the face that isn’t the (main) time. I like to think of them as glances as you glance down at your watch to see them. Now Apple also has Glances, but they’re a forgotten, (at least miss-named) feature of the watch. It’s not a glance if you have to swipe through 5 screens to get to it. We do have a glance for Next Metro, but it’s not something that gets used much.

Despite their name, Apple watch Complications are supposed to be easy. In fact, they’re not. Well they are, but they aren’t at the same time. There’s a bit to understand to get them working in the way you intend and a fair few methods that need to implemented correctly to get them working. It would be a whole blog post in itself to explain, but the important stuff is:

• The start time for the next complication is at the end time of the previous event, not the start time for the event, important to counting down to the Next Metro.
• Implement every callback and request (there’s a lot) otherwise your complications will stop working after a period, like when the initial returned events run out
• Complications can be updated based on users location and external events, so keep them current
• There is a limit as to how often you can update a complication, although its undocumented, so update only when you have to. It’s also expensive, battery wise so think about the user too. We update the Next Metro complication when a location update triggers a jump to a new journey. It’s not as responsive as it should be, but works most of the time.
• There’s nothing saying that each complication type has to show the same information, you can customise the amount and even what you show per complication style. That way two complications can be shown simultaneously on a watch face from your app showing different information
• Use NSDate.distantFuture() for getTimelineEndDateForComplication if you have events that never end (like a Metro Timetable).
• It’s not possible to combine TextProviders using Swift (as of writing). Use this Obj-C workaround for now if you want say a CLKRelativeDateTextProvider combined with CLKSimpleTextProvider.

3D Touch Shortcuts

The ability to jump to a place in an App from a shortcut on its icon is one of the best new features of the iPhone6S + iPhone6SPlus devices (just behind Live Photos). It can really speed up your access, from making a quick phone call to diving right into writing a new email. Next Metro has this feature implemented but takes it further. We order your journeys based on the distance from the start station and use this information to update the 3D Touch shortcuts to link you directly to your nearest journey. This feature is not something we’ve seen being used very often, or well, but used correctly it takes the shortcuts to the next level of immediacy and relevance. To do so, simply update UIApplication.sharedApplication().shortcutItems when you get an update (location or information). Here’s a full guide to how to get this working.

Searchable

The final ‘cool’ feature of Next Metro is the ability to search for your journeys as they’ve all been indexed (CSSearchableIndex.defaultSearchableIndex().indexSearchableItems) and NSUserActivity when you are navigating the App so terms like ‘metro monument’ or ‘next central’ will show up in your search results and allow you to deep link directly to the journey within the Next Metro App. The next stage for this is to update the content with the next metro information in real time to make it even more useful.

When it was first announced we used it for an initial App for kids, Peek-A-Boo so when we had an idea for a new game we turned straight to SpriteKit.

Some of the drawbacks to using SpriteKit mean you are limited to targeting devices running ios 7+ and you can’t (easily) port your product to Android, but for ease of use and speed these compromises are worth it.

SpriteKit for Prototyping
If you have an idea for a 2D game then SpriteKit is a great tool for getting something up and running very quickly. You can use its easy to use animation and sprite systems and combine them with the input control provided by gesture recognisers.

Audio
Sound in SpriteKit is also very easy and slots nicely into the Action engine. Sounds are added to nodes and run as an action just like any other. It means they can be combined into an action sequence, or played independently. Importantly, sounds can be flagged as instantly completed, or following actions can be forced to wait until the sound has completed, meaning you don’t need to worry about the length of the sound.

Art Style
For Monster Tower we wanted to create a hand drawn style to give it some character. Initially Gareth, our talented artist turned to his Wacom and did what he does best. The results looked interesting, but lacked soul. So Gareth whipped out some old school Crayons and paper instead. The results were great, suddenly the game came to life. We wanted to try and push the style further so tried using SpriteKits inbuilt sprite sheet animation action to give the characters some movement. Gareth redrew the same sprite a few times and we animated between them. Initially the difference between the frames was too much and it look jarring, but with some trial and error with both the assets and the frame rate we got a result we are really happy with.

Fonts
A problem created with the animated texture approach for the style was that suddenly anything that wasn’t dynamic looked out of place. Although we ignored the text for a while, for lack of a good solution, eventually it stood out too much and needed to be tackled. We explored creating our own font, but found some good free hand drawn fonts we were able to use. Some of the things we tried to blend the fonts in included changing the colours of the SKLabel, randomly adjusting sizes and positions of the text along with changing the strings from capitals to lowercase on a timer. Changing the case of the text worked best, but still looked odd as everything was changing at the same time just didn’t look “right”. Eventually we had to bite the bullet and do away with straight SKLabel nodes as they weren’t flexible enough and we created our own variation. These consisted of an skspritenode that had many sklabelnodes, one for each character of the string. This meant we can loop through and adjust the individual characters position, size and case independently to create movement that is more fluid and fitting for the style of the rest of the game.

To finish the effect off we did go in and adjust some of the font characters to polish the effect off. We ended up with a flexible system that could replace any text throughout the game.

UIFont *customfont = [UIFont fontWithName:@"font name" size:16]

If it’s still not working then check the string you’re using for the font. It has to match what font name XCode has for the font, not the font’s name or even what Font Book says the name is for the font. Here’s an easy way to log all of the fonts included in your project and therefore use the correct reference:

for ( NSString *familyName in [UIFont familyNames] ) { NSLog(@"Family %@", familyName); NSLog(@"Names = %@", [UIFont fontNamesForFamilyName:familyName]); }

Easy.

Here’s some more discussions on Stack Overflow with various other problems and solutions.

Create an array of as many colours as you want and set-up your array index in your view (we did it in viewDidLoad but it could be anywhere)

self.backgroundColours = [NSArray arrayWithObjects:
[UIColor colorWithRed:64/255.0 green:70/255.0 blue:69/255.0 alpha:1],
[UIColor colorWithRed:221/255.0 green:71/255.0 blue:77/255.0 alpha:1],
[UIColor colorWithRed:221/255.0 green:77/255.0 blue:117/255.0 alpha:1],
[UIColor colorWithRed:227/255.0 green:124/255.0 blue:168/255.0 alpha:1],
[UIColor colorWithRed:228/255.0 green:136/255.0 blue:115/255.0 alpha:1], nil];

self.backgroundLoop = 0;

Then create an animateWithDuration function that calls itself:

- (void) animateBackgroundColour
{

	if (self.backgroundLoop < self.backgroundColours.count - 1)
	{
		self.backgroundLoop ++;
	}
	else
	{
		self.backgroundLoop = 0;
	}

	[UIView animateWithDuration:4 delay:0.5 options:UIViewAnimationOptionAllowUserInteraction
					 animations:^(void)
					{
						self.backgroundView.backgroundColor = [self.backgroundColours objectAtIndex:self.backgroundLoop];
					}
					 completion:^(BOOL finished) {
						 if(finished)
						 {
							[self animateBackgroundColour];
						 }
	}];
}

And that’s it. The UIViewAnimationOptionAllowUserInteraction is important so that input can be used for the rest of the interface as by default when an animation is playing interaction is disabled. You can include as many colours as you require. If you need to stop the animation then either call:

[myView.layer removeAllAnimations];

Which will remove all of the animations currently playing, which is fine if this is the only one. Alternatively you can start a new , very short, animation on the background colour that returns it to its original (or new) state. This will override the looping animation nicely. Here’s a few tricks people have used to do this very thing, you may find one or more works for your situation.

Many hours of research, hair pulling and frustration later it became clear that the Closed Captioning world is a broken, horrible place to be. We had the videos, we had the transcript but there seemed no way of putting them together in a timely and cost effective fashion. The business model in the closed captioning world (like many others) is make it really complicated so that you either have to pay someone to do it (at a cost of around £10 per minute of video) or buy software with a price tag on multiple thousands that although sounds like the saviour, is actually just makes things even more complex.

The problem? Multiple incompatible formats of subtitles, multiple broadcast formats, all requiring their own solution and no-one place to find out reliable, up-to-date information from. Eventually we got it figured out, a nice in-expense (but not free) way to get your own closed caption service up and running.

Setup

Things you will need:

A Mac
Quicktime Pro 7 (with the SCC Plugin)
Movie Captioner (comes with 14 day free trial, or it’s $99)

And that’s it. There will be other ways and other tools that can do this, but after all our research, this was the best setup. It helped that we had a Mac, and a Quicktime Pro 7 license. If you’ve upgraded to Lion, like we have then you’ll still need to install Quicktime 7 (as well as the installed Quicktime X) as there is no Pro version of X yet and the pre-installed version doesn’t allow you to add closed captions.

Once you’ve got all the above, that’s the hard bit done.

Captioning

We’re going to assume that you’ve got your videos in a Quicktime format (mov works best) if not you’ll need to convert them first (Quicktime can export these and does a great job. It even has inbuilt iPhone settings)

Launch Movie Captioner and create a new project. Import your video in the top left pane and check that it plays back ok. Now time to create the captions.

If you don’t have the captions already, then the tools within the software allow you type them out to the audio as you go, which is a really easy process to do, but we won’t go into that here, check out their tutorial videos for a full run through. However ff you’ve already got the captions in a document then great, firstly copy them into a .txt file, with each caption separated onto a new line eg.

Hello and welcome to my tutorial

In this video I’m going to show you how to create a video with,

closed captions that works on an iPhone.

A couple of things to note here. Keep the captions as short as you can, longer ones can cause problems later. As a general rule, each Caption line can only have 32 characters on and there can be 4 lines per caption. So if you have particulary long captions, then you might find it easier to split them here than within Movie Captioner later.
Also the txt file has to be formated as UTF-8 encoding (from the format menu in TextEdit and if you’ve copied the text in from a word processing document then they’re might be some funny characters in there that aren’t recognised by Movie Captioner. If this happens you’ll end up with odd question marks within the captions or missing captions all together. Then you’ll need to go though the txt file and replace errant characters (usually quotation marks, speech marks and apostrophes) and do a find and replace, and simply replace them with a character typed from your keyboard directly into the txt file and this will fix things up.

Once you have your captions in a txt file, then import it into your MC project as a ‘text in line form’ file. Of course, if you have your captions in another compatible format then feel free to use those, but we can’t vouch for how well they will work with this technique.

At this point it will lay out your captions down the right had side, but all with a time code of 00:00:00.00. Before we time out the captions, click on each one, where it will show you a preview of the caption below the video and make sure that all the text has been imported correctly and none of the captions are too long. It’s best to be on the safe side, so if any are getting close to being over 4 lines, then put your cursor where you want it to goto the next caption and split them using the ‘split to next caption’ button under the editing section.

If you’re happy that the captions are correct, then we can start timing them out.

Make yourself comfortable, this bit can go quickly. Select the first caption, put the movie to where the first caption should start, then click ‘Set Timecode’ at the top. This will start the video playing and set the first caption to the current time in the video. It will also select the next caption in the list, so you need to keep up with the audio and keep clicking ‘Set Timecode’ when the caption should come in. Don’t worry if you miss it, just pause the video, set the time to where you want the particular caption to come in and  se the timecode to continue captioning.

Once you get to the last caption, the video will stop playing and you can go back and adjust any captions that aren’t quite right. Either by manually setting the time or by lining up the video and setting the timecode. Be careful if you’re doing things manually as the timecodes need to be sequential. If things get out of order, this can cause problems later.

The only other thing to note here is that Movie Captioner will automatically add in blank captions after the set amount of time you place in the top box so that captions aren’t on screen after they’re necessary. If you need to remove these you can ‘Remove Caption’ from the editing toolbar. You might need to add more in if have lots of gaps in the audio, which you can also do using ‘insert caption’.

Exporting

Check over the timings to make sure you’re happy with them, now we come to exporting. Under the Export menu, choose the Sonic Scenarist (SCC Embed in QT). This will do a few things, run through the captions to make sure they’re are no errors, so if there are any problems you will need to fix them now (usually captions are too long and will need manually splitting further). It will also run through a sequence that involves adding the captions to the movie automatically, using Quicktime.   The result will be a movie with captions. Playback the movie to make sure everything is ok. If you can’t see the captions, make sure ‘Show Closed Captioning’ is turned on under the view menu. If all is good, then save out the movie into a new folder and repeat the process for new movies.

The common things that can go wrong at this point are, the captions appear on a full black screen as garbled text, starting with Scenarist_SCC V1.0. If this is the case, then go back and check the caption timings, making sure there are in order, is at least 1 second between them and also there aren’t two long captions too close together. There’s more on this problem here. Another problem could be that the captions aren’t in the right place on screen. You can adjust this manually by going into the ‘show movie properties’ dialog, and adjusting the Visual Settings of the Closed Caption layer to scale and move as you wish. The only other problem we had, is during testing, if you save the Mov file in it’s original location, you can end up with multiple Closed Caption layers on the same video, which just doesn’t work. If this happens, again return to the Movie Properties and delete all of the Closed Caption and Timecode Track layers, save the movie and then re-export the video from Movie Captioner. You might need to close down both Quicktime and MC before re-exporting just to make sure everything is reset fully.

Testing

That should be that. It’s a bit long winded, but once you get the hang of it, a 2 minute video can be captioned in less than 10 minutes. To test the captions on a device, then send the video across (email, through iTunes, Dropbox) or any other means. Be sure that Closed Captions are turned on in the settings->video menu, otherwise you won’t see anything!

If you’re having problems with Movie Captioner then here are some great tutorials in video format and also their FAQ section of their site.

So we set about creating some content and the result is an interactive version of our portfolio, that includes images, 3D models, Google Maps, Twitter feeds and a whole host of other cool functionality, that makes our work look pretty good!

Here’s some of the things that we found when using the tool that might be helpful for others.

• If you want to lock the book to landscape, which is useful if you have lots of images and interactive content and not much text, then there’s the option in the document inspector.
• It’s possible to add alpha to images, but the button is hidden from default view so you’ll need to ‘customize’ the toolbar first.
• You can’t add hyperlinks to images, only to text. Although you can link from text to another image in the book, but only if you’ve added a title to the image.
• HTML elements are easy to add (such as Google Maps) just grab the embed code, save to a .wdgt folder along with a .plist and a Default.png screenshot. However they only become active once made full screen in the book, until then they only show the static image that you include.
• 3D models exported from 3DSMax only show textures is the .DAE file is placed in the images folder created on export.
• Interactive 3D models can be locked to only interact horizontally or vertically, but the ‘auto-rotate object when idle’ doesn’t comply to this setting and rotates on its own axis.
• Uploading to the iBook Store is easy using the iTunes Producer tool, but there is no indication of approval time…
• To edit an existing book you need to export your book from iBooks, then re-open the itmsp file that has been published using iTunes Producer and point exported version rather than re-publishing the book, which will create another submission.
• You will need to sign up to a new iTunes account to publish books, even if you are already a registered developer.

If you’re thinking about making a portfolio, catalog, design guide, game manual/guide, recipe book, interactive scrapbook, photo book, city guide, newsletter, personal study guide, wedding book, comic book then let us know if we can help!

The solution for us was to get an Enterprise Developers account as this allows us to do an enterprise distribution build that lets us avoid having to register any UDID’s also we can distribute the WIP build to clients wirelessly through our own Development website, all through the browser on their iOS device.

There’s already a great guide to setting this up posted over at Jeffrey Sambells website, however we also do flash development and have been looking at getting a few Flash projects moved across to iOS by making use of the Adobe Air 2.6 SDK, there are enough guides out there for getting this set up to build an app for testing and for App Store submission, but we needed to do a testing build for some clients. So we had to find a way to get this done, in the end it turns out to be a relatively painless operation.

We made a distribution build of our app using the Air 2.6 SDK with our enterprise distribution certificate, making sure that the bundle ID was the same as the one used in our distribution provisioning profile.

Now the ‘hacky’ part seeing as the Air SDK wont let us build for archive, but will let us do distribution and ad-hoc, we built for distribution, as that’s what we intend to package this up as.  Now ensure that you already have an Archive build for any other app already in XCode (we’re using XCode 4, but I imagine this will work just as well in earlier versions) by having a look through the organiser, if you don’t then open up one of your XCode projects and ‘Archive’ it.

If you bring up the organiser you can ‘Show in Finder’ on this Archive (Right/Command click the Archive) or have a look in “User”/Library/Developer/Xcode/Archive/”AnyDate”. You want to locate the “.xarchive” file for one of your archived apps.

Duplicate this, then rename the duplicate Archive to suit the name of the project you’re wanting to distribute. In our case “Revolve”, but keep the date and time part of the file name. Now on the xarchive file “show package contents”.

You’ll be presented with two folders ‘dSYMs’ and Products and an Info.plist file.  We’re going to need to edit the plist, so fire up the property list editor. You’ll want to change Name to the name of the app, or whatever the .app file is called that the Air SDK generated, as well as the SchemaName to the same thing.

Expand the ApplicationProperties Dictionary, and look at the ApplicationPath property, you’re going to edit this one to be “Applications/<name>.app” where <name> is the name of the .app file that the Air SDK generated.

Also the bundle identifier may need to be edited to math the bundleID that the App was built with, and check that your icon names match up (they shouldn’t need changing if you follow Apple’s standard naming conventions). Now Save this pList.

Navigate through the “Products” directory you’ll get to the Applications folder, remove anything that’s already in this folder, and replace it with the .app that the Air SDK generated ( this should then make what was entered in the Applications Path valid, ie copy revolve.app into ‘Products/Applications’ so that  ”Applications/revolve.app” is now the correct applications path.

We can safely ignore the ‘dSYMs’ folder for this.

Right now back into XCode if we now bring up the Organiser and look at the Archives tab we should see the Archive in there for our recently stitched up app, in our case we now have an Archive for Revolve. Now we can share this using the same technique as described on Jeffery Sambells website, and we now have an Enterprise Distribution of our Flash App that runs on iOS devices.