LA MULTIMEDIALITÀ: LE IMMAGINI, LE ANIMAZIONI E I SUONI 1

Transcript

1 LA MULTIMEDIALITÀ: LE IMMAGINI, LE ANIMAZIONI E I SUONI (Caso di studio facoltativo) Pensare a oggetti: animazioni e suoni nella vista Questo caso di studio si è focalizzato principalmente sul modello MVC della nostra simulazione di ascensore. Ora che abbiamo completato la progettazione del modello, ci occupiamo della vista, che fornisce la presentazione visiva del modello. Nel nostro caso di studio, la vista, incapsulata nella classe ElevatorView, è un oggetto JPanel contenente altri oggetti JPanel figli, ognuno rappresentante un oggetto unico del modello MVC (per esempio, un oggetto Person, un oggetto Button, ecc.). La classe ElevatorView è la classe più grande nel caso di studio. In questa sezione, discutiamo le classi per la grafica e il suono usate da ElevatorView. Presenteremo e spiegheremo il resto del codice sul sito Web /allegati/. Nella sezione 3.7 del volume Tecniche di base, abbiamo costruito il diagramma di classe del nostro modello individuando sostantivi e frasi dalla specifica del problema. Abbiamo ignorato parecchi di questi sostantivi, perché non erano associati con il modello MVC. Ora, elenchiamo i sostantivi e le frasi che sono relativi alla visualizzazione del modello MVC: visualizzazione audio musica dell ascensore. Il sostantivo visualizzazione corrisponde alla vista, o alla presentazione visuale, del modello MVC. Come descritto nella sezione 2.7, la classe ElevatorView aggrega diverse classi. Il sostantivo audio si riferisce agli effetti sonori che la nostra simulazione genera quando accadono varie azioni; creeremo la classe SoundEffects per generare tali effetti sonori. La frase musica dell ascensore si riferisce alla musica che viene riprodotta quando una persona viaggia sull ascensore; useremo la classe SoundEffects anche per riprodurre questa musica. La vista visualizza gli oggetti del modello MVC. Creeremo la classe ImagePanel per rappresentare gli oggetti stazionari del modello, come ElevatorShaft. Creeremo la classe MovingPanel, che estende ImagePanel, per rappresentare gli oggetti in movimento, come Elevator. Infine, creeremo la classe AnimatedPanel, che estende MovingPanel, per rappresentare gli oggetti in movimento la cui immagine corrispondente cambia continuamente, come Person (useremo diverse immagini per mostrare la persona che cammina e preme un pulsante). Usando queste classi, presentiamo il diagramma di classe della vista per la nostra simulazione nella figura 8.5. Le note indicano i ruoli che hanno le classi nel sistema. Secondo il diagramma di classe, la classe ElevatorView rappresenta la vista, le classi ImagePanel, MovingPanel e AnimatedPanel si riferiscono alla grafica e la classe SoundEffects si riferisce ai suoni. La classe ElevatorView contiene diverse istanze delle classi ImagePanel, MovingPanel e AnimatedPanel e un istanza della classe SoundEffects. Nella versione finale del caso di studio, assoceremo ogni oggetto del modello con una classe corrispondente nella vista. In questa sezione, discutiamo le classi ImagePanel, MovingPanel e AnimatedPanel per spiegare la grafica e le animazioni. Poi, discuteremo la classe SoundEffects per spiegare le funzionalità audio.

2 2 CAPITOLO 8 ImagePanel 1..* javax.swing.jpanel 1 MovingPanel 1..* 1 1 ElevatorView 1 Audio AnimatedPanel 1..* 1 SoundEffects Grafica Vista Figura 8.5 Diagramma di classe della vista del simulatore di ascensore ImagePanel La classe ElevatorView usa oggetti di sottoclassi di JPanel per rappresentare e visualizzare ogni oggetto nel modello (come Elevator, Person, ecc.). La classe ImagePanel (figura 8.6) è una sottoclasse di JPanel in grado di visualizzare un immagine in una data posizione dello schermo. La classe ElevatorView usa oggetti ImagePanel per rappresentare oggetti immobili nel modello, come ElevatorShaft e i due Floor. La classe ImagePanel contiene un attributo intero, ID (riga 16), che dichiara un identificatore unico per tenere traccia dell ImagePanel nella vista. Ciò è utile quando diversi oggetti della stessa classe sono presenti nel modello, come diversi oggetti Person. La classe ImagePanel contiene l oggetto position della classe Point2D.Double (riga 19) per rappresentare la sua posizione sullo schermo. Vedremo più avanti che MovingPanel, che estende ImagePanel, dichiara la velocità con valori double. Convertiremo le coordinate position in valori int per posizionare l oggetto ImagePanel sullo schermo (Java rappresenta le coordinate dello schermo come interi) nel metodo setposition (righe 90-94). La classe ImagePanel contiene anche un oggetto ImageIcon chiamato imageicon (riga 22), il cui metodo paintcomponent (righe 54-60) visualizza l icona sullo schermo. Le righe inizializzano ImageIcon usando un parametro stringa che contiene il nome dell immagine. Infine, la classe ImagePanel contiene l oggetto panelchildren della classe Set (riga 25) che memorizza tutti gli oggetti JPanel figli (o oggetti di una sottoclasse di JPanel). Gli oggetti figli vengono visualizzati sopra il loro ImagePanel genitore: per esempio, un oggetto Person dentro un Elevator. Il primo metodo add (righe 63-67) aggiunge un oggetto a panelchildren. Il secondo metodo add (righe 70-74) inserisce un oggetto in panelchildren all indice specificato. Il metodo seticon (righe 84-87) imposta imageicon con una nuova immagine. Gli oggetti della classe AnimatedPanel usano ripetutamente il metodo seticon per cambiare l immagine visualizzata, in modo da eseguire l animazione.

3 LA MULTIMEDIALITÀ: LE IMMAGINI, LE ANIMAZIONI E I SUONI 3 1 // ImagePanel.java 2 // sottoclasse di JPanel per posizionare e visualizzare ImageIcon 3 package com.deitel.jhtp5.elevator.view; 4 5 // package Java di base Java 6 import java.awt.*; 7 import java.awt.geom.*; 8 import java.util.*; 9 10 // package Java di estensione 11 import javax.swing.*; public class ImagePanel extends JPanel { // identificatore 16 private int ID; // posizione sullo schermo 19 private Point2D.Double position; // imageicon da disegnare sullo schermo 22 private ImageIcon imageicon; // memorizza tutti i figli di ImagePanel 25 private Set panelchildren; // costruttore che inizializza posizione e immagine 28 public ImagePanel( int identifier, String imagename ) 29 { 30 super( null ); // specifica layout null 31 setopaque( false ); // rende trasparente // imposta identificatore unico 34 ID = identifier; // imposta posizione 37 position = new Point2D.Double( 0, 0 ); 38 setlocation( 0, 0 ); // crea ImageIcon con imagename dato 41 imageicon = new ImageIcon( 42 getclass().getresource( imagename ) ); Image image = imageicon.getimage(); 45 setsize( 46 image.getwidth( this ), image.getheight( this ) ); // crea Set per memorizzare i figli di Panel Figura 8.6 La classe ImagePanel rappresenta e visualizza un oggetto immobile del modello (continua)

4 4 CAPITOLO 8 49 panelchildren = new HashSet(); } // fine costruttore di ImagePanel // disegna Panel sullo schermo 54 public void paintcomponent( Graphics g ) 55 { 56 super.paintcomponent( g ); // se l immagine è pronta, disegnala sullo schermo 59 imageicon.painticon( this, g, 0, 0 ); 60 } // aggiunge figlio di ImagePanel a ImagePanel 63 public void add( ImagePanel panel ) 64 { 65 panelchildren.add( panel ); 66 super.add( panel ); 67 } // aggiunge figlio di ImagePanel a ImagePanel all indice dato 70 public void add( ImagePanel panel, int index ) 71 { 72 panelchildren.add( panel ); 73 super.add( panel, index ); 74 } // rimuove figlio di ImagePanel da ImagePanel 77 public void remove( ImagePanel panel ) 78 { 79 panelchildren.remove( panel ); 80 super.remove( panel ); 81 } // imposta ImageIcon corrente da visualizzare 84 public void seticon( ImageIcon icon ) 85 { 86 imageicon = icon; 87 } // imposta posizione sullo schermo 90 public void setposition( double x, double y ) 91 { 92 position.setlocation( x, y ); 93 setlocation( ( int ) x, ( int ) y ); 94 } // ritorna identificatore di ImagePanel Figura 8.6 La classe ImagePanel rappresenta e visualizza un oggetto immobile del modello (continua)

5 LA MULTIMEDIALITÀ: LE IMMAGINI, LE ANIMAZIONI E I SUONI 5 97 public int getid() 98 { 99 return ID; 100 } // ottiene posizione di ImagePanel 103 public Point2D.Double getposition() 104 { 105 return position; 106 } // ottiene imageicon 109 public ImageIcon getimageicon() 110 { 111 return imageicon; 112 } // ottiene Set di figli di ImagePanel 115 public Set getchildren() 116 { 117 return panelchildren; 118 } 119 } Figura 8.6 La classe ImagePanel rappresenta e visualizza un oggetto immobile del modello MovingPanel La classe MovingPanel (figura 8.7) è una sottoclasse di ImagePanel in grado di cambiare la sua posizione sullo schermo in base ai valori xvelocity e yvelocity (righe 20-21). La classe ElevatorView usa oggetti MovingPanel per rappresentare oggetti mobili del modello, come Elevator. 1 // MovingPanel.java 2 // Sottoclasse di JPanel con funzionalità di movimento sullo schermo 3 package com.deitel.jhtp5.elevator.view; 4 5 // package Java di base 6 import java.awt.*; 7 import java.awt.geom.*; 8 import java.util.*; 9 10 // package Java di estensione 11 import javax.swing.*; public class MovingPanel extends ImagePanel { 14 Figura 8.7 La classe MovingPanel rappresenta e visualizza un oggetto che si muove dal modello (continua)

6 6 CAPITOLO 8 15 // MovingPanel dovrebbe cambiare posizione? 16 private boolean moving; // numero di pixel di cui MovingPanel si muove nelle direzioni x e y 19 // per animationdelay millisecondi 20 private double xvelocity; 21 private double yvelocity; // costruttore che inizializza posizione, velocità e immagine 24 public MovingPanel( int identifier, String imagename ) 25 { 26 super( identifier, imagename ); // imposta velocità di MovingPanel 29 xvelocity = 0; 30 yvelocity = 0; } // fine costruttore di MovingPanel // aggiorna posizione e animazione di MovingPanel 35 public void animate() 36 { 37 // aggiorna posizione a seconda della velocità 38 if ( ismoving() ) { 39 double oldxposition = getposition().getx(); 40 double oldyposition = getposition().gety(); setposition( oldxposition + xvelocity, 43 oldyposition + yvelocity ); 44 } // aggiorna tutti i figli di MovingPanel 47 Iterator iterator = getchildren().iterator(); while ( iterator.hasnext() ) { 50 MovingPanel panel = ( MovingPanel ) iterator.next(); 51 panel.animate(); 52 } 53 } // fine metodo animate // MovingPanel si sta muovendo sullo schermo? 56 public boolean ismoving() 57 { 58 return moving; 59 } // imposta MovingPanel per muoversi sullo schermo 62 public void setmoving( boolean move ) Figura 8.7 La classe MovingPanel rappresenta e visualizza un oggetto che si muove dal modello (continua)

7 LA MULTIMEDIALITÀ: LE IMMAGINI, LE ANIMAZIONI E I SUONI 7 63 { 64 moving = move; 65 } // imposta le velocità x e y di MovingPanel 68 public void setvelocity( double x, double y ) 69 { 70 xvelocity = x; 71 yvelocity = y; 72 } // ritorna velocità x di MovingPanel 75 public double getxvelocity() 76 { 77 return xvelocity; 78 } // ritorna velocità y di MovingPanel 81 public double getyvelocity() 82 { 83 return yvelocity; 84 } 85 } Figura 8.7 La classe MovingPanel rappresenta e visualizza un oggetto che si muove dal modello Il metodo animate (righe 35-53) muove MovingPanel secondo i valori attuali dei campi xvelocity e yvelocity. Se la variabile boolean moving (riga 16) è true, le righe usano i campi xvelocity e yvelocity per determinare la prossima posizione di movingpanel. Le righe ripetono il procedimento per tutti i figli. Nella nostra simulazione, ElevatorView invoca il metodo animate e il metodo paintcomponent della classe ImagePanel ogni 50 millisecondi. Queste chiamate in rapida successione spostano l oggetto MovingPanel. AnimatedPanel La classe AnimatedPanel (figura 8.8), che estende la classe MovingPanel, rappresenta un oggetto animato del modello (cioè, oggetti in movimento la cui immagine corrispondente cambia continuamente), come Person. La classe ElevatorView anima un AnimatedPanel cambiando l immagine associata con imageicon. 1 // AnimatedPanel.java 2 // Sottoclasse di Panel con funzionalità di animazione 3 package com.deitel.jhtp5.elevator.view; 4 5 // package Java di base 6 import java.awt.*; 7 import java.util.*; Figura 8.8 La classe AnimatedPanel rappresenta e visualizza un oggetto animato dal modello (continua)

8 8 CAPITOLO // package Java di estensione 10 import javax.swing.*; public class AnimatedPanel extends MovingPanel { // ImageIcon deve essere animato? 15 private boolean animating; // frequenza di cambio immagine 18 private int animationrate; 19 private int animationratecounter; 20 private boolean cycleforward = true; // ImageIcon individuali usati per l animazione 23 private ImageIcon imageicons[]; // memorizza tutte le sequenze di frame 26 private java.util.list framesequences; 27 private int currentanimation; // deve continuare l animazione alla fine del ciclo? 30 private boolean loop; // deve visualizzare l ultima immagine alla fine dell animazione? 33 private boolean displaylastframe; // determina la prossima immagine da visualizzare 36 private int currentframecounter; // costruttore che prende un array di nomi di file 39 public AnimatedPanel( int identifier, String imagename[] ) 40 { 41 super( identifier, imagename[0] ); // crea oggetti ImageIcon dall array di stringhe imagename 44 imageicons = new ImageIcon[ imagename.length ]; for ( int i = 0; i < imageicons.length; i++ ) { 47 imageicons[i] = new ImageIcon( 48 getclass().getresource( imagename[i] ) ); 49 } framesequences = new ArrayList(); } // fine costruttore di AnimatedPanel // aggiorna posizione dell icona e immagine dell animazione 56 public void animate() Figura 8.8 La classe AnimatedPanel rappresenta e visualizza un oggetto animato dal modello (continua)

9 LA MULTIMEDIALITÀ: LE IMMAGINI, LE ANIMAZIONI E I SUONI 9 57 { 58 super.animate(); // visualizza la prossima immagine se counter > frequenza di animazione 61 if ( framesequences!= null && isanimating() ) { if ( animationratecounter > animationrate ) { 64 animationratecounter = 0; 65 determinenextframe(); 66 } 67 else 68 animationratecounter++; 69 } 70 } // fine metodo animate // determina prossima immagine dell animazione 73 private void determinenextframe() 74 { 75 int framesequence[] = 76 ( int[] ) framesequences.get( currentanimation ); // se non ci sono più immagini, determina immagine finale 79 // a meno che non si debba ripetere l animazione 80 if ( currentframecounter >= framesequence.length ) { 81 currentframecounter = 0; // se loop è false, termina animazione 84 if (!isloop() ) { setanimating( false ); if ( isdisplaylastframe() ) // visualizza ultima immagine della sequenza 91 currentframecounter = framesequence.length - 1; 92 } 93 } // imposta immagine corrente dell animazione 96 setcurrentframe( framesequence[ currentframecounter ] ); 97 currentframecounter++; } // fine metodo determinenextframe // aggiunge animazione all ArrayList framesequences 102 public void addframesequence( int framesequence[] ) 103 { 104 framesequences.add( framesequence ); Figura 8.8 La classe AnimatedPanel rappresenta e visualizza un oggetto animato dal modello (continua)

10 10 CAPITOLO } // chiede se AnimatedPanel sta eseguendo l animazione 108 public boolean isanimating() 109 { 110 return animating; 111 } // imposta AnimatedPanel per eseguire l animazione 114 public void setanimating( boolean animate ) 115 { 116 animating = animate; 117 } // imposta ImageIcon corrente 120 public void setcurrentframe( int frame ) 121 { 122 seticon( imageicons[ frame ] ); 123 } // imposta frequenza di animazione 126 public void setanimationrate( int rate ) 127 { 128 animationrate = rate; 129 } // ottiene frequenza di animazione 132 public int getanimationrate() 133 { 134 return animationrate; 135 } // imposta se l animazione deve ripetersi 138 public void setloop( boolean loopanimation ) 139 { 140 loop = loopanimation; 141 } // ottiene se l animazione deve ripetersi 144 public boolean isloop() 145 { 146 return loop; 147 } // ottiene se visualizzare l ultima immagine alla fine dell animazione 150 private boolean isdisplaylastframe() Figura 8.8 La classe AnimatedPanel rappresenta e visualizza un oggetto animato dal modello (continua)

11 LA MULTIMEDIALITÀ: LE IMMAGINI, LE ANIMAZIONI E I SUONI { 152 return displaylastframe; 153 } // imposta se visualizzare l ultima immagine alla fine dell animazione 156 public void setdisplaylastframe( boolean displayframe ) 157 { 158 displaylastframe = displayframe; 159 } // inizia ad eseguire la sequenza di animazione all indice dato 162 public void playanimation( int framesequence ) 163 { 164 currentanimation = framesequence; 165 currentframecounter = 0; 166 setanimating( true ); 167 } 168 } Figura 8.8 La classe AnimatedPanel rappresenta e visualizza un oggetto animato dal modello La classe AnimatedPanel sceglie un oggetto ImageIcon da disegnare sullo schermo tra diversi oggetti ImageIcon memorizzati nell array imageicons (riga 23). La classe AnimatedPanel determina l oggetto ImageIcon secondo una sequenza di riferimenti, memorizzata nella lista framesequences (riga 26), che è un array di interi che memorizza la sequenza appropriata per visualizzare gli oggetti ImageIcon: in particolare, ogni intero rappresenta l indice di un oggetto ImageIcon nell array imageicons. La figura 8.9 mostra la relazione tra imageicons e framesequences (questo non è un diagramma UML). Per esempio, la sequenza numero 2 = { 2, 1, 0 } si riferisce a { imageicon[2], imageicon[1], imageicon[0] }, che porta alla sequenza di immagini { C, B, A }. Nella vista, ogni immagine è un file.png unico. Il metodo addframesequences (righe ) aggiunge una sequenza di animazione alla lista framesequences. Il metodo playanimation (righe ) fa partire l animazione asso- framesequences image sequences imageicons 0= A B C 1= A B C D A B D B A = C B A 3= D C C A Figura 8.9 Relazione tra l array imageicons e la lista FrameSequences

12 12 CAPITOLO 8 ciata con il parametro framesequences. Per esempio, supponiamo di avere un oggetto AnimatedPanel chiamato personanimatedpanel nella classe ElevatorView. Il frammento di codice animatedpanel.playanimation( 1 ); genererebbe la sequenza di immagini { A, B, D, B, A } se usiamo la figura 8.9 come riferimento. Il metodo animate (righe 56-70) sovrascrive il metodo animate della superclasse MovingPanel. Le righe determinano la successiva immagine per l animazione a seconda del campo animationrate, che è inversamente proporzionale alla velocità dell animazione: un valore più alto per animationrate comporta un animazione più lenta. Per esempio, se animationrate vale 5, animate si sposta alla successiva immagine dell animazione ogni cinque volte viene invocato. Usando questa logica, la frequenza di animazione viene massimizzata quando animationrate ha un valore 1, perché la successiva immagine viene determinata ogni volta che viene chiamato animate. Il metodo animate chiama determinenextframe (righe 73-99) per determinare la successiva immagine da visualizzare: in particolare, viene chiamato il metodo setcurrentframe (righe ) che imposta imageicon (l immagine correntemente visualizzata) all immagine ritornata dalla corrente sequenza di animazione. Le righe di determinenextframe vengono usate per ripetere l animazione. Se loop vale false, l animazione termina dopo una iterazione. L ultima immagine della sequenza viene visualizzata se displaylastframe vale true, e, se vale false, viene visualizzata la prima immagine della sequenza. Se loop vale true, l animazione si ripete finché non viene fermata esplicitamente. Effetti sonori Vediamo ora come generare dei suoni nella nostra simulazione. La classe SoundEffects (figura 8.10) trasforma file audio (.au), wave (.wav) e MIDI (.mid) contenenti suoni come il campanello, i passi della persona e la musica dell ascensore, in oggetti java.applet.audioclip. L oggetto ElevatorView riprodurrà gli oggetti AudioClip per generare i suoni. Tutti i file dei suoni sono nella struttura di directory com/deitel/jhtp5/elevator/view/sounds Nella nostra simulazione, useremo suoni e file MIDI disponibili gratuitamente al sito Web di Microsoft: msdn.microsoft.com/downloads/default.asp Per scaricare questi suoni, fate clic su Graphics and Multimedia, Multimedia (General), e poi Sounds. La classe SoundEffects contiene i metodi getaudioclip (righe 16-27), che usa il metodo statico newaudioclip (della classe java.applet.applet) per ritornare un oggetto AudioClip usando il parametro soundfile. Il metodo setpathprefix (righe 30-33) permette di cambiare directory del file audio (utile se vogliamo dividere i nostri file sonori tra directory diverse).

13 LA MULTIMEDIALITÀ: LE IMMAGINI, LE ANIMAZIONI E I SUONI 13 1 // SoundEffects.java 2 // Ritorna oggetti AudioClip 3 package com.deitel.jhtp5.elevator.view; 4 5 // package Java di base 6 import java.applet.*; 7 8 public class SoundEffects { 9 10 // posizione dei file audio 11 private String prefix = ; public SoundEffects() {} // ottiene AudioClip associato con soundfile 16 public AudioClip getaudioclip( String soundfile ) 17 { 18 try { 19 return Applet.newAudioClip( getclass().getresource( 20 prefix + soundfile ) ); 21 } // ritorna null se il file audio non esiste 24 catch ( NullPointerException nullpointerexception ) { 25 return null; 26 } 27 } // imposta prefisso per la posizione di soundfile 30 public void setpathprefix( String string ) 31 { 32 prefix = string; 33 } 34 } Figura 8.10 La classe SoundEffects ritorna oggetti AudioClip Conclusione Avete appena completato un procedimento di progettazione orientata agli oggetti che aveva lo scopo di prepararvi per le sfide dei progetti di livello industriale. Speriamo che abbiate trovato le sezioni Pensare a oggetti informative e utili come complemento al materiale presentato nei vari capitoli. Inoltre, speriamo vi siate divertiti a progettare il sistema usando UML. Il linguaggio UML è stato adottato come standard dall industria del software mondiale per la modellazione di software orientato agli oggetti. Anche se avete completato la fase di progettazione, avete solo sfiorato il processo di implementazione. Consultate il sito Web per la completa implementazione del progetto, e le traduzioni dei diagrammi UML in un programma Java completo per la simulazione dell ascensore. Studiare l implementazione rafforzerà le abilità nella programmazione che avete sviluppato leggendo il libro e migliorerà la vostra comprensione del processo di progettazione.