News verticali dinamiche con scroll

- Letture: 5.620

In un sito può essere molto importante far vedere al visitatore le ultime news con link e una piccola descrizione del contenuto.

Ecco delle News verticali dinamiche realizzate in Flash, sarà possibile scorrerre le varie news tramite uno scroll, inserire link, testo e adoperare un foglio di stile .css esterno.

News verticali dinamiche con scroll

Come al solito andiamo a vedere insieme il file .XML che ci servirà per inserire nuove news:

<item>
<titolo>Ken il Guerrero - cortometraggio 3D</titolo>
<testo>Se siete appassionati del cartone manga giapponese Ken il guerrero e di animazioni 3D questo video vi farà molto piacere.</testo>
</item>

  • titolo: Inserire il titolo della news, può essere anche inserito un link tramite il tag href
  • testo : Inserire il testo della news, possono essere inseriti i vari tag grassetto, italico, sottolineato

Le news possono essere semplicemente incapsulate in un altro file SWF tramite la funzione loadMovie

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

97 Commenti

  1. antonella

    Ciao Julius, ritorno a farti visita…
    Vorrei chiederti una cosa: volendo fare ex novo una scrollbar verticale quali sono le funzioni as da utilizzare? Inoltre non si tratta di testo, ma un elenco di “oggetti”: immagina i titoli di coda di un film e la dimensione dello schermo del TV: lunghezza titoli di coda > altezza schermo
    Come si gestisce per non mostrare nel risultato finale quello che non “entra nella tv”? Spero mi abbia capito….
    Grazie, Antonella.

  2. antonella

    Meglio di Mercurio!!
    Dunque: mi serve uno scrolling! Non ho la libreria scrollbar, quindi devo fare a manina (dove si possono trovare i componenti per flash?). Solo che il contenuto da “scrollare” non è testo, ma una sequenza di istanze di clip filmato. Ti ho chiarito?

  3. elisabetta

    Ciao,
    grazie per la rispsota dopo ci darò un occhio.
    Volevo inoltre sapere se è possibile farò lo scrolling automatico delle news, senza la barra di scorrimento.
    Se è possibile come si fa? grazie
    Elisabetta

  4. Ciao Julius ho un piccolo problemi che non capisco … Ho ingrandito l’area del movie delle news ho ingrandito il campo dinamico delle news ma le news non si allargano .. Come mai ? Si bloccano ad un certo punto andando a capo …

    Grazie

  5. Ciao Julius è’ la prima volta che lascio un msg .. Cmq voglio farti i miei COMPLIMENTI!!! sei geniale…
    Volevo chiedere una cosa…le news in questo tutorial vengono gestite da un xml..
    Come posso fare per modificare il contenuto dell’xml “DINAMICAMENTE” Cioè attraverso un piccolo pannello in php… magari.. Per favore mi fai avere notizie grazie alla prossima…

  6. Ciao gaten

    dovresti generare al volo con PHP un file che puo essere anche .php e non xml

    A flash puoi passare anche un file .php basta che la sintassi sia scritta come un file XML

  7. piscione75

    Ciao a tutti e complimenti :)
    Allora sono un neofita, quindi scusatemi se faccio domande , già fatte o stupide..
    Ma vorrei inserire nel mio sito/blog fatto con Wordpres, un “scroll test” per le “ultime news” nella sidebar.. esiste un plugin che fà al mio caso, anche oppure posso inserire il codice/tutorial di julius… ,ma non saprei dove inserirlo!
    grazie..Help Me..!

  8. Ciao di solito in WP c’è un widget per inserire gli ultimi articoli come quello che vedi nella sidbar..

    Puoi affidarti a vari tools online come quello rilasciato da google o feedburner

  9. Caro Julius innanzitutto grazie per il tuo magnifico sito…sto utilizzando il tuo script ma anche io volevo inserire delle immagini nel file di news verticali…come posso fare ho provato a inserire ma non mi carica l’iimagine e succede qualcosa di strano nell’impaginato….
    Grazie teresa

  10. Ciao Jiulius..
    ho provato in tutti i modi possibili a cercare di settare il solo Titolo in grassetto. Dai CSS, dal XML, in actionscript…ma niente.
    Si riesce solamente a cambiare il colore!?

    Grazie

  11. @Terry in pratica devi usare i tag HTML come fosse una pagina web…

    devo dire comunque che avevo provato anche io e sembra ci siano dei conflitti con altri tag…

    @JB ;)

  12. gianluigi

    Ciao, aiutami, ti prego. Ho bisogno di inserire moltissimo testo su più righe (una carta-vini), ma nn appena supero le 200 linee nel xml il filmato nn funziona, e non compare il testo.
    Come posso fare? C’è un limite imposto tramite script al numero di righe-testo?
    Aiutami, please

  13. Ciao Julius,

    ho provato a formattare il testo in questo modo

    Se siete appassionati del cartone manga giapponese Ken il guerrero e di animazioni 3D questo video vi farà molto piacere.

    p{
    font-weight:bold;
    }

    ma quando esporto l’swf, il testo mi scompare. Se però cambio il colore ad esempio così

    p{
    color:#FF0000;
    }

    funziona…

    Non capisco cosa c’è che non va.
    Ciao e grazie

  14. Ciao Julius,
    ho cercato di seguire il consiglio che hai dato a Motta ma non si ottiene nulla mi spiego, ho duplicato il campo dinamico ed ho creato un nuovo file XML chiamandolo testo1.xml e l’ ho fatto caricare nello AS del campo dinamico ma….. non ottengo nulla. In effetti la mia necessità non è quella dell news bensì la traduzone di testi dialettali quindi :

    dialetto1 italiano1
    dialetto2 italiano2
    ………… ………..
    dialettoN italianoN

    Non riesco a venirne fuori.

    ciao e grazie

  15. Se inserisco caratteri con l’accento tipo “è ò ì à” non li prende e fa casino all’interno del testo, puoi aiutarmi grazie.

    Ti seguo moltissimo

  16. @b1t ciao

    è molto strano in effeti anche a me da lo stesso errore

    @mrzpro ciao

    ma devi fare una traduzione? delle news?

    o crei due file swf news diverse oppure

    @Alberto ciao

    prova a leggere questo tutorial e a seguire i consigli

  17. Ciao Julius
    grazie per il suggerimento ma non è quello che mi serve infatti la tabella deve essere unica e testo e traduzione devono scrollare insieme

  18. Ciao Julius
    Ti devo chiedere gentilmente un aiuto.
    Devo creare un testo esterno TXT con tag HTML (supportati da Flash) e caricarlo in flash in un campo di testo dinamico (vuoto e istanzianto opportunamente) dotato di ScrollBar verticale.(in AS3).
    Ipotizzo che sia il campo di testo dinamico che la ScrollBar(quest’ultima presa utilizzando quella dei componenti -UIScrollBar) siano gia presenti sullo stage.

    Ho gia fatto delle prove ma il problema principale e che non riesco ad inserire il testo recuperato esternamente sul campo di testo dinamico creato sullo stage.
    (pur avendo richamato l’istanza con addChild(testo)).
    Se non istanzio, il testo viene mostrato perfettamente sullo stage ma non e inserito all’interno del campo di testo dinamico, questo fa si che la scrollBar non funzioni e che il testo non scorra.

    Ho cercato molto in rete a riguardo ma si trovano solamente tutorial in cui il testo esterno e senza i tag Html.

    Ti inserisco l’URL http://www.flepstudio.org/forum/flash-italiano/3806-scrollbar-txt-esterno-con-tag-html.html dove trovi il file FLA zippato con dentro un esempio cosi se hai voglia puoi darci una occhatina. Sono convinto che sono vicino alla soluzione ma sicuramente mi dimentico di qualcosa. La domanda l’avevo anche fatta a quelli di felpStudio ma per ora non ho avuto risposta.

    Ciao e grazie!
    by Gigio

  19. Ciao Julius,
    anzitutto complimenti, mi hai aperto nuovi mondi!
    Volevo chiederti un consiglio su questo tutorial: come faccio a fare in modo che i link mi portino ad un’immagine nella stessa pagina, tipo caricamento file esterno? Oppure se la cosa è troppo problematica ad aprire una popup su pagina diversa ma con dimensioni definite?
    Grazie mille aspetto fiduciosa!
    Ciao Nila

  20. Mh, scusa ho letto meglio i commenti, e ho trovato forse qualcosa che fa per me! Se ho problemi ti mando un altro post, grazie di nuovo.
    Ciao Nila

  21. Ciao di nuovo, nel frattempo ho provato le cose che ho trovato nei post precedenti ma niente! Se preferisci ti mando i file su cui sto lavorando così ci capiamo meglio, ogni link dovrebbe portare ad una pagina diversa.

    Speriamo di risolverla!
    :)

  22. ciao Julius!
    dovrei fare in modo che cliccando sulla parola “continua” alla fine di un blocco di testo,le news si espandessero in verticale e poi ovviamente richiudessero trascinandosi su e giù le news seguenti…qualche consiglio?

    grazie comunque :P

  23. @Gigio: ciao in AS3 ti serve?

    @Nila: ogni link deve portare a una pagina diversa quindi nuova prova cosi

    on(release){
    getURL("pagina.html","_blank");
    }

    oppure per la popup leggi qui

    @Ellli: si dovrebbe creare dei clip filmati espandibili, si deve pacioccare molto con il codice, il tempo purtroppo non è dalla mia parte, vedo se trovo qualcosa…

  24. Ciao Julius, per prima cosa complimeti per il sito e per le tue indicazioni,
    ho una piccola questione da sottoporti, ho inserito un nodo che ho chiamato immagine nel tuo script, ma le immagini non vengono centrate, mi sapresti dire come posso fare per avere
    l’immagine, il titolo e il testo.

    grazie 1000

  25. Alberto Monti

    Come posso fare per rendere trasparente lo sfondo invece che bianco?
    Grazie di tutto quello che fai per tutti noi

  26. Hello Julius,
    Thanks for the file.
    I wanted to modify is a little bit but I encountered a problem, and maybe you could help me.
    I wanted to convert all the text wich is loaded from the xml in uppercase, but it returns undefined. I tried to set it to uppercase with toUpperCase() like i now it works with any strings, but is not. i did like this:

    var nTitolo:String = (this.childNodes[0].childNodes[i].childNodes[0]);
    var nTesto:String = (this.childNodes[0].childNodes[i].childNodes[1]);

    nTitolo = nTitolo.toUpperCase();

    news.htmlText += “”+nTitolo+””+nTesto+”- – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – -“;

    Do you have any ideas why not working ?
    Thank you very much.

  27. Ciao Giulio!

    Complimenti per tutto!

    é da giorni che ero alla ricerca di uno script simile e finalmente lo trovato!!

    vorrei sapere se possibile una cosa..

    ho provato ada ssociare ad ogni singolo elemento (news) una funzione:

    for (i=0; i<qtd; i++) {
    var nTitolo = (this.childNodes[0].childNodes[i].childNodes[1]);
    news.htmlText += "”+nTitolo+””;
    news.onRelease = function() {
    zoomin(zoom, Xx, yY, 100, 100, 2);
    this.news.textColor = 0x5f829e;
    oldId.news.textColor = 000000;
    oldId = this;
    };
    }

    pensavo fosse possibile ma mi sa che sbaglio qualcosa…

  28. Ciao julius innanzitutto come sempre complimenti, che nn fanno mai male :) … sto provando ad inserire dei pulsanti per lo scorrimento delle news (classiche freccia su e freccia giù) oltre allo scroll già presente … ma nn riesco ad integrarle nel codice .. nn è che mi daresti qualche dritta o mi rimandi a qualche altro tutorial please? … grazie 1000 … Luca

  29. ciao Giulio,
    che tu sappia posso richiamare il file di testo show_news.php? gestisco infatti le news del mio sito con Cutenews (che genera appunto show_news.php) e mi piacerebbe mettere le ultime tot notizie in uno scroller flash nella home page. Con l’html infatti ho provato di tutto, quindi ripongo le mie ultime speranze in flash.
    Non sapendone un tubo né di xml né di php, non so dirti se la sintassi sia la stessa…

    grazie!

  30. Ciao Julius, è la prima volta che purtroppo sono costretto a scrivere, ho sempre trovato quello che cercavo qui da te!
    ti volevo fare innanzitutto i miei complimenti… sei un grande!!
    comunque ho bisogno di te!
    devo creare una semplice barra di scorrimento ed è anche abbastanza urgente, ma non mi serve con l’xml ma direttamente da flash!!
    devo creare dentro un movieclip una barra di scorrimento con un testo! questa barra deve essere semplicissima, anche senza le frecce solo la barra trascinabile!! ho cercato dappertutto ma non riesco, se potresti mandarmi un file di esempio, direttamente con la barra e le spiegazioni per poterla personalizzare un po!
    grazie mille in anticipo

  31. ciao JULIUS ovviamente grazie x le risorse che metti a disposizione e grazie per l’aiuto che apporti a tutti noi bisognosi =)

    ho personalizzato il menu’ a scorrimento verticale secondo le mie esigenze e quando apro il file news.html (in locale o online) vedo tutto perfettamente funzionante (contenuti da xml compresi).

    A questo punto volevo caricarlo su myspace.com/aronasamsara, per il momento in fondo alla sezione “INTERESSI”:
    1-carico swf,xml e css su un hosting (ho provato con fileden.com ma anche con uno spazio a pagamento, per assicurarmi che i files finissero nella stessa cartella)
    2-vado nella sezione “interessi” del profilo myspace e lì copio il codice html contenuto in fondo al file news.html (quello contraddistinto dai 2 tag
    3-sostituisco il percorso “.news.swf” con l’url online esatto (sia nel value che nell’embed src)

    Il risultato è quello visibile attualmente in fondo alla sezione INTERESSI (dove si legge SAMSARA CALENDARIO EVENTI ma senza contenuti né barra laterale né colore di sfondo).
    Eppure il mio swf corretto è questo (a tutta pagina): http://www.fileden.com/files/2009/2/7/2311192/news.swf

    cosa ho sbagliato?
    ho provato ad agire sul CSS usando le opzioni di personalizzazione del profilo 2.0 di myspace ma non ho risolto.

    grazie ancora

  32. faccio solo una precisazione che deve essermi sfuggita: nel punto 2 il codice html che copio nel myspace è quello contraddistinto dai tag object in fondo alla pagina news.html

  33. Ciao Julius e complimenti per tutti i tuoi tutorial, sei bravissimo!
    Ho scaricato queste news e vorrei inserire delle parole in grassetto, ma quando modifico il txt con e tra la parole in questione, questa scompare del tutto dal testo…
    Come posso fare? Aiutami :)

  34. caro julius ho trovato assolutamente utile il tuo scroll, e ti ringrazio.
    Ho solo un piccolo problema, il testo ha una leggera trasparenza e non riesco a risalire da dove la prende e quindi non riesco a toglierla.
    cosa mi sfugge???

  35. Salve, è possibile fare una scrollbar verticale per visualizzare l’intera pagina di un sito?ed è possibile far si che scorra su e giu anche con la rotellina del mouse? grazie

  36. ciao Julius,
    a parte i miei doverosi complimenti, ho 2 domande da farti riguardo questo tutorial:
    1. quando si superano le 200 righe nel file xml, ho notato che browser come safari e firefox per mac non riescono più a visualizzare la prima parte del testo
    2. il file xml non accetta il font-style italic nè il font-weight bold

    hai idea di come possa risolvere?

    grazie mille!!

  37. ciao Julius,
    ho un problema.
    Sto cercando di inserire questo schema per le news in un sito, lavoro con Macromedia Dreamweaver CS5.5 (lavoro su Mac).
    Procedo con l’inserimento attraverso il comando:
    Inserisci -> Oggetto multimediale -> SWF
    E qui accade una cosa strana.
    Se lo lascio dove appare automaticamente quando visualizzo l’anteprima lo scroll funziona.
    Se cerco di posizionarlo a destra, dove mi è stato chiesto di inserire lo spazio per le news lo scroll non funziona!
    Ho provato ad allinearlo sia scrivendo direttamente nel codice, sia lavorando attraverso il comando Allinea nella schermata di progettazione, ma niente!
    appena lo allineo a destra lo scroll non funziona!
    come mai?!
    grazie di tutto
    Kayra

Commenti