Flash Develop And Design

CSS Design using Edge Animate

Update: the export CSS feature is already live in the December update to Photoshop CS6. Thanks Tom!

I have been doing a lot of CSS design recently and have tried many different tools and workflows. One of my favorite is a workflow that is a little different in that it uses Edge Animate, which is available with a free Creative Cloud account, to generate my finished CSS code. Now Edge Animate is an amazing CSS animation tool, but in addition to that you can also easily get the finished CSS code using the developer tools.

The video above combines design techniques with a little bit of developer skills towards the end where we create some reusable CSS classes. I also quickly show the new CSS export feature ~~coming in~~ that is already in the latest update of Photoshop, which can save you an immense amount of time. Below is the finished result running in CodePen.


1
 

Check out this Pen!

If you want to follow along with the video, you can download the start image that I based the designs on. Remember that this CSS code would need to be properly cleaned up and prefixed for production use.

I’d love feedback if you have any,
Lee

Rss AD

Responsive Design Tool for Brackets

Over the last month or so I have been working on something that is completely different from anything I’ve done before. It all started because I was thinking about how I could create a responsive design tool specifically aimed at developers. Adobe already has an amazing tool for designers called Edge Reflow. You can check out my tutorial if you want to see how that tool works.

But for developers, most of the time you are going to want to hand-edit your CSS code and potentially do a wide array of specific tweaks for each media query. So what I’ve built is a responsive design feature for Brackets. For those who don’t know, Brackets is our open-source web editor that is built entirely using HTML, CSS, and JavaScript. This fact makes it extremely easy to build visual tools. In the beginning, I was not a believer in the whole building a web editor using web standards. I like SublimeText and that is still what I use today. But after this experience I firmly believe that building such an editor is not only possible, but also could be amazing if enough attention is paid to performance.

I presented some of this tool at the Adobe MAX sneaks event last week in LA, but unfortunately I was arrested before I could finish .

Photo by Kendall Whitehouse

Check out the video and please let me know your comments. It is working pretty solid but it is not ready to be released quite yet as there are lots of bugs and unfinished areas. But I will keep you updated once I find out what the future of this thing is.

One of the primary goals of doing this was to give myself a crash-course in modern web standards. Things have dramatically changed for the better since the days of Netscape 4.7 and IE 5. It was during this time period that I said F this mess and moved to Flash. Now some of you will ask, are you stopping doing Flash now? Hell no. But in my future posts and tutorials, I want to move to helping developers transition smoothly into doing these types of things in JavaScript, because that is where it is all heading.

I can honestly say that I love doing CSS and JavaScript now. What are the biggest reasons? No compiling, no SDKs, and being able to go into the developer tools and hack and tweak your creations live as they’re running.

I look forward to your feedback!
Lee

Rss AD

My latest Lynda.com course

I just wanted to drop a quick note announcing that my latest Lynda.com title is now live. This one is called Developing Applications for Amazon Kindle Devices and it covers all of the Amazon-specific APIs available when building your Android applications.

It’s about 4.5 hours and it should cover everything you need to launch successful apps on the Amazon App Store.

Rss AD

Sharing Designs Using the Creative Cloud

Ever since we released the Creative Cloud, it has been a challenge to help people understand what it is all about. I answered some of the most frequently asked questions in a previous post but one of the areas that I didn’t touch on is the advanced sharing capabilities for Adobe filetypes like Photoshop PSD and Illustrator AI files.

In the video above I show an example of sharing a Photoshop PSD file that allows people to toggle on and off individual layers and leave comments on the design. This saves an enormous amount of time for both the designer and the people viewing the files. Many people involved in creative projects, such as project managers, might not even have Photoshop installed and this feature enables them to easily interact with the PSD.

At the end I show how these interactive PSD features work not only on the desktop Creative Cloud site but also on your mobile devices.

I have shared the PSD file so you can check out these features for yourself. Go to this link in either your desktop browser or mobile device to check it out.

Big thanks to the great folks at HD Interactive for providing the PSD file used in the video.

Rss AD

Why I Like TypeScript

Check out the video above to see why I think TypeScript can be a great technology for those coming from an object-oriented language like AS3 or Java. It can really help you to understand today’s JavaScript because it compiles down to human-readable code as opposed to other technologies like Dart. Basically TypeScript allows you to use the JavaScript of tomorrow (ECMAScript 6), today.

For those who are looking for a good setup for Mac, I highly recommend the sublime-typescript extension for Sublime Text. It gives you basic error highlighting, compilation, and code highlighting.

For those looking for a more in-depth overview, Jesse Warden has an excellent overview on the technology.

Rss AD

Google Glass: pubblicato il nuovo video ufficiale ed il concorso per poterli avere in esclusiva

In questo video della durata di circa 2.16 minuti il colosso Google ci aggiorna sulle ultime funzionalità degli occhiali interattivi basati sul sistema operativo Android, che sono legate sopratutto all’uso dell’auricolare e alla possibilità di tradurre istantaneamente sullo schermo , sono questi infatti i veri valori aggiunti rispetto al primo video di presentazione lanciato nel Giugno del 2012.

Ci viene data un idea di com è la visione della realtà attraverso i Glass e di come grazie a semplici comandi vocali si può accedere a tutte le funzioni del device come scattare foto, registrare un video, inviare messaggi, condividere quanto si sta vedendo in tempo reale, aggiornarsi sul meteo e sul traffico e navigare in rete tutto senza dover usare le mani ma pronunciando ad esempio il comando ” ok Glass take photo ” per catturare l’immagine desiderata.
Connettendosi al SITO UFFICIALE sono disponibili le prime immagini del dispositivo che ci rivelano una struttura minimal disponibile in cinque colori : rosso , nero , grigio , bianco e blu e in quattro versioni diverse characoal , tangerine , shale e cotton sky.

Google inoltre ha aperto un vero e proprio contest ( What would you doif you had Glass? ) grazie al quale i più meritevoli americani potranno aggiudicarsi in esclusiva ma non gratuitamente gli occhiali del futuro , i vincitori infatti dovranno pagare 1500 dollari questo è il prezzo del nuovo device.

Il concorso è aperto fino al 27 febbraio , i concorrenti dovranno entro questa data comporre un testo di circa cinquanta parole nel quale andranno a spiegare in che modo vorrebbero utilizzare i Glass , al testo potranno essere allegati un massimo di cinque foto e un video della durata di quindici secondi.

Fatto ciò, il testo dovrà essere postato su Twitter o su Google + utilizzando l’ hashtag #ifihadglass , Google ha dichiarato che comunicherà i vincitori via Twitter una volta scelti i più originali e capaci.

Termini e condizioni del contest li potete trovare alla pagina ufficiale

Rss AD

Samsung: il nuovo sistema operativo Tizen

Dopo un 2012 segnato da battaglie legali contro la Apple la sud coreana Samsung inizia un nuovo anno all’insegna dell innovazione.

È dal 2011 che se ne sente parlare quando Meego e Limo si sono fusi dando vita a un nuovo progetto chiamato Tizen , un nuovo sistema operativo open source cioè una piattaforma aperta e modificabile anche da sviluppatori esterni sostenuto e finanziato da grandi nomi dell industria tecnologica come Panasonic , Vodafone , Linux Foundation , Intel e Samsung.

Un progetto ambizioso che mira alla completa interazione tra smartphone , tablet , smart tv e dispositivi auto e ha come principale scopo il desiderio della Samsung rendersi indipendente dal colosso americano Google come conseguenza dell acquisizione da partte della Mountain View nel maggio del 2012 del gruppo Motorola diventando cosi un vero e proprio competitor con un azione finanziaria costata alla Google ben 12.5 miliardi di dollari.

Tizen andrà sicuramente a sostituire l’ormai vecchio e inefficace Bada , mirando a diventare una delle migliori piattaforme su cui lavorare con HTML5.

Per quanto riguarda le applicazioni i device Tizen permetteranno l utilizzo delle applicazioni Android che dovrebbero essere disponibili su un vero e proprio marketplace in cui le app verranno pubblicate dopo test che ne assicurino la piena compatibiltà con il device in questione.

Cosi sembra che la Samsung si stia preparando a dire addio al sistema operativo Android e a lanciare ufficialmente Tizen i 25 Febbraio 2013 durante il Mobile Word Congress di Barcellona anche se sicuramente non sarà un distacco netto come molti vorrebbero dato che quest’ azienda deve il suo grande successo proprio alla Google.

Per adesso senza sbilanciarsi troppo la Samsung dichiara le sue intenzioni : “Produrremo device con Tizen nel 2013 e ne faremo altri se il mercato lo consentirà”.

Teniamo gli occhi puntati su questo lancio restando comunque convinti che la nascita di nuovi competitor non potrà che giovare al mercato e ai consumatori , invece per dire che questo sistema operativo seppelirà Android è sicuramente troppo presto.

Rss AD

Spotify: ascolta e condividi la tua musica preferita

Che cos è ?

Spofity è un servizio musicale , nato nel 2008 , che offre lo streaming di una selezione di brani di varie case discografiche ed etichette indipendenti , attualmente è fruibile attraverso Microsoft Windows, Mac OSX, Linux, Telia Digital-tv e i dispositivi iOS (iPod/iPhone/iPad), Android, BlackBerry (in versione beta limitata), Windows Mobile, Windows Phone, S60 (Symbian), webOS, Squeezebox, Boxee, Sonos, WD TV e MeeGo.

Come si installa?

Installare Spofity è estremamente semplice e intuitivo basta connettersi al Sito Ufficiale ed eseguire il download del software che avverrà in pochi minuti.

Fatto ciò possiamo scegliere se accedere tramite facebook o direttamente registrando un account inserendo il proprio indirizzo e mail , scegliendo la prima opzione potrete non solo ascoltare i milioni di brani presenti ma anche condividerli con tutti i vostri amici.

La versione per Linux è ancora in versione sperimentale e viene fornita al momento solo per Debian/Ubuntu, su cui può comunque essere installata.

Tipologie di abbonamento

Spofity è in parte un servizio gratuito e in parte un servizio a pagamento , la differenza sostanziale è la presenza o meno delle pubblicità, la possibilità di poter utilizzare il software anche su dispositivi mobili e i limiti di tempo che vengono imposti nella versione gratuita .

Andiamo ad analizzare le principali tipologie di abbonamento che si suddividono in tre categorie:

Free

Scaduti i 30 giorni di prova della versione premium si può scegliere di non sottoscrivere l abbonamento e usufruire del servizio in modo del tutto gratuito ovviamente con alcuni limiti come la presenza di pubblicità e un massimo di 10 ore mensili per quanto riguarda l ascolto dei brani.

Unlimited

Questa versione costa 4.99 euro al mese e ci permette l eliminazione dei banner pubblicitari e abbattere il limite orario di 10 ore mensili presente nel servizio gratuito ma si resta comunque vincolati a una connessione internet e si può accedere al servizio solo tramite pc.

Premium

L’ abbonamento premium costa 9.99 euro al mese e permette di ascoltare tutte la musica online e offline su tutti i tuoi dispositivi, fissi e mobili, tramite le applicazioni ufficiali si trovano nei rispettivi store: App Store, Google Play e Windows Phone Store.

Principali funzionalità di Spofity

La funzione più utile è sicuramente quella per cercare le canzoni. Si trova in alto a sinistra e si possono inserire parole chiave come i nomi dei cantanti, dei loro album, delle loro canzoni e così via.

Una volta scelta la propria canzone, per ascoltarla è sufficiente fare doppi clic sul suo titolo o sul tasto “Play” che si trova in fondo a sinistra. In fondo ci sono i comandi per passare alla canzone successiva o a quella precedente, per alzare o abbassare il volume e per andare avanti o indietro nella riproduzione.

Spofity ha un’opzione per condividere le playlist e gli ascolti con i propri amici di facebook basta premere il pulsante condividi e scegliere se pubblicare il nostro brano o inviarlo a un amico.

Inoltre ci da la possibilità di creare una playlist per ascoltare le nostre canzoni preferite, senza doverle cercare di volta in volta. Può essere usata per ascoltare anche un intero CD con un clic o per salvare tutte le canzoni che più ti piacciono di un singolo artista.

Per creare una nuova playlist basta trascinare il brano scelto all interno della cartella.

La radio è una delle funzionalità più innovative di questo servizio, sono presenti diversi canali, ma il più interessante è quello basato sui propri gusti musicali: in base ai nostri ascolti il sistema imapara i nostri gusti musicali e propone di conseguenza le canzoni. Attraverso un sistema di votazione possiamo esprimere il gradimento o meno per la canzone proposta, in questo modo il sistema affina le conoscenze sui gusti di chi lo sta usando.

Prossime novità

Le novità non finiscono qui perchè secondo le dichiarazioni della cuontry manager Veronica Diquattro a Marzo Spofity verrà integrato della funzione “follower” che permetterà di seguire i propri cantanti preferiti. Inoltre sarà arricchito di una nuova funzione chiamata Discovery che ci permetterà di scoprire la musica non solo attraverso la funzione “cerca” ma anche attraverso i personaggi seguiti e gli amici con cui si condivide.

Come salvare gli MP3 scaricati da Spotify su Mac

Dopo aver installato il software Spofity dovrete creare una nuova Plyalist. Selezionare, tramite apposito tab posto in alto a destra, la disponibilità di quei brani anche offline (questa operazione è possibile quando si usufruisce di un abbonamento premium o della prova gratuita di tale abbonamneto) .

In seguito cliccate con il tasto destro sul brano che desiderate avere a disposizione in MP3 e scegliete la voce “Reveal in Finder“. Vi si aprirà il Finder con il brano in versione MP3 pronto per essere trasferito dove desiderate.

Rss AD

Adobe Game Jam – New York City

I’m happy to finally be able to announce Adobe Game Jam New York City. It will take place March 8th and 9th at the swanky Adobe offices in Times Square. This will be the first game jam that will allow you to build your game using either Flash or HTML5. Flash-based games must be built using Stage3D. For HTML5 games, you will need to use the CreateJS framework and create at least some of your assets using the exporter in Flash CS6.

Space for this particular game jam is limited due to the office space we have. We can only fit 35 developers, which hopefully will turn out to be around 7 teams of 5. Please don’t register for this unless you know you are going to attend and please make sure you cancel if something comes up. There will be a waiting list so be sure to sign up for that if it gets full.

Go on over to the EventBrite page to register and get all the details. You can also register for it below. Free food, booze, prizes, and gaming in NYC. It’s gonna be fun!

Rss AD

My Unofficial Creative Cloud FAQ

In my travels lately I’ve noticed that some people don’t fully understand or have never even heard of the Creative Cloud. Now if you are regular reader of my blog then you probably know what’s up, but if there are decision makers in your company or other folks that you want to educate, you can send them here or to the much larger official FAQ. I want to make sure everybody understands how much better of a deal this is than our traditional approach of selling software. Here are the questions that I hear the most:

With the Creative Cloud, am I using new cloud-based versions of software like Photoshop?
Absolutely not. A more appropriate name might be the Adobe Software Subscription with Additional Cloud-Based Services, but that is a bit long. Basically you are paying a monthly fee to get access to all of our regular desktop software in addition to some great services in the cloud.

How often will the applications in the Creative Cloud be updated?
This is the most important advantage of us switching to the subscription model. With the big Creative Suite releases we had to synchronise all of the product updates to a single release date. With the Creative Cloud, all of the applications can update themselves whenever they have new updates to share with you. We are already seeing this happen with the recent updates to Edge Animate, Edge Code, etc. No more waiting for more than a year for an update to your favorite software. With the cloud subscription you are always running the latest versions of all our software.

Besides the desktop software, what else do I get access to with the subscription?
This is where the services come in. I’ll just mention a few of my favorites. First you get full access to the awesome TypeKit web font library. You can easily build your PhoneGap applications in the cloud for all platforms using PhoneGap Build. You get a Digital Publishing Suite Single Edition account allowing you to publish digital magazines from InDesign to tablets like the iPad. You also get cloud storage and sharing features for your creative files including advanced support for Adobe filetypes such as PSD (see video at bottom for more on this). These are just some the services you get and we’ll be continuing to add more.

Is subscribing to the Creative Cloud a better deal than buying a suite?
Absolutely! Even if you only want one of our applications you can get the Single-App membership for $19.99 a month and cancel anytime. The complete subscription costs $49.99 a month, which comes out to around $600 a year. Considering the price of Master Collection is around $3000, it is easy to see the amazing value. This new pricing model also makes getting legal access to our software possible for people in developing countries who otherwise wouldn’t be able to afford it. For students, the price for the full subscription is only $19.99 a month. Basically to sum up, if you do anything creative, choosing the Creative Cloud is a no-brainer. Oh and no more worrying about Mac and PC versions of our software. You get to install all of the applications on up to two machines regardless of OS.

What about team subscriptions for my company?
Yes we have a team edition that makes it easy to manage licenses among your team and also includes more cloud storage space. Check out the details here.

Damn Lee, why are you selling this so hard? Are you getting a commission or something?
Unfortunately not . But I just got back from a team offsite and we were sitting around drinking beers and wondering why anyone wouldn’t go the cloud route. I don’t want any of you guys to buy a suite and regret it because you didn’t understand what the Creative Cloud actually is.

I don’t like change. Can’t I just buy the software like I always have?
Yes of course. You can still buy suites and individual applications if you want. But you should register for the free Creative Cloud account because that is where you can get trial versions, preview release software, and some limited access to some of the services.

What are you not telling me Lee?
Well the Creative Cloud isn’t available in every country yet but we are continuing to expand. Check out the official FAQ for availability. There are also a couple of apps not in the Creative Cloud yet such as Director. Got feedback or concerns? Please leave it for us in the comments.

Need more convincing? Check out the video below from P-Train explaining more about the Creative Cloud.

Rss AD