Shines appunto: l’idea è quella di simulare luci o bagliori con un movimento del tutto casuale e quanto più naturale e come spesso accade le cose semplici sono le più efficaci!
Infatti si tratta solo dell’applicazione della sintesi additiva dei colori… una idea e pochissimo codice… vediamo.

Beh, facciamo così… diciamo che non vi svelo proprio tutto tutto… ma quello che sta alla base: poi metteteci del vostro ok?

1. Aprite un nuovo progetto su Flash, impostate lo sfondo su nero e create tre cerchi senza bordo a cui date un riempimento di tipo gradiente: uno rosso, uno blu e uno giallo.
2. Trasformateli in movieClip selezionateli tutti e dal pannello delle proprietà selezionate come proprietà Blend “Add”.
3. Ora scrivete due righe di ActionScript per far muovere a piacere i tre clip sullo stage e guardate cosa accade quando si sovrappongono.

Ed ecco qui il risultato!

Semplice no?

Condividi su...

Finalmente la versione 8 del nuovo sito di Webgriffe è online: è stato un lungo parto, posticipato diverse volte anche a causa della mole di lavoro che abbiamo avuto nell’ultimo anno, ma alla fine ci siamo riusciti.

Il dietro le quinte.

Beh, la scusa ufficiale è senz’altro che il parecchio lavoro fa inevitabilmente slittare i progetti interni, ma c’è da dire che l’idea creativa e la finalizzazione della grafica e dello stile comunicativo sono durate per quasi un anno di proposte, modifiche, cancellazioni, rifacimenti, ripensamenti, dubbi, illuminazioni, test ed esercizi di stile.
Siamo partiti a riprogettare il sito dallo stile della versione 7 (anche se era sostanzialmente un sito mono pagina in cui pubblicavamo gli ultimi lavori quando ne avevamo il tempo)  con lo sfondo nero e quelle luci colorate che abbiamo chiamato “shines” (bagliori, illuminazioni).
Siamo passati attraverso 9 versioni provvisorie: 8.1, 8.2, 8.3, 8.4… fino alla 8.9 che poi si è rivelata la scelta vincente. Di seguito una immagine con gli screenshot delle varie versioni.

Abbiamo progressivamente abbandonato il colore nero e le tendenze del momento (gli effetti glare, riflessioni, sfondi neri, ecc.) per dedicarci a uno stile più essenziale e, in fin dei conti, che sentiamo più nostro. Il bianco e la pulizia dei contenuti: testi brevi, caratteri grandi e ben leggibili. Nel periodo intercorso tra la versione 8.1 e la 8.9 sono apparse sulla scena tecnologie che più volte ci hanno fatto ripensare e rimettere mano al progetto: i framework di animazione 3D in Flash, librerie AJAX sempre più potenti, Microsoft Silverlight, iPhone… Abbiamo optato per un layout a tutto schermo e liquido piuttosto che bloccare i contenuti in dimensioni fisse.
Il grande dilemma è stato anche quello di scegliere tra HTML e Flash. Sempre in una ottica di originalità di stile e di libertà espressiva abbiamo scelto ancora una volta Flash Player: sviluppiamo al 90% per Flash Player con software come Flash e Flex e crediamo fermamente nelle potenzialità offerte da questa tecnologia. Troppe aziende che come noi si propongono come web agency hanno sposato l’HTML e il concetto di sito/blog HTML: ci vogliamo distinguere e vogliamo mostrare cosa si può fare a partire dal nostro sito.

L’idea

Il nome Webgriffe è stato coniato nel 2000 con il significato di tendere alla produzione di progetti e soluzioni non di massa, ma a carattere più artigianale e su misura: la metafora con l’alta moda e le griffe è proprio questa. Consapevoli del fine forse irraggiungibile che ci siamo proposti continuiamo a perseverare in questa direzione proponendoci ai nostri clienti e ai nostri partner come persone su cui contare e di cui potersi fidare perché con empatia lavoriamo per realizzare progetti e studiare soluzioni utili, semplici da usare e che determino un ritorno dell’investimento per il cliente.
Da questa metafora con la moda (spesso infatti diciamo ai nostri clienti che realizzeremo per loro un vestito su misura e niente di pre-confezionato) nasce l’idea della passerella: notare che si tratta di persone distinte, vestite da impiegati o persone d’affari, che sfilano sul monitor. Il messaggio subliminale è “Sfila nel web con un nostro abito addosso” e anche “Distinguiti e non uniformarti alla massa”.

Caratteristiche

Dato per assodato che la tecnologia di base fosse Flash Player e la fonte dei dati (testi, immagini, portfolio ecc.) totalmente dinamica attinta da database si è passati allo sviluppo delle funzionalità del sito web.
Non possiamo che iniziare con l’impostazione di base del sito che si fonda su contenuti video a tutto schermo. Questa scelta e in particolare la metafora della passerella ci darà modo di personalizzare periodicamente il sito adattandolo a particolari festività o ricorrenze (Natale, Estate, ecc.) con un approccio più scherzoso e ironico… aspettate e vedrete.
Aggiunta anche la possibilità di passare alla modalità fullscreen per una esperienza ancora più immersiva: basta click su Windows o CTRL+click su Macintosh.
Abbiamo integrato il deep-linking e quindi la possibilità di navigare il sito anche grazie ai comuni pulsanti del browser (avanti e indietro per intenderci) e anche la possibilità di linkare direttamente a “pagine” del sito e metterle nei preferiti. La user experience quindi è ristabilita ai livelli a cui tutti gli utenti sono abituati.
Grazie a Google Analytics sono state implementate le statistiche di accesso e di utilizzo del sito in modo da tracciare tutti i click dell’utente e studiarne i comportamenti e le preferenze relative ai contenuti.
Finalmente il portfolio dei progetti (anche se non completo per accordi di riservatezza) torna ad essere il cuore del sito: ogni progetto è ora identificato da un colore, un eventuale video dimostrativo, screenshot, link, testi descrittivi e testo di referenza del cliente che comunica il suo grado di soddisfazione sul lavoro svolto.
Non manca l’area blog e la possibilità di abbonarsi all’RSS feed: abbiamo infatti creato un aggregatore dei blog aziendali che si possono leggere direttamente dal sito o da un qualsiasi Feed Reader.
Ristabilita la newsletter aziendale attraverso la quale comunicheremo con gli iscritti e divulgheremo notizie dal web, case histories e ovviamente comunicazioni commerciali. A breve termine ci sarà una evoluzione dei canali di comunicazione tra Webgriffe, clienti e partner grazie a un nuovo progetto interno ancora in fase di sviluppo… ma ci teniamo la sopresa!

Cosa ne pensate?
Critiche costruttive e pareri sono ben accetti.

Condividi su...

Non mancate!
Per iscriversi è sufficiente cliccare sul banner qui a fianco, riempire il modulo e cliccare su “submit”.

Condividi su...

In particolare si parlerà di programmazione ad oggetti in ActionScript 3.0. La giornata è particolarmente indicata per sviluppatori Flash con un livello di conoscenze medio che abbia almeno le seguenti basi:

• familarità con l’IDE di Flash
• conoscenza base di variabili e funzioni
• poca o nessuna esperienza in programmazione ad oggetti

tra i temi affrontati ci sono anche classi, oggetti, variabili, metodi, event handler, visualizzazione di cose sullo schermo, compilazione e messa in funzione delle applicazioni.

Ci vediamo là!

Condividi su...

Stiamo lavorando alla nuova versione del sito web aziendale (tempo permettendo) e come è giusto ci si pone sempre degli obiettivo complessi, delle soluzioni nuove e complicate.
All’atto del progetto grafico in Photoshop alcuni campi di testo sono stati pensati con il font Adobe Garamond Pro con un corpo molto grande e un kerning di -50 che in Flash si traduce in -3.

Andando a realizzare il codice Flash si è verificato il seguente problema: create un textField sullo stage con font e kerning impostati a piacere e dategli come instance name my_text

Poi via actionscipt settate:

my_text.text = "Hello world!"

Come noterete non viene visualizzato il kerning settato nel pannello delle proprietà del textField (vedi prima riga della figura sottostante).

Leggendo la guida di Flash (F1) ci viene consigliato di incorporare il font in libreria e utilizzare TextFormat… ma assolutamente non ne vuole sapere di funzionare.
Una soluzione (ridicola) c’è ed è stata frutto di prove e, diciamolo, fortuna. Si tratta di creare un textField dinamico identico a quello che ci servirà nella nostra applicazione, in una zona non visibile dello stage (ad esempio a x:-2000 y:-2000) con qualcosa scritto dentro (ad esempio “Test”) e gli diamo con instance name tf_test. A questo punto scriviamo la seguente riga di codice:

var fmt:TextFormat = tf_test.getTextFormat();

Poi sullo stage mettiamo un textField con instance name my_text con le stesse proprietà di quello di test e scriviamo:

my_text.setTextFormat(fmt);

my_text.setNewTextFormat(fmt);

my_text.text = "Hello World!";

Il risultato è quello che vedete nella seconda riga della figura precedente.
Se scoprite altre soluzioni interessanti fatemi sapere.

Condividi su...

Supponiamo che ad un certo istante del nostro movie venga chiamata una funzione che carica N immagini, che per comodità definiremo in un array ma che potrebbero anche essere definite in una struttura XML o altro.
Quindi prendiamo in esame il seguente codice incaricato del caricamento sequenziale delle immagini contenute nella cartella img in un MovieClip temporaneo temp che verrà rimosso al termine di ogni caricamento:

var imgPath = new Array("img/photo1.jpg","img/photo2.jpg");
var count:Number = 0;
function loadImage():Void{
	_root.createEmptyMovieClip("temp", _root.getNextHighestDepth());
	var mcl = new MovieClipLoader();
	var myListener = new Object();
	myListener.onLoadInit = function(target_mc) {
		target_mc.removeMovieClip();
		if(_root.count<_root.imgPath.length-1){
			_root.count++;
			_root.loadImage();
		} else {
			trace("Finito");
		}
	}
	mcl.addListener(myListener);
	mcl.loadClip(imgPath[count], temp);
}
loadImage();

Penso che la fattura di questa funzione sia comune a molti soprattutto per quanto riguarda l’utilizzo del metodo MovieClipLoader.loadClip() associato all’Event Listener onLoadInit. In pratica la funzione loadImage() viene richiamata da se stessa tante volte quante sono le immagini definite nell’array imgPath. Questa funzione non fa altro che posizionare un MovieClip temporaneo sullo stage e caricarci dentro l’immagine, controllare che sia caricata e poi rimuovere il MovieClip temporaneo. In effetti in questo modo non serve a niente tranne che a mettere in cache le immagini.
Vediamo ora come usare BitmapData per memorizzare le informazioni sulle immagini. Per fare questo dobbiamo importare la classe e per ogni immagine caricata creare un nuovo oggetto BitmapData e poi utilizzare il metodo BitmapData.draw() per “disegnare” una nuova immagine BitmapData a partire da ogni MovieClip temporaneo che nel nostro caso è identificato con target_mc.

import flash.display.BitmapData;
var bData:BitmapData = new BitmapData(target_mc._width, target_mc._height);
bData.draw(target_mc);

Inseriamo questo codice nella funzione e ad ogni ciclo memorizziamo l’oggetto bData in un nuovo array che chiamiamo bmp:

import flash.display.BitmapData;
var imgPath = new Array("img/photo1.jpg","img/photo2.jpg");
var count:Number = 0;
var bmp:Array = new Array();

function loadImage():Void{
	_root.createEmptyMovieClip("temp", _root.getNextHighestDepth());
	var mcl = new MovieClipLoader();
	var myListener = new Object();
	myListener.onLoadInit = function(target_mc) {
		var bData:BitmapData = new BitmapData(target_mc._width, target_mc._height);
		bData.draw(target_mc);
		bmp.push(bData);
		target_mc.removeMovieClip();
		if(_root.count<_root.imgPath.length-1){
			_root.count++;
			_root.loadImage();
		} else {
			trace("Finito");
		}
	}
	mcl.addListener(myListener);
	mcl.loadClip(imgPath[count], temp);
}

loadImage();

In questo modo le immagini vengono caricate nel MovieClip temporaneo, immagazzinate in un BitmapData ed eliminato il MovieClip temporaneo. Al termine del ciclo di caricamento ora chiamiamo una funzione che visualizzerà le immagini facendo il procedimento inverso: verranno creati dei MovieClip sullo stage tanti quanti i BitmapData registrati e attaccati ad essi le informazioni di ogni BitmapData come se le immagini fossero in libreria con Linkage specificato.

Lo script finale diventa quindi:

import flash.display.BitmapData;
var imgPath = new Array("img/photo1.jpg","img/photo2.jpg");
var count:Number = 0;
var bmp:Array = new Array();

function loadImage():Void{
	_root.createEmptyMovieClip("temp", _root.getNextHighestDepth());
	var mcl = new MovieClipLoader();
	var myListener = new Object();
	myListener.onLoadInit = function(target_mc) {
		var bData:BitmapData = new BitmapData(target_mc._width, target_mc._height);
		bData.draw(target_mc);
		bmp.push(bData);
		target_mc.removeMovieClip();
		if(_root.count<_root.imgPath.length-1){
			_root.count++;
			_root.loadImage();
		} else {
			showImages();
		}
	}
	mcl.addListener(myListener);
	mcl.loadClip(imgPath[count], temp);
}

loadImage();

function showImages():Void{
	for(var i=0; i<bmp.length; i++){
		_root.createEmptyMovieClip("copy"+i, _root.getNextHighestDepth())
		_root["copy"+i]._x = 200*i;
		_root["copy"+i]._y = 200*i;
		_root["copy"+i].attachBitmap(bmp[i], 1);
	}
}

In qualsiasi momento potrete richiamare e visualizzare i BitmapData semplicemente usando il metodo MovieClip.attachBitmap() come se fosse MovieClip.attachMovie(). Ci sono molti altri aspetti interessanti di questo utilizzo sia legati alle possibilità di smoothing offerte dall’attachBitmap() che dalle innumerevoli possibilità di modifica sulle immagini dal momento che sono dei BitmapData… a voi continuare lo studio.
Spero vi sia stato utile.

Condividi su...

Prendiamo in considerazione la situazione in cui un Flash projector (pubblicato come tale da Flash) contiene una chiamata di tipo getURL() a un file HTML: in questo modo non ci addentriamo nella casistica degli SWF in locale per i quali entra in ballo tutta la questione riguardante le security restrictions introdotte nelle varie versioni. Un movie Flash pubblicato come eseguibile invece non è soggetto a queste restrizioni di sicurezza come descritto nella documentazione ufficiale.
Detto questo procediamo con il nostro esempio e vediamo cosa succede quando un pulsante (che ha come instance name “myButton”) contenuto nel Flash projector invoca un getURL, o l’equivalente navigateToURL in AS3.0, a una pagina HTML:

myButton.onRelease = function() {
	getURL("modules/mia_pagina.html", "_blank");
};

Se il browser predefinito sul computer dell’utente è Internet Explorer, o una versione di Netscape/Mozilla precedente Firefox, tendenzialmente il comando avrà effetto e si aprirà la pagina “mia_pagina.html”.
Però se il browser di default è Firefox allora succedono cose strane e imprevedibili: sulle piattaforme testate ad esempio capita che Firefox si apre con due tab di cui uno _blank e uno in cui viene visualizzata la pagina di ricerca di default (ad esempio Google).
Un bel problema! Così sono partite le miee ricerche e i test più svariati fino a capire che non si tratta di un bug del Flash Player ma di Firefox, o meglio, di come Firefox gestisce le Url passate sulla command line.
Chiudete tutti i browser e provate a scrivere sulla command line il comando:

firefox -url "http://www.yahoo.com/|http://www.google.com/"

Noterete che viene aperto Firefox con due tab: una per Yahoo e una per Google.
Torniamo a Flash ora… quando in un projector invochiamo un getURL(“modules/mia_pagina.html”, “_blank”), quindi a una pagina relativa, il Flash Player traduce questo path in assoluto. Se ad esempio il projector è su un CD-dom identificato con la lettera D, e il file mia_pagina.html posizionato nella directory “modules”, il path assoluto tradotto dal Flash Player sarà del tipo:

file:///D|modulesmia_pagina.html

Notate che è presente in questa stringa il carattere “|” (che si legge “pipe”) ed è proprio qui il problema. Quando Firefox riceve questo path, come nell’esempio fatto per la command line, cerca di aprire due tab e visualizzare le pagine specificate prima e dopo il “pipe”. Nel nostro caso tenterà di aprire senza successo le pagine “file:///d:” e “modulesmia_pagina.html” che, non essendoci corrispondenza con reali pagine, provocano l’errore.

La soluzione è quindi quella di tradurre il path assoluto da inviare al browser in modo da evitare la presenza del carattere “pipe” e l’insorgere del problema, che ricordiamo è limitato solo agli utenti Firefox… ma come ben sappiamo sono (siamo) una crescente realta da non sottovalutare.
Per fare questo ci viene in aiuto la proprietà _url di AS2.0 o la proprieà url di loaderInfo in AS3.0). Per un SWF in una pagina web questa proprietà corrisponde alla url del file SWF, mentre per un SWF standalone in locale come un projector/eseguibile questo restituisce il path assoluto “file:///” dell’SWF nel file system.

Facciamo una prova e creiamo un projector SWF con un textField sullo stage a cui diamo come instance name “tf”:

// AS2
tf.text = this._url;

// AS3
tf.text = this.loaderInfo.url;

Facendo un test nel nostro textField apparirà un testo tipo: “file:///D|/projector.exe”.
Quindi quello che dovremo fare nel nostro caso è sostituire il “pipe” con “:” e il nome del projector con il percorso relativo al file HTML da aprire. Ci facciamo aiutare da indexOf() e lastIndexOf() per individuare rispettivamente la posizione del carattere “pipe” | e dellultimo slash (/) che chiude il path del projector. Ed ecco il codice risultante in Actionscript 2.0:

var swfUrl:String = _root._url;
var lastSlashIndex:Number = swfUrl.lastIndexOf("/");
var pipeIndex:Number = swfUrl.indexOf("|");
var baseUrl:String;
if (pipeIndex >= 0) {
	baseUrl = swfUrl.substring(0, pipeIndex);
	baseUrl += ":";
} else {
	baseUrl = "";
}
baseUrl += swfUrl.substring(pipeIndex + 1, lastSlashIndex + 1);

myButton.onRelease = function() {
	var targetUrl:String = baseUrl + "modules/mia_pagina.html";
	getURL(targetUrl, "_blank");
};

Condividi su...

“Flex 2, Flex Builder 2, and ActionScript 3.0 is the unstoppable new combination representing a revolution in Flash application development.Flash and ActionScript 2 revolutionized web design with the introduction of Rich Internet Applications (RIA,) and now Flex 2 takes Flash way beyond its previous capabilities in delivering enterprise-level internet applications that vastly improve the user’s internet experience.

Flex 2 is based on an easy to learn markup language called MXML. Using it you can create a series of nested containers, which the Flex server then translates into a finished application.
Flex Builder 2 is an easy-to-use programming environment, based on the famed Eclipse development environment, that allows you to create applications in both Flex 2 and ActionScript 3.0.

To help you keep ahead of the game and get up to speed with Flex 2 and ActionScript 3.0, Flash development, and certified training expert, Charles E Brown has written this comprehensive guide to developing Flex 2 and ActionScript 3.0 applications using Flex Builder, to help you keep ahead of the game. He takes you step-by-step through:

• Installation
• The basics of MXML
• Object Oriented Programming concepts
• ActionScript 3.0 syntax
• Building design and navigation containers
• Styling Flex applications with Cascading Style Sheets
• Data Connectivity
• And much, much more!

No matter what level of web designer you are, by the end of the book you’ll be creating powerful Flash applications. The revolution starts here!”

Non manca che attendere per leggerselo di un fiato.

Condividi su...