Έχοντας ολοκληρώσει το βασικό tutorial (https://appinventor.mit.edu/explore/ai2/hello-codi.html) με το οποία είδαμε εν συντομία τα βασικά χαρακτηριστικά του AppInventor, συνεχίζουμε με την επέκταση της άσκησης.
Προετοιμασία
- Μέσα στον φάκελο Ασκήσεις > AppInventor δημιουργήστε έναν νέο φάκελο με όνομα Codi
- Μετακινήστε εκεί όλα τα αρχεία του codi, δηλαδή τα αρχεία:
- codi.jpg
- Bee-Sound.mp3
- το αρχείο εγκατάστασης π.χ. codi_A3.pkg
- το αρχείο του project π.χ. codi_A3.aia
- Μέσα στον φάκελο Ασκήσεις > AppInventor δημιουργήστε έναν νέο φάκελο με όνομα Codi_and_Puppy
- Σε αυτόν τον φάκελο θα αποθηκεύσετε όλα τα νέα αρχείο που θα χρειαστείτε αλλά και που θα δημιουργήσετε.
α) Δημιουργήστε μια 2η οθόνη Screen2
β) Στην Screen2, όπως κάναμε και με την μέλισσα Codi στο αρχικό tutorial, εισάγετε ένα κουμπί και ένα label. Στο κουπί βάλτε την παρακάτω εικόνα (δεξί κλικ πάνω της > Αποθήκευση εικόνας ως και αποθηκεύστε την στον φάκελο Codi_and_Puppy):
File source: http://commons.wikimedia.org/wiki/File:Entlebucher_Puppy_on_lawn.jpg
γ) βάλτε ομοίως ένα component τύπου Sound και συνδέστε το με τον παρακάτω ήχο γαυγίσματος (τον οποίο προφανώς πρέπει να αποθηκεύσετε στον υπολογιστή σας και μετά να να ανεβάσατε στο AppInventor). Μπορείτε να κατεβάσετε το αρχείο ήχου αν κάνετε κλικ εδώ ( στον φάκελο Codi_and_Puppy)
Προγραμματίστε τα νέα στοιχεία (components) στο screen2 όπως είχαμε κάνει και στο screen1 με τη μέλισσα Codi. Δηλαδή όταν κάποιος πατά πάνω στην εικόνα του σκύλου να ακούγεται ο ήχος του γαυγίσματος
δ) προσθέστε ένα ακόμη κουμπί στο Screen1 το οποίο θα λέει “Επόμενο”. Ομοίως και στο Screen2.
ε) Προγραμματίστε το κουμπί στη μέλισσα (Screen1) να μας εμφανίζει το κουτάβι (Screen2) και το ανάποδο, από το Screen2 να ξαναπηγαίνουμε πίσω στο Screen1. Από το το περιβάλλον προγραμματισμού Blocks του AppInventor, από την ομάδα εντολών “Built-in” > “Control” επιλέξτε την εντολή “open another screen screenName”, όπως φαίνεται στην παρακάτω εικόνα:
Χρησιμοποιήστε τις παρακάτω εντολές:
To τελικό αποτέλεσμα πρέπει να είναι κάπως έτσι:
στ) Μπορείτε να προσθέσετε και ακόμη μια Screen3 με την εικόνα μίας γάτας και το νιαούρισμά της;
Πολυμεσικά αρχεία μπορείτε να βρείτε στις ιστοσελίδες που παραθέτω στη “Πηγές”, στο τέλος της σελίδας.
Σημείωση: Για να στοιχίσετε το κουμπί στη μέση θα πρέπει να χρησιμοποιήσετε:
Designer > Pallete > HorizontalArangement
Πηγές
- https://appinventor.mit.edu/explore/ai2/beginner-videos απλά tutorials του AppInventor
- https://freesound.org/ για δωρεάν ήχους
- https://commons.wikimedia.org/wiki/Main_Page για δωρεάν εικόνες
