1
00:00:00,510 --> 00:00:01,740
Ils sont les bienvenus.

2
00:00:02,070 --> 00:00:06,180
Donc, dans cette unité, nous faisons probablement ma chose préférée jamais.

3
00:00:06,180 --> 00:00:08,630
C'est ce jouet simple mais amusant.

4
00:00:09,120 --> 00:00:15,170
En utilisant l'animation et une bibliothèque d'animation quelques graphiques quelques audio et bibliothèque audio.

5
00:00:15,270 --> 00:00:30,700
Et nous allons faire un simple simple clone de ce pad une application tap que je vous ai montré au début où vous pouvez frapper les touches sur votre clavier et chaque touche correspond à un son qui est joué et un peu d'animation et vont juste soit simple.

6
00:00:30,720 --> 00:00:32,390
Nous n'allons pas avoir un tas d'animations différentes.

7
00:00:32,400 --> 00:00:33,700
Je vais vous montrer à quoi ça ressemble.

8
00:00:33,840 --> 00:00:35,690
Chaque touche possède son propre son.

9
00:00:35,850 --> 00:00:43,710
Et quand je frappe cette touche le son est joué et nous obtenons un cercle coloré à travers chaque clé a sa propre couleur et puis les cercles animent.

10
00:00:43,710 --> 00:00:44,900
Ils rétrécissent fondamentalement vers le bas.

11
00:00:44,910 --> 00:00:54,990
Donc, je vais vous montrer ce que je veux dire et de le transformer un peu.

12
00:00:55,640 --> 00:00:59,560
Nous allons faire ce film n'est pas le même son ici.

13
00:00:59,610 --> 00:01:02,370
Oui, c'est assez amusant, mais.

14
00:01:02,400 --> 00:01:06,190
Mais la raison pour laquelle nous faisons cela n'est pas seulement parce que c'est un projet amusant.

15
00:01:06,390 --> 00:01:15,310
Nous le faisons parce que nous devons utiliser des bibliothèques ici et nous allons utiliser deux bibliothèques et mentionné un est appelé le génie de papier et un autre est appelé comment ils sont génie.

16
00:01:15,720 --> 00:01:20,760
Et je veux juste que vous voyiez ce que le processus est comme lorsque vous incorporez une bibliothèque dans votre code.

17
00:01:20,760 --> 00:01:42,810
Et chaque fois que j'écris des programmes, que ce soit pour un cours du soir ou un cours de six mois ou un cours de trois mois ou un cours en ligne, je m'assure toujours qu'il ya certains il ya un projet ou une affectation qui oblige les élèves à faire un peu de creuser Les docks d'une bibliothèque ou de trouver comment intégrer un code externe dans leur propre application.

18
00:01:42,810 --> 00:01:49,210
Et j'essaie habituellement de faire quelque chose qui est un peu amusant sorte d'un jouet peut-être ou une démo interactive cool.

19
00:01:49,320 --> 00:01:56,640
Donc, j'ai fait des choses avec audio avant avec des animations, mais aussi avec la webcam et le suivi du visage et la tête de suivi.

20
00:01:56,820 --> 00:02:01,420
Il ya des bibliothèques qui peuvent faire à peu près n'importe quoi maintenant avec le navigateur c'est vraiment impressionnant.

21
00:02:01,440 --> 00:02:03,750
Celui-ci est vraiment très amusant.

22
00:02:03,990 --> 00:02:11,490
Encore une fois, nous prenons deux bibliothèques Paperchase et comment lurgy que nous utilisons paperchase pour aider avec des graphiques et des animations.

23
00:02:11,790 --> 00:02:15,330
Ils ont donc des exemples très amusants.

24
00:02:15,480 --> 00:02:27,110
Si vous cliquez sur Showcase réellement et sur le papier Jasc point showcase ils vous montrent quelques cas d'utilisation réelle où les gens ont utilisé du papier juste dans les wilds des exemples de coupe claire.

25
00:02:27,270 --> 00:02:32,930
Il ya des jouets amusants que j'aime vraiment celui-ci ici peut probablement jouer avec cela pendant des heures.

26
00:02:33,060 --> 00:02:36,910
Quelque chose est très relaxant à ce sujet à moi.

27
00:02:37,260 --> 00:02:40,360
Les choses si amusantes que nous pouvons faire avec paperchase.

28
00:02:40,470 --> 00:02:48,210
Encore quelque chose que Paperchase ne nous pouvons faire de notre propre chef sans Paperchase, mais c'est beaucoup de travail.

29
00:02:48,360 --> 00:02:50,460
Alors je vais vous montrer ce que je veux dire.

30
00:02:50,460 --> 00:02:51,680
Le code ici.

31
00:02:51,690 --> 00:03:01,830
J'ai donc frappé une clé dans ce cas la lettre P pour faire ce cercle et le rétrécir comme ça pour faire cette animation et aussi le remarquer il change de couleur un peu.

32
00:03:02,040 --> 00:03:05,970
Je ne sais pas si vous pouvez voir cela, mais il va de violet ou bleu vers le pourpre.

33
00:03:06,060 --> 00:03:09,870
Ou si je fais un autre cela va du jaune au vert.

34
00:03:10,200 --> 00:03:16,890
Cette animation et cette transition sans papier pourraient être de 50 lignes.

35
00:03:17,040 --> 00:03:19,920
Nous pourrions peut-être nous en sortir avec environ 20 lignes.

36
00:03:19,950 --> 00:03:20,280
Oui.

37
00:03:20,280 --> 00:03:21,550
C'est moins de cinq.

38
00:03:21,690 --> 00:03:23,240
C'est vraiment très simple.

39
00:03:23,250 --> 00:03:26,960
Même chose avec Hausler si howler nous aide à jouer de l'audio.

40
00:03:27,120 --> 00:03:37,940
Nous pouvons faire tout cela sans toutefois juste comme nous pouvons faire tout ce que J queery tout ce qu'il fait et nous pouvons obtenir sans j queery il signifie simplement simplement que nous devons écrire plus de code.

41
00:03:38,070 --> 00:03:57,070
Donc, cela joue un son Voici un exemple, nous allons faire quelque chose de très similaire à cela où nous allons juste jouer un son quand vous frappez une touche et chaque touche a son propre son unique donc je frappe qq joue toujours Que le bruit et il est toujours que la transition de couleur bleu clair à un bleu plus foncé.

42
00:03:57,120 --> 00:04:03,390
Une dernière note est que les cercles sont dans une réponse aléatoire dans un emplacement aléatoire chaque fois que vous appuyez sur cette touche.

43
00:04:03,510 --> 00:04:09,710
Ainsi, l'emplacement n'est pas défini ne correspond pas à la clé juste la couleur et le son qui est joué.

44
00:04:10,180 --> 00:04:11,430
D'accord! Super.

45
00:04:11,430 --> 00:04:13,560
Donc, dans la prochaine vidéo, nous allons commencer.

46
00:04:13,560 --> 00:04:21,670
Une chose que je tiens à souligner avant de commencer, c'est que tous ces sons que vous entendez les jouer tous vraiment.

47
00:04:23,630 --> 00:04:26,940
Oui, des sons vraiment sympa.

48
00:04:27,060 --> 00:04:29,560
Nous pouvons effectivement les utiliser dans ce projet ensemble.

49
00:04:29,970 --> 00:04:31,600
Je les ai inclus comme téléchargement.

50
00:04:31,770 --> 00:04:36,660
Je vais vous montrer ici si vous téléchargez le fichier zip son.

51
00:04:36,690 --> 00:04:37,740
Il y a beaucoup de sons.

52
00:04:37,740 --> 00:04:40,260
Vingt sons dans ce fichier.

53
00:04:40,290 --> 00:04:44,550
Il y a donc des sons vraiment agréables et nous pouvons utiliser tous ces éléments.

54
00:04:44,580 --> 00:04:46,970
Ils proviennent d'un projet open source et d'un ghetto.

55
00:04:47,310 --> 00:04:52,270
C'est en fait ce que Patta tap utilise ou ce robinet Pedda est en réalité.

56
00:04:52,590 --> 00:04:54,680
C'est cette synchrone neuronale.

57
00:04:54,690 --> 00:04:58,900
Donc, il a des animations si vous voulez regarder les animations que nous n'allons pas faire.

58
00:04:58,970 --> 00:05:02,410
Donc beaucoup plus complexe mais il a aussi tous les sons.

59
00:05:02,640 --> 00:05:09,570
Donc, ce que j'ai fait, c'est que j'ai juste pris le son de ce dossier ici tous ces sons et je les ai zippés ensemble.

60
00:05:09,570 --> 00:05:19,160
Il ya beaucoup plus si vous voulez choisir différents sons que vous pouvez aller pour obtenir n'ont pas télécharger cela, mais j'aime les sons qui sont dans ce dossier.

61
00:05:19,330 --> 00:05:21,750
Indiquez également la licence ici.

62
00:05:21,750 --> 00:05:25,030
Nous pouvons l'utiliser MIT license jeter un coup d'oeil à elle si vous voulez.

63
00:05:25,320 --> 00:05:29,790
Vraiment beau son donc je ne suis pas sûr qui les a fait si le créateur ici les a fait.

64
00:05:29,790 --> 00:05:34,250
Mais il ya des sons vraiment très bons que nous allons utiliser et ils sont identiques à ce que Patta tap utilise.

65
00:05:34,410 --> 00:05:35,620
Donc télécharger ceux.

66
00:05:35,640 --> 00:05:38,600
Il ressemble à ceci juste un annuaire avec un tas de sons.

67
00:05:38,640 --> 00:05:40,860
Et nous allons utiliser cela dans les prochaines leçons.

68
00:05:41,160 --> 00:06:03,370
Alors nous allons commencer et commencer dans la prochaine vidéo et je vais juste vous laisser les dernières secondes ici et faire quelque chose sur ce CD.