Come fare Cursori & Skins per Zoom Quadri e stili in Adobe Flex

January 8

Come fare Cursori & Skins per Zoom Quadri e stili in Adobe Flex


Flex Builder è la soluzione di Adobe per le applicazioni Web e desktop basate sui dati. Esso utilizza XML e ActionScript per creare cruscotti animati che sono in grado di visualizzare le informazioni recuperate da una postazione remota. I componenti integrati inclusi con Flex sono completamente personalizzabili. Attraverso "la scuoiatura" è possibile modificare il disegno di elementi come "slider". Inoltre, è possibile modificare la sensazione generale dell'applicazione tramite CSS.

istruzione

Come fare un cursore

1 Aprire la visualizzazione codice dell'applicazione principale Flex. Determinare se avete bisogno di un dispositivo di scorrimento orizzontale o un dispositivo di scorrimento verticale. Il dispositivo di scorrimento orizzontale viene chiamato il "HSlider" e il dispositivo di scorrimento verticale è chiamato il "VSlider."

2 Inserisci il codice per il cursore appropriato. Il HSlider utilizza il tag di apertura "<s: HSlider>" e tag di chiusura "</ s: HSlider>" e il VSlider utilizza il tag di apertura "<s: VSlider>" e tag di chiusura "</ s: VSlider>. Per aggiungere un HSlider semplicemente inserire il seguente codice nella vostra applicazione:

<S: HSlider> </ s: HSLlider> o <s: HSlider />

3 Aggiungere le proprietà di scorrimento. Posizionare le proprietà tra i tag di apertura e di chiusura del cursore. Alcune proprietà di esempio sono "snapInterval", "ID" e "Tooltip".

<S: ". 30" VSlider id = "mySlider" snapInterval = tooltip = "Test Slider" />

L'esempio precedente visualizzerà un cursore verticale con un id "mySlider" che scivolare in incrementi di "0.30". Quando l'utente passa sopra il cursore verrà visualizzato il messaggio "Test Slider".

Pelle componenti Flex

4 Aprite Adobe Fireworks CS5. Dal menù comandi selezionare "Interfaccia Flex", quindi "pelle nuova Flex." È possibile scegliere per la pelle tutti i componenti o componenti specifici. Modificare la progettazione Flex, come si vede in forma.

5 Esportare la pelle da Fireworks. Dal menu comandi, selezionare "Interfaccia Flex", quindi "Esporta interfaccia Flex."

6 Aprire Flex e salvare il file immagine della pelle nei vostri progetti "attività" cartella. Chiamare il file skin per il componente particolare che si desidera per la pelle. Se avete progettato una pelle per un componente Button, si potrebbe chiamare il file immagine con il seguente codice:

<Mx: Button

overSkin=&quot;@Embed(source='../assets/overSkin.gif')&quot;
upSkin=&quot;@Embed(source='../assets/upSkin.gif')&quot;
downSkin=&quot;@Embed(source='../assets/downSkin.gif')&quot;/>

L'esempio di cui sopra assegna un file di immagine diverso per ogni stato del pulsante.

L'aggiunta di CSS

7 Aggiungere stili di pagina usando i CSS. È possibile aggiungere dichiarazioni di stile CSS direttamente all'interno dell'applicazione principale Flex. Per fare ciò, utilizzare "<fx: Style>" tag.

8 Aggiungere codice CSS tra l'apertura e chiusura tag di stile.

<Fx: Style>
.myTextStyle {
fontSize: 12;
color: # 000000;
}
</ Fx: Style>

Il codice CSS precedente crea uno stile chiamato "myTextStyle" e indica che la sua dimensione del carattere è 12 e il colore è nero.

9 Applicare il nuovo stile a un elemento specifico.

<S: button id = "myBtn" styleName = label "myTextStyle" = "Fare clic su" />

Il codice di cui sopra si applica il vostro stile di carattere al pulsante con un ID di "myBtn."

Consigli e avvertenze

  • "Zoom Frames" non esistono in Flex. È possibile aggiungere effetti di zoom per componenti o elementi diversi utilizzando l'effetto MX Zoom.
  • Essere consapevoli del fatto che qualsiasi codice all'interno dell'ambiente Flex è case sensitive. Se si stanno avendo un problema con una delle funzioni o stili, controllare per vedere se si dispone di una capitalizzazione fuori luogo.