1
00:00:00,240 --> 00:00:00,610
D'ACCORD.

2
00:00:00,690 --> 00:00:01,960
Alors commençons ici.

3
00:00:02,040 --> 00:00:07,390
Et cette vidéo se concentrera sur l'installation de Paperchase et la réalisation d'animations simples et simples.

4
00:00:07,440 --> 00:00:09,110
Donc pas d'audio tout de suite.

5
00:00:09,120 --> 00:00:12,400
La première chose que je vais indiquer, je suis dans un nouveau répertoire que j'ai créé.

6
00:00:12,720 --> 00:00:14,930
J'ai ajouté ce répertoire de sons ici.

7
00:00:14,940 --> 00:00:19,970
Assurez-vous donc que vous n'avez pas à le faire nécessairement pour cette vidéo, car vous ne jouerez pas les sons.

8
00:00:19,980 --> 00:00:26,820
Mais si vous voulez suivre le long de faire un répertoire assurez-vous que vous faites glisser ou copier ce dossier sons dans elle.

9
00:00:26,850 --> 00:00:38,650
La prochaine chose que vous devez faire est de faire notre fichier de sorte que je vais faire un fichier de l'enregistrer dans le répertoire correct et je vais simplement appeler les cercles à chaque fois.

10
00:00:39,810 --> 00:00:46,490
Eh bien, dans notre h Tim L. squelette bien sûr comme ça et nous allons laisser à cela pour l'instant.

11
00:00:46,800 --> 00:00:51,110
Donc, ouvrons-le ne devrait pas vraiment voir quoi que ce soit.

12
00:00:51,120 --> 00:00:53,710
Passons maintenant au génie du papier.

13
00:00:54,000 --> 00:00:55,370
Encore une fois j'aime vraiment celui-ci.

14
00:00:55,560 --> 00:01:00,530
Mais nous allons nous éloigner de cela et nous allons aller au téléchargement pour commencer.

15
00:01:01,350 --> 00:01:07,140
Et la première chose que nous allons faire est de télécharger la version la plus récente que j'ai effectivement déjà fait.

16
00:01:07,260 --> 00:01:10,810
Donc quand vous avez fini avec ça, ça ressemblera à ça.

17
00:01:11,010 --> 00:01:15,050
Et la première chose que nous pouvons faire est de jeter un coup d'oeil dans le répertoire des exemples.

18
00:01:15,090 --> 00:01:19,600
Jetons un coup d'oeil à l'étoile animée animée.

19
00:01:19,860 --> 00:01:23,880
Assez amusant de jouer avec ce qui me rend étourdi, donc je vais le fermer.

20
00:01:23,880 --> 00:01:26,280
Mais vous pouvez jeter un oeil à certains des autres aussi.

21
00:01:26,280 --> 00:01:28,300
Candy crash.

22
00:01:29,310 --> 00:01:32,010
Il ya donc une animation cool que vous pouvez faire.

23
00:01:32,130 --> 00:01:35,590
Il y a un peu de physique ici.

24
00:01:35,610 --> 00:01:38,120
Qu'avons-nous d'autre?

25
00:01:38,130 --> 00:01:45,110
Cette animation en ligne cool et un tas d'autres sont vous.

26
00:01:45,110 --> 00:01:49,290
J'aime vraiment celui-ci ce genre d'effet de parallaxe que vous déplacez votre souris.

27
00:01:49,830 --> 00:01:50,150
D'ACCORD.

28
00:01:50,190 --> 00:01:52,400
Donc vous pouvez passer des heures à le faire.

29
00:01:52,410 --> 00:01:55,450
Il ya beaucoup d'excellents exemples que vous pouvez ouvrir n'importe lequel d'entre eux si vous le souhaitez.

30
00:01:55,470 --> 00:01:56,980
Jetez un oeil à la façon dont il fonctionne.

31
00:01:57,060 --> 00:02:04,500
Regardons donc cet espace une première chose que vous verrez que nous incluons le papier J.S ..

32
00:02:04,590 --> 00:02:08,060
Nous avons besoin de ce fichier bien sûr la bibliothèque comme nous avons besoin pour Jay Querrey.

33
00:02:08,460 --> 00:02:16,070
Mais il ya quelque chose que vous n'avez pas vu avant qui est que nous avons un type de script est égal au texte slash papier script.

34
00:02:16,260 --> 00:02:29,240
Donc, il ya un type particulier de fichier ou un script que nous pouvons écrire appelé script papier qui est un langage spécifique au domaine qui est fondamentalement c'est un langage qui est fait spécifiquement pour paperchase.

35
00:02:29,250 --> 00:02:33,350
Donc ce n'est pas quelque chose qui marchera à moins que nous ayons Paperchase inclus.

36
00:02:33,570 --> 00:02:37,960
Et alors vous voyez également cette toile d'attribut toile égale toile.

37
00:02:37,980 --> 00:02:42,370
Donc c'est un peu bizarre ce qu'est une toile, c'est un élément hymnaire vieilli.

38
00:02:42,540 --> 00:02:45,550
C'est donc tout ce que nous faisons.

39
00:02:45,600 --> 00:02:47,590
Je vais vous montrer l'inspecter maintenant.

40
00:02:47,730 --> 00:02:50,280
C'est la version de travail ou la version finale.

41
00:02:50,380 --> 00:02:54,070
Si je jette un coup d'oeil d'abord pour vous montrer comment cela fonctionne.

42
00:02:54,070 --> 00:02:59,450
Encore une fois si je jette un coup d'oeil et je inspecter ce fond noir, ce n'est pas le corps.

43
00:02:59,700 --> 00:03:08,040
C'est quelque chose appelé toile et toile est un élément HMO qui agit essentiellement comme un lieu pour faire des animations et des graphiques.

44
00:03:08,280 --> 00:03:19,010
Donc, si je vais à DN un regard pour toile peut voir que ajouté une odeur âgée de cinq à chaque élément de fumée de cannabis peut être utilisé pour dessiner des graphiques pour être un script en Javascript.

45
00:03:19,290 --> 00:03:20,300
Donc c'est vraiment tout ce qu'il est.

46
00:03:20,310 --> 00:03:26,000
C'est un élément dans la toile que sur son propre sans javascript il ne fait vraiment pas une chose.

47
00:03:26,280 --> 00:03:37,140
Mais alors nous allons et ajouter des javascript pour dire des choses comme le rendre rectangle ici faire vert faire une forme 3D ici faire cette animation et nous faisons que tous avec Javascript.

48
00:03:37,140 --> 00:03:40,830
Ainsi, le papier J.S. Utilise un élément canvas.

49
00:03:40,920 --> 00:03:45,000
C'est la scène où il ajoute dans toutes les animations dans tous les graphiques.

50
00:03:45,000 --> 00:03:49,140
Donc nous avons besoin d'avoir une toile sur notre page comme vous pouvez le voir pour cet exemple d'espace.

51
00:03:49,560 --> 00:03:59,760
Si je vais au fond de la seule chose dans le corps, c'est ici, ici, une toile et il a ID égale à la toile et aussi l'arrière-plan mis en noir.

52
00:03:59,850 --> 00:04:04,500
Donc Id égale la toile correspond à cette ligne ici.

53
00:04:04,500 --> 00:04:06,300
Toile égale toile.

54
00:04:06,300 --> 00:04:16,460
Donc, nous disons juste ce fichier de script papier ou ce script de script papier quel ID à rechercher dans l'exemple qui vient d'être nommé, mais la toile.

55
00:04:16,800 --> 00:04:18,890
Nous allons donc faire quelque chose de semblable.

56
00:04:18,930 --> 00:04:22,820
Mais avant d'y arriver, nous devons nous assurer d'inclure le papier oui.

57
00:04:23,220 --> 00:04:26,250
Donc, quand vous allez au téléchargement.

58
00:04:26,250 --> 00:04:35,870
Et plutôt que d'ouvrir des exemples, nous allons regarder indexés et puis nous pouvons choisir soit papier complet ou papier plein d'hommes et de comprendre le plein ici.

59
00:04:35,910 --> 00:04:47,410
Donc, je vais copier cela dans notre annuaire pour papier Dasch complet, mais nous alors dans notre propre application, nous devons nous assurer d'inclure.

60
00:04:47,670 --> 00:04:55,200
So Source égal au papier Dasch plein japes juste comme ça et sauver.

61
00:04:55,620 --> 00:04:59,760
Et puis ce que nous allons faire est de rafraîchir la page dans Chrome.

62
00:05:00,120 --> 00:05:01,630
Assurez-vous que nous n'obtenons pas d'erreur.

63
00:05:01,740 --> 00:05:02,390
Génial.

64
00:05:02,430 --> 00:05:04,590
Donc, il a trouvé le fichier très bien.

65
00:05:04,590 --> 00:05:11,580
Maintenant, allons-y aux documents du génie du papier et regardez les didacticiels, alors je n'ai pas fait cela dès le début.

66
00:05:12,120 --> 00:05:15,490
Mais je veux lire la description de ce JSA papier est.

67
00:05:15,780 --> 00:05:21,960
C'est donc un framework open source de scripts graphiques vectoriels qui fonctionne sur le dessus de l'âge de mes cinq toiles.

68
00:05:22,080 --> 00:05:35,950
Il offre un modèle d'objet de diagramme de slash propre de diagramme de scène et beaucoup de fonctionnalité puissante pour créer et travailler avec des graphiques de vecteur et des courbes de Bezier tout soigneusement enveloppés dans une interface de programmation cohérente et propre bien conçue.

69
00:05:36,000 --> 00:05:37,540
Donc, une sorte de bouchée.

70
00:05:37,560 --> 00:05:42,120
Fondamentalement, c'est un coup de cul dessin bibliothèque bibliothèque d'animation bibliothèque de graphiques.

71
00:05:42,120 --> 00:05:43,560
C'est vraiment très populaire.

72
00:05:43,560 --> 00:05:52,270
Il ya quelques-uns d'entre eux là-bas donc ce n'est pas ce n'est pas comme une requête où il est à peu près la bibliothèque de manipulation DOM.

73
00:05:52,290 --> 00:05:54,030
La bibliothèque de gestion des événements.

74
00:05:54,030 --> 00:06:00,790
Il ya beaucoup d'animation dans les choses graphiques là-bas, mais le papier est est je suis assez confiant disant que c'est le plus populaire.

75
00:06:01,110 --> 00:06:06,660
OK alors revenons aux didacticiels et jetez un coup d'oeil à la mise en route.

76
00:06:06,660 --> 00:06:09,000
Je pense que oui commencer à travailler avec du papier.

77
00:06:09,020 --> 00:06:09,900
Oui.

78
00:06:10,470 --> 00:06:14,280
Et nous allons défiler vers le bas et jeter un oeil à leur exemple ici.

79
00:06:14,820 --> 00:06:17,380
Donc, ce que nous pourrions faire, c'est copier tout cela.

80
00:06:17,400 --> 00:06:21,290
Mais je veux le faire un morceau à la fois afin que vous voyiez comment cela fonctionne.

81
00:06:21,540 --> 00:06:29,270
Commençons donc par copier cette toile, il suffit de copier toute la ligne et nous la mettrons dans notre corps.

82
00:06:29,970 --> 00:06:36,180
Ainsi toile I.D. Est égal à ma toile et si je rafraîchis la page, nous ne verrons rien du tout.

83
00:06:36,270 --> 00:06:48,260
Si nous nous attendions à ce que nous verrions il ya une toile là-bas, mais si nous retournons nous allons copier ce texte de script ou de type parce que la taille du texte papier script toile est ma toile.

84
00:06:48,260 --> 00:06:52,850
Et mettons cela ici et collez.

85
00:06:53,130 --> 00:07:00,000
Donc, si nous regardons ce qui se passe ici, il ya quelques commentaires gentils dit qu'il crée un papier G-S chemin pour tracer une ligne.

86
00:07:00,120 --> 00:07:04,400
Donc, nous faisons un chemin et vous allez voir beaucoup de syntaxe ici que vous n'avez jamais vu.

87
00:07:04,410 --> 00:07:05,730
Et là encore, c'est le point.

88
00:07:05,940 --> 00:07:09,740
Le fait est que je vous force à voir des choses nouvelles pour lire les documents.

89
00:07:09,800 --> 00:07:17,890
Il peut désensibiliser vous à ce sentiment de Je ne sais pas ce que je fais Je n'ai jamais vu ce code avant je ne sais pas comment cela fonctionne.

90
00:07:17,940 --> 00:07:19,370
C'est le genre de point de la bibliothèque.

91
00:07:19,380 --> 00:07:23,310
Vous n'avez pas à savoir comment il fonctionne particulièrement pour quelque chose comme des animations.

92
00:07:23,310 --> 00:07:26,120
Juste être heureux que quelqu'un d'autre prend soin de lui pour vous.

93
00:07:26,130 --> 00:07:28,700
Je suis certainement elle m'a sauvé la vie beaucoup de fois.

94
00:07:28,920 --> 00:07:33,070
Donc, nous créons un nouveau chemin d'accès ici à une variable.

95
00:07:33,070 --> 00:07:50,960
Nous changeons la couleur du trait pour le noir et ensuite nous créons un point pour le début à 100 virgule 100 puis nous déplaçons notre chemin vers ce début et ensuite nous dessinons une ligne pour commencer plus 100 X et négatif 50 y.

96
00:07:51,210 --> 00:08:04,800
Donc, je vais vous montrer exactement ce que cela ne fait, mais il dessine une ligne à partir de 100 100, puis il déplace cette ligne ou il connecte le premier point à 300 virgule 50.

97
00:08:04,800 --> 00:08:09,260
Donc, si nous regardons, assurez-vous que tout fonctionne si nous sommes frais.

98
00:08:10,260 --> 00:08:12,160
Nous nous retrouvons avec une ligne.

99
00:08:13,170 --> 00:08:16,730
Donc, la meilleure chose à faire quand vous avez quelque chose de nouveau comme ça, c'est de jouer.

100
00:08:17,040 --> 00:08:18,480
Essayez donc de changer cela.

101
00:08:18,630 --> 00:08:25,980
Donc, il est rouge et le début est maintenant 0 100.

102
00:08:25,980 --> 00:08:33,250
Là nous allons nous avons juste déplacé notre ligne ou nous allons changer cela pour être quelque chose de plus drastique comme 500.

103
00:08:33,510 --> 00:08:36,070
Ainsi vous pouvez jouer autour avec ceci toute la journée.

104
00:08:36,420 --> 00:08:51,580
Mais ce que je veux vraiment souligner, c'est que nous créons un script de script papier pas de texte, donc c'est du script papier javascript et nous sommes en train de définir ce lien canvas canvas est égale à ma toile qui est le nom ou l'ID que nous lui avons attribué.

105
00:08:51,660 --> 00:08:58,530
Donc, ceux-ci doivent correspondre et le point entier de cela est juste de dire à ce dossier de script papier où dessiner des choses.

106
00:08:58,560 --> 00:09:00,040
Quelle toile à utiliser.

107
00:09:00,300 --> 00:09:02,360
Nous pouvons donc jouer un peu plus.

108
00:09:02,460 --> 00:09:10,890
Et je vous recommande vivement d'arrêter la vidéo et de jeter un oeil aux didacticiels d'essayer d'autres choses.

109
00:09:11,100 --> 00:09:17,720
Donc, je vais juste vous diriger vers les formes prédéfinies chemin est ce que nous allons utiliser.

110
00:09:17,820 --> 00:09:21,280
Nous allons faire des cercles avec notre application ici.

111
00:09:21,690 --> 00:09:24,270
C'est donc ce que nous devrons faire.

112
00:09:24,690 --> 00:09:31,820
Il suffit de copier ce code ici pour Pat nouveau chemin de cercle de points et puis vous devez lui donner un point de faire un cercle.

113
00:09:32,160 --> 00:09:34,240
Et puis le rayon, il ressemble.

114
00:09:34,320 --> 00:09:44,690
Donc, vous pouvez voir qu'il ya une explication donc il a besoin d'un point central x 100 y 70 et un rayon de 50, puis une couleur de remplissage.

115
00:09:45,000 --> 00:09:51,120
So let's jeter un coup d'oeil juste copier ceci au fond de notre code et voir ce qui se produit.

116
00:09:51,720 --> 00:09:56,160
Ce qui est une sorte de ce que vous faites beaucoup avec J S et les bibliothèques similaires.

117
00:09:56,340 --> 00:09:57,340
Vous venez d'expérimenter.

118
00:09:57,480 --> 00:10:01,520
Alors changeons de rayon pour être 10.

119
00:10:01,530 --> 00:10:02,880
Voilà.

120
00:10:03,540 --> 00:10:09,000
Donc, nous pourrions aussi essayer de faire un autre cercle en copiant simplement ceci vers une autre ligne.

121
00:10:09,150 --> 00:10:15,610
Appelons-le cercle var 2 égal à nouveau point de chemin.

122
00:10:15,840 --> 00:10:18,340
Et faisons celui-ci vraiment grand et pourpre.

123
00:10:18,630 --> 00:10:22,250
Alors nouveau point et mettons-le à 50.

124
00:10:22,250 --> 00:10:25,740
Venez un 50 et il va être énorme.

125
00:10:25,740 --> 00:10:34,730
Donc il lui donner un rayon de 300 et puis cercle à la couleur de remplissage égale violet.

126
00:10:34,830 --> 00:10:38,180
Juste comme ça rafraîchir.

127
00:10:38,670 --> 00:10:46,740
Et vous pouvez voir que nous finissons avec ce cercle gigantesque que vous ne pouvez pas vraiment dire combien il est grand parce que notre toile n'a pas pris toute la largeur de notre écran.

128
00:10:46,950 --> 00:10:52,860
Alors faisons-le ensuite parce que nous voulons que nous voulions que notre toile prenne toute la largeur.

129
00:10:52,860 --> 00:11:01,790
Donc, je vais aller et faire une nouvelle feuille de style, donc j'ai ajouté tag lien ici un Tref équivaut au cercle de point SS qui n'existe pas.

130
00:11:02,430 --> 00:11:12,210
Et puis nous allons enregistrer un fichier appelé Circle Stut voir évaluer et ce que nous allons faire est d'ajouter dans la toile avec 100 pour cent.

131
00:11:12,840 --> 00:11:17,930
Et donnons-lui aussi un fond de noir.

132
00:11:17,930 --> 00:11:21,880
Et si nous sommes frais, vous pouvez voir que nous sommes proches, mais nous avons quelques choses.

133
00:11:21,870 --> 00:11:25,210
La première est que notre corps ne va pas vraiment tout le chemin vers le bas.

134
00:11:25,230 --> 00:11:28,860
Donc, notre toile prend jusqu'à 100 pour cent de la largeur.

135
00:11:28,980 --> 00:11:38,840
Mais même si nous lui donnons 100 pour cent hauteur en ce moment il ne va pas vraiment changer la façon dont nous voulons qu'il.

136
00:11:38,850 --> 00:11:41,570
Nous avons également cette marge dont nous voulons nous débarrasser.

137
00:11:42,000 --> 00:11:46,390
Donc, plutôt que de passer trop de temps à passer, je vais juste vous montrer ce que nous devons faire.

138
00:11:46,770 --> 00:11:54,500
Eh bien, juste la hauteur définie à 100 pour cent et la marge à zéro.

139
00:11:54,810 --> 00:11:58,490
Et si je rafraîchis la page maintenant il prend le plein écran.

140
00:11:58,860 --> 00:12:10,440
Donc, si vous voulez aller plus en détail et comprendre exactement pourquoi nous avons fait inspecter le corps avant que nous ajoutons ce code et puis décommented inspecter le corps à nouveau et vous verrez ce qui se passe.

141
00:12:10,560 --> 00:12:20,020
Fondamentalement, nous nous assurons simplement que le corps prend toute la largeur et la hauteur et il n'y a pas de marge, ce qui signifie que notre toile sera ensuite étendre à prendre cet espace entier ainsi.

142
00:12:20,250 --> 00:12:20,910
D'ACCORD.

143
00:12:20,910 --> 00:12:24,680
Donc nous avons créé une toile maintenant c'est vraiment la dernière chose que je vais faire dans cette vidéo.

144
00:12:24,690 --> 00:12:30,420
Je voulais simplement vous présenter la paperasserie que nous avons des scripts de script papier.

145
00:12:30,420 --> 00:12:35,140
Nous lui donnons une toile et ensuite nous mettons un code ici que vous n'avez jamais vu auparavant.

146
00:12:35,190 --> 00:12:41,030
Beaucoup de ce que je n'ai jamais vu avant que j'ai fait cette vidéo ou jusqu'à ce que j'ai fait ce projet pour cette vidéo.

147
00:12:41,100 --> 00:12:42,380
Je l'ai déjà vu avant.

148
00:12:42,390 --> 00:12:43,820
Cette vidéo exacte.

149
00:12:43,830 --> 00:12:46,580
Mais le point est que c'est nouveau.

150
00:12:46,650 --> 00:12:48,130
Et c'est pourquoi nous faisons cela.

151
00:12:48,150 --> 00:12:54,200
C'est une compétence vraiment importante pour pouvoir prendre le code redox et le copier et le changer.

152
00:12:54,330 --> 00:12:54,980
Génial.

153
00:12:54,990 --> 00:13:05,980
Donc, dans la prochaine vidéo je vais vous donner un exercice facultatif rapide si vous voulez juste pour arriver au projet et sauter l'expérience d'apprentissage éducatif tout ce que vous voulez l'appeler.

154
00:13:06,000 --> 00:13:11,170
Mais si vous obtenez seulement à la sorte de la récompense aller de l'avant sauter la prochaine vidéo.

155
00:13:11,190 --> 00:13:13,040
Je vous recommande de le faire.

156
00:13:13,050 --> 00:13:17,860
Nous n'allons pas faire la chose la plus impressionnante, mais je vais vous faire faire un exercice avec certains cercles.

157
00:13:17,940 --> 00:13:18,500
Très excitant.

158
00:13:18,510 --> 00:13:18,960
Je connais.

159
00:13:19,200 --> 00:13:19,480
D'ACCORD.

160
00:13:19,500 --> 00:13:20,360
À plus.