Un avviso sarà inviata automaticamente all’amico citato.
Cosa ne pensate?

Condividi su...

Portroppo Facebook ad oggi non supporta l’utilizzo di immagini PNG trasparenti come immagini del profilo quindi se provate a caricare una PNG di questo tipo inevitabilmente viene visualizzato un riquadro bianco attorno al disegno… così l’unico sistema per ovviare a questo “limite” è quello di creare una immagine “ad hoc” che riprenda anche lo sfondo.

Vediamo come

Come potete vedere nell’immagine qui a fianco (click per ingrandire) l’area a disposizione per la foto è un rettangolo largo 200 pixel e alto a piacere.
Questo rettangolo è posizionato in modo da iniziare nella parte azzurro chiaro in alto nella pagina e continuare sotto dove la pagina diventa bianca.

Lo stacco da bianco ad azzurro può sembrare un muro bianco oltre quale si intravvede il cielo…
non vi pare?

Ecco perché ho pensato di personalizzare la mia pagina come nell’immagine qui a fianco…
una sorta di tentativo di evadere. :-)

Per iniziare è necessario partire da una base grafica che comprenda il “muro” bianco, il bordino e la zona azzurra in alto: ho creato un template di Photoshop utile per chi ha capacità grafiche ma anche una immagine JPG sulla quale i meno ferrati possono intervenire a piacere.
Scaricatele e iniziate a lavorarci come descritto di seguito.

Partite dal template vuoto e pensate a come poterlo personalizzare: si presta a una miriade di interpretazioni…
io amo il surrealismo e mi piace interpretare l’immagine del profilo in questa chiave.
Supponiamo di utilizzare l’immagina di una rana che si arrampica sul muro (vedi immagine a fianco).

Aprite il template che avete scaricato e inserite l’immagine della rana nella parte bianca dell’immagine.

Se l’immagine ha uno sfondo di altro colore basta intervenire su curve, livelli e correzione colore per adattarla al meglio (saperne un po’ di grafica aiuta).

Per concludere tagliate l’immagine in basso in modo da togliere eventuale spazio bianco in eccesso.

Attenzione: non tagliate mai in alto!

Ed ecco qui a fianco il risultato finale.

Altre immagini di profilo realizzate

Mi sono divertito a creare diverse immagini che abbiamo pensato di condividere nella pagina dedicata alla mia azienda su Facebook.
Visitate la pagina, diventate fan e usate le immagini.

Se le utilizzate abbiate la cura di lasciare un messaggio!

Segnalate le vostre personalizzazioni nei commenti e contribuite alla diffusione di questo nuovo modo creativo di interpretare Facebook.
Buon divertimento!

Condividi su...

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...

Per completezza di informazione riporto il code actionscript utilizzato:

import flash.net.FileReference;var fileTypes:Array = new Array();
var allowedTypes:Object = new Object();
allowedTypes.description = "Documenti (*.pdf, *.doc, *.rtf, *.txt)";
allowedTypes.extension = "*.pdf; *.doc; *.rtf; *.txt";
fileTypes.push(allowedTypes);
var fileRef:FileReference = new FileReference();
var listener:Object = new Object();
listener.onComplete = function() {
trace("CURRICULUM FILE UPLOADED!");
};

listener.onHTTPError = function(file:FileReference, error:Number):Void {
trace("onHTTPError: " + file.name + " Error: " + error);
}

fileRef.addListener(listener);
curriculaForm.btn_browse.btn.onRelease = function() {
fileRef.browse(fileTypes);
};

e il codice PHP invece

if ($_FILES['Filedata']['name']) {$uploadDir = "/uploadedfiles/curricula/";
$uploadFile = $uploadDir.$_FILES['Filedata']['name'];
move_uploaded_file($_FILES['Filedata']['tmp_name'], $uploadFile);
}

Per aggirare il problema ci sono sostanzialmente due soluzioni da provare.

1. Dal pannello di controllo di TopHost cliccare il pulsante “Ripristina spazio web” che reimposta i permessi corretti alle cartelle e ai file del sito.
2. Modificare il codice PHP precedente aggiungendo il comando chmod($uploadFile, 0644) subito dopo move_uploaded_file(...)

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...

Abbiamo iniziato (vedi fig.1) progettando la home page e raggruppando i vari livelli in cartelle per una maggiore pulizia del file di progetto. Il cliente voleva avere una idea di come poter in futuro implementare la visualizzazione di prodotti da mettere in evidenza in home page, così la prima cosa che si sarebbe fatta nel vecchio metodo sarebbe stata quella di creare una nuova cartella di livelli duplicando quella della Home e modificarla di conseguenza… ora non più. Basta accedere al tab Layer Comps. (Window > Layer Comps) e con il pulsante in basso “Create New Layer Comp”.

A questo punto una finestra vi pone alcune scelte (vedi fig.2):

• Name: il nome che volete dare a questa configurazione (HOME)
• Visibility: memorizzare lo stato visibile o nascosto dei livelli
• Position: memorizzare la posizione dei livelli
• Appearance: memorizzare gli stili applicati ai singoli livelli
• Comment: una descrizione libera

Dopo aver cliccato su OK ci viene creato il Layer Comp. HOME che ha “fotografato” lo stato attuale del nostro pannello Layer e di tutti i livelli in esso contenuti, comprese le loro posizioni, visibilità ed eventualmente gli stili associati. A questo punto per fare la nuova versione della home page non dobbiamo far altro che tornare nel pannello livelli e spostare o creare nuovi livelli. Alla fine della modifica torniamo nella finestra Layer Comp. e creiamo la nuova configurazione HOME PRODUCTS. Ora possiamo attivare l’una o l’altra configurazione e di conseguenza vedremo sullo stage i due diversi layout creati. La bellezza di questo metodo sta nel fatto che potete spostare a piacere i livelli e salvarne le posizioni: questo vale anche per gli smart objects ovviamente e non c’è più bisogno di duplicare livelli ma si usano sempre gli stessi spostati e nascosti all’occorrenza.
nel nostro progetto abbiamo poi realizzatola sezione PRODUCTS, PRODUCTS DETAILS e COMPANY (vedi fig.3).

Pensate ad esempio alla comodità di spostare a piacere il footer di una pagina quando il layout è di tipo verticale e si adatta al contenuto: un unico layer in cui è definito il footer potrà essere spostato a piacere e “registrato” nei diversi Layer Comps.

Ma la bellezza dei Layer Comps. non finisce qui.
Pensate a quando, giunti al termine della fase di progettazione, si devono esportare i singoli screenshot per realizzare una presentazione (PDF, HTML ecc.) da mostrare al cliente. Anche in questo caso Photoshop ci viene in aiuto: apriamo il menu File > Scripts e troviamo una serie di automatismi (vedi fig.4).

Le opzioni a disposizione sono le seguenti:

• Layer Comps to Files… : esporta i singoli Layer Comps. in differenti formati immagine (JPG, PNG, BMP, TIFF ecc.)
• Layer Comps to PDF… : crea una presentazione PDF con i Layer Comps. selezionati
• Layer Comps to WPG… : crea una Web Photo Gallery con i Layer Comps. selezionati

A voi ora provarli e a scrivere cosa ne pensate.

Condividi su...

Leggi qui il post ufficiale su Flex-developers »

Condividi su...

Di seguito il video tutorial sull’uso del component in Flash.

Maggiori informazioni su Google Code.
Il download del component invece a questa pagina.

Condividi su...

Requisiti.

• Flash CS3
• Extension Manager CS3
• Flex Builder oppure Flex SDK 2.0.1 hotfix 1 con gli update per CS3
• Flex Component Kit
• Documentazione

Il Flex Component Kit introduce in Flash la possibilità di avere a disposizione il nuovo componente UIMovieClip (completamente funzionante in Flash e utilizzabile come skin) e il comando “Make Flex Component”.

Alcuni accorgimenti.
Affinché il componente che si va a realizzare in Flash si compatibile con Flex è necessario seguire alcune semplici regole:

• l’intera timeline deve essere contenuta in un MovieClip, ovvero il componente esportato sarà un MovieClip
• il punto di registrazione dello stage sarà l’angolo in alto a sinsitra
• il frame rate della timeline deve essere di 24fps
• le proprietà e le classi di tipo public saranno riutilizzabili in Flex
• la versione di Flash Player necessaria è ovviamente la 9
• la versione di ActionScript necessaria è la 3.0

A questo punto selezioniamo nella libreria di Flash il MovieCLip che vogliano trasformare in Flex Componente poi nel menu Commands selezionamo “Make Flex Component”. Nella finestra di output viene stampato un report delle eventuali modifiche apportate al movie per renderlo compatibile con Flex.
All’atto della pubblicazione (File > Publish) viene creato un file .SWC che utilizzeremo in Flex.

In Flex.
Basta selezionare “Flex Build Path”, “Library Path”, “Add SWC…” e sceglie il file .swc pubblicato.
Si realizza l’applicazione Flex e infine si compila.

Il limite… per ora.
Purtroppo in Flex Builder non sarà visualizzato il componente ma potrete solo manipolarlo in modalità mxml.
Questo però sono fino al rilascio definitivo del nuovo Flex Builder.

Demo.
Al link seguente potete saltare al minuto 7.00 e vedere una demo di quanto scritto qui sopra: http://adobedev.adobe.acrobat.com/p75214263/

Condividi su...