Tanti Auguri e Buon Natale a Tutti....
Non ho resistito...Ho creato questa piccola animazione in Flash e Actionscript, per farvi gli auguri a modo mio...
E' una semplice animazione dentro la "bolla di vetro" con effetto acqua creato in Actionscript...
Passando il mouse sopra la "bolla di vetro", crea l'impressione dell'acqua che si muove dentro la bolla.
In piu ho inserito l'effetto neve. Se avessi avuto piu tempo avrei fatto qualcosa di piu bello e piu travolgente aggiungendo altri effetti dinamici.
Sperando sia di vostro gradimento, Vi Auguro di nuovo:
Buon Natale... Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Per chi vuole creare un sito in flash e non sa da dove iniziare, vi segnalo questi Templates Gratis (vedi foto sopra), interamente in flash, il cui contenuto è dinamicamente caricato da file xml esterni.
Non devi conoscere Flash e nessun linguaggio.
Sono facili da personalizzare. Bisogna soltanto sostituire le immagini, o cambiare il testo modificando i file xml.
Scaricando i template(in formato Zip/Rar), troverete i file divisi in cartelle e i file xml per ciascuna pagina.
I template sono completi di Loader, Menu, Audio, Testo, Immagini e Fantastiche Transitions Effect.
Troverete anche i file .fla (flash source) e le varie classi, es: cuarina (caurina.transitions.Tweener in AS3) per chi proprio vuole personalizzarli, dando un tocco personale e  professionale.
Il sito è: flashmo.com/

Buon divertimento... Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

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

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Oggi ho ricevuto una email da Francesca, che chiede:

Come gestire i pulsanti in ActionScript 3.0??

Siccome non è l'unica che mi scrive, ho preferito (dopo aver risposto via email) di scriverlo anche qui (una specie di minitutorial) che potrà essere d'aiuto anche a qualcun altro.

In ActionScript 2.0 bastava creare un pulsante e assegnarli come AS:
getURL("qui l'url")

Invece con AS 3.0 getUrl è stato sostituito con:
navigateToURL( new URLRequest ("qui l'url")

La procedura completa è:

1 - Crea un pulsante con Nome Istanza - pulsante_01
2 - Vai su - Azioni (F9) - e inserisci il codice sotto:

// impostiamo l'evento click del mouse

pulsante_01.addEventListener( MouseEvent.CLICK, mio_url );

// creiamo una funzione che dopo il click apre la pagina web

function mio_url(e:MouseEvent):void
{
navigateToURL( new URLRequest( "http://bestar-space.blogspot.com" ), "_blank" );
}

In questo modo puoi inserire tutti i pulsanti che vuoi, importante è cambiare:
a - Nome Istanza
b - il nome della funzione che chiama l'url (che nel nostro caso è: mio_url

In caso di dubbi o difficoltà non esitare a chiedere.
Continua a leggere

Chiudi

 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:

<!-- inizio cod CSS --> <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> <!-- fine cod CSS --> <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> <!-- inizio cod JAVASCRIPT --> <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> <!-- fine cod JAVASCRIPT -->

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>

Dopo aver fatto tutte le prove e tutte le modifiche, quando siete soddisfatti,
salvate tutto ed Enjoy your Accordion Menu. Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Per chi vuole dare un tocco professionale al suo sito o blog, inserendo una presentazione delle proprie immagini in flash, oggi vorrei segnalarvi questo fantastico Flash Slideshow Photo Gallery gratuito.


Facilissimo da usare. Basta salvare il file zip sul vostro PC e modificare il file xml, con un editor di testo (es: notepad).

Il file zip contiene:
a - un file .SWF
b - un file HTML
c - un file .XML
d - la cartella delle immagini
e - la cartella che contiene il file .js
f - la cartella delle icone (thumbs)
g - la cartella con i file sounds dei pulsanti

Come ho detto è facile da personalizzare. Nel esempio sotto, vedrete il file che ho personalizzato in 10 secondi. Ho aperto il file XML con l'editor di testo di windows (notepad) ed ho sostituito i link delle immagini, con delle immagini prese dall'album su Flickr di Dolce Memole.

File XML originale:

<image name="1.jpg" description="" thumbnail="1.jpg"/>
<image name="2.jpg" description="" thumbnail="2.jpg"/>
<image name="3.jpg" description="" thumbnail="3.jpg"/>
<image name="4.jpg" description="" thumbnail="4.jpg"/>
<image name="5.jpg" description="" thumbnail="5.jpg"/>
<image name="6.jpg" description="" thumbnail="6.jpg"/>
<image name="7.jpg" description="" thumbnail="7.jpg"/>

File XML modificato:

<album icon="" description="People">
<image name="http://farm4.static.flickr.com/3096/2799618546_3c2ef7af32.jpg"
description=""
thumbnail="http://farm4.static.flickr.com/3096/2799618546_3c2ef7af32_s.jpg"/>
<image name="http://farm4.static.flickr.com/3018/2802281583_342f58f331.jpg"
description=""
thumbnail="http://farm4.static.flickr.com/3018/2802281583_342f58f331_s.jpg"/>
<image name="http://farm4.static.flickr.com/3240/2917868297_1ec9a2a88e.jpg"
description=""
thumbnail="http://farm4.static.flickr.com/3240/2917868297_1ec9a2a88e_s.jpg"/>
</album>

Nel sito di ZEN Flash Gallery trovate altri esempi di slideshow fantastiche. Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Inserire una pagina di Benvenuto in un sito o blog, è sempre qualcosa di bello dal punto di vista grafico.
In questo tutorial vedremo come inserire una pagina di Benvenuto per blogger, con un'immagine a nostra


scelta e del testo personalizzato, per dare il benvenuto all'utente che viene a visitare il nostro blog.
Oltre al fatto grafico, è anche un modo originale per distrarre l'utente mentre si carica la pagina del blog.
Cliccare qui per il demo.
Iniziamo...
Per prima cosa fare un backup
1 - Collegatevi a blogger.
2 - Andate in Layout, clickate su Aggiungi un gadget, poi su HTML/JavaScript e inserite il codice sotto.
<!----------// POPUP (AUTOLOAD) //----------> <div id="pop01" class="leightbox"> <div class="scrollbox"> <h1>Welcome To My Blog</h1> <p>A blog by <a href="http://bestar-space.blogspot.com"><h1>Bestar</h1></a></p></div> <a href="#" class="lbAction" rel="deactivate"><center>Entra nel Blog</center></a></div> <!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //----------> <script type="text/javascript"> lb = new lightbox(); lb.initCallable('pop01'); lb.activate(); </script>
Naturalmente, dovete personalizzare il testo sotto:
a - Welcome To My Blog
b - A blog by
c - http://bestar-space.blogspot.com con l'indirizzo del vostro blog
d - Bestar
e - Entra nel Blog
Dopo aver personalizzato il testo sopra, salvate il gadget e spostatelo in cima a tutti i gadget (vedi Immagine sotto):

Adesso andate in "Modifica HTML" e inserite il codice sotto , subito dopo il tag "<Head>":
<!--Inizio codice pagina di benvenuto--> <link href='http://mydatanest.com/files/dsai588/13456_onsgz/BG_Like_BING.css' rel='stylesheet' type='text/css'/> <script src='http://mydatanest.com/files/dsai588/13105_0jxqi/prototype.js' type='text/javascript'/> <script src='http://mydatanest.com/files/dsai588/13104_b8dni/leightbox.js' type='text/javascript'/> <style type='text/css'> div.leightbox { color: #fff; display: none; /* toggle display to show/hide the popups when designing and previewing */ position: absolute; top: 50%; left: 50%; margin: -240px 0 0 -380px; width: 745px; height: 400px; padding: 0 0 0 5px; border: 1px solid #FFFFFF; background: url(http://inserire qui l'url della vostra immagine) no-repeat; z-index: 101; overflow: none; } </style> <!--Fine codice pagina di benvenuto-->
Sostituite "http://inserire qui l'url della vostra immagine" con l'url della vostra immagine.
Fate l'Anteprima e se siete soddisfatti salvate tutto.. Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su