Nello sviluppo di un progetto in Storyline, se utilizzato al pieno delle sue potenzialità, è probabile avere la necessità di far inserire dei dati all’utente, attraverso dei campi di input.
Storyline mette a disposizione diverse possibilità: un campo di testo libero, un campo numerico, check box e radio button. Inoltre mette a disposizione lo slider e il dial, una sorta di cursore e di manopola che permettono all’utente di scegliere un dato fra le ipotesi fornite.
Tutti questi campi di input possono andare a valorizzare delle variabili, in modo da generare dei comportamenti diversi in base alle scelte dell’utente.
Ma se avessimo bisogno di inserire un menu a tendina?
Purtroppo Storyline non mette a disposizione questa possibilità. E’ necessario quindi crearlo “artigianalmente”. La nota positiva è che in questo modo è possibile sbizzarrirsi con le idee più creative, andando oltre il classico menu a tendina grigio.
Qui vediamo una soluzione sicuramente poco creativa, ma che possiamo considerare come base di partenza per qualsiasi ulteriore sviluppo.
Esempio menu a tendina in Articulate Storyline
Vediamo semplicemente due campi con dei dati numerici che vanno a sommarsi, stampando il totale.
Il procedimento è probabilmente un po’ macchinoso, ma veramente molto semplice.
Come prima cosa vediamo le variabili. Sono 3: una per il primo menu select1, una per il secondo select2 e una per il totale. Sono ovviamente tutte variabili numeriche con il valore di dafault impostato a 0.
Vediamo quindi un quadro d’insieme del progetto. Vediamo che sulla timeline, oltre ovviamente ai testi delle etichette dei campi e del totale, troviamo 2 gruppi, che contengono i componenti dei nostri 2 menu e un’area di testo totale con un riferimento alla variabile totale, in modo che quando la variabile totale verrà valorizzata, il suo risultato comparirà qui. Poi vediamo 2 livelli 1 select open e 2 select open, dove troveremo i valori di ciascun menu, che devono comparire al clic sul menu. Vediamo infatti dagli ultimi 2 trigger, che questi livelli vengono mostrati al clic dell’utente sui rispettivi menu.
Vediamo ora nello specifico com’è composto il gruppo che costituisce il menu a tendina. Molto semplicemente troviamo, un rettangolo che costituisce il contorno del menu, un triangolo, che rappresenta la freccetta che ci fa capire che si tratta proprio di un menu a tendina e un’area di testo che viene referenziata sulla specifica variabile select 2, in questo modo quando l’utente scegliera il valore per il menu select 2, il dato scelto comparirà all’interno dello specifico menu.
Ovviamente questa cosa va replicata per ogni menu.
Vediamo ora nello specifico i livelli con i valori di ogni singolo menu. La composizione è molto semplice, vediamo un’area di testo per ogni valore, in questo caso molto semplicemente ho affiancato rettangoli bianchi con il bordo nero. Sotto a questi ho aggiunto un rettangolo grande quanto l’insieme degli altri, che di fatto rimane nascosto di rettangoli dei valori, questo per comodità, ci servirà quando dovremo creare il trigger per la chiusura del livello.
Vediamo inoltre che ogni rettangolo contenente i valori del nostro menu, ha lo sfondo diverso nello stato di Hover, quindi al passaggio del mouse su quel valore, lo sfondo si colorerà di verde.
Ora vediamo i Trigger interni al livello. Vediamo che al clic su ogni rettangolo, il relativo valore va a valorizzare la variabile select1 relativa appunto allo specifico menu. Nell’ultimo Trigger vediamo invece l’azione di chiusura di questo livello, quando l’utente clicca fuori dal rettangolo base. Come visto in precedenza, questo rettangolo è posto in secondo piano rispetto ai rettangoli degli elementi del menu, quindi di fatto è nascosto. In questo modo sia che l’utente clicchi su un valore sia che l’utente clicchi fuori dal menu, il livello viene nascosto, quindi di fatto viene chiuso il menu.
Ovviamente se l’utente clicca su un valore, la variabile select1 modificherà il suo valore, altrimenti resterà invariata.
Questo andrà ripetuto per entrambi i menu.
Dobbiamo ora fare in modo che al clic su un valore di ogni menu, cambi anche il totale sottostate. Torniamo quindi ai Trigger del livello base della slide.
Abbiamo già visto cosa succede quando l’utente clicca sui due menu, con gli ultimi 2 trigger. Ora concentriamoci sui primi.
Per modificare il totale di fatto diciamo di cambiare il valore della variabile totale nel momento in cui cambia la variabile relativa al menu, select1 o select2, quindi si basa su ciò che succede nei livelli. Il clic su una voce del menu select 1 modifica la variabile select1. Questa modifica va automaticamente ad attivare anche il Trigger che va a modificare la variabile totale.
Dobbiamo però fare un ragionamento sul calcolo del totale. Non possiamo ogni volta aggiungere il valore di select1 o select2 a totale altrimenti andrebbe a sommare una valore nuovo ogni volta che l’utente clicca nuovamente sulla voce di un menu (mettiamo il caso che voglia modificare la scelta). Ad ogni clic dobbiamo quindi dapprima azzerare il totale, poi aggiungere ciascuna delle variabili relative ai menu. Ovviamente se ad un menu non è stata fatta ancora alcuna scelta, non verrà sommato alcun valore.
In effetti soprattutto quest’ultima parte del totale è un po’ macchinosa, ma con i Trigger di Storyline non c’è alternativa. Eventualmente il lavoro può essere snellito calcolando il totale con Javascript.