BESTAR SPACE

In questo tutorial vedremo come creare un effetto Flip (Card) con Flash CS3 e ActionScript 3.0 (vedi l'esempio sotto, passando col mouse sulle immagini).

Per prima cosa scaricate qui il file .ZIP/RAR contenente le classi che useremo in questo tutorial.
Dopo aver scaricato il file Zip/Rar, createvi una cartella e estraete il contenuto dell'archivio, dentro alla cartella appena creata e in piu inserite 4 immagini (aventi le stesse dimensioni).
Apriamo Flash > File > Nuovo > File Flash (ActionScript 3.0) e salviamo subito il file nella stessa cartella creata prima.
Apriamo panello Azioni(F9) e inseriamo il codice sotto:

import fl.transitions.easing.*;
import flashandmath.as3.TweenFlipCS3;
var card1:TweenFlipCS3;
var card2:TweenFlipCS3;
card1=new TweenFlipCS3("image1_front.jpg","image1_back.jpg","horizontal");
this.addChild(card1);
card2=new TweenFlipCS3("image2_front.jpg","image2_back.jpg");
this.addChild(card2);
setCardsPosAndProps();
function setCardsPosAndProps():void {

    card1.x=30;
    card1.y=50;

    card2.x=330;
    card2.y=50;

    card1.setURL("http://link_image1");
    card1.setFunc(Back.easeOut);
    card1.setSpeed(1.5);
    card2.setFunc(Bounce.easeOut);
    card2.setSpeed(2);
    card2.setURL("http://link_image2");
}

Naturalmente dovrete sostituire i nomi che ho adoperato io con quelli delle vostre immagini (es: image1_front, image1_back...ecc) e i vostri link con ("http://link_image1").
Salvate tutto e provate il filmato...
Buon divertimento.... Continua a leggere

Abbonati gratis a questo blog

Torna Su

Per chi ha bisogno di spazio e vuole sistemare graficamente e non solo il suo sito o blog, mettendo in ordine tutti i link, le pagine, le etichette e qualsiasi cosa, questo post sarà sicuramente di grande aiuto.
Come vedete nell'immagine (cliccando qui o sopra l'immagine si aprirà la demo che ho preparato per darvi meglio l'idea), abbiamo una lista di link, che all'interno contengono altri link.
Cliccandoci sopra, vedrete l'effetto scroll che visualizza il contenuto della categoria scelta.
E' una specie di "Mobiletto con cassetti", dove possiamo inserire e tenere in ordine tutto quello che vogliamo. Possiamo inserire i nostri "Blog Amici", le etichette piu richieste, la lista dei nostri libri o film preferiti, e tutto chiuso in uno spazio piccolo e graficamente bellissimo.
Per inserirlo è facilissimo. Vediamo come:
1 - Collegatevi a blogger.
2 - Andate in Layout, clickate su Aggiungi un gadget pagina, poi su HTML/JavaScript, inserite il codice sotto:

<style type="text/css">
.menuPad {
height:2px;
}
#slide {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
font-family:arial,sans-serif;
font-size:12px;
margin:0;
padding:10px;
position:absolute;
width:181px;
}
#slide dt {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(back.png) repeat scroll 0 0;
color:#DDDDDD;
cursor:pointer;
font-weight:bold;
height:37px;
line-height:37px;
margin:0;
padding:0;
text-align:center;
width:181px;
}
#slide dt.slide {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(back.png) repeat scroll left bottom;
color:#FFFFFF;
}
#slide dt a {
color:#FFFFFF;
display:block;
height:37px;
line-height:37px;
text-decoration:none;
}
#slide dt a:hover {
color:#FFCC00;
}
#slide dd {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#EEEEEE url(shade.png) no-repeat scroll left top;
height:0;
margin:0;
overflow:hidden;
padding:0;
position:relative;
text-align:center;
width:181px;
}
#slide dd ul {
bottom:0;
height:auto;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:absolute;
}
#slide dd ul li {
border-bottom:1px solid #AAAAAA;
height:25px;
line-height:25px;
width:181px;
}
#slide dd ul li a {
color:#666666;
display:block;
font-size:11px;
height:25px;
text-decoration:none;
}
#slide dd ul li a:hover {
color:#000000;
}
</style>

<dl id="slide">
<dt><a href="">HOME</a></dt>
<dt id="item1" class="">Prima Categoria</dt>
<dd id="sitem1" style="height: 0px;" class="">
<ul>
<li><a href="inserire qui il link">Primo link</a></li>
<li><a href="inserire qui il link">Secondo link</a></li>
<li><a href="inserire qui il link">Terzo link</a></li>
</ul>
</dd>
<dt id="item2" class="">Seconda Categoria</dt>
<dd id="sitem2" class="" style="height: 0px;">
<ul>
<li><a href="inserire qui il link">Primo link</a></li>
<li><a href="inserire qui il link">Secondo link</a></li>
<li><a href="inserire qui il link">Terzo link</a></li>
</ul>
</dd>
<dl>
<div class="menuPad"></div>

<SCRIPT> 
var getdd = document.getElementById('slide').getElementsByTagName("DD");
var getdt = document.getElementById('slide').getElementsByTagName("DT");

for (var i=0; i<getdt.length; i++) {
  getdt[i].onclick=function() {
 if (this.id.indexOf('item') != -1) {
 for (var z=0; z<getdd.length; z++) {
  if (getdd[z].id.indexOf(this.id) !=-1 && getdd[z].className=='') {
  eNext = getdd[z].firstChild;
  while (eNext.nodeType!=1) {eNext = eNext.nextSibling;}
  ulHeight = eNext.offsetHeight;
  expand (0,ulHeight,getdd[z].id)
  }
  else {
  eNext = getdd[z].firstChild;
  while (eNext.nodeType!=1) {eNext = eNext.nextSibling;}
  ulHeight = eNext.offsetHeight;
  if (getdd[z].offsetHeight > 0) {
  contract (ulHeight,0,getdd[z].id)
  }
  }
  if (getdd[z].id.indexOf(this.id) !=-1 && getdd[z].className=='') {
   getdd[z].className='selected'; 
   this.className='slide';
   }
  else {
   getdd[z].className='';
   ePrevious = getdd[z].previousSibling;
   while (ePrevious.nodeType!=1) {ePrevious = ePrevious.previousSibling;}
   ePrevious .className='';
   }
  }
 }
 }
}
function expand (cY, fY, subY) {
cY=cY+2;;
if (cY <= fY) {
document.getElementById(subY).style.height = cY + "px";
setTimeout ("expand("+cY+","+fY+",'"+subY+"')", 5);
}
}

function contract (cZ, fZ, subZ) {
cZ=cZ-2;
if (cZ >= fZ) {
document.getElementById(subZ).style.height = cZ + "px";
setTimeout ("contract("+cZ+","+fZ+",'"+subZ+"')", 5);
}
}
</SCRIPT>

Naturalmente, bisogna personalizzarlo.
Trovate il blocco di codice sotto e personalizzate le scritte in rosso:

<dt id="item1" class="">Prima Categoria</dt>
<dd id="sitem1" style="height: 0px;" class="">
<ul>
<li><a href="inserire qui il link">Primo link</a></li>
<li><a href="inserire qui il link">Secondo link</a></li>
<li><a href="inserire qui il link">Terzo link</a></li>
</ul>
</dd>
<dt id="item2" class="">Seconda Categoria</dt>
<dd id="sitem2" class="" style="height: 0px;">
<ul>
<li><a href="inserire qui il link">Primo link</a></li>
<li><a href="inserire qui il link">Secondo link</a></li>
<li><a href="inserire qui il link">Terzo link</a></li>
</ul>
</dd>

Potete aggiungere tutte le categorie che volete, personalizzando l'identificatore del blocco codice(vedi nel essempio le scritte in blu) e aumentando il numero (esempio: item 3 e sitem 3 - item 4 e sitem 4 - item 5 e sitem 5 - e cosi via

<dt id="item1" class="">Nome Categoria</dt>
<dd id="sitem1" style="height: 0px;" class="">
<ul>
<li><a href="inserire qui il link">Nome</a></li>
<li><a href="inserire qui il link">Nome</a></li>
<li><a href="inserire qui il link">Nome</a></li>
</ul>
</dd>