Digitales Kritzeln, MIT App Inventor Tutorial #4
-
0:02 - 0:12♩♫♪♬
-
0:12 - 0:17Hey, willkommen zurück. Wir sind Shay und Emily und wir sind hier mit dem dritten Tutorial der App Inventor Hour of Code.
-
0:18 - 0:21- Hey Emily, ich fordere dich zu einem Zeichenduell heraus!
- Zeig's mir! -
0:27 - 0:30Okay, das war kindisch aber überraschend spaßig.
-
0:30 - 0:34Yeah. Es ist Zeit für den nächsten Schritt und wir haben dir gerade eine Aussicht gegeben.
-
0:34 - 0:40Es wird eine großartige App. Für diese App machen wir eine Leinwand, auf der man den Finger wie einen Stift verwenden kann.
-
0:40 - 0:42Wir nennen es "Digitales Kritzeln".
-
0:42 - 0:49Okay, zurück zum Bildschirm. Haha, verstehst du? Bild-Schirm... ähm. Großartig. Also los.
-
0:49 - 0:52Erneut, logge dich bei App Inventor ein, wenn du noch nicht dort bist.
-
0:53 - 0:57Beginne ein neues Projekt. Nenne dieses "DigitalDoodle".
-
0:57 - 1:01So wie bei der "Ball Bounce"-App brauchst du anfangs eine Leinwand.
-
1:01 - 1:06Aber bevor wir das machen - erinnerst du dich an den Trick, der die App vom Scrollen abhält?
-
1:07 - 1:12Richtig. Gehe in die Eigenschaften von "Screen1" und deaktiviere "Scrollable".
-
1:12 - 1:17Nun füge eine Leinwand hinzu, die du unter "Drawing and Animation" findest.
-
1:17 - 1:24Gehe zu den Eigenschaften der Leinwand und ändere die Einstellungen für Breite und Höhe auf "Fülle Elter".
-
1:24 - 1:26Das vergrößert unsere Leinwand ein ganzes Stück.
-
1:26 - 1:34Auch, obwohl wir sie noch nicht benutzen, ziehe eine Beschleunigungskomponente aus der Sensorenschublade und wirf sie auf die App.
-
1:35 - 1:37Zeit für die Blöcke!
-
1:37 - 1:43Okay, also das Event, das erkennt, wenn jemand den Finger auf der Zeichenfläche zieht, ist recht einfach zu erraten.
-
1:43 - 1:49Klicke auf die Blöcke der Leinwandkomponente und sieh in die Schublade. Kannst du herausfinden, welchen Block du brauchst?
-
1:50 - 1:54Richtig, du möchtest die Eventbehandlung für wenn "Canvas1" gezogen wird.
-
1:54 - 2:00Diese Eventbehandlung hat eine Reihe von Parametern. Keine Sorge - die sind recht einfach zu verstehen.
-
2:00 - 2:05Und du kannst Hilfe auf dem Bildschirm jeder Zeit bekommen, indem du die Maus über den Block bewegst. So.
-
2:06 - 2:12Okay, großartig! So. Wir wollen immer eine Linie malen von wo der Finger zuletzt war zu wo er jetzt ist.
-
2:12 - 2:18Im Grunde bringen wir die Zeichenfläche dazu, hunderte von Linien zwischen den Punkten der Fingerbewegung zu malen.
-
2:18 - 2:21Das wird so aussehen, als malten wir auf dem Bildschirm des Smartphones.
-
2:21 - 2:31Aber zuerst brauchen wir den Block, der eine Linie malt. Gehe wieder zu "Canvas1" und hol' diesmal den Block "call Canvas1.DrawLine".
-
2:33 - 2:38Jetzt brachen wir die X- und Y-Koordinaten vom Anfang der Linie zu deren Ende.
-
2:38 - 2:44Das "when Dragged"-Event ruft "DrawLine" immer und immer wieder während der Finger über den Bildschirm schleift.
-
2:44 - 2:48Wir müssen lediglich die XY-Koordinaten für die Linien breitstellen.
-
2:48 - 2:51Fahre fort und nutze vorheriges X und vorheriges Y.
-
2:53 - 2:56Du wirst auch jetziges X und jetziges Y brauchen.
-
2:58 - 2:59Nun, probiere deine App aus.
-
3:00 - 3:01Sie sollte dich auf den Bildschirm zeichen lassen.
-
3:03 - 3:09Die App ist ist großartig aber wäre es nicht cool, wenn du Schütteln könntest, um den Bildschirm zu löschen, statt einen Knopf zu drücken?
-
3:09 - 3:10Ja, wie eine Zaubertafel.
-
3:10 - 3:16Okay, es ist Zaubertafelzeit. Erinnere dich an den Beschleunigungssensor, den wir in die Komponentenliste getan haben.
-
3:16 - 3:18Also können wir das jetzt programmieren.
-
3:19 - 3:23Gehe zur Schublade des Beschleunigungssensors und ziehe "when Shaking" raus.
-
3:23 - 3:26Der Block, den wir zum Löschen des Bildschirms brauchen, ist einfach gefunden.
-
3:26 - 3:35Gehe zur Leinwand und wähle "call Canvas1.Clear". Stecke diesen violetten Block richtig in den Eventhandler für das Schütteln.
-
3:36 - 3:37Großartig! Teste die App wieder.
-
3:37 - 3:39Löscht sich die Zeichnung, wenn du es schüttelst?
-
3:39 - 3:46Knorke! Wiederum haben wir eine einfache App gebaut, die auf verschiedene lustige Weisen erweitert werden kann.
-
3:46 - 3:55Die App, die wir am Anfang des Tutorials demonstriert haben, lässt dich zuerst ein Bild machen und tut dieses Bild dann auf die Leinwand, wo du drauf malen kannst.
-
3:55 - 3:59Du kannst auch Knöpfe erstellen, um die Farbe der Tinte für die Zeichnung zu ändern.
-
3:59 - 4:04All diese Erweiterungen werden in dem "PaintPot"-Tutorial auf unserer Webseite erklärt.
-
4:04 - 4:11Wie du sehen kannst, gibt es endlos viele Möglichkeiten, was du mit App Inventor bauen kannst. Es reicht an fast alle Fähigkeiten deines Smartphones heran.
-
4:11 - 4:15Du kannst sogar Text senden und empfangen und anrufen, wenn du ein voll funktionstüchtiges Smartphone hast.
-
4:15 - 4:19Sogar auf einem Tablet, über WLAN, kannst du ganz coole Sachen machen.
-
4:19 - 4:24Danke, dass du mitgemacht hast. Wenn du interessiert bist, mehr über App Inventor zu lernen, gehe auf die App Inventor Webseite.
-
4:25 - 4:26Frohes Erfinden!
-
4:26 - 4:36♩♫♪♬
- Title:
- Digitales Kritzeln, MIT App Inventor Tutorial #4
- Description:
-
Diese kurze Video zeigt dir, wie du mit dem Finger auf dem Bildschirm zeichnen kannst. Es ist das dritte Tutorial der Serie von Einführungsvideos in App Inventor, die zeigen, wie man Apps mit App Inventor baut.
- Video Language:
- English
- Duration:
- 04:40
Nicco Kunzmann edited German subtitles for Digital Doodle, MIT App Inventor Tutorial #4 | ||
Nicco Kunzmann edited German subtitles for Digital Doodle, MIT App Inventor Tutorial #4 | ||
Nicco Kunzmann edited German subtitles for Digital Doodle, MIT App Inventor Tutorial #4 | ||
Nicco Kunzmann edited German subtitles for Digital Doodle, MIT App Inventor Tutorial #4 | ||
Nicco Kunzmann edited German subtitles for Digital Doodle, MIT App Inventor Tutorial #4 | ||
Nicco Kunzmann edited German subtitles for Digital Doodle, MIT App Inventor Tutorial #4 | ||
Nicco Kunzmann edited German subtitles for Digital Doodle, MIT App Inventor Tutorial #4 | ||
Nicco Kunzmann edited German subtitles for Digital Doodle, MIT App Inventor Tutorial #4 |