Flash MX 2004 Tutorial: CSS e Context-Menu
In questo tutorial vedremo l'utilizzo dei CSS (Cascade Style Sheet) e la personalizzazione del tasto destro del menu di Flash.Utilizzeremo i seguenti oggetti e metodi: Shared Object, ContextMenu, TextField, TextField, StyleSheet, asfunction.
Il tutorial è completamente OSM (One Script Movie), ossia nello Stage troviamo solo un fotogramma e il codice ed utilizziamo i seguenti file esterni:
Style1.css
Style2.css
Style3.css
body.html
body_eng.html
A sua volta dal file body.html vengono caricate le immagini e un filmato swf.
In pratica andremo a vedere come importare in Flash una pagina HTML e formattarla con i CSS anch'essi esterni !
Potremo cosi modificare sia lo stile che il contenuto senza riaprire e pubblicare il Fla.
Inoltre abbiamo previsto il cambio del linguaggio automatico, e la memorizzazione dello stile e del linguaggio scelti dal visitatore.
Partiamo dalla preparazione dei file esterni, quindi dai CSS, dei quali sono supportati alcuni metodi:
.title{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
display: block;
text-align: right;
color: #333333;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
color: #666666;
}
.code {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
display: inline;
text-align: left;
color: #666666;
}
.subtitle{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
display: block;
text-align: center;
color: #666666;
font-style: italic;
}
.ptitle{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
display: block;
text-align: left;
color: #000099;
font-style: normal;
}
biline {
font-size: 14px;
display: inline;
text-align: left;
color: #333333;
font-style: italic;
}
credit {
font-size: 10px;
display: block;
text-align: left;
color: #333333;
text-align: center;
font-style: italic;
}
A {
color:#0033FF;
font-weight: bold;
}
A:hover {
text-decoration:underline;
color:#FF0000;
font-weight: bold;
}
A:active {
color:#000099;
text-decoration:underline;
font-weight: bold;
}
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
display: block;
text-align: right;
color: #333333;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
color: #666666;
}
.code {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
display: inline;
text-align: left;
color: #666666;
}
.subtitle{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
display: block;
text-align: center;
color: #666666;
font-style: italic;
}
.ptitle{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
display: block;
text-align: left;
color: #000099;
font-style: normal;
}
biline {
font-size: 14px;
display: inline;
text-align: left;
color: #333333;
font-style: italic;
}
credit {
font-size: 10px;
display: block;
text-align: left;
color: #333333;
text-align: center;
font-style: italic;
}
A {
color:#0033FF;
font-weight: bold;
}
A:hover {
text-decoration:underline;
color:#FF0000;
font-weight: bold;
}
A:active {
color:#000099;
text-decoration:underline;
font-weight: bold;
}
Questo è il primo foglio di stile, Style1.css, gli altri hanno le stesse classi e vengono cambiati solo i valori.
Adesso possiamo costruire la pagina html che conterrà anche il testo e le immagini da utilizzare.
Flash 7 infatti supporta l'inserimento di immagini e swf nei tag dell'html.
Le immagini si inseriranno con la solita sintassi dell'html:
<img src='barra.jpg' width="730" height="35" border="0" vspace="10" id="image" align="left"></img>
Per le immagini è necessario che siano di formato JPG non progressivo e sono supportati i seguenti tag: width, heigth, border, vspace, hspace, possiamo inserire un link con i tag <a href "link"></a> e l'id serve per dare un link da un immagine in libreria del filmato (non consigliato per file esterni), dove daremo lo stesso nome usato in Flash per l'esportazione.
Per i filmati swf useremo la stessa sintassi:
<a href="asfunction:playmovie"><img src='movie.swf' width="150" height="120" border="0" align='left 'id='movie'></img></a>
In questo caso l'id del filmato serve come nome istanza se lo vogliamo comandare dal filmato, come nel nostro caso che usiamo asfunction che richiamerà una funzione nel movie.
Per gli swf è necessario che nel filmato nulla esca fuori dalle dimensioni dello stage, altrimenti verrà visualizzato.
Passiamo ora al codice del filmato, per il quale usiamo Actionscript 2:
// Settiamo la codifica dei caratteri di sistema
System.useCodepage=true;
// istanziamo uno Shared-Object per memorizzare lo style e il linguaggio
_global.styleISO = SharedObject.getLocal("styleISO", "/");
var memostyle:String=styleISO.data.mystile;
var memolan:String=styleISO.data.mylanguage;
// ricaviamo il linguaggio del Sistema Operativo
var lan:Object=System.capabilities;
// se non era memorizzato, settiamo la pagina corrispondente al linguaggio
var exthtml:String=(memolan==undefined)?(lan.language=="it")?"body.html":"body_eng.html":memolan;
// istanziamo un nuovo ContextMenu
var newMenu = new ContextMenu();
// nascondiamo il Menu Standard
newMenu.hideBuiltInItems();
// creiamo un TextField grande come lo stage
this.createTextField("body",1,0,0,Stage.width,Stage.height);
_root.body.multiline= true;
_root.body.wordWrap = true;
_root.body.html = true;
//istanziamo e assegniamo le voci del Context Menu
var label1= new ContextMenuItem("Style Classic", GetStyle);
var label2= new ContextMenuItem("Style Liberty", GetStyle);
var label3= new ContextMenuItem("Style Accessibility", GetStyle);
var label4= new ContextMenuItem("View Code", GetStyle,true);
var label5= new ContextMenuItem("Download", GetStyle);
var label6= new ContextMenuItem("View Page", GetStyle,false,true,false);
var label7= new ContextMenuItem("Tv Oggi", GetStyle,true);
var label8= new ContextMenuItem("Add Bookmark...", GetStyle,true);
var label9= new ContextMenuItem("Post in Forum", GetStyle);
//inseriamo le voci nel Context Menu
newMenu.customItems.push(label1,label2,label3,label4,label5,label9,label6,label8,label7);
// creiamo una funzione che gestisca tutte le voci del menu
function GetStyle (obj, menuItem, memo) {
// controlliamo se era stato memorizzato uno style
var getstile:String=(memo==undefined)?menuItem.caption:memo;
label1.enabled=label2.enabled=label3.enabled=true;
// assegniamo un azione ad ogni voce del menu
switch(getstile){
case "Style Classic":
// impostiamo un link a uno stile e richiamiamo la funzione per cambiare lo stile
var nowstile:String = "style1.css";
SetStyle(nowstile,getstile);label1.enabled=0;break;
case "Style Liberty":
var nowstile:String="style2.css";
SetStyle(nowstile,getstile);label2.enabled=0;break;
case "Style Accessibility":
var nowstile:String="style3.css";
SetStyle(nowstile,getstile);label3.enabled=0;break;
case "View Code":
viewcode();break;
case "View Page":
viewpage();break;
case "Download":
// inseriamo un link a un file da scaricare
getURL("contestcss.zip","_blank");
break;
case "Post in Forum":
// inseriamo un link a una pagina da aprire intera
getURL("http://www.z2000.it/forum/topic.asp?TOPIC_ID=138","_top");
break;
case "Tv Oggi":
// inseriamo un javasript di una pagina da aprire a pop
getURL ("javascript:window.open('http://www.z2000.it/guidatv/','tv','width=750,height=500'); void(0);");
break;
case "Add Bookmark...":
// inseriamo un javasript per aggiungi ai preferiti
getURL ("javascript:window.external.AddFavorite('http://www.z2000.it/flash/tutorial/flashmx2004/contestcss/','Z2000.it - Tutorial Flash MX 2004 - CSS e ContextMenu'); void(0);");
break;
default:
// carichiamo lo stile iniziale se non c'era nessuno stile impostato
var nowstile:String = "style1.css";
SetStyle(nowstile,getstile);
if(getsile=="Style Classic"||getsile==undefined)label1.enabled=0;
break;
}
var nowstile:String=laststile;
}
// funzione per impostare o cambiare lo style
function SetStyle(nowstile,getstile){
// memorizziamo lo stile scelto negli SO
styleISO.data.mystile=getstile;
// Istanziamo un nuovo stile (StyleSheet)
var css:TextField.StyleSheet = new TextField.StyleSheet();
// carichiamo il foglio di stile (CSS) esternamente
css.load(nowstile);
// assegniamo lo style al TextField
body.styleSheet = css;
var laststile:String=nowstile;
}
// istanziamo un XML
story = new XML();
story.ignoreWhite = true;
// funzione per caricare la pagina del contenuto esterna
function viewpage(){
// rendiamo visibili tutte le voci del menu, tranne la 6
for (name in newMenu.customItems){newMenu.customItems[name].visible=true;};
label6.visible=false;
// carichiamo la pagina esterna
story.load(exthtml);
// messaggio per l'attesa
_root.body.htmlText="<b><i>...loading page..wait please...</i></b>";
story.onLoad = function () {
// a pagina caricata assegniamo il contenuto al TextField
_root.body.htmlText = story;
}
}
// funzione per cambiare e memorizzare linguaggio scelto
function changeLanguage(){
exthtml=styleISO.data.mylanguage=(exthtml=="body.html")?"body_eng.html":"body.html";
viewpage();
}
// funzione per caricare la pagina del codice, uguale alla precedente
function viewcode(){
story.load("code.html");
_root.body.htmlText="<b><i>...loading code..wait please...</i></b>"
label1.visible=label2.visible=label3.visible=false;
for (name in newMenu.customItems){newMenu.customItems[name].visible=false;};
label6.visible=true;
label6.separatorBefore=true;
story.onLoad = function () {
_root.body.htmlText = story;
}
}
// funzione per avviare e fermare il filmato nella pagina
var vai:Boolean=false;
function playmovie(){
if(!vai){_root.body.movie.play();}else{_root.body.movie.stop();}
vai=!vai;
}
// assegniamo il Context-Menu alla _root
_root.menu=newMenu;
// inizializzazione delle funzioni
GetStyle(null,null,memostyle);
viewpage();
// end
System.useCodepage=true;
// istanziamo uno Shared-Object per memorizzare lo style e il linguaggio
_global.styleISO = SharedObject.getLocal("styleISO", "/");
var memostyle:String=styleISO.data.mystile;
var memolan:String=styleISO.data.mylanguage;
// ricaviamo il linguaggio del Sistema Operativo
var lan:Object=System.capabilities;
// se non era memorizzato, settiamo la pagina corrispondente al linguaggio
var exthtml:String=(memolan==undefined)?(lan.language=="it")?"body.html":"body_eng.html":memolan;
// istanziamo un nuovo ContextMenu
var newMenu = new ContextMenu();
// nascondiamo il Menu Standard
newMenu.hideBuiltInItems();
// creiamo un TextField grande come lo stage
this.createTextField("body",1,0,0,Stage.width,Stage.height);
_root.body.multiline= true;
_root.body.wordWrap = true;
_root.body.html = true;
//istanziamo e assegniamo le voci del Context Menu
var label1= new ContextMenuItem("Style Classic", GetStyle);
var label2= new ContextMenuItem("Style Liberty", GetStyle);
var label3= new ContextMenuItem("Style Accessibility", GetStyle);
var label4= new ContextMenuItem("View Code", GetStyle,true);
var label5= new ContextMenuItem("Download", GetStyle);
var label6= new ContextMenuItem("View Page", GetStyle,false,true,false);
var label7= new ContextMenuItem("Tv Oggi", GetStyle,true);
var label8= new ContextMenuItem("Add Bookmark...", GetStyle,true);
var label9= new ContextMenuItem("Post in Forum", GetStyle);
//inseriamo le voci nel Context Menu
newMenu.customItems.push(label1,label2,label3,label4,label5,label9,label6,label8,label7);
// creiamo una funzione che gestisca tutte le voci del menu
function GetStyle (obj, menuItem, memo) {
// controlliamo se era stato memorizzato uno style
var getstile:String=(memo==undefined)?menuItem.caption:memo;
label1.enabled=label2.enabled=label3.enabled=true;
// assegniamo un azione ad ogni voce del menu
switch(getstile){
case "Style Classic":
// impostiamo un link a uno stile e richiamiamo la funzione per cambiare lo stile
var nowstile:String = "style1.css";
SetStyle(nowstile,getstile);label1.enabled=0;break;
case "Style Liberty":
var nowstile:String="style2.css";
SetStyle(nowstile,getstile);label2.enabled=0;break;
case "Style Accessibility":
var nowstile:String="style3.css";
SetStyle(nowstile,getstile);label3.enabled=0;break;
case "View Code":
viewcode();break;
case "View Page":
viewpage();break;
case "Download":
// inseriamo un link a un file da scaricare
getURL("contestcss.zip","_blank");
break;
case "Post in Forum":
// inseriamo un link a una pagina da aprire intera
getURL("http://www.z2000.it/forum/topic.asp?TOPIC_ID=138","_top");
break;
case "Tv Oggi":
// inseriamo un javasript di una pagina da aprire a pop
getURL ("javascript:window.open('http://www.z2000.it/guidatv/','tv','width=750,height=500'); void(0);");
break;
case "Add Bookmark...":
// inseriamo un javasript per aggiungi ai preferiti
getURL ("javascript:window.external.AddFavorite('http://www.z2000.it/flash/tutorial/flashmx2004/contestcss/','Z2000.it - Tutorial Flash MX 2004 - CSS e ContextMenu'); void(0);");
break;
default:
// carichiamo lo stile iniziale se non c'era nessuno stile impostato
var nowstile:String = "style1.css";
SetStyle(nowstile,getstile);
if(getsile=="Style Classic"||getsile==undefined)label1.enabled=0;
break;
}
var nowstile:String=laststile;
}
// funzione per impostare o cambiare lo style
function SetStyle(nowstile,getstile){
// memorizziamo lo stile scelto negli SO
styleISO.data.mystile=getstile;
// Istanziamo un nuovo stile (StyleSheet)
var css:TextField.StyleSheet = new TextField.StyleSheet();
// carichiamo il foglio di stile (CSS) esternamente
css.load(nowstile);
// assegniamo lo style al TextField
body.styleSheet = css;
var laststile:String=nowstile;
}
// istanziamo un XML
story = new XML();
story.ignoreWhite = true;
// funzione per caricare la pagina del contenuto esterna
function viewpage(){
// rendiamo visibili tutte le voci del menu, tranne la 6
for (name in newMenu.customItems){newMenu.customItems[name].visible=true;};
label6.visible=false;
// carichiamo la pagina esterna
story.load(exthtml);
// messaggio per l'attesa
_root.body.htmlText="<b><i>...loading page..wait please...</i></b>";
story.onLoad = function () {
// a pagina caricata assegniamo il contenuto al TextField
_root.body.htmlText = story;
}
}
// funzione per cambiare e memorizzare linguaggio scelto
function changeLanguage(){
exthtml=styleISO.data.mylanguage=(exthtml=="body.html")?"body_eng.html":"body.html";
viewpage();
}
// funzione per caricare la pagina del codice, uguale alla precedente
function viewcode(){
story.load("code.html");
_root.body.htmlText="<b><i>...loading code..wait please...</i></b>"
label1.visible=label2.visible=label3.visible=false;
for (name in newMenu.customItems){newMenu.customItems[name].visible=false;};
label6.visible=true;
label6.separatorBefore=true;
story.onLoad = function () {
_root.body.htmlText = story;
}
}
// funzione per avviare e fermare il filmato nella pagina
var vai:Boolean=false;
function playmovie(){
if(!vai){_root.body.movie.play();}else{_root.body.movie.stop();}
vai=!vai;
}
// assegniamo il Context-Menu alla _root
_root.menu=newMenu;
// inizializzazione delle funzioni
GetStyle(null,null,memostyle);
viewpage();
// end
Il risultato lo possiamo vedere qui: Visualizza Tutorial
Scarica i file di questo tutorial: Donwload Tutorial
Leggi articoli o scrivi commento: Post di questo Tutorial
Ci sono 3 utenti collegati - oggi ricorre S. Agata vergine e martire - © 1998-2005 - Z 2000.it
Online Users | Policy | Disclaimer | Site Map | Search | Netiquette
Ultima modifica: lunedì 11 ottobre 2010 alle 18.44.40
