Actionscript 3.0 for beginners: lesson #1

Venerdì 8 Agosto, 2008

Premessa

Actionscript 3.0 può rappresentare un buon punto di partenza per impratichirsi, chi non è pratico di programmazione C e/o C++, di programmazione orioentata agli oggetti (OOP). Inoltre, questa serie di lezioni, saranno utili a chi proviene da altri ambienti o da precedenti versioni di Flash.

Impostare un progetto

In questa prima lezione vedremo come impostare un progetto Flash CS3 generico. È bene utilizzare i progetti quando si prevede di avere a che fare con almeno più di un file. L’uso dei progetti è stato introdotto - da Macromedia - già nelle versioni  precedenti alla CS3, quindi dovrebbere essere argomento noto anche a sviluppatori Actionscript 2.0.
Comunque sia con Actionscript 3.0 - come vedremo - è possibile associare un file Actionscript (.as) al documento-filmato principale, il nostro .fla per intenderci. Questa caratteristica è molto utile e rende un progetto anche minimale composto da almeno due file: il .fla e .as associato. Per questo motivo è bene “sempre” partire da un progetto, così da organizzare sin da subito i vari file (.fla, .as, …) che faranno parte del nostro “pacchetto” di sviluppo.
Inoltre, una volta acquisita la dimesticazza con la filosofia ad oggetti, instrinseca in questo tipo di linguaggio, sarà normale ritrovarsi con numerosi file, anche per progetti sostanzialmente semplici.

Continua a leggere… »

Post correlati

Tags: , , , , , ,
Pubblicato in Actionscript 3.0, Flash CS3, Internet, Sviluppo, Tutorials | 4 commenti »

Usare i Template WordPress per creare una Sitemap

Mercoledì 16 Luglio, 2008

Esiste una funzionalità in WordPress, a volte trascurata, che lo rende davvero molto versatile, soprattutto per chi crea temi: l'uso dei Template! Un Template non è altro che un file inserito nella cartella del tema. Per identificarlo come Template basta inserire all'inizio del file un particolare commento in PHP:

PLAIN TEXT
PHP:
  1. /*
  2. Template Name: Sitemap
  3. */

Sfruttando questa caratteristica è possibile creare una pagina vuota, con il procedimento standard di WordPress, e collegarla al nostro template. Se create un file, ad esempio sitemap.php (aggiungendo quel commento indicato più sopra) e lo caricate all'interno della cartella del vostro tema, noterete che nell'editor WordPress durante la creazione di una pagina (non di un post) il menu Template (in basso) conterrà il nome del file template caricato. Come indicato nella sezione template:

Alcuni temi hanno dei template personalizzati da poter utilizzare per determinate pagine, che possono contenere funzionalità aggiuntive o una grafica personalizzata. [...]

Io, ad esempio, ho sfruttato questa caratteristica per creare una pagina dinamica (che esegue quindi codice PHP) in grado di mostrare una vera e propria sitemap del blog.

Creazione di una pagina Sitemap

Prima di tutto create una file sitemap.php e caricatelo all'interno della cartella del vostro tema. Dall'amministrazione di Wordpress create una nuova pagina, dategli un nome e selezionate il Template dal menu che si trova sotto l'editor! Finito!

Il template, facendo parte del tema, contiene anche tutta la struttura del tema stesso ed è quindi importante saperlo scrive in modo corretto. Tuttavia ecco uno scheletro di una sitemap che potete modificare in base al tema che avete installato:

PLAIN TEXT
HTML:
  1. <?php
  2. /*
  3. Template Name: Sitemap
  4. */
  5. ?>
  6. <?php get_header(); ?>
  7.     <div id="content">
  8.     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  9.         <div class="post" id="post-<?php the_ID(); ?>">
  10.         <h2><?php the_title(); ?></h2>
  11.         <small class="date-time"><?php the_time('l j F, Y') ?></small>
  12.             <div class="entry">  
  13.                 <p><strong><a href="<?php bloginfo('url'); ?>" alt="<?php bloginfo('name'); ?>">Home</a></strong></p>
  14.                 <h4>Pagine</h4>
  15.                 <ul>
  16.                     <?php wp_list_pages('title_li='); ?>
  17.                 </ul>
  18.                 <h4>Post</h4>
  19.                 <ul>
  20.                     <?php $archive_query = new WP_Query('showposts=1000');
  21.                         while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
  22.                     <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></li>
  23.                     <?php endwhile; ?>
  24.                 </ul>
  25.                 <h4>Archivi mensili</h4>
  26.                 <ul>
  27.                     <?php wp_get_archives('type=monthly'); ?>
  28.                 </ul>
  29.                 <h4>Categorie</h4>
  30.                 <ul>
  31.                     <?php wp_list_categories('title_li=0'); ?>
  32.                 </ul>
  33.                 <h4>Feeds RSS/FeedBurner</h4>
  34.                 <ul>
  35.                     <li><a href="<?php bloginfo('rdf_url'); ?>" alt="RDF/RSS 1.0 feed"><acronym title="Resource Description Framework">RDF</acronym>/<acronym title="Really Simple Syndication">RSS</acronym> 1.0 feed</a></li>
  36.                     <li><a href="<?php bloginfo('rss_url'); ?>" alt="RSS 0.92 feed"><acronym title="Really Simple Syndication">RSS</acronym> 0.92 feed</a></li>
  37.                     <li><a href="<?php bloginfo('rss2_url'); ?>" alt="RSS 2.0 feed"><acronym title="Really Simple Syndication">RSS</acronym> 2.0 feed</a></li>
  38.                     <li><a href="<?php bloginfo('atom_url'); ?>" alt="Atom feed">Atom feed</a></li>
  39.                 </ul>
  40.             </div>
  41.         </div>
  42.     <?php endwhile; endif; ?>
  43.     </div>
  44.     <?php get_sidebar(); get_footer(); ?>

Post correlati

Tags: , , , , , ,
Pubblicato in Internet, PHP, Sviluppo, Tutorials, WordPress | 1 commento »

Photoshop Tutorial: tecniche di riflessione

Lunedì 30 Giugno, 2008

Da Apple al Web 2.0 le immagini "riflesse" hanno inondato Intrenet. Spesso abusate sono tuttavia sempre di grande effetto. Saperle realizzare bene non è impresa complicata e, con un pizzoco di fantasia, si possono rendere meno "ovvie" e "scontate"... se proprio non ne potete fare a meno.

Le basi del Reflex

Prima di tutto vediamo come impostare una riflessione base. La tecnica per impostare una riflessione base, almeno quella che preferisco e che uso continuamente, è di semplice e rapida implementazione. Questo metodo permette la massima libertà di modifiche successive e mantiene la trasparenza nel caso vogliate salvare l'immagine in PNG 24 con trasparenza.

Loading Flash Player...

1. Come sempre apriamo Phosotoshop e carichiamo l'immagine che vogliamo riflettere su un layer apposito
2. Duplichiamo il nostro layer (trascinate il layer da duplicare sull'icona image ) e nominiamolo "shadow" o "reflex"
3. Dal menu "Modifica" selezionate "Trasforma" / "Rifletti verticale"
4. Trascinate il nuovo layer "reflex" sotto al layer originale e spostiamolo alla base del layer originale
5. Selezioniamo il layer "reflex" e, tenendo premuto il tasto ALT, aggiungiamo una maschera cliccando sull'icona image "mask" nella tool window dei layer; il layer "reflex" dovrebbe sparire
6. Selezioniamo la maschera nel layer "reflex" e cliccate sull'icona image di riempimento
7. Impostiamo una sfumatura da nero o bianco a trasparente: image
8. Tracciamo la sfumatura dal centro del layer originale al centro del layer "reflex"

Continua a leggere... »

Post correlati

Tags: , , , ,
Pubblicato in Grafica & Design, Photoshop, Tutorials | 6 commenti »

Tecniche di Text Replacement in Flash

Mercoledì 25 Giugno, 2008

La tecnica di Text Replacement che presento oggi è, per certi aspetti, davvero interessante. A differenza della classica sostituizione per immagine tramite CSS, questa tecnica usa un filmato Flash per sovrascrivere i titoli del nostro sito. Nonostante sia un pochino più articolata, in quanto richiede la creazione di un filmato Flash e l'uso di Javascript, permette di ottenere una serie di vantaggi non indifferenti:

  • Mantiene l'accessibilità del sito sfruttando un True-Unobtrusive-Javascript in modo che crawler e spider continuino a vedere la pagina come semplice e corretto HTML
  • Non richiede la creazione di n immagini per n titoli. Basta un solo filmato per sostituire tutti i titoli del nostro sito, con un notevole risparmio in termini di Download
  • Permette di creare anche titoli semplici ma con Font normalmente non utilizzati sul Web
  • Il testo può essere reso in HTML, grazie alle caratteristiche di Flash
  • Il testo è selezionabile
  • Essendo un filmato Flash si può inserire interattività e animazioni di qualsiasi sorta

Noterete, anche, che in questa procedura i CSS non sono praticamente presi in considerazione!

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , ,
Pubblicato in ActionScript, Actionscript 3.0, Ajax, Flash, Flash CS3, Grafica & Design, Internet, Javascript, Sviluppo, Tecnologia, Tutorials | Nessun commento »

Flash CS3: creare un effetto Reflex su qualsiasi MovieClip

Mercoledì 4 Giugno, 2008

Sfruttando una notevole caratteristica di Actionscript 3.0 (vedi Actionscript 3.0: tutto con l'operatore new) ho creato una classe ReflexMe in grado di generare un effetto "riflessione" su un qualsiasi MovieClip presente in libreria.

Loading Flash Player...

Il sorgente fa parte del pacchetto undolibrary - presente su GoogleCode - ma se volete potete scaricare il singolo file ReflexMe.as.

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , ,
Pubblicato in Actionscript 3.0, Flash, Flash CS3, Internet, Sviluppo, Tutorials | 7 commenti »

Creare eventi personalizzati in Actionscript 3.0

Domenica 18 Maggio, 2008

Creare eventi personalizzati in Actionscript 3.0 è semplicissimo. Usarli, poi, permette di utilizzare il metodo addEventListener() e rendere il nostro oggetto del tutto standard. Se abbiamo creato una classe, ad esempio Bottone, è corretto associare a questa uno o più eventi tramite una apposita classe (derivata dalla classe Event) BottoneEvent. Potremmo realizzare tutti gli eventi che interessano il funzionamento del nostro oggetto: il click, il mouse over, o un qualsiasi altro evento! Definendo anche delle nostre personali costanti. Lo scheletro - generico - di una classe evento personalizzata è:

PLAIN TEXT
Actionscript:
  1. package {
  2.     /*
  3.     ** @name            : BottoneEvent.as
  4.     ** @description     : Classe derivata da Event per gestire un proprio evento personalizzato
  5.     ** @author          : =undo=
  6.     ** @web             : http://www.undolog.com
  7.     ** @email           : g.fazioli@undolog.com
  8.     */   
  9.     import flash.events.*;
  10.  
  11.     public class BottoneEvent extends Event {
  12.        
  13.         public static const MIOEVENTO:String       = 'pluto'; // codice qualsiasi, anche 'mioevento' in minuscolo
  14.        
  15.         public var Valore:Number                   = NaN;       
  16.         /*
  17.         ** @name            : BottoneEvent
  18.         ** @description     : constructor
  19.         */
  20.         public function BottoneEvent ( type:String, v:Number, bubbles:Boolean=false, cancelable:Boolean=false ):void {
  21.             super(type, bubbles, cancelable);
  22.             this.Value = v;
  23.         }
  24.        
  25.         /*
  26.         ** @override
  27.         */
  28.         override public function clone():Event    {
  29.             return new KnobEvent(this.type, this.Value, this.bubbles, this.cancelable);
  30.         }
  31.     }
  32. }

Continua a leggere... »

Post correlati

Tags: , , ,
Pubblicato in Actionscript 3.0, Flash CS3, Internet, Sviluppo, Tutorials | Nessun commento »

Come salvare immagini in Flash CS3

Lunedì 31 Marzo, 2008

Con Flash CS3 l'uso delle Bitmap è così migliorato che viene subito voglia di creare un piccolo Paint. Abbiamo già visto come realizzare un piccolo Paint (vedi Creare un'applicazione Paint in Flash CS3 Painter: semplice applicazione per disegno in Flash CS3 Pro) in grado di supportare un vero e proprio "cancellino" - funzione erase, grazie ad un uso particolare di layer Shape e Bitmap. Diciamo subito che Flash (a differenza di Flex) non permette ne encoding (tipo JPG o PNG) ne salvataggio automatico di immagini Bitmap. Tuttavia si può aggirare l'ostacolo sfruttando uno scripting lato server e la capacità di Flash di inviare dati in POST. Continua a leggere... »

Post correlati

Tags: , , , , , , , , , ,
Pubblicato in Actionscript 3.0, Flash CS3, Internet, PHP, Sviluppo, Tutorials | 1 commento »

Flash CS3: creare effetto nebbia TV in 1 secondo

Giovedì 27 Marzo, 2008

Flash CS3 non finisce di stupire. Ecco come creare il classico effetto nebbia dei televisori in un secondo con 10 righe di codice.

Loading Flash Player...

PLAIN TEXT
Actionscript:
  1. import flash.display.Bitmap;
  2. import flash.display.BitmapData;
  3. //
  4. var bmpd:BitmapData = new BitmapData(320, 256);
  5. var bmp:Bitmap = new Bitmap(bmpd);
  6. //
  7. addChild(bmp);
  8. //
  9. bmp.addEventListener( Event.ENTER_FRAME,
  10.     function (e:Event):void {
  11.         bmpd.noise(Math.random()*1000, 0, 200, 7, true);
  12.     }
  13. );

Post correlati

Tags: , , , , , , , , , ,
Pubblicato in Actionscript 3.0, Case Study, Flash CS3, Grafica & Design, Internet, Sviluppo, Tutorials | 1 commento »

Photoshop tutorial: effetto foglio piegato

Venerdì 7 Marzo, 2008

image Adobe Photoshop è uno strumento potente e permette di realizzare effetti davvero accattivanti. Per realizzare l'effetto di piegatura di un foglio di carta, infatti, possiamo usare lo strumento di trasformazione per "piegare" - davvero - un layer. Con qualche piccolo accorgimento possiamo rendere l'effetto davvero realistico. Le immagini presentate qui di seguito in questo tutorial sono a titolo di esempio e sono state realizzate in bassa risoluzione. Per migliorare l'effetto usare una risoluzione alta, così da ridimensionare l'immagine alla fine e ottenere un antialiasing sui bordi.

Continua a leggere... »

Post correlati

Tags: , , , ,
Pubblicato in Grafica & Design, Photoshop, Tutorials | 9 commenti »

Photoshop tutorial: icone stile web 2.0 in 3 passi

Venerdì 29 Febbraio, 2008

image Questo tutorial in Photoshop dimostra come sia "relativamente" semplice creare delle accattivanti icone stile web 2.0, con riflessi e quant'altro, semplicemente impostando gli effetti sul layer. Una volta compreso il processo, inoltre, è possibile - dando libero sfogo alla vostra creatività - creare numerose varianti. Continua a leggere... »

Post correlati

Tags: , , , , ,
Pubblicato in Case Study, Grafica & Design, Photoshop, Tutorials | 14 commenti »