Non devi essere un esperto di Flash per creare prototipi. Flessibilità del programma permette di prototipazione con una conoscenza limitata di ActionScript 3. Prototipazione rapida consente agli utenti di visualizzare il prodotto finale. Flash consente di creare prototipi di fedeltà variabile (come il prototipo assomiglia al prodotto finale), che lo rende facile da aggiornare strati interattivi e design concetti da semplice wireframes ai disegni dettagliati, completati.
Istruzioni
Preparazione
1
Creare immagini che rappresentano le schermate richiesti e Stati, utilizzando un software come Fireworks, Photoshop o Corel. La fedeltà delle immagini può essere ovunque da wireframe per progetti visivi (Vedi riferimento 2).
2
Aprire Flash e fare clic su "File", quindi fare clic su "Nuovo" e quindi fare clic su "Flash File (ActionScript 3.0)" nel menu che si apre. Fare clic su "Finestra" nel menu principale, quindi fare clic su "Proprietà" e quindi fare clic su "Proprietà" nuovamente nel menu estraibile. Digitare "1024px" nel campo "W" e "768px" nel campo "H".
3
Salvare il file facendo clic su "File" nel menu principale, quindi fare clic su "Salva con nome", digitando un nome (ad esempio "proto") e quindi facendo clic su "Salva".
4
Importa le tue immagini facendo clic su "File", quindi facendo clic su "Importa" e quindi facendo clic su "Importa nella libreria." Sfoglia per cui le immagini sono quindi fare clic su "Apri". Se le immagini sono in sequenza, Flash li importerà automaticamente come fotogrammi chiave successivi nel livello attualmente selezionato; in caso contrario sarà necessario aggiungere fotogrammi chiave facendo clic destro sul telaio, quindi facendo clic su "Inserisci fotogramma chiave" nel menu pull-out per ogni immagine (Vedi riferimento 3).
5
Nome del layer "Filo" facendo doppio clic su "livello 1" e premendo "Invio" sulla tastiera. Aggiungere fotogrammi chiave tra immagini sulla linea temporale facendo clic sul primo fotogramma chiave e premere "F5" sulla tastiera quattro volte (Vedi riferimento 2).
6
Dare alla vostra immagine nomi di fotogrammi facendo clic su "Finestra" nel menu principale, quindi facendo clic su "Proprietà" e quindi facendo clic su "Proprietà" nuovamente nel menu estraibile. Con una sola immagine cornice evidenziata, digitare il nome di immagine nel campo "Etichetta di fotogramma". Ripetere questa procedura per le altre immagini (Vedi riferimento 2).
7
Create un nuovo livello facendo clic su "Inserisci livello" nella parte inferiore della linea temporale e chiamandolo "AS3." Fare clic destro sul fotogramma 1 del livello "AS3", quindi fare clic su "Azione" nel menu estraibile. Digitare il seguente codice:
Stop ();
(Vedi il riferimento 2).
Pulsante
8
Fare doppio clic su "Colore di riempimento" sulla barra degli strumenti, quindi fare clic su "None" per il colore (sarà la casella con una linea diagonale rossa). Fare doppio clic su "Colore della traccia" nella barra degli strumenti e immettere un valore di "3" per "Altezza di colpo", quindi fare clic su qualsiasi colore (Vedi riferimento 2).
9
Fare clic sullo strumento "Rettangolo" nella barra degli strumenti e, tenendo premuto il mouse, trascinare sullo stage per disegnare un rettangolo. Il rettangolo deve essere una dimensione appropriata per aree cliccabili. Fare clic sullo strumento "Rettangolo", quindi nel menu principale clicca "Modifica", quindi fare clic su "Converti in simbolo nuovo" nel menu estraibile. Fare clic sulla casella radiale "Button" e digitare in "Button_btn" per il nome (Vedi riferimento 2).
10
Fare doppio clic sul pulsante per immettere la sequenza temporale. Pulsante destro del mouse sul riquadro etichettato "Hit" e scegliere "Inserisci fotogramma chiave." Modificare il colore del pulsante. Fare lo stesso per "Over". Elimina il colore per "Up". Questo vi darà un pulsante invisibile che verrà evidenziato quando l'utente mouses sopra esso. Fare clic su "scena 1" nella parte inferiore della linea temporale per uscire dalla sequenza temporale del pulsante. Eliminare il pulsante dalla scena (Vedi riferimento 2).
11
Create un nuovo livello facendo clic su "Inserisci livello" nella parte inferiore della linea temporale e nome del nuovo layer "Pulsanti". Inserire fotogrammi chiave nel livello di "Pulsanti" sullo stesso telaio numeri come le immagini del "filo" di strato (Vedi riferimento 2).
12
Trascinare un "pulsante" dalla libreria e posizionarlo sul palco. Fare clic su "Finestra" nel menu principale, quindi fare clic su "Proprietà" e quindi fare clic su "Proprietà" nuovamente nel menu estraibile. Con il pulsante ancora evidenziato, immettere un nome di istanza univoca come il nome della pagina si sposterà a, ad esempio, "page1_btn" (Vedi il riferimento 2).
13
Fare clic destro fotogramma 1 del livello "AS3", quindi fare clic su "Azione" nel menu estraibile. Digitare il codice seguente, sostituendo "page1" per i nomi di etichetta di fotogramma:
page1_btn.addEventListener(MouseEvent.CLICK, onPage1, false, 0, true);
function onPage1(evt:MouseEvent):void {
gotoAndStop("page1");
}14
Ripetere la procedura per le altre pagine.
Consigli & Avvertenze
- Durante la creazione di immagini, è possibile utilizzare griglie e guide per garantire un'interazione liscia. Se le immagini non sono allineate ci sarà un "nervosismo" per la navigazione. Aggiungere didascalie alle immagini come "Vai a pagina X."
- Aggiungere gli identificatori univoci alle pagine, così se un cambia numero pagina sarete in grado di raggruppare le pagine corrispondenti.