Oggi analizziamo una delle questioni più importanti del multimedia : la configurazione dei pulsanti .   Poichè si tratta della parte forse più difficile di Theorema , e certamente anche della più importante, procederemo passo per passo , partendo dai pulsanti più semplici per arrivare a quelli più complessi.

Considerato che i  pulsanti servono per passare da una pagina all'altra , per analizzarne le funzionalità, dobbiamo  crearci almeno due pagine; chiamiamole paginauno.pag e paginadue.pag  e scriviamo in queste pagine titoli differenti per distinguerle meglio quando verranno attivati i pulsanti.

1. Ammettiamo di partire dalla pagina paginauno.pag  ; per inserire un pulsante dovete selezionare l'icona :   
2. Dopo aver individuato con il punta-trascina-rilascia la zona in cui inserire il pulsante , vi appare il dialogo :

3. 

4. Come vedete ci appare per default, l' immagine di un pulsante per l'avanzamento. Il lavoro consiste adesso nell'associare a questo oggetto grafico un certo comportamento, poniamo quello di passare alla pagina  paginadue.pag . Per raggiungere questo obiettivo ci spostiamo  nel triangolino a destra  della scritta Azione   e , ottenuta la lista dei comandi, selezioniamo da questa lista la voce altra pagina . A questo punto, quando ci compare il dialogo per richiamare le pagine, dobbiamo semplicemente richiamare il percorso della pagina  paginadue.pag .

5. Finito. Per vedere se tutto funziona passiamo in modalità lettore e clicchiamo sul pulsante : dovremmo pote passare alla pagina paginadue.pag . Adesso torniamo in modalità autore e per esercizio create voi un pulsante analogo per tornare alla pagina da cui siamo partiti , cioè paginauno.pag .

Naturalmente  questo è solo l'inizio. Dobbiamo impare ancora molte cose. Ho pensato di organizzare le cose in questo modo :  affrontiamo in maniera olistica il dialogo, in modo da capire  come è stato impostato e poi passiamo alla costruzione di pulsanti che realizzano delle azioni particolari.

Le singole voci del dialogo

Nella finestra del dialogo precedente , certamente la più complessa in Theorema, possiamo individuare una serie di sottofinestre che devono essere adeguatamente commentate perchè non sono di immediata comprensione.

Scegli le Risorse

Questa finestra consente di scegliere le immagini da associare al pulsante che stiamo costruendo. I nomi che compaiono nella lista servono a raccogliere un insieme di immagini che dovrebbero servire per rappresentare una azione precisa : avanti indietro  uscita  suono  video  generici . La selezione di una qualsiasi di queste parole rende disponibile una sottolista da cui è possibile scegliere l'immagine che si vuole associare al nostro pulsante.L'immagine prescelta viene disegnata nella finestra di anteprima. Per esempio se selezioniamo la voce suono   e il file suono9.bmp  vi comparirà una immagine come la seguente:

Come è facile capire le immagini che vengono caricate sono le immagini   presenti nella cartella pulsanti .  Se volete potete aggiungere o anche  editare queste immagini . Per editarle potete aprire un qualsiasi programma di disegno e cambiare o sostituire le immagini: ricordatevi però di salvarle con lo stesso nome. Per aggiungere immagini e renderle visibili nella lista delle risorse dovete semplicemente salvare le immagini nella cartella pulsanti e usare nomi che ricordino la categoria di appartenenza. Per esempio, le immagini per il suono , iniziano tutte con il termine suono ; considerato che ora vi sono 9 file grafici per il suono, voi registrerete le vostre immagini con i nomi suono10.bmp, suono11.bmp ecc. ecc .

Scegli finestra

Quando si crea un collegamento ad un' altra pagina è possibile   richiamare sette tipi di finestre diffrenti . Anche qui vediamo da vicino queste alternative.

1- Normale/stop suono E' l'opzione di default e indica il fatto che la pagina collegata verrà disegnata nella stessa finestra in cui è presente il pulsante. Se nella pagina del pulsante è presente un suono, quando si passa alla pagina collegata, questo verrà terminato.

2- Normale/cont. suono Funziona esattamente come la finestra precedente; l' unica differenza consiste nel fatto che se nella pagina c'è un suono in esecuzione, questo non viene fermato ma, la sua esecuzione appunto, continua anche dopo il link.

3- PopUP/con riquadro Questo tipo di collegamento richiama una finestra figlia che non elimina gli oggetti della pagina precedente ma ad essi semplicemente si sovrappone, occupando solo una regione limitata della pagina di partenza : è necessario pertanto assegnare al link i 4 numeri che individuano la zona in cui disegnare la finestra. Se caricate una pagina con questa modalità , il programma automaticamente riempie le 4 edit relative alle coord. del link, con i valori 0,0 per posizionare la finestra nel punto in alto a sinistra , più altri due numeri che sono rispettivamente la larghezza e l'altezza della pagina richiamata. Questo è ciò che succede automaticamente. Per spostare la finestra nel punto in cui volete voi, consultate in questa stessa lezione , la sezione Come spostare la finestra collegata ad un pulsante ..

4- PopUP/no riquadro Funziona esattamente come la precedente con la differenza che la finestra che ospiterà il collegamento verrà disegnata senza il contorno.

5- Valutazione E' il tipo di finestra che occorre richiamare nel caso in cui si costruiscano dei pulsanti per collegare delle zone attive con le pagine vero.pag e falso.pag .

6- Una-altra E' un tipo particolare di finestra che consente di passare da una pagina all'altra, senza che l'utente si accorga che sta cambiando pagina. In questo modo è possibile realizzare pulsanti alternati : poichè il pulsante richiamato occuperà la stessa posizione di quello precedente, quest'ultimo non sarà più visibile. Per avere un' idea precisa ne costruiremo uno più avanti.

7- vai alla principale E' il tipo di finestra che occorre richiamare per passare da un link presente nella finestra figlia alla finestra principale. Anche per questa opzione costruiremo un pulsante per evidenziarne le funzionalità .

Azioni del mouse  e del pulsante

In questa sottosezione abbiamo la possibilità di configurare le voci  per la grafica, l'azione , l'eventuale file sonoro e la didascalia che vogliamo associare al nostro pulsante. Tutte queste azioni sono configurabili diversamente in relazione ai quattro tipi di comportamento che il mouse può assumere. Se nella pagina è presente un pulsante , possiamo individuare nel comportamento dell'utente finale queste quattro possibilità :

DOWN        (mouse down) L'utente ha cliccato sul mouse sinistro ma ancora non lo ha rilasciato ;

UP             (mouse up) L'utente ha rilasciato il pulsante del mouse ;

Move In     (mousein) L'utente è entrato con il cursore del mouse dentro la zona del pulsante ;       

Move Out   (mouseout) L'  utente è uscito con il cursore del mouse dalla zona del pulsante .

Per ognuna di queste possibili azioni dell'utente è possibile inserire una certa grafica, una certa azione ipertestuale, un suono ed eventualemente una didascalia. Tutto questo si realizza con la configurazione delle seguenti voci.

Grafica

La selezione della listbox rilascia la seguente lista di operazioni possibili :

niente :  non viene attivata alcuna azione grafica.

animazione : vengono rilasciate le sottoliste per la scelta di uno degli effetti di transizione animati. Una volta effettuata la scelta si può vedere l'animazione cliccando sul tasto di anteprima.

Attenzione ! Quando si traccia un effetto animato su un pulsante, poichè l'animazione non fa altro che ridisegnare la stessa immagine del pulsante, se l'effetto scelto non è congruente, l'animazione anche se c'è non sarà visibile.

altra immagine : è l'opzione più utilizzata , specialmente con un  mouse in . Questa opzione consente di caricare un'altra immagine da visualizzare , per esempio  al passaggio del mouse nel pulsante. Dopo aver caricato un'altra immagine, potete vedere l'effetto in anteprima entrando e uscendo con il mouse nel riquadro bianco, dove viene disegnato il pulsante .

inset e raised : il pulsante viene inserito all'interno di un contorno di linee in maniera tale da far sembrare lo stesso pulsante rispettivamente premuto o  non premuto.

intensità, contrasto, hue, mosaico, olio, noise, saturazione, inverti : sono una serie di effetti grafici che si possono attribuire al pulsante per fargli cambiare aspetto. Possono rivelarsi più o meno gradevoli ed azzeccati a seconda delle immagini e dei colori presenti in esse. Hanno il grande vantaggio che non devono richiamare altri file e quindi sono estremamente comodi.

Azione

Un pulsante non realizza alcunchè se questa voce non viene configurata in maniera adeguata. Siamo quindi nel cuore del problema. Anche qui, come nel caso precedente, viene rilasciata una lista di comandi che occorre padroneggiare per costruire pulsanti funzionanti.

nessuna  : non viene eseguita alcuna azione

pag. successiva , pag. precedente , pag. successiva con suono se le pagine sono costruite con il metodo del numero progressivo , cioè hanno nomi che terminano con numeri in progressione ( esempio : prova1.pag , prova2.pag... ecc) e si trovano tutte nella stessa cartella , allora è possibile inserire nelle pagine i pulsanti per andare avanti o indietro . Questi pulsanti devono essere configurati rispettivamente con i comandi pag.successiva e pag.precedente. Nel caso in cui la pagina contenga un file sonoro, l'esecuzione di questo viene troncata , quando si passa alla pagina successiva con il comando pag. successiva , viene mantenuta invece se usa il comando pag.successiva con suono .

altra pagina è una delle opzioni più usate; consente di collegare qualsiasi pagina , indipendentemente da come viene chiamata e dalla cartella in cui si trova.

domanda successiva permette di costruire un pulsante che realizza un avanzamento fra pagine che contengono delle domande. Si tratta di un pulsante di avanzamento particolare perchè , essendo presente nella pagina una valutazione, occorre conservare questo valore numerico nel caso in cui si voglia costruire una media dei voti. Inoltre impedisce anche l'avanzamento delle pagine nel caso in cui lo studente non risponda alle domande .

punteggio è la voce che occorre selezionare per costruire pulsanti da associare alla valutazione di un esercizio.Se non usate il modulo in autocomposizione dovete imparare come si configura questa opzione. Seguite da vicino queste istruzioni :

1- posizionate la scelta della finestra sull'opzione Valutazione ;

2- inserite nelle Coord. link i valori 10 10 210 210

3- la selezione dell'opzione punteggio vi rende ora disponibile  il dialogo seguente :

4- inserite il percorso della pagina vero.pag oppure falso.pag (se non avete idea di che cosa si intende con vero.pag e falso.pag, allora sappiate che nel momento in cui si crea un esercizio in autocomposizione vengono generate anche una pagina per le risposte sbagliate ed una per le risposte esatte, denominate appunto vero.pag e falso.pag .Per saperne di più fra qualche settimana ci sarà un'altra lezione su come crearle)

5- inserite nella casella del voto il valore numerico per la risposta  giusta o sbagliata.

Finito.

file vocale permette di inserire il percorso di un file vocale .

elimina link consente di eliminare una finestra che è stata visualizzata . Si usa soprattutto per creare pulsanti che ci facciano uscire da una finestra figlia.

ultimo link visitato permette di creare un pulsante la cui selezione ci rimanda all'ultimo collegamento che abbiamo visitato.

run serve per lanciare un programma e con esso uno specifico file. Nel primo dialogo che si rende disponibile dovete caricare il nome del programma da eseguire,per esempio il percorso del browser internet explorer ; nel secondo invece dovete caricare il file che il programma deve visualizzare , per esempio indice.htm .

suono da accesso alla seguente sottolista :

1. inizia stream : esegue lo streaming sonoro (consulta lezione omonima) .

2. pausa stream : mette in pausa lo streaming sonoro

3. ricomincia stream : ricomincia lo streaming dopo che questo è stato messo in pausa

4. inizia suono : inizia l'esecuzione di un file sonoro ; è il pulsante che occorre introdurre per controllare il file sonoro presente nella pagina.

5. pausa suono : ferma l'esecuzione di un file sonoro .

6. ricomincia suono : ricomincia l'esecuzione di un file sonoro dopo che lo stesso è stato messo in pausa.

7. inizia registrazione : se volete dare all'utente la possibilità di registrare la sua voce per poi confrontarla con un suono di riferimento allora dovete usare questa opzione. (Un esempio sono le lezioni di lingua straniera: confronto fra il file sonoro dell'allievo e quello dell'insegnante)

8. ferma registrazione : serve per fermare la registrazione

9. ascolta registrazione : permette di riascoltare il file sonoro registrato .

10. .salva registrazione : se lo si desidera è possibile lanciare il dialogo "salva come" per salvare il suono registrato.

uscita da accesso alla seguente sottolista :

1. uscita dalla finestra principale : consente di uscire dal programma

2. ritorno alla domanda : è il pulsante che occorre inserire nelle pagine vero.pag e falso.pag richimate dai pulsanti-punteggio.

video da accesso alla seguente sottolista :

1. inizia video : manda in esecuzione il filmato

2. pausa video : mette in pausa il filmato

3. ricomincia video : rimette in esecuzione il filmato dopo la pausa

4. avanti uno : manda avanti il filmato di un frame

5. indietro uno : manda indietro il filmato di un frame .

panorama da accesso alla sottolista che permette il controllo delle immagini panorama. Dovete inserire questi pulsanti negli ultimi 20 pixel in basso della finestra-panorama. Ecco l' elenco .

1. zoom in : zoomata in avanti dell'immagine panorama presente nella finestra

2. zoom out : zoomata all'indietro dell'immagine panorama presente nella finestra

3. destra : sposta l'immagine panorama verso destra

4. sinistra : sposta l'immagine panorama verso sinistra

5. alto : sposta l'immagine panorama verso l'alto

6. basso : sposta l'immagine panorama verso il basso .

Suono

E' l'opzione che consente di associare  un file vocale  ad una certa azione del pulsante. Per esempio, è opportuno in certi casi far eseguire un brevissimo suono quando si passa con il cursore del mouse in una zona occupata da un pulsante.

Testo

E' l'opzione con la quale inserire una didascalia sul  pulsante. Poichè è diventata obsoleta , ed è possibile fare la stessa cosa in maniera differente, lasciatela perdere. Potete infatti utilizzare al suo posto una finestra pop-up con l'azione movein.

Costruiamo insieme dei pulsanti

In questa sezione vi espongo una tabella che riassume varie possibilità nel configurare il dialogo dei pulsanti.

Per chiarire meglio che cosa si intende con questa tabella possiamo costruire insieme l'ultimo pulsante, quello che ho definito 4 AZIONI . Dopo aver selezionato l'icona dei pulsanti ed aver individuato il punto in cui inserire il pulsante , configurate il dialogo come segue :

Down : selezionate dalla lista delle azioni il comando elimina link , lasciate la grafica impostata su niente .

UP : anche qui lasciate su niente la grafica e impostate l'azione su altra pagina ; caricate una pagina già pronta , lasciando la tipologia di finestra impostata sull'opzione di default : Normale/stop suono.

Move in : qui vogliamo che il nostro pulsante cambi aspetto grafico , emetta un suono e carichi una pagina. Per prima cosa carichiamo con grafica l'opzione altra immagine , ci spostiamo nella cartella dei pulsanti e carichiamo una immagine congruente con quella presente (es. se abbiamo avanti1.bmp , carichiamo avanti2.bmp ) .Per avere un preview del pulsante attraversatelo con il mouse (entrata e uscita dalla finestrella di anteprima ne provocano il cambiamento) .Adesso , dopo aver ricavato la lista delle azioni possibili, carichiamo un link ad una pagina con l'opzione altra pagina . Magari in questa pagina scriviamo un testo che potrà servire da didascalia del pulsante. Come ultima cosa selezioniamo il pulsante suono per richiamare il percorso di  un breve file sonoro.

Move out :  lasciamo la grafica impostata su niente e l'azione configurata con il comando elimina link .

Con questo abbiamo finito.  Se diamo l'ok con il tasto Applica e ci spostiamo in modalità lettore dovremmo poter osservare :

1. il fatto che il pulsante cambia aspetto , emette un suono e lancia una pagina quando ci passiamo sopra ;
2. il tutto viene cancellato se usciamo dalla zona occupata dal pulsante ;
3. se clicchiamo su di esso tutto viene eliminato e si passa ad un'altra pagina .

Pulsanti irregolari

In molte occasioni i pulsanti non sono rappresentati da figure regolari come un quadrato, un cerchio o un rettangolo. Si pensi per avere idea di quello che si sta dicendo, ad una cartina geografica dell' Italia, divisa in una serie di pulsanti ciascuno associato ad una regione. Poichè queste ultime sono tutte figure irregolari, quando si crea una mappa per associare dei collegamenti, la mappa può risultare da una serie di rettangoli sovrapposti o che comunque non tengono conto delle irregolarità. I programmi multimediali più evoluti, risolvono il problema introducendo la possibilità di mappare in modo irregolare queste figure , semplicemente aumentando il numero di punti-coordinate. Theorema risolve la questione in maniera completamente differente. Ogni pulsante viene mappato in maniera regolare però diventa attivo solo se il pixel su cui si posiziona il mouse è NON-bianco. Per rendere conto dell'irregolarità dei pulsanti a voi quindi basta costruire la figura irregolare su uno sfondo bianco. Non c'è bisogno di mappare, è Theorema stesso che si occupa di tutto il resto. Per costruire una cartina geografica con delle figure irregolari cliccabili a voi basta avvicinare le immagini delle singole regioni collocate su sfondo bianco e sarà il programma a "capire", nonostante le inevitabili sovrapposizioni , quale zona è collegata con cosa. Perchè questa opzione sia effettiva occorre inserire nell'azione dell' UP il comando pulsante irregolare .

Come spostare la finestra collegata ad un pulsante

Un pulsante creato con uno degli stili Pop/UP permette in qualsiasi momento di :

1. avere un'anteprima della pagina collegata ;
2. sostituire la pagina collegata con qualsiasi altra ;
3. spostare nella posizione voluta la pagina ;
4. aumentare/diminuire la grandezza della finestra .

Vediamo come si fa.

Sappiamo già che le proprietà di qualsiasi oggetto si ottengono con il doppio click del mouse sull'oggetto stesso. Ovviamente la stessa cosa vale anche per i pulsanti. Facendo doppio click con il mouse sinistro otteniamo il dialogo delle proprietà del pulsante. Se però teniamo premuto il tasto control ,con il doppio click sul pulsante, otterremmo la finestra collegata al pulsante. Questo risultato, è il caso di ribadirlo , lo si raggiunge solo se il pulsante è collegato con una delle finestre PopUp e se il link è sistemato nell' opzione down. Se il link invece si trova in UP allora occorre tener premuto non control ma il tasto. Infine se il link si trova nel Movein, il doppio click deve essere fatto con il tasto Shift premuto. Per riepilogare :

Una volta che si rende disponibile la finestra popup, questa visualizza la pagina a cui è collegata. A questo punto potete :

• Uscire senza registrare i cambiamenti : cliccate nella finestra con il tasto destro del mouse ;
• Uscire e registrare i cambiamenti : cliccate sul tasto close della finestra (la X in alto a destra) ;
• Spostare la finestra in un punto qualsiasi : tenete premuto il mouse e trascinate la finestra nel punto desiderato .
• Aumentare /diminuire la grandezza della finestra : posizionatevi sui bordi e diminuite/aumentate la grandezza della finestra .
• Cambiare il collegamento a cui la finestra si riferisce : fate doppio click col mouse sinistro sulla finestra, vi apparirà il dialogo per sostituire il percorso dell'attuale link con uno nuovo.

Non credo di essere stato sempre chiaro in questa lezione; mi scuso in anticipo. Fatemi sapere in cosa ho mancato.

Grazie.