Flash: barre di scorrimento verticale

Di: michelino1980 | 26/09/2020 18:59:18
Ciao a tutto il forum, vorrei sapere come è possibile fare con flash le barre di scorrimento verticale all'interno di un sito.
Grazie anticipatamente per una vostra risposta

Risposte



Se devi fare scorrere una texarea c'è il componente UIScrollBar, se vuoi una soluzione più personale puoi costruire un movieclip che faccia da scrollbar.
Infatti era possibile prima dell'inserimento dei componenti in Flash (con Flash 5 per esempio) creare barre di scorrimento, è più interessante, più divertente, e più utile per fare pratica.

Di: Professore | 26/09/2020 18:59:18


Grazie Professore, però io ho un piccolo problema, sono agli inizi, quindi sinceramente non so cos'è il componente uiScrollBar.
Mi puoi mica dire qualcosa di più,sulla procedura che devo fare pe creare lo scorrimento della texarea.
Scusami ma sono veramente imbranato

Di: michelino1980 | 26/09/2020 18:59:18


Step 1: Crei un'area di testo con lo strumento testo.
Step 2: Inserisci tutto il testo che ti serve (non importa se momentaneamente l'area di testo si espande in verticale).
Step 3: Assicurati che la tua area di testo sia impostata a Testo dinamico (dal pannello Proprietà).
Step 4: Con un doppio click sull'area di testo apparirà un quadrato nero in basso a destra, usa quello per ridimensionare l'area di testo.
Step 5: Apri il pannello Componenti(Finestra>Componenti oppure CTRL+F7).
Step 6: Cerchi il componente UIScrollBar (User Interface>UIScrollBar).
Step 7: Trascini il componente sopra la casella di testo (noterai che si aggancia alla destra del testo automaticamente).
Step 8: Prova il filmato.
La scrollbar la ritrovi nella libreria. Puoi trascinarla su tutte le aree di testo che ti pare e funziona sia come scroll verticale che orizzontale.
Inoltre, una volta assegnata la scrollbar puoi spostare (ruotare, ecc) l'area di testo e la scrollbar separatamente, continueranno ad essere collegate, non so a che serva, ma si può fare...

Di: Professore | 26/09/2020 18:59:18


Grazie 1000 sei veramente grande, alla fine ho trovato quello che cercavo.
Ti chiedo solo una cosa, è anche possibile cambiare il colore dello scroll tramite i parametri, oppure lo devo lasciare cosi??
Perchè a me serviva di colore verde, però se non è possibile lo lascio così.
Di nuovo grazie

Di: michelino1980 | 26/09/2020 18:59:18


Il motivo per cui non uso mai componenti di Flash è che se da un lato sono comodi (trascini e funzionano) dall'altro lato sono di una scomodità mortale...
Esiste un modo per cambiare l'aspetto ai componenti, addirittura puoi ridisegnare tutti gli elementi. Infatti si tratta di movieclip precompilate e da qualche parte del tuo hard disk esistono gli originali file Fla che vengono usati per la visualizzazione.
Qui sotto descrivo una delle procedure che puoi seguire per cambiare il colore alla barra.
Dando per scontato che tu abbia già creato la tua area di testo e applicato la scrollbar, importeremo un tema tra i due presenti in dotazione con Flash MX 2004, dopo di che cambieremo il colore dei vari elementi.
Siamo obbligati ad importare un tema che supporti delle modifiche da codice, infatti il tema di default (quello bianco) non ha delle proprietà o metodi che possiamo usare per modificarne l'aspetto.
Per prima cosa salva il lavoro che hai fatto fino a ora con un altro nome, potresti pentirti e voler ritornare indietro.
Come importare un tema per i componenti.
Step 1: Menu File>Importa>Apri libreria esterna.
Step 2: Scegli il file "SampleTheme.fla".
EDIT: dimenticavo di dire che questo file si trova già sul tuo computer, il suo percorso è
C:\\Documents and Settings\\<nome utente>\\Impostazioni locali\\Dati applicazioni\\Macromedia\\Flash MX 2004\\<lingua del programma>\\Configuration\\ComponentFLA\\SampleTheme.fla
Si è aperta la libreria di questo file
Step 3: Cerca l'elemento che ti serve.
Flash UI Components 2>Themes>MMDefault>Scrollbar Assets>VScrollBarAssets
Step 4: Trascina l'elemento sulla tua libreria.
E puoi anche chiudere la libreria esterna
Step 5: Clicca con il tasto destro sul simbolo VScrollBarAssets che si trova sulla tua libreria e accedi a "Proprietà", assicurati che sia selezionata l'opzione "Esporta nel primo fotogramma".
A questo punto prova il filmato, la barra ha cambiato aspetto, anche se si vede solo mentre il filmato gira e non nell'area di disegno.
Abbiamo importato un tema!!!!
Come personalizzare il tema.
Nella libreria, oltre a VScrollBarAssets trovi diverse cartelle, queste contengono tutti gli elementi che servono per disegnare la tua UI (Interfaccia Utente).
Oltre alla possibilità di cambiare la forma ad alcuni elementi (solo la forma, perché il colore viene assegnato dinamicamente), che ora si trovano in libreria come comuni movieclip, utilizzando il tema "Sample" abbiamo a disposizione tre proprietà che prima non avevamo:
scrollTrackColor
il colore di sfondo della barra di scorrimento (per default 0xCCCCCC, grigio chiaro).
symbolColor
il colore delle frecce (per default 0x000000, nero)
symbolDisabledColor
il colore delle frecce quando sono disabilitate (per default grigio scuro)
Non è molto ma è già qualcosa... per assegnare i tuoi colori devi utilizzare uno script, dopo aver dato un nome istanza alla barra di scorrimento: per esempio se hai chiamato la barra "miaScrol" e vuoi che il colore di sfondo diventi verde brillante puoi scrivere
miaScroll.setStyle("scrollTrackColor", 0x00FF00);
Alla fine io non credo che il gioco valga la candela, ho sempre fatto le scrollbar partendo da zero, così da essere libero di scegliere forme, colori, dimensioni, ecc.
Rispondo ad eventuali domande che non hai ancora fatto:
Esistono altri temi sul mio computer?
Si, c'è un altro tema chiamato Halo, è quello bianco che hai visto la prima volta che hai usato il componente, lo trovi nella stessa cartella ma ha metodi differenti per la personalizzazione, quindi scrollTrackColor non funzionerebbe.
Dove posso scaricare altri temi?
Non ne ho la minima idea, ma credo che esista qualcuno che condivida i propri temi.
Come posso creare un tema da zero?
Non è semplice, i temi non sono solo grafica e bisogna conoscere bene ActionScript, un buon punto di partenza è aprire il file SampleTheme.fla e spulciarlo tutto.

Di: Professore | 26/09/2020 18:00:19


Sei proprio un professore,sai veramente tanto.
Ti ringrazio molto per la disponibilità e l'interesse, mi sei stato veramente di aiuto.
Ora l'unica cosa che devo fare è mettere in pratica i tuoi consigli.
GRAZIE

Di: michelino1980 | 26/09/2020 18:00:19


Ciao michelino,
girando per la rete ho trovato per caso un componente scrollbar già pronto e gratuito, mi sono ricordato di questa discussione e allora te lo segnalo.
Per installarlo devi utilizzare Macromedia Extension Manager, e sarà subito disponibile insieme agli altri componenti.
Per personalizzarlo non serve altro che disegnare i vari pezzi, infatti sono sufficienti cinque movieclip a tuo piacere per fare la skin, basta rispettare i nomi delle istanze come in questa figura:

inoltre è molto più leggero del componente in dotazione con Flash.
http://play.ground.gr/?p=85 questa è la pagina da cui lo puoi scaricare e contiene le istruzioni per l'utilizzo, in inglese.

Di: Professore | 26/09/2020 18:00:19


Grazie per essertelo ricordato ora scarico il tutto e provo, spero di riuscirci, altrimenti mi faccio vivo.
ciao

Di: michelino1980 | 26/09/2020 18:00:19


Come immaginavo non sono riuscito a capire cosa devo fare, mi puoi mica dare un pò di aiuto. Grazie

Di: michelino1980 | 26/09/2020 18:00:19


Non riesci ad utilizzare la barra oppure non riesci a personalizzarla?

Di: Professore | 26/09/2020 18:00:19


Sono riuscito a utilizzarla, ma non la so personalizzare

Di: michelino1980 | 26/09/2020 18:00:19


Personalizzare questa barra è relativamente facile:
in un filmato in cui stai usando la barra fai le seguenti cose passo per passo...
1. crea un nuovo movieclip, non importa il nome.
2. all'interno di questo movieclip crea un movieclip con il disegno di una freccia puntata verso l'alto, assegna come nome istanza "minus".
3. duplica il movieclip del punto 2 e assegna come nome istanza "plus", capovolgilo.
4. disegna un rettangolo, convertilo in movieclip e assegna come nome istanza "track"
5. disegna un altro rettangolo più piccolo e assegna nome istanza "thumb".
6. dentro il movieclip chiamato "thumb" disegna una cosa qualunque, convertila in movieclip e chiamala "centered".
Ora hai tutto quello che ti serve, nella libreria.
Nel pannello libreria clicca sul movieclip principale della skin, quello di cui al punto 1 della precedente lista... dal menu a casacata scegli "linkage" ("concatenamento" nella versione italiana). Dal pannello Linkage scegli "Export for Actionscript" (Esporta per Actionscript) e assegna un nome identificativo, ricordati il nome identificativo che assegni. Clicca OK.
Ora clicca sulla barra che stai usando, apri il pannello Parametri e alla voce "skin" digita il nome identificativo che hai scelto.
Per facilitarti ulteriormente ho realizzato una prova, il disegno è terrificante ma così è più evidente che la barra è personalizzata, puoi scaricarlo dal seguente link:
http://www.danielealessandra.com/ScrollBarComponent.fla

Di: Professore | 26/09/2020 18:01:19


Ok grazie ci sono riuscito. Veramente molto interessante questa applicazione.
Credo che non ci sino limiti per quanto riguarda la personalizzazione di questa barra.

Di: michelino1980 | 26/09/2020 18:01:19


Ciao Michelino e ciao Professore.
Anch'io come Michelino ho necessità di utiklizzare una barra di scorrimentyo per il testo, e a quanto pare una soluzione semplice c'è.
Ho riscontrato un prb però nell'utilizzo di tale barra.
Cioè ho in un clip, una casella di testo dinamico alla quale ho associato il textscroll.
Quindi ho il textscroll alla sinistra della casella di testo.
Nel frattempo mi sono creato una barra personalizzata secondo i passi descritti dal professore, ed ho opportunamente denominato i vari componenti di tale barra.
Ho seguito la procedura di concatenamento della stessa e l'ho chiamata Symbol 1.
Ho associato a tale ID l'oggetto textscroll e ho avviato il filmato.
La barra personalizzata si è magicamente sostituita alla textscroll, ma ci sono due imprecisioni in essa:
1) è molto più alta della textscroll e dell'oggetto barra da me creato.
2) quando clicco sul thumb, il thumb si sposta a destradi circa 1 cm.
Ma perchè questo?

Di: Anesta863 | 26/09/2020 18:01:19


Ciao Lucaib,
se vedi il testo su una sola riga è perché le impostazioni della casella di testo dicono di fare così.
Nella Palette Proprietà devi assicurarti che sia attiva l’opzione multiriga anziché riga singola, se il testo si disporrà su più righe funzionerà anche la barra che, al momento, non ha niente da scorrere perché trova un rigo soltanto.

Di: Professore | 26/09/2020 18:01:19


Ciao Professore,
ho un problema con la scroll bar,
la skin che creo viene deformata.
la mia skin è una semplice linea di grandezza 1 con il cursore di forma ellissoidale.
quando provo il filmato mi ritovo una barra corta che non prende tutto l'altezza del text molto piu larga ed il cursore schiacciato ai lati ed allungato sulla barra.
ho provato anche a dargli setSize, ma senza successo.
puoi aiutarmi?
graziee

Di: AMD Passion | 26/09/2020 18:01:19


Ciao a tutti, ho seguito la spiegazione della sbarra di scorrimento verticale,ma quando provo il filmato si vede solo la prim riga del testo e sotto è tutto nero e la sbarra non scorre, dove sbaglio? ciao

Di: celina | 26/09/2020 18:01:19


si ora funziona ,non avevo letto la risposta a lucaib heheheh, solo che per trasformare la sbarra " tema" apro la libreria e cè flash UI component e dentro cè scrolbar e due cartelle component skin e core assent, ma dentro di esse non cè vscrollbar assent ma fscrollbar assent, come posso fare? ciao

Di: celina | 26/09/2020 18:01:19


So che è vecchissima la discussione.
Il problema è che a me quando inserisco la scrollbar poi non mi fa modificare il grassetto o meglio me lo fa modificare ma a tutto il testo una sola parola non me lo permette
Come posso fare?
Grazie

Di: kaiflas | 26/09/2020 18:01:19


Questo post mi è stato utilissimo,
grazie mille quindi a tutti!
Un'ulteriore domanda: è possibile inserire nel testo che scorre dei link? Avrei bisogno di far scorrere un elenco di "diciture" che vanno linkate a delle pagine da scaricare....
Grazie ancora in anticipo!
Francesca

Di: Romenza | 26/09/2020 18:02:19