The Artist’s Guide to Apple Watch Apps
Buy or Subscribe
CartoonSmart students can now choose between buying Lifetime Access to our courses or purchasing one of our affordable Subscription plans. Lifetime Buyers can choose between downloading zip files of each movie or streaming them on any of their devices. Subscribers can stream courses, also on any device, and whether or not you subscribe or buy, every student has access to course materials (which could be PDF files, images, video, code projects, etc depending on the lesson).
Find out about the software used...
This course teaches Xcode development using Swift, Apple’s latest programming language. If that sounds intimidating for you new programmers, well good news: not only is the coding taught relatively simple, your purchase includes the finished Xcode projects with everything already written!
The series also teaches how to make art assets in Flash specifically for the Xcode template we’ll end up creating.
Learn more about your instructor...
This course is taught by Justin Dike, owner and lead developer at CartoonSmart.com, creator of the Fantastic Worlds iOS Starter Kits, and author of iOS Game Programming with Xcode and Cocos2d (published by Focal Press). Justin has been programming iOS games since the release of the first iPhone and has been teaching development for just as long, covering mostly game related topics. He’s proficient with Cocos2d, Sprite Kit, Objective-C and most recently Swift.
Start with the Design
Join CartoonSmart’s founder, Justin Dike, as he teaches how to make a complete Apple Watch app from scratch. Seriously. We start with nothing, beginning in Flash with a blank scene. The course first teaches how to make a multi-layered vector clock face, complete with precise hour, minute and second hands, turning gears, the day of the week, the month and day of the month. This first section of the course essentially builds a template in Flash capable of producing hundreds of watch faces. We’ll talk about exporting images and animation sequences from the finished Flash file, and making mass changes to the file (for example, how to change the font of a label on every frame, or scale objects on multiple frames). The best part is you can make any style with this template, you are not just limited to watches with an analog clock face.
Then Program It
In this session, we will build an Apple Watch app, which is technically an extension of an iPhone app. So first we will cover everything it takes to build the watch app, then move onto programming the companion app for the iPhone. The finished Xcode project, or template, will build an iPhone app that gives users the option to choose and save a preferred face variation on the Apple Watch. So you could sell an app that has multiple clock faces, adding extra value to your buyer’s purchase.
Both parts of this session discuss importing the images exported from the first session, layering them in the Apple Watch interface controller / iPhone view controller, programming each element, and working with NSUserDefaults to save preferences for the preferred watch variation. We will also look at some optional add-ons, such as sounds, programming labels, swiping through multiple watch screens and opening new views on the watch.
The course also discusses some essentials for first-time app developers. Topics include: generating provisioning profiles, adding / changing bundle identifiers, adding the app listing to iTunes connect, submitting the app to Apple, and everything else we could think of to make working with Xcode for the first time as easy as possible.
Session Descriptions
Creating the Art in Flash
In this first series of videos we will be working in Adobe Flash to create assets we can export and import into Xcode later. You will learn plenty of tricks to making an accurate clock face, as well as learn how to animate looping elements (like watch gears). We will also discuss the particularities of displaying our art assets in Xcode. Videos include:
- Introduction to Adobe Flash
- How Elements are Arranged on the Watch
- Drawing Precise Vector-Based Minute Markers
- Adding Hour Markers
- Drawing the Hour Hand
- Adding and Animating the Second and Minute
- Adding the Month, Day, Weekday and Adjusting Multiple Frames
- Animating Gears and Changing Fonts Across Multiple Frames
- Finishing Touches and Exporting
- Exporting at 144 or 72?
- Copying Assets into Xcode and Wrap Up
Get started for free with our Sample Pack.
Creating the Apple Watch in Xcode
In this series of videos we will begin with the assets imported to Xcode and make a complete Apple Watch app from start to finish (the companion iPhone app will be created in the next section). If you’ve never used Xcode before, the course will discuss some of the fundamentals to get you on par with past users. Videos include:
- Xcode Introduction
- Installing Xcode
- Watch App Initial Setup
- Renaming the Bundle ID
- Testing on the Simulator
- Managing Your Layout / Workspace
- Layout Basics
- Adding Groups with Background Images to the Storyboard
- Connecting Outlets from the Swift File
- Getting the Time
- Setting the Hour, Minute, and Second Hand Images
- Setting the Month and Day Images
- Getting the Day of the Week
- Deactivate the Timer
Creating the Companion App for the iPhone
Apple Watch apps are actually extensions of a companion iPhone app, so in these videos we will use the same assets as before and make a working clock app for the iPhone. We will then create buttons which will let users customize the look of the Apple Watch and save their preferences. So changes we make to the iPhone app, will be saved on the Apple Watch app.
- Using Auto Layout in the iPhone App
- Animating the UIImageView
- Reusing our Time Code
- Setting up the Segmented Buttons
- Changing Faces
- AppGroups and NSUserDefaults to Communicate Between Devices
- Wrapping Up the iPhone App
Submitting the App to Apple
In this video, we will discuss provisioning your app, creating the listing in iTunes Connect, and everything else related to submitting Apple your finished app right from within Xcode.
Adding More to the Xcode Template
In these videos we will discuss adding audio to the Apple Watch app, using custom fonts with labels (which can be any font you want), paging through multiple screens on the watch, and programmably opening interface controllers when the app launches. None of these modifications are required, but could be useful in your many projects to come. Videos include.
- Adding Audio
- Using Labels to Show Time and Adding Custom Fonts
- Paging to Different Screens on the Watch
- Opening Other Interface Controllers on the Watch
- Conclusion
Watch a video preview from the course
This video discusses how elements are arranged on the Apple Watch, and will give you an idea of how we will setup our art assets to be exported for Xcode.
Includes Two Incredible Projects
Aside from the video tutorials, you will also get two project templates: one for Adobe Flash, and the finished Xcode project. With the Flash project you can easily create new watch designs and batch export images and animation sequences to import into Xcode.
You can use the Xcode template to create hundreds of different Apple Watch apps. The tutorial videos include tips for duplicating the Xcode project, renaming the bundle ID, and changing the App Group ID to start the project fresh.
Two affordable purchasing options…
Purchase Option 1 - Lifetime Access
Get Lifetime Access to this course for a one-time purchase price. You can download (or stream) the movie files and download any source projects.
Already have Lifetime Access? You can get started watching the video tutorials from right here.
Purchase Option 2 - Subscription Access
Both Monthly and Yearly Subscribers can stream every video tutorial on the site. Yearly subscribers get access to the latest version of every starter kit whenever they want, plus access to hundreds of dollars worth of royalty free game art (yes, it’s an amazing deal). You can cancel your Monthly or Yearly subscription anytime directly through Paypal.
Browse All CoursesAlready a Subscriber? Get started on the course from right here.