MySpace in Flash: Posizionamento del contenuto Flash

- Letture: 3.736

Come avevo promesso oggi iniziamo a parlare di come creare un MySpace in Flash.

Durante queste lezioni, con l’aiuto di Stefano lettore di JuliusDesign, impareremo a posizionare il contenuto flash nel nostro profilo, gestire la tabelle dei contatti ovvero Add Friend, Send Message Add Comments, il box dei commenti e degli amici

Dove inserisco il codice?

Questa è una delle prime domande che una persona si chiede…

Se possediamo un account MySpace standard (non music) il codice Html e Css va inserito nel profilo accessibile dall’homepage e da Modifica profilo in alto a sinistra a fianco all’indirizzo del nostro myspace (Fig.1)


fig.1

Per fare ordine tra il codice CSS e Html è consigliabile separarlo in due box come di seguito:

  • Il codice CSS nel box “Chi sono
  • Il codice Html e Flash embed in “Mi piacerebbe conoscere

Ora vediamo un esempio di come posizionare un file Flash centrato nella pagina MySpace

Inseriamo nel box “Chi sono” il codice CSS:

<style>
// nome identificativo del div
.flashModulo {
// distanza dal margine superiore dalla pagina web (180 pixel è l'altezza che comprende il banner di myspace e il menu cliccabile)
top: 160px;
// larghezza del div e del flash che caricheremo nello space
width:800px;
// altezza del div e del flash
height:500px;
// posizionamento css assoluta
position: absolute;
// posizionamento da sinistra 50% e metà dello schermo in modo relativo alla risoluzione dello schermo
left: 50%;
// margine sinistro -400 px cioè uguale alla larghezza del flash /2 (margine sinistro = (width:800px)/2 * -1) => -400px
margin-left: -400px;
// z-index indica il livello di sovrapposizione dei div , in numero 9 indica che il nostro flash sarà sovrapposto a tutti i div di z-index con valore inferiore pari a 8,7,6,5,4...
z-index:9;
}
</style>

Scarica Codice

Inseriamo nel box “Mi Piacerebbe conoscere” il codice HTML:

<div class="flashModulo">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="500" width="800" data="http://www.krdesign.it/myspace/tutorial/assets/myspace_flash.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.krdesign.it/myspace/tutorial/assets/myspace_flash.swf" />
<param name="menu" value="false" />
</object>
</div>

Scarica Codice

Come possiamo vedere il div che contiene il filmato Flash è gestito tramite la classe flashmodulo dichiarate nel CSS

Ovviamente il codice di embed Flash è un esempio, i parametri evidenziati in rosso sono quelli da personalizzare con i propri

Se avete seguito bene i procedimenti dovreste essere in questa situazione

Con questa prima lezione concludiamo la parte del posizionamento di contenuti Flash all’interno del profilo MySpace.

Nella prossima lezione impareremo a gestire la tabella contatti

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.

36 Commenti

  1. Finalmente una guida pratica su come creare uno spazio MySpace in Flash bravi!

  2. grande julius!!!
    proprio quello che mi serviva.. ma mi leggi nel pensiero??? ;)
    sei un mito!!!

  3. emanuele

    quando farai uscire la seconda lezione? facci sapere che siamo ansiosi grazie

  4. Ciao Julius..Prima di tutto complimenti per il blog..Quando esce la seconda lezione sul myspace in flash?

    Ciao :-)

  5. CIAO Julius,GRAZIE X QUESTA SPEIGAZIONE…vorrei sapere una piccola variante,se io ho un myspace musica sotto che tabelle devo inserire i codici?

  6. @CArlo: Ciao

    Mi dice anche Stefano che per MySpace Music il codice cambia leggermente…

    Prossimamente scriverò degli articoli anche su questi procedimenti

  7. Ciao Julius, il tuo codice infilato nel form del myspace music, non funziona. Puoi darci un mano?
    Grazie.

    Fabrizio

  8. Ciao Julius, ho provato ad inserire il codice e sembrerebbe funzionare… purtroppo Myspace inserisce in automatico questo valore all’interno del codice, l’animazione quindi è trasparente. come posso risolvere il problema?

  9. 2 sono i valori che mi inserisce in automatico “wmode” e “transparent”… grazie so che riuscirai a trovare una soluzione :D grazie.

  10. @Tia: ciao mi sembra strano che sia inserito in automatico ne sei sicura?

    @FABRIZIO: con MySpace Music il codice cambia sto preparando un articolo a riguardo…

  11. ma nn ho capito: il codice css è uguale per tutti?
    E poi come facccio a sapere se ho un myspace music o dell altro tipo? Sorry

  12. Cmq ho provato ad inserire il codice css in chi sono e mi appare la scritta che non posso inserire codice css

  13. @Julius: cia julius…hai poi scritto l’articolo riguardante l’inserimento delle sezioni flash per i profili MUSIC?? Perche io non riesco a trovarlo nel tuo sito…grazie mille e complimenti sempre. con simpatia. anto

  14. Gianluca

    Ciao Julius.. premettendo che sei un grande, ti volevo chiedere perchè, secondo te, da 2 giorni mi si è sconfigurato un .swf (di Wix) che avevo in sulla mia pag di myspace, ben posizionato ormai da mesi. Da un giorno all’altro (il problema esiste solo con firefox) l’swf mi si è “abbassato” di un numero di pixel pari alla metà della sua altezza.. sarà forse colpa di qualche aggiornamento “fasullo” di firefox? Hai qualche idea?
    Grazie in anticipo!

    LK

  15. Gianluca

    PS: se vuoi dare un’occhiata al mio profilo per capire meglio: SingerProducer*LK*
    Ciao

  16. @antonio: Prossimamente ;)

    @Gianluca: da codice installando l’add-on per FF Firebug puoi notare dei tag BR che fanno andare a capo il tuo object ;)

  17. Gianluca

    Innanzitutto grazie per la tempestività!
    ..in realtà i tag br li ho messi per evitare che scivoli giu “l’accavallamento” del Background in cornice , dopo il caricamento dell’object; eliminandoli non ho comunque risolto il problema della posizione dell’object.. puoi andare a vedere, ho tolto i br ..
    la cosa che mi stupisce è che copiandoci su il codice che una settimana fa andava bene, adesso da quel problema!.. è successo da un giorno all’altro..vabè..

  18. Gianluca

    Ho appena capito che il problema è WIX; ha cambiato editor e le funzionalità che il mio object richiama ora sono cambiate.. lo rifarò daccapo.. Grazie di tutto!

    LK

  19. Gianluca

    Ciao Julius, Vorrei posizionare un piccolo .swf in un determinato punto della mia pagina. Usando il codice che hai messo a disposizione (personalizzandolo con le mie dimensioni ed altezze) mi ritrovo l’oggetto in posizioni diverse per Firefox ed Explorer.. probabilmente perchè questo codice presuppone che l’oggetto da inserire lo si voglia centrato (mentre nel mio caso lo voglio di qualche px a sinistra). Come faccio? basta aggiungere qualche riga di codice?

    Grazie in anticipo!!!

  20. ciao a julius la tua guida è davvero semplice ma io ho un problema ho scritto tutto come dici tu solo che invece del swf sotto la barra mi fa vedere le scritte del codice che metto in MI PIACEREBBE CONOSCERE…
    mi aiuti per favore?
    grazie mille

  21. Gianluca

    Ciao Julius, potresti darmi qualche indicazione per risolvere il mio problema? Grazie

  22. La versione 2.0 non permette di mettere css nei moduli di testo, e quindi non funziona, come posso fare?

  23. nella versione 2.0 c’e’ proprio la voce CSS dove incollare il codice nell’apposita casella.
    DOMANDA: bisogna mettere il primo codice? e POI il secondo in mi piacerebbe conoscere?? NON MI FUNZIONA!
    STO IMPAZZENDO..

  24. Grazie Julius per la guida, ma è possibile un aggiornamento dei codici visto che con questa nuova versione di Myspace si questo che gli altri codici non fuinzionano più bene?

    Grazie

  25. ciao,, volevo chiederti,, io seguo tutto quello che dici te nella guida,,, e funziona,,, però quando vado a modificare il link dove andare a prendere il file .swf non funziona,,, l’ho hostato su vari siti eccetera,,, e non funziona,,, come devo fare? grazie per l’aiuto

Commenti