1

00:00:02,240 --> 00:00:06,760

This what's up everyone.



2

00:00:06,770 --> 00:00:08,090

Mark I sure hope so.



3

00:00:08,180 --> 00:00:11,130

Doug Hoffman welcome to the wonderful world of Aiwass development.



4

00:00:11,150 --> 00:00:15,650

And in this exciting video you're going to build your very first iOS app.



5

00:00:15,650 --> 00:00:18,470

And so first things first let's look at what we're going to be building here.



6

00:00:18,470 --> 00:00:22,450

This app is called hustle mode and we're going to have an item here when you press a button.



7

00:00:22,520 --> 00:00:27,410

The power mode it turns it on and this appears in the rock it's going to animate some cool sound effect



8

00:00:27,410 --> 00:00:28,360

is going to play.



9

00:00:28,400 --> 00:00:33,490

And we're going to do this really fast and you're going to learn how easy it is to make apps in Iowa.



10

00:00:33,560 --> 00:00:35,030

So let's go ahead and get started.



11

00:00:35,030 --> 00:00:41,180

First things first go to your X code 9 beta or the AppStore version if it is released at this point



12

00:00:41,180 --> 00:00:41,880

in time.



13

00:00:41,990 --> 00:00:49,250

I'm using the beta and what we're going to do is click Create a new X code project single view application



14

00:00:49,820 --> 00:00:55,340

and just go ahead and call this hustle mode hustle dash mode and Maleev the default settings here just



15

00:00:55,340 --> 00:00:59,810

make sure swift is selected here and you can unselect these items if they are selected.



16

00:00:59,930 --> 00:01:00,820

Click next.



17

00:01:00,920 --> 00:01:04,540

And then you're going to find a folder for it like so.



18

00:01:04,830 --> 00:01:06,370

And I'm going to click Create.



19

00:01:06,800 --> 00:01:07,890

And here we go.



20

00:01:07,940 --> 00:01:10,490

We're ready to get started on our app.



21

00:01:10,640 --> 00:01:14,940

So first thing make sure that you have downloaded the assets for this project.



22

00:01:15,670 --> 00:01:21,130

And once they're downloaded what I want you to do is click the assets folder here and select all the



23

00:01:21,130 --> 00:01:26,410

files in the folder that you have from this project except the way file unselect that so hold down Shift



24

00:01:26,410 --> 00:01:30,760

select all these and just drag them here in the assets folder like so.



25

00:01:30,910 --> 00:01:31,680

OK.



26

00:01:31,780 --> 00:01:36,590

There are more images here in the folder than appear here and that's because it sets at 2x and 3x high



27

00:01:36,590 --> 00:01:40,420

resolution versions inside of a single image and X code you don't need to worry about that right now



28

00:01:40,430 --> 00:01:45,160

just drag them here in the assets folder and the adult wave file just drag here into the hustle mode



29

00:01:45,190 --> 00:01:48,770

project all together make sure that copy items if needed selected.



30

00:01:48,790 --> 00:01:52,480

And make sure add to target is selected as well.



31

00:01:52,480 --> 00:01:53,830

Perfect.



32

00:01:53,830 --> 00:01:57,940

So now we've got our code and all we need to do now are our assets and all we need to do now is go into



33

00:01:57,940 --> 00:02:02,660

the main story board here and we're going to build out some user interface elements.



34

00:02:02,680 --> 00:02:05,590

Remember we're going to build out that blue screen that hustle mode screen.



35

00:02:05,590 --> 00:02:06,040

OK.



36

00:02:06,130 --> 00:02:07,600

The first power button.



37

00:02:07,600 --> 00:02:07,890

OK.



38

00:02:07,900 --> 00:02:12,940

So let's go ahead and at the bottom right here in the object directory here and we're going to type



39

00:02:12,940 --> 00:02:14,110

in the word image.



40

00:02:14,400 --> 00:02:19,900

And let's take this image view and drag it over here onto the screen image you use allow you to have



41

00:02:19,900 --> 00:02:21,640

images on your screen.



42

00:02:21,640 --> 00:02:27,640

And once that's selected here let's go ahead and find the dark blue Biji.



43

00:02:27,660 --> 00:02:31,690

So on the right hand side over here in the image view select dark blue Biji.



44

00:02:32,130 --> 00:02:34,910

OK the next thing we need to do is have a button right in the middle.



45

00:02:34,920 --> 00:02:38,680

So let's type in the word but at the bottom right and drag it on.



46

00:02:38,700 --> 00:02:41,110

Now again for this lesson just follow along.



47

00:02:41,130 --> 00:02:45,840

We will explain more throughout all the other lessons this is the very first intro so you'll be doing



48

00:02:45,840 --> 00:02:48,640

things that you don't quite understand and that's OK.



49

00:02:48,660 --> 00:02:53,220

So this is a button here and what we want to do is on the right hand side can make sure this middle



50

00:02:53,250 --> 00:02:57,980

iconv selected here the attributes and inspector and take off the word button.



51

00:02:58,260 --> 00:03:01,530

And instead what we're going to do is we're going to set an image on this button.



52

00:03:01,590 --> 00:03:07,000

So what we're looking for is the power button like so and holding Shift just drag it a little bit bigger.



53

00:03:07,080 --> 00:03:12,530

Whatever size you think looks good and drag it here on the middle of the screen like so.



54

00:03:13,230 --> 00:03:13,540

OK.



55

00:03:13,550 --> 00:03:14,930

So we've got this button here.



56

00:03:15,110 --> 00:03:18,470

And the idea is when you click this button this stuff disappears.



57

00:03:18,470 --> 00:03:23,720

And then we show the cool clouds in the Rock and all that stuff and then animates up into the sky and



58

00:03:23,720 --> 00:03:24,610

plays a sound effect.



59

00:03:24,610 --> 00:03:28,470

So what we want to do is have another view on the top.



60

00:03:28,460 --> 00:03:31,620

Like almost like a second screen that holds all those other elements.



61

00:03:31,820 --> 00:03:38,220

So what I'm going to do is at the bottom right here I'm going to type in UI you like so and you can



62

00:03:38,220 --> 00:03:39,120

see this view one.



63

00:03:39,200 --> 00:03:45,470

And what you're going to do is just drag it on here like so and you're going to put it right here.



64

00:03:45,660 --> 00:03:46,980

OK so here's your background.



65

00:03:46,980 --> 00:03:49,040

This is what we're going to put all the elements on.



66

00:03:49,400 --> 00:03:49,680

OK.



67

00:03:49,680 --> 00:03:55,950

And if you notice here in the assets folder we've got let's see here we've got some different graphics



68

00:03:55,950 --> 00:03:57,250

like a blue background.



69

00:03:57,300 --> 00:04:00,450

And we've got these cool clouds.



70

00:04:00,480 --> 00:04:04,170

This is like the full thing here and I can use this image here that's just more from Mokka purposes



71

00:04:04,780 --> 00:04:08,490

but this is the one that has the clouds and stuff on and so we're going to put the clouds an orange



72

00:04:08,520 --> 00:04:10,530

oval on top of this.



73

00:04:10,540 --> 00:04:14,760

But first things first is you know we don't even you probably need to use an image for the background



74

00:04:14,760 --> 00:04:16,890

because we could just set the view to blue.



75

00:04:16,900 --> 00:04:23,340

And so what I'm going to do is command space on a Mac and type in digital color meter and what I'm going



76

00:04:23,340 --> 00:04:32,380

to do is hover over this blue and this is 75 119 181 75 119 181.



77

00:04:32,520 --> 00:04:38,710

OK so let's go back to the storyboard and we're going to go to the background color and we're going



78

00:04:38,710 --> 00:04:49,670

to selected this here and 75 one 18 and 170 171.



79

00:04:50,520 --> 00:04:51,670

Make it a little brighter.



80

00:04:51,670 --> 00:04:52,570

There we go.



81

00:04:52,580 --> 00:04:53,690

Not too shabby.



82

00:04:53,690 --> 00:04:53,860

OK.



83

00:04:53,870 --> 00:04:55,980

So there's a nice blue background.



84

00:04:56,090 --> 00:05:00,380

You know you don't need to use an image whenever whenever you don't need to because it will be faster



85

00:05:00,380 --> 00:05:01,510

or just setting the color here.



86

00:05:01,520 --> 00:05:06,900

And so what we're going to do now is add an image of you to the screen.



87

00:05:08,480 --> 00:05:15,020

And I'm going make it full screen like so and we're going to get this one to the clouds an orange oval.



88

00:05:15,110 --> 00:05:16,610

So pretty.



89

00:05:16,610 --> 00:05:19,700

But one thing that's happening is our image is stretching as we want to fix that.



90

00:05:19,700 --> 00:05:27,030

Let's go ahead and say aspect feel and let's make it a little smaller.



91

00:05:31,380 --> 00:05:37,260

Like so you know just kind of eyeball it make it look pretty big because it's aspect feel it won't stretch



92

00:05:37,260 --> 00:05:40,220

the image it'll just look nice and pretty which is exactly what we want.



93

00:05:40,320 --> 00:05:41,430

OK.



94

00:05:41,430 --> 00:05:42,260

So this is cool.



95

00:05:42,270 --> 00:05:46,710

So the next thing is let's get our rocket and rock is also an image so just drag an image of you on



96

00:05:46,710 --> 00:05:47,300

here.



97

00:05:47,370 --> 00:05:48,090

All right.



98

00:05:48,270 --> 00:05:50,880

And let's find the rocket rocket and Stream.



99

00:05:50,880 --> 00:05:52,230

Now again this is stretching again.



100

00:05:52,240 --> 00:05:58,110

So we want to set this to Aspect fit or aspect feel so let's try aspect feel kind of like that and what



101

00:05:58,110 --> 00:06:02,890

we'll do is with us make it go on the screen here.



102

00:06:02,900 --> 00:06:04,780

And what I'm going to do is it's in front of the clouds.



103

00:06:04,780 --> 00:06:06,520

We don't want in front of the clouds.



104

00:06:06,740 --> 00:06:11,690

So on the left hand side here just drag it behind the clouds an orange oval like so.



105

00:06:11,840 --> 00:06:16,200

And with the selected go ahead and double click it and just use the arrow key to go down.



106

00:06:16,490 --> 00:06:19,340

And we're just kind of visualizing what it will look like if the rockets moving.



107

00:06:19,340 --> 00:06:21,580

See how it's coming behind the clouds.



108

00:06:21,580 --> 00:06:23,450

It's so pretty.



109

00:06:23,450 --> 00:06:25,030

So cool.



110

00:06:25,040 --> 00:06:25,400

Very good.



111

00:06:25,400 --> 00:06:26,790

So we want to hit that first.



112

00:06:26,810 --> 00:06:27,260

OK.



113

00:06:27,410 --> 00:06:32,370

And so what we've done so far is we've created a view we've set the background on it to blue.



114

00:06:32,600 --> 00:06:36,410

And the same blue that the image was we just decided not to use an image just to show you that you can



115

00:06:36,410 --> 00:06:42,380

set a background color and then what we've done is we've created a cloud an orange oval image at the



116

00:06:42,380 --> 00:06:43,030

bottom here.



117

00:06:43,050 --> 00:06:49,100

We set it to Aspect feel so it looks nice and then we put the rocket but we put it behind it so it looks



118

00:06:49,100 --> 00:06:50,750

like it's coming up from beneath the clouds.



119

00:06:50,750 --> 00:06:53,350

And we said that aspect feel on that as well too.



120

00:06:53,690 --> 00:06:54,180

OK.



121

00:06:54,260 --> 00:06:58,760

The next thing is let's go ahead and add a label here so we can type in the label.



122

00:06:59,360 --> 00:07:02,130

And if Remember it's says hustle mode on.



123

00:07:02,130 --> 00:07:08,960

So this label we're going to say hustle mode and this little bit you know messed up so let's go ahead



124

00:07:08,990 --> 00:07:12,530

and make it bigger and we're going to center it.



125

00:07:12,530 --> 00:07:17,410

So with the label selected click the center button the center of the text and we want it to be white



126

00:07:17,420 --> 00:07:24,410

of course because that's what it calls for so clicking on a little color slicker here we can select



127

00:07:24,410 --> 00:07:25,340

white.



128

00:07:25,340 --> 00:07:26,160

All right.



129

00:07:26,570 --> 00:07:28,900

And instead of system I want to do system like bold.



130

00:07:28,940 --> 00:07:35,850

So click the little T button up here on the label and go to System and then instead of regular do bold.



131

00:07:35,840 --> 00:07:42,230

There we go and let's make it a lot bigger Hazumu and just kind of eyeball it where you want it.



132

00:07:42,250 --> 00:07:43,900

Like here in the center it looks good.



133

00:07:44,170 --> 00:07:50,020

And what I'm going to do is command d to copy this label and make a new one I make this even bigger



134

00:07:50,440 --> 00:07:51,580

instead of Hazm mode.



135

00:07:51,580 --> 00:07:56,860

This one is going to say on so double click it and change it to the word on and then we're going to



136

00:07:56,860 --> 00:08:02,490

increase this font size as well to just click that up button until it gets to the size that you like.



137

00:08:02,920 --> 00:08:06,010

Awesome mode on and we can make it a little smaller.



138

00:08:06,010 --> 00:08:10,030

Now since we know how big it is and this is looking good.



139

00:08:10,190 --> 00:08:12,650

So Hosam mode is on.



140

00:08:12,830 --> 00:08:13,130

OK.



141

00:08:13,130 --> 00:08:16,330

So all of our user interface elements are complete.



142

00:08:16,340 --> 00:08:17,000

So that's great.



143

00:08:17,000 --> 00:08:22,130

So now we can actually go into the code and what we're going to do is we're going to click this button



144

00:08:22,130 --> 00:08:24,390

here in the middle called the assistant editor.



145

00:08:24,440 --> 00:08:25,270

OK.



146

00:08:25,610 --> 00:08:29,150

And what we're going to do is we're going to create some I.V. outlets we're going to connect to the



147

00:08:29,150 --> 00:08:30,980

user interface to the code.



148

00:08:31,070 --> 00:08:33,510

So real quick I'm going to close the left hand side.



149

00:08:33,520 --> 00:08:36,620

We'll have some more screen space and I did that by clicking these buttons up here.



150

00:08:36,620 --> 00:08:39,670

You can expand and retract the different panels here.



151

00:08:40,010 --> 00:08:41,810

And this is cool.



152

00:08:41,810 --> 00:08:45,650

So first things first is I'm going to clean up some code here to get rid of this did receive memory



153

00:08:45,650 --> 00:08:47,990

warning we don't need to worry about that just yet.



154

00:08:48,260 --> 00:08:53,850

And then we're going to make a few spaces here in the View Controller make sure this says a controller.



155

00:08:54,110 --> 00:08:57,780

And then what we're going to do is this dark blue background.



156

00:08:57,860 --> 00:09:00,430

OK I'm going to control dry hole in the control button.



157

00:09:00,440 --> 00:09:07,990

I'm going to drag it over a year and make sure this outlet and we're going to say dark blue Biji like



158

00:09:07,990 --> 00:09:08,730

so.



159

00:09:08,950 --> 00:09:12,270

And then what we're going to do is we're going to grab this button here.



160

00:09:12,550 --> 00:09:14,970

OK we're going to call this power.



161

00:09:15,040 --> 00:09:21,070

And like so and then this viewer I hear the one that holds all these cool clouds and stuff we're going



162

00:09:21,070 --> 00:09:27,100

to make an outlet for and let's call this the let's call this the cloud Holder.



163

00:09:27,230 --> 00:09:29,050

OK it's holding the clouds and all the other views.



164

00:09:29,050 --> 00:09:29,550

OK.



165

00:09:29,710 --> 00:09:31,410

There's the cloud holder.



166

00:09:31,750 --> 00:09:36,640

And then what we want to do is let's go ahead and grab this rocket in stream.



167

00:09:36,640 --> 00:09:42,970

So what does control drag the rocket and streamlets just call this the rocket gear to the empty space



168

00:09:42,970 --> 00:09:43,550

there.



169

00:09:43,810 --> 00:09:49,420

So the rocket and we don't need to grab the orange over but we do need the labels here.



170

00:09:49,560 --> 00:09:50,680

And I'll tell you why in a second.



171

00:09:50,680 --> 00:09:56,470

So I want to control drag from the hustle mode label drag it here and we're going to call this hustle



172

00:09:56,560 --> 00:09:58,210

Elby for label.



173

00:09:58,510 --> 00:10:04,480

And then again control drag from the on button like so and we're going to call this on label and again



174

00:10:04,510 --> 00:10:08,670

all we're doing is connecting user interface elements to the code so we can do things with them.



175

00:10:08,710 --> 00:10:09,210

OK.



176

00:10:09,490 --> 00:10:14,440

This is core iOS development features which you'll be using everyday as I was to Bellaver.



177

00:10:14,840 --> 00:10:16,270

OK so what do we want to have happen.



178

00:10:16,270 --> 00:10:19,420

Well when that power button is selected.



179

00:10:19,470 --> 00:10:20,110

OK.



180

00:10:20,350 --> 00:10:24,860

What we want to do is have all these things become visible and have the power buttons become invisible.



181

00:10:24,930 --> 00:10:25,420

OK.



182

00:10:25,510 --> 00:10:35,150

No big deal it's it's fairly simple actually so all we need to do is creative function here that's going



183

00:10:35,150 --> 00:10:39,650

to allow us to receive an action when an event happens and how do you do that is you go to your dark



184

00:10:39,650 --> 00:10:46,850

blue but excuse me your power button here on the left hand side control drag over into your code and



185

00:10:46,850 --> 00:10:48,820

instead of outlet change it to an action.



186

00:10:49,010 --> 00:10:49,440

OK.



187

00:10:49,520 --> 00:10:56,270

And we're going to call this power button pressed and just press enter and see if you have a function



188

00:10:56,270 --> 00:10:59,180

here that would be called whenever that button is pressed.



189

00:10:59,180 --> 00:11:05,420

And so what we want to do is we want to we want to show the cloud holder and we want to hide the other



190

00:11:05,480 --> 00:11:15,160

background elements so let's go ahead and say we want to say Klout Holder is hidden equals false.



191

00:11:15,360 --> 00:11:16,490

OK.



192

00:11:17,220 --> 00:11:25,060

And we also want to do is we want to say the dark blue Biji is hidden equals true.



193

00:11:25,080 --> 00:11:26,940

We want to hide that and we want to hide the power button right.



194

00:11:26,940 --> 00:11:33,840

So power button his hidden equals true like so.



195

00:11:34,380 --> 00:11:39,000

And let's just do a little more clean up in Interface Builder for now so let's close the assistant editor



196

00:11:39,000 --> 00:11:41,700

by clicking these little lines here the standard editor.



197

00:11:41,730 --> 00:11:42,490

OK.



198

00:11:42,560 --> 00:11:45,810

And what I want to do is by default the cloud Holder will be hidden.



199

00:11:45,810 --> 00:11:48,180

So let's open up the right hand side here.



200

00:11:48,300 --> 00:11:53,010

And I also want these hustle mode labels to be hidden so slick the hustle mode level and the on level



201

00:11:53,190 --> 00:11:58,500

and go ahead and select hit and so scroll down here and select hit and on those so those will be hidden



202

00:11:58,500 --> 00:11:59,220

by default.



203

00:11:59,220 --> 00:12:03,750

And then the cloud holder itself will be hit by default like so.



204

00:12:04,010 --> 00:12:04,420

OK.



205

00:12:04,440 --> 00:12:06,290

Because we don't want those showing at first.



206

00:12:06,510 --> 00:12:10,300

And make sure that the cloud Holder is above the dark blue background and power button.



207

00:12:10,320 --> 00:12:14,940

So it appears on top of it it doesn't matter too much but at least for visual sake it looks.



208

00:12:15,030 --> 00:12:16,260

That's how we want it here.



209

00:12:16,680 --> 00:12:18,510

And that's all looking good.



210

00:12:18,510 --> 00:12:24,630

So when we press the power button this the screen will appear and the other one the old one will hide.



211

00:12:24,630 --> 00:12:25,590

So that's looking great.



212

00:12:25,590 --> 00:12:27,290

So let's go straight to our code now.



213

00:12:27,630 --> 00:12:30,660

Open up the left hand side go to the view controller.



214

00:12:31,050 --> 00:12:32,320

And we're going to write some code.



215

00:12:32,340 --> 00:12:37,260

So again what we want to have happen is we want when that power button press we want the rocket to shoot



216

00:12:37,260 --> 00:12:39,720

up into the sky and play a really cool sound effect.



217

00:12:40,050 --> 00:12:42,270

And we want to turn the motor ready to take this.



218

00:12:42,270 --> 00:12:47,130

I was 11 course and work our butts off so you know we can do great and amazing things.



219

00:12:47,130 --> 00:12:50,310

So first things first is in order to play audio.



220

00:12:50,340 --> 00:12:56,190

We're going to need to import a framework that allows us to play audio so type and import at the top



221

00:12:56,190 --> 00:13:00,780

here avi foundation that allows us to play some music or some sounds.



222

00:13:00,840 --> 00:13:03,310

In our case just a single sound.



223

00:13:03,470 --> 00:13:08,930

And then what we're going to do is blow the ivy out let's hear we're going to type in var layer create



224

00:13:08,930 --> 00:13:14,200

a variable called Player AB audio player and put an exclamation point at the end.



225

00:13:14,570 --> 00:13:18,280

This is called an implicitly unwrapped optional but you don't need to worry about that right.



226

00:13:18,290 --> 00:13:19,760

Right now you'll learn that later.



227

00:13:20,150 --> 00:13:20,740

OK.



228

00:13:20,870 --> 00:13:23,670

And what we're going to do here is in the view did load.



229

00:13:23,750 --> 00:13:28,350

Ok this is a function that is the starting point of your of your code.



230

00:13:28,380 --> 00:13:31,380

When the screen first LOTES and so this is where you can initialize things.



231

00:13:31,550 --> 00:13:35,780

And what we're going to do is we're going to find this file this way File here in our documents directory



232

00:13:35,810 --> 00:13:37,490

and then we're going to load it into the player.



233

00:13:37,640 --> 00:13:46,190

OK so we're going to create a constant here called Let path equals bundle does mean path.



234

00:13:46,780 --> 00:13:48,590

Let's say for resource



235

00:13:51,300 --> 00:13:59,760

like so or to say hustle dash on that's the name of the file of type and that's going to be wave like



236

00:13:59,760 --> 00:14:01,630

so save it.



237

00:14:01,980 --> 00:14:04,640

So bundled up main path and then for resource.



238

00:14:04,650 --> 00:14:07,630

And so what we're doing here is we're grabbing the file OK.



239

00:14:07,860 --> 00:14:12,330

And it's it's yelling at us with a yellow warning because we're not using this yet and now we're going



240

00:14:12,330 --> 00:14:18,690

to do is create a real iOS works with your else for it's like local file system.



241

00:14:18,690 --> 00:14:20,710

So same as it might grab you are all from the Internet.



242

00:14:20,790 --> 00:14:23,390

And this is going to save the file.



243

00:14:23,800 --> 00:14:25,110

Well actually you can see it right here.



244

00:14:25,110 --> 00:14:29,970

If I do the parentheses follow your own path and we're just going to pass in the path that we just created



245

00:14:29,970 --> 00:14:30,180

here.



246

00:14:30,180 --> 00:14:35,310

So the path was a string and now we're converting it to a u r l Hennigan you don't have to understand



247

00:14:35,310 --> 00:14:35,900

all this just yet.



248

00:14:35,910 --> 00:14:38,130

You'll learn all about this later.



249

00:14:38,220 --> 00:14:43,170

We're going to say do we're going to try and load our player and since this could possibly fail we're



250

00:14:43,170 --> 00:14:45,800

going to do a due and catch statement here.



251

00:14:45,870 --> 00:14:54,720

Player equals try a Wii audio player contents of you are ill and we're going to pass in the L and then



252

00:14:54,720 --> 00:14:57,500

we're going to say player not prepare to play.



253

00:14:57,510 --> 00:14:59,640

Let's get it ready to play.



254

00:14:59,640 --> 00:15:04,240

And if this Yoro was wrong it didn't work we could get an air so we're just going to catch the air.



255

00:15:04,380 --> 00:15:05,080

OK.



256

00:15:08,600 --> 00:15:13,160

We're just catching the air here and we're just going to print it in case there was some type of problem.



257

00:15:13,220 --> 00:15:15,290

Again you don't need to worry about all of this.



258

00:15:15,320 --> 00:15:19,250

The important thing to understand is that we're grabbing the file here and we're loading it into the



259

00:15:19,250 --> 00:15:19,580

player.



260

00:15:19,580 --> 00:15:24,250

And because it can fail we have this do catch state and that will catch errors and problems again.



261

00:15:24,440 --> 00:15:25,910

You'll learn all about this later on.



262

00:15:25,940 --> 00:15:27,730

Let's just keep moving on and forward here.



263

00:15:27,730 --> 00:15:29,630

This is just the very first lesson.



264

00:15:29,690 --> 00:15:31,860

So when the power Bun's breasts we're going to hope.



265

00:15:31,910 --> 00:15:36,470

We're going to show the cloud holder and then what we're going to do is we're going to hide the blue



266

00:15:36,470 --> 00:15:38,760

background the dark blue background and the power button.



267

00:15:38,900 --> 00:15:41,360

And now we want to animate the rocket up into the clouds.



268

00:15:41,360 --> 00:15:41,890

OK.



269

00:15:41,900 --> 00:15:49,220

So to make an animation in Iowa s we can use a simple UI view animation and we want to do the one right



270

00:15:49,220 --> 00:15:51,490

here with animations and a completion handler.



271

00:15:51,590 --> 00:15:58,760

So with duration let's set 2.3 seconds and press tab to go to animations and then press enter delete



272

00:15:58,760 --> 00:16:05,850

the thing that says code and then press tab again and press enter enter and type in finished.



273

00:16:05,900 --> 00:16:11,020

Here in the parentheses it's a boolean and we're going to get rid of this code right here.



274

00:16:11,120 --> 00:16:13,170

So auto populated all this stuff for us.



275

00:16:13,190 --> 00:16:16,600

And if it didn't work or you press the wrong key just copy it like I have it here.



276

00:16:16,700 --> 00:16:17,690

Exactly.



277

00:16:17,780 --> 00:16:22,760

And so what's going to happen is we're going to say hey we want to animate this rocket to a certain



278

00:16:22,760 --> 00:16:28,400

position over 2.3 seconds so we're going to say self dot rocket.



279

00:16:29,570 --> 00:16:32,110

Frame equals C-g rect.



280

00:16:32,300 --> 00:16:33,520

And where do we want it to go.



281

00:16:33,560 --> 00:16:38,660

Well we're going to see an exposition of why position and a width and height so the x is from left to



282

00:16:38,660 --> 00:16:43,370

right and the wise up and down again you don't have to completely understand all this just now just



283

00:16:43,370 --> 00:16:48,530

follow along and you'll learn all about frames and bounds and positions and all this great stuff later



284

00:16:48,530 --> 00:16:48,710

on.



285

00:16:48,710 --> 00:16:54,740

So we're just we want it to be at zero X. And for the y position let's position it like 20 points from



286

00:16:54,740 --> 00:16:55,150

the top.



287

00:16:55,150 --> 00:16:58,310

We won't make it go all the way to the top and the width.



288

00:16:58,310 --> 00:17:00,970

Let's look at the with a click the main storyboard.



289

00:17:01,360 --> 00:17:04,760

OK click your rocket and then click the ruler over here.



290

00:17:04,880 --> 00:17:08,630

And so with this 375 and the high is 402.



291

00:17:08,630 --> 00:17:13,060

So what we're going to do is we're going to say with is going to be 375.



292

00:17:13,130 --> 00:17:14,780

And height is 4.



293

00:17:14,800 --> 00:17:20,030

And so what we're saying is over 2.3 seconds let's move the rocket to this position and we're just keeping



294

00:17:20,030 --> 00:17:22,220

the same height and the height and width on this.



295

00:17:22,220 --> 00:17:22,870

OK.



296

00:17:23,240 --> 00:17:29,510

And then when it's finished what do we want to do we want to we want to go ahead and show the show the



297

00:17:29,510 --> 00:17:30,320

labels and stuff.



298

00:17:30,320 --> 00:17:31,010

OK.



299

00:17:31,420 --> 00:17:41,600

For the hustle mode on so self hustle label that is hidden not highlighted is hidden equals false and



300

00:17:41,600 --> 00:17:47,950

then self dot on that label that is hidden equals false.



301

00:17:48,290 --> 00:17:48,710

OK.



302

00:17:48,770 --> 00:17:53,090

And then the last thing we want to do is actually just get our cool sound effect to play and I need



303

00:17:53,090 --> 00:17:57,150

to do is type in player play above this view.



304

00:17:57,200 --> 00:17:57,780

Animate.



305

00:17:57,890 --> 00:17:59,000

OK.



306

00:17:59,630 --> 00:18:02,990

So we've done a lot here and it may be a lot to take in but it's not.



307

00:18:03,020 --> 00:18:03,730

It's not so bad.



308

00:18:03,770 --> 00:18:06,080

What we've done is in Iowa.



309

00:18:06,110 --> 00:18:09,130

You can drag interface elements to your code like so.



310

00:18:09,130 --> 00:18:13,760

And that's using the IBL is all we've done is we've said hey we're making a connection between user



311

00:18:13,760 --> 00:18:15,160

interface and code.



312

00:18:15,230 --> 00:18:19,160

So your code can manipulate them so we've grabbed the buttons in the holder and the rockets and all



313

00:18:19,160 --> 00:18:23,190

those things that we created then we created a player that actually played music.



314

00:18:23,300 --> 00:18:29,240

We went and got the path for the file the sound file the wave file here and we've loaded it into the



315

00:18:29,240 --> 00:18:31,580

player contents of your L into the player.



316

00:18:31,640 --> 00:18:34,810

And when we were preparing the audio player to actually play OK.



317

00:18:35,220 --> 00:18:39,870

Then when the power button plus pressed on the main screen we're going to hide the power button.



318

00:18:39,950 --> 00:18:45,390

We're going to hide the dark blue background and we're going to show the clouds in the rocket and all



319

00:18:45,390 --> 00:18:46,670

that on the screen.



320

00:18:46,670 --> 00:18:47,950

And then we're going to play the sound effect.



321

00:18:47,960 --> 00:18:53,760

And while the sound of explain we're going to move the rocket up over 2.3 seconds high into the sky.



322

00:18:53,900 --> 00:18:56,540

And then when that's done we're going to show the hustle labels on.



323

00:18:56,540 --> 00:19:01,100

So if this all worked out as expected we haven't run our code at all.



324

00:19:01,100 --> 00:19:02,300

Then it'll look great.



325

00:19:02,300 --> 00:19:04,840

So I'm going to change this to an iPhone 7.



326

00:19:05,310 --> 00:19:05,640

OK.



327

00:19:05,630 --> 00:19:08,830

And then we're going to run and see what happens.



328

00:19:09,070 --> 00:19:10,040

Here is our simulator.



329

00:19:10,040 --> 00:19:14,900

It's open and if it's too large or too small you can hold down command berths plus one or two or three



330

00:19:15,350 --> 00:19:17,910

and it will change the size of the simulator for you.



331

00:19:17,950 --> 00:19:18,540

OK.



332

00:19:18,980 --> 00:19:20,360

OK our screen is loaded.



333

00:19:20,450 --> 00:19:22,910

And so if we click this button hopefully it all works out.



334

00:19:22,910 --> 00:19:23,750

Let's go ahead and try



335

00:19:28,200 --> 00:19:29,780

that's pretty cool actually.



336

00:19:29,910 --> 00:19:30,820

We have a problem though.



337

00:19:30,900 --> 00:19:31,850

We have a bug right.



338

00:19:31,860 --> 00:19:34,220

So our rocket ship is too high in the sky.



339

00:19:34,560 --> 00:19:36,750

So we have to debug what happened here.



340

00:19:36,840 --> 00:19:38,000

OK this is called debugging.



341

00:19:38,160 --> 00:19:39,780

When you have a problem and you need to solve it.



342

00:19:39,780 --> 00:19:40,950

So what happened here.



343

00:19:41,160 --> 00:19:42,530

Well it's a little bit too high.



344

00:19:42,540 --> 00:19:46,260

So all we need to do is probably make its position a little bit lower from the top.



345

00:19:46,260 --> 00:19:49,200

So why at zero is here at the top.



346

00:19:49,350 --> 00:19:54,270

And so 20 down is not enough we probably need to make it like 100 from the top.



347

00:19:54,270 --> 00:19:57,910

So let's give that a shot on the y type in 100.



348

00:19:58,060 --> 00:20:00,600

Save it and then let's run it again.



349

00:20:01,310 --> 00:20:01,770

Here we go.



350

00:20:01,790 --> 00:20:06,210

Click it what hustle mode on.



351

00:20:06,220 --> 00:20:07,510

It's still not quite enough.



352

00:20:07,510 --> 00:20:10,120

I'm going to say 140.



353

00:20:10,390 --> 00:20:14,160

We're just making it look perfect here.



354

00:20:15,910 --> 00:20:16,420

There we go.



355

00:20:16,420 --> 00:20:19,610

So congratulations you built your very first iOS app.



356

00:20:19,630 --> 00:20:21,460

And you've actually done a lot.



357

00:20:21,490 --> 00:20:26,380

OK what did we do here in 20 minutes so you've built your first happened 20 minutes that's pretty fantastic



358

00:20:26,380 --> 00:20:30,010

and that's with me talking if you're a pro iOS tablet and you could have built this probably in five



359

00:20:30,010 --> 00:20:30,910

minutes.



360

00:20:30,910 --> 00:20:37,660

So what we've done here is we created interface elements on the screen so you could reference the controls



361

00:20:37,750 --> 00:20:39,070

and hide them and show them.



362

00:20:39,070 --> 00:20:44,640

And then we created an IB action right here that basically receives events when you press a button.



363

00:20:44,660 --> 00:20:45,730

And we did that from the power button.



364

00:20:45,730 --> 00:20:46,440

OK.



365

00:20:46,810 --> 00:20:51,700

And then we also did was we made it so when the action is pressed we hide the old elements on the screen



366

00:20:51,880 --> 00:20:56,630

and we show the new ones and then we play an animation of the rocket going up into the sky and sound



367

00:20:56,630 --> 00:20:57,040

of that.



368

00:20:57,090 --> 00:21:01,540

All the same time and when it gets to the top we show these labels here and when our very own animation



369

00:21:01,540 --> 00:21:03,470

which is really cool really really cool stuff.



370

00:21:03,470 --> 00:21:06,010

So just for fun let's play this one more time.



371

00:21:06,010 --> 00:21:10,910

And then you can give yourself a pat on the back and call yourself an official iOS developer.



372

00:21:13,400 --> 00:21:13,910

Boom.



373

00:21:14,320 --> 00:21:18,070

So congratulations you're an Iowa developer in training at least.



374

00:21:18,100 --> 00:21:19,510

And there's so much more to learn.



375

00:21:19,510 --> 00:21:21,730

So let's go ahead and get started moving forward.



376

00:21:21,730 --> 00:21:24,520

Show us your friends and family and this is really cool stuff.



377

00:21:24,520 --> 00:21:26,890

So Mark Price here at Dove slopes dot com.



378

00:21:26,950 --> 00:21:27,760

Moving on and for.