<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ZenGFX.net &#187; Bagliore</title>
	<atom:link href="http://www.blog.zengfx.net/tag/bagliore/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.blog.zengfx.net</link>
	<description>Graphic &#38; Informatic Resources</description>
	<lastBuildDate>Tue, 10 May 2011 10:11:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Avatar con Bagliore</title>
		<link>http://www.blog.zengfx.net/2008/11/15/avatar-con-bagliore/</link>
		<comments>http://www.blog.zengfx.net/2008/11/15/avatar-con-bagliore/#comments</comments>
		<pubDate>Sat, 15 Nov 2008 22:12:24 +0000</pubDate>
		<dc:creator>Logan</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Avatar]]></category>
		<category><![CDATA[Bagliore]]></category>
		<category><![CDATA[Flash Creation]]></category>

		<guid isPermaLink="false">http://www.blog.zengfx.net/?p=241</guid>
		<description><![CDATA[In questo tutorial andremo ad esporre in modo semplice e diretto, come poter realizzare un piccolo avatar con bagliore in flash. Ovviamente avremo bisogno di un avatar già pronto realizzato con photoshop. La realizzazione in flash dell&#8217;effetto luminoso è molto semplice e per questo tutorial si è scelto di far ricorso alle linee temporali e [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" style="border: 0pt none;" src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/1.jpg" border="0" alt="" width="145" height="91" />In questo tutorial andremo ad esporre in modo semplice e diretto, come poter realizzare un piccolo avatar con bagliore in flash. Ovviamente avremo bisogno di un avatar già pronto realizzato con photoshop.</p>
<p>La realizzazione in flash dell&#8217;effetto luminoso è molto semplice e per questo tutorial si è scelto di far ricorso alle linee temporali e ad un semplicissimo script che ci permetterà di regolare il tempo di visualizzazione dell&#8217;effetto bagliore.</p>
<p style="text-align: right;"><span id="more-241"></span></p>
<p>Come prima cosa iniziamo un nuovo progetto in flash e diamo le dimensioni desiderate, per il nostro esempio il userò questa immagine:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/1.jpg" border="0" alt="" /></p>
<p>quindi creerò uno stage di dimensioni 145&#215;91 ed imposto il colore di sfondo di colore nero. Importiamo quindi l&#8217;immagine di nostro interesse nella libreria</p>
<p align="center"><em>File &gt; Importa &gt; Nella Libreria</em></p>
<p>Fatto questo, con una semplice azione di Drag&amp;Drop, trasciniamo sullo stage l&#8217;immagine e posizioniamola ad X = 0 e Y = 0 come mostrato:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/2.jpg" border="0" alt="" /></p>
<p>E&#8217; buona norma rinominare i livelli quindi, rinominiamo il nostro Livello 1 in BG. Procediamo adesso con la creazione di un nuovo livello che sarà quello del bagliore.</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/3.jpg" border="0" alt="" /></p>
<p>Rinominiamolo adesso come Bagliore. E&#8217; arrivato il momento di creare il nostro bagliore, per farlo,</p>
<p align="center"><em> Inserisci &gt; Nuovo Simbolo</em></p>
<p>E diamo queste impostazioni:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/4.jpg" border="0" alt="" /></p>
<p>Ci ritroveremo direttamente nello spazio dedicato alla gestione del nuovo simbolo Clip Filmato che abbiamo creato. Adesso con lo strumento rettangolare, impostiamo a trasparente i bordi e bianco il contenuto, tracciamo così un rettangolo di dimensione 410&#215;85 come mostrato in figura:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/5.jpg" border="0" alt="" /></p>
<p>A questo punto dobbiamo spostare il nostro simbolo grafico “Bagliore” nello stage dopo aver selezionato il livello “Bagliore” al primo frame come mostrare in figura:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/6.jpg" border="0" alt="" /></p>
<p>Per posizionarlo aiutiamoci con Trasformazione Libera selezionando il nostro rettangolo “Bagliore” e cliccando con il tasto destro:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/7.jpg" border="0" alt="" /></p>
<p>Ora possiamo procedere con l&#8217;aggiunta del filtro che ci permetterà di avere l&#8217;effetto bagliore. Nella barra delle proprietà, clicchiamo su Filtri e quindi scegliamo sfocatura e diamo questi parametri:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/8.jpg" border="0" alt="" /></p>
<p>Ottenendo questo risultato:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/9.jpg" border="0" alt="" /></p>
<p>Adesso dobbiamo creare la nostra animazione. Come prima cosa scegliamo di quanti secondi deve essere il bagliore. Il tempo della durata lo scegliamo attraverso la linea temporale. L&#8217;impostazione standard è di 12 frame al secondo, noi dobbiamo portarla a 24 frame a secondo:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/10.jpg" border="0" alt="" /></p>
<p>Adesso clicchiamo col tasto destro sul frame numero 25 della linea temporale del livello “Bagliore” e inseriamo un nuovo fotogramma chiave:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/11.jpg" border="0" alt="" /></p>
<p>Posizionandosi sul livello BG, un click sul primo frame per selezionarlo, premere F5 fino a che non arriviamo al frame 25, proprio sotto a quello appena creato:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/12.jpg" border="0" alt="" /></p>
<p>Una volta fatto questo, selezioniamo il livello “Bagliore” al frame 25 e mantenendo la stessa Y del nostro rettangolo, spostiamolo verso destra modificando solo la X quel tanto che basta per farlo uscire dall&#8217;altra parte dell&#8217;avatar:</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/13.jpg" border="0" alt="" /></p>
<p>Adesso sfrutteremo uno strumento molto usato in Flash e molto potente, ovvero le Interpolazioni. Selezionando il primo frame del livello “Bagliore” scendiamo con il mouse nella tabella proprietà dove potremmo notare un menù a tendina denominato Interpolazione. Scegliamo il tipo Movimento. Noteremo che comparirà una freccia che parte dal frame 1 e termina fino al 24 del livello “Bagliore”</p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/14.jpg" border="0" alt="" /></p>
<p align="center"><img src="http://i241.photobucket.com/albums/ff284/Logan_Cale/Tutorial/AvatarConBagliore/15.jpg" border="0" alt="" /></p>
<p>A questo punto il nostro Avatar è funzionante, ma l&#8217;effetto bagliore continua in un loop infinito. Dobbiamo in un qualche modo regolare la sua temporizzazione. Per fare questo useremo un semplice Script in AcrtionScript 2.0 che offre una funzione di Pausa. Selezioniamo il livello “Bagliore” fotogramma uno e nello spazio “Azioni” incolliamo questo script:</p>
<div class="geshi actionscript">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">function</span> paused<span class="br0">&#40;</span>sec<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw3">stop</span><span class="br0">&#40;</span><span class="br0">&#41;</span>; <span class="co1">// action to pause</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">var</span> i = sec &#8211; <span class="nu0">1</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">var</span> t = <span class="kw3">setInterval</span><span class="br0">&#40;</span><span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">if</span> <span class="br0">&#40;</span>i == <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw3">clearInterval</span><span class="br0">&#40;</span>t<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw3">play</span><span class="br0">&#40;</span><span class="br0">&#41;</span>; <span class="co1">// action to continue</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">i&#8211;;<span class="br0">&#125;</span>, <span class="nu0">1000</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Questo script non funziona se non viene evocato, quindi, bisognerà chiamarlo quando richiesto. La logica è quella di far iniziare l&#8217;animazione, farla procedere fino alla fine e mandarla in pausa per un tempo T prima di ripetersi. Per fare questo, posizioniamoci sul frame 25 del livello “Bagliore” ed inseriamo la chiamata allo script:</p>
<div class="geshi actionscript">
<ol>
<li class="li1">
<div class="de1">paused<span class="br0">&#40;</span><span class="nu0">4</span><span class="br0">&#41;</span>;</div>
</li>
</ol>
</div>
<p>In questo modo ogni 4 secondi, l&#8217;animazione si ripeterà. Sta a voi poi regolare i tempi.</p>
<p>Questo è il lavoro finito.</p>
<p style="text-align: center;"><object type="application/x-shockwave-flash" data="http://zen.ilbello.com/Lima.swf" width="145" height="91" class="embedflash"><param name="movie" value="http://zen.ilbello.com/Lima.swf" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><small>(Please open the article to see the flash file or player.)</small></object></p>
<p><em>Tengo a precisare che, il lavoro poteva essere svolto in vari modi, ad esempio con l&#8217;aggiunta di maschere di livello per il bagliore e di un modulo specifico per l&#8217;Action Script, tuttavia si è scelta un implementazione più semplice.</em></p>
Note: There is a file embedded within this post, please visit this post to download the file.
]]></content:encoded>
			<wfw:commentRss>http://www.blog.zengfx.net/2008/11/15/avatar-con-bagliore/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

