Giancarlo Deambrosi, mi ha segnalato una gallery flash in action script 3, realizzata da lui e scaricabile gratuitamente.

La gallery, è facilmente personalizzabile, dove basta modificare il file xml e mettere in una cartella le foto che si vogliono caricare. Per utilizzarla al meglio, sono stati preparati diversi tutorial, dallo stesso Giancarlo.

L’unico difetto che ho trovato è il passaggio alla seconda pagina di foto, che non avviene in modo corretto. Ma credo che verrà sistemato a breve.

Ti consiglio di scaricarla e di provarla! Fammi sapere cosa ne pensi

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Oggi parliamo di Slideshow Maker, un ottimo servizio che ti permetterà di creare dei slideshow in pochi minuti.

Tutto quello che dovrai fare sarà scegliere le foto, gli effetti di transizione e avrai il tuo file swf pronto ad essere inserito nel tuo sito!

Ecco quello che potrai fare:

• aggiungere ombre e angoli arrotondati
• scegliere l’effetto di transizione e la sua durata
• impostare il tempo di permanenza della foto
• aggiungere dei testi dove potrai impostare il colore di primo piano, di sfondo e l’opacità

Come vedi potrai fare tutto quello che desideri! e senza avere una minima conoscenza di flash!

L’unica piccola pecca è che nello slideshow, in basso a destra, ci sarà il logo del servizio. Se proprio non ti va giù, ti ricordo che ci sono una serie di miei tutorial jquery per realizzare degli slideshow!

Provalo e dimmi cosa ne pensi!

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

• affascina perchè non esiste tecnologia più indicata per una navigazione unica, coinvolgente che stimoli più sensi contemporaneamente.

• frena perchè gli sviluppatori devono fare i conti con google, che non indicizza i contenuti flash, anche se qualche cosa si sta muovendo.

Come per tutti progetti che si devono andare a fare ci sono sempre delle fasi da seguire per la buona riuscita, tra cui:

1. Trovare delle fonti di ispirazione;
2. Trovare le risorse che fanno al nostro caso;
3. Mettere insieme queste risorse nel progetto

Vediamo dove è possibile trovare queste fonti.

Ispirazione

The FWA

Non ha bisogno di presentazioni. Il meglio del meglio lo trovi qui.

BestWebGallery

Altro sito pieno di fonti di ispirazione dove ci perderai delle ore ammirato di fronte a questi siti.

30 Inspiring 3d Flash Websites

Web Design Tutorial ha raccolto 30 incredibili siti caratterizzati dall’uso del 3D.

50 Beautiful Flash Websites

Smashing Magazine ha raccolto 50 bellissimi siti in flash da cui prendere ispirazione.  Inoltre ha stilato altre 2 raccolte:

• 65 Excellent Flash Designs
• 39 Creative Flash Designs

Risorse

Risorse Flash Free: Ecco dove trovarle

Julius Design ha stilato tempo fa (chissà se se lo ricorda..) una raccolta dei migliori siti dove trovare risorse gratis per Flash.

Best 15 Places to Get Quality Flash Components

Web Appers ha stilato una raccolta dei migliori 15 siti dove trovare risorse di qualità a pagamento.

Tutorial

I Migliori Tutorial In Italiano Per Flash

Recentemente ho stilato una raccolta delle migliori risorse dove puoi trovare tutorial in italiano per flash, tra cui Julius Design, HTML.it e molti altri.

Tutorialized

Probabilmente il sito più fornito di tutorial per flash, come si vede dalle numerose categorie e dai tutorial per categoria

Active Tuts

Activetuts è uno dei tanti siti che fa parte del network Envato, dove per ogni tutorial potrai scaricare anche i file sorgenti.

Ci sono delle risorse che mancano alla raccolta? Suggeriscile nei commenti e le vedrai subito aggiunte nell’articolo!

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Sto parlando di playtuts. Comunque ecco gli articoli precedenti, dove sono stati raccolti i tutorial per photoshop, flash, illustrator e after effects.

I Migliori Tutorial In Italiano Per Photoshop

I Migliori Tutorial In Italiano Per Flash

I Migliori Tutorial in Italiano Per Illustrator

I Migliori Tutorial In Italiano Per After Effects

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

In particolare vediamo la prima parte del file config.xml, quella compresa tra i tag <settings>, che ti permetterà di gestire al meglio l’interfacca dello slideshow.

Gli elementi che potrai inserire, e sui quali ti consiglio di leggere la documentazione per usarli al meglio, sono:

autoplay: aggiungendo questo nodo potrai impostare l’autoplay dello slideshow;

description: questo nodo servirò per aggiungere una descrizione;

preloader: questo nodo ti permetterà di inserire un preloader tra le slide;

next button:  inserisce lo sfondo del pulsante per passare alla prossima slide;

prev button: inserisce lo sfondo del pulsante per passare alla slide precedente;

next symbol: inserisce il simbolo (frecce di vario tipo che trovi nella documentazione) per passare alla slide successiva;

prev symbol: inserisce il simbolo  per passare alla slide precedente;

Per ogni elemento potrai gestire il suo aspetto e i comportamenti all’entrata, uscita e al passaggio del mouse sopra i controlli dell’interfaccia.

In particolare dovrai definire i tag defaults, tweenIn, tweenOut e tweenOver.

defaults

questo nodo è fondamentale per impostare le caratteristiche dell’elemento che andrai a inserire.

tweenIn

questo nodo è molto importante in quanto definirai come appariranno i controlli. Quindi potrai definire posizione, dimensioni, colore ecc. Gli elementi quindi entreranno alla fine della transizione di una slide.

tweenOut

con questo elemento potrai gestire il comportamento dell’uscita dei pulsanti dalla foto.

tweenOver

qui imposterai il comportamento al passaggio del mouse sopra gli elementi dell’interfaccia.

Quindi avrai una situazione di questo genere (dove al posto di xxxxx c’è l’elemento di cui si è parlato poco fa):

<cu3er>
<settings> <xxxxx*>
<defaults .../>
<tweenIn ... />
<tweenOut ... />
<tweenOver ... />
</ xxxxx*>
</settings>
</cu3er>

Poi per tweenIn, tweenOut e twinOver potrai utilizzare questi attributi:

- time (numero)
- delay (numero)
- x (numero)
- y (numero)
- width (numero)
- height (numero)
- rotation (numero da 0 a 360)
- tint (colore nel formato 0×000000)
- alpha (numero da 0 a 1)
- scaleX (numero da 0 a 1)
- scaleY (numero da 0 a 1)

Vediamo un esempio concreto:

<prev_button>
<defaults round_corners="5,5,5,5"/>
<tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
<tweenOut tint="0x000000" />
</prev_button>

Come vedi puoi personalizzare in tantissimi modi lo slideshow. Prova a giocare un po’ con il codice, così potrai capire quali sono le impostazioni più adatte alle tue esigenze.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Ecco perchè oggi voglio segnalarti CU3ER, un fantastico slideshow di foto in flash gratis da poter utilizzare liberamente per qualsiasi tuo progetto. Un esempio lo puoi vedere proprio nella home page del sito CU3ER.

Nel sito c’è anche un’ampia documentazione in inglese su come personalizzare lo slideshow, però dato che non tutti l’inglese lo masticano bene, voglio spiegarti come adattarlo alle tue esigenze.

Una volta scaricato i file necessari, dovrai fare alcune semplici modifiche ad alcuni di essi:

- la cartella images contenenti le foto;
- demo.htm;
- config.xml.

Cartella images

In questa cartella dovrai mettere le foto che faranno parte dello slideshow, che dovranno essere tutte della stessa dimensione. Nell’esempio le immagini sono grandi 600×300 pixel.

demo.htm

Se le foto avranno una dimensione diversa rispetto a quelle nell’esempio, dovrai modificare questa linea di codice, tra i tag head:

swfobject.embedSWF("cu3er.swf", "cu3er-container", "600", "300", "9", "expressInstall.swf", flashvars, attributes);

dove al posto di 600 e 300 dovrai mettere le dimensioni delle immagini che hai scelto per lo slideshow.

config.xml

In questo file potrai configurare a piacimento la gallery. Le parti importanti di questo file sono due: quella compresa tra i tag settings e quella compresa tra i tag slides. Dato che spiegare tutto è molto lungo, oggi vediamo come modificare la parte relativa alle slide, mentre lunedì vedremo come modificare l’altra parte.

Ogni slide è caraterizzata da queste righe di codice:

<slide>
<url>percorso_dell_immagine_.jpg</url>
<link target="_self"/>link_alla_pagina.html</link>
<description>
<link target="_self">altro_link.html</link>
<heading>Titoletto della descrizione</heading>
<paragraph>Testo per la descrizione</paragraph>
</description>
</slide>

dove l’unico tag necessario è url dove bisogna mettere l’indirizzo dell’immagine. Gli altri tag sono opzionali.

Subito dopo ogni slide, trovi il tag transition si possono impostare moltissimi parametri (è più facile provarli che spiegarli) e sono:

• num: numero di pezzettini in cui verrà spezzata l’immagine nella transizione (metti il numero che vuoi);
• slicing: direzione della rotazione che può essere horizontal o vertical (es. slicing=”vertical”);
• direction: senso di rotazione dei singoli pezzettini, che può essere up, down, left o right (es. direction=”up”);
• shader: aggiungerà un’ombra sopra l’immagine; i valori possono essere none,flat o phong (es. shader=”phong”);
• light_position: se l’attributo shader ha un valore diverso da none, potrai decidere la posizione della luce, settando x,y e z per posizionare la luce (es. light_position=”0, 0, -100″);
• cube_color: durante la transizione tra le due slide, per un istante vedrai altre facce del cubo a cui potrai cambiare il colore (es. cube_color=”0×333333″);
• z_multiplier: più è alto questo valore più  i vari pezzetti andranno in profondità (es. z_multiplier=”5″);
• duration: durata della transizione, in secondi (es. duration=”3″);
• delay: tempo di permanenza di ogni slide (es. delay=”3″).

Tutti questi parametri sono opzionali, ma se dovessimo metterli tutti, ad esempio potremmo avere:

<transition num="6" slicing="vertical" direction="up" shader="flat" light_position="0, 0, -100" cube_color="0x96ff00"  z_multiplier="4" duration="3" delay="2"/>

Come vedi hai un’ampia possibilità di personalizzazione della gallery, e tutto questo senza dover conoscere nulla di flash!

Se qualcosa non ti è chiaro chiedi pure nei commenti! E non dimenticarti di abbonarti ai feed RSS per non perderti la seconda parte dell’articolo!

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

A parte gli scherzi, PlayTuts è un progetto che promette davvero molto bene. L’obiettivo è quello di raccogliere i migliori tutorial in italiano per Adobe After Effects, Adobe Flash, Adobe Illustrator, Adobe Photoshop, Adobe Premiere e Gimp.

Per ogni video tutorial ci sarà il link alla pagina dell’autore con ulteriori spiegazioni (se disponibile) e avrai la possibilità di commentare o chiarire eventuali dubbi.

Inoltre tu potrai segnalare dei video tutorial, rendendo Playtuts sempre più completo.

Leggo poi su YesWebCan, che più avanti sarà possibile registrarsi gratuitamente, con la possibilità di avere la propria home page con i video  tutorial preferiti.

Inoltre nella sezione Gimp troverai anche miei tutorial! Un motivo in più per visitarlo (o un motivo in meno)

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Oggi la raccolta avrà come programma di riferimento Adobe Flash, con il quale si possono realizzare animazioni eccezionali, facendo vivere al visitatore un’esperienza indimenticabile.

Cominciamo:

HTML.it

Credo che non abbia bisogno di presentazioni. Qui troverai guide di ogni genere, come la realizzazione di un sito web in flash, l’utilizzo di action script, l’utilizzo della tecnologia AIR ecc. Sicuramente è il posto giusto per iniziare a imparare flash.

Web Master Point

Il noto sito offre una guida dettagliata su flash, ideale per chi è alle prime armi e non sa bene dove mettere le mani. Questa raccolta parte dalle basi, fino ad arrivare ad animazioni sempre più complesse.

Julius Design

Ebbene si, di nuovo lui…Una settimana fa lo avevo segnalato per quanto riguarda i migliori tutorial riguardo photoshop, ma anche con flash non scherza, anzi si può dire che tra tutti è l’argomento più discusso nel suo blog con numerosi tutorial, uno dei più forniti in Italia.

Colorville

In questo sito potrai trovare alcuni tutorial dove potrai imparare a realizzare gallerie fotografiche, preloader, creare dei pulsanti ecc.

Giorgio Tave

Nel forum di Giorgio Tave una sezione è dedicata a flash, dove imparerai a muovere i primi passi nel mondo dell’animazione.

Adobe

Nel sito di Adobe troverai molti video tutorial riguardo la suite CS3 di Adobe, flash ovviamente compreso.

E’  inutile dire che in inglese si trova molto più materiale, ma comunque questa raccolta può essere un inizio per entrare nel mondo di flash. Io stesso ho realizzato dei tutorial. Non sono molti, ma tra li utenti hanno destato molto interesse, dove si è visto come far interagire Flash con Lightbox, Thickbox e Lightview.

Come al solito, se tu conosci altre risorse in italiano dove trovare tutorial e video tutorial per flash, citale nei commenti!

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Una delle caratteristiche dello script lightview è la possibilità di raggruppare delle immagini in base a una categoria e poterle vedere in sequenza tramite uno slideshow.

Per ottenere questo da una gallery fatta in flash, dovete procedere come segue.

A ogni miniatura, convertita in un pulsante, assegnate il seguente codice:

on (release) {
getURL(“javascript:Lightview.show(’1′);”);
}

Se avete 10 miniature, l’ultima avrà il numero 10, al posto dell’1.

Poi nella pagina html, che contiene il filmato swf, scrivete il seguente codice:

<div class=”invisible”>
<a href=’image1.jpg’ id=’1′ class=’lightview’ rel=’gallery[natura]‘>1</a>
<a href=’image2.jpg’ id=’2′ class=’lightview’ rel=’gallery[natura]‘>2</a>
<a href=’image3.jpg’ id=’3′ class=’lightview’ rel=’gallery[natura]‘>3</a>
</div>

In pratica inserite un div, nel quale mettete le immagini che saranno presenti nella gallery in flash, assegnando a ciascuna un id e la categoria (rel) che deve essere uguale per tutte (gallery[natura]).

Nel foglio di stile css associato alla pagina dovrete fare in modo di non visualizzare il div “invisibile”, in questo modo:

.invisibile {
display:none;
}

L’installazione dello script lightview e tutto il resto, sono spiegati nell’articolo flash e lighview.

Guarda la demo

Scarica il sorgente

Scarica il sorgente AS3

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Molti di voi conosceranno lo script lightbox, che permette di aprire le immagini con degli effetti speciali. Però appunto solo immagini. Alan Curtis e juliusdesign hanno proposto delle soluzioni per far interagire i filmati flash con lightbox, però avendo sempre la limitazione sopra citata.

Lo script thickbox, invece permette di aprire non solo immagini, ma iframe, pagine all’interno della stessa finestra in cui si naviga ecc. E allora con poche modifiche sono riuscito ad adattare thickbox ai filmati flash.

In particolare, in questo articolo, spiego come poter aprire un altra pagina (che conterrà qualsiasi cosa vogliate), all’interno della finestra thickbox.

Per prima cosa associate al pulsante flash il seguente codice:

on (release) {
getURL("javascript:tb_show('gallery','gallery.html?KeepThis=true&TB_iframe=true&height=600&width=810')");
}


Nella funzione tb_show impostate il titolo della finestra (‘gallery’), e la pagina che dovrà essere aperta, specificando le dimensioni in altezza e larghezza della finestra.

Nella pagina HTML che contiene il filmato flash dovrete inserire, tra i tag <head> e </head> queste tre righe di codice che “installano” lo script:

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/thickbox.js"></script>
<link rel="stylesheet" href="script/thickbox.css" type="text/css" media="screen" />

Infine, nel tag object, che vi servirà per inserire il filmato swf dovrete inserire fra le altre, queste righe di codice:

<param name="allowScriptAccess" value="sameDomain" />

E nel tag embed

allowScriptAccess="sameDomain"

Guarda la demo

Scarica il sorgente AS2

Scarica il sorgente AS3

Vedi anche Flash e lightview

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!