Category: Apple

Photoshop, Edge Reflow and Edge Inspect: the new responsive workflow

Today I’d like to talk about something that is not strictly related to development process but that it’s very useful when you are running your company as freelance or entrepreneur or if you are team leader of a team.
One of the most important thing for me when you approach a new technology is not only understand if it could fit all your needs but also understand when you introduce in your team or company how to have the best result as soon as possible.
That’s why I keep always a lot of attention on how to create a flexible and elastic workflow that allow my team to create or modify client side solutions without waste our time.
In last years we rapidly see the grow of an hot topic, strictly related to HTML5 and Javascript, like Responsive Design, so the capability to create an interface that is viewable and usable on different devices (from smartphones to web browsers for instance).
Personally, if I didn’t find anything that help my team to be immediately very productive I usually avoid to introduce new softwares in the actual workflow, but this time we are in the middle of a big revolution where HTML5 and Javascript are the main protagonists.
During last Adobe MAX I saw a couple of interesting demo on Edge “family” and I was impressed on the capability of Edge Reflow and its interaction with Photoshop CC to create user interfaces for different devices in really few time, that’s why I was really waiting to test this feature and I’d like to share with you my first experiment.

rwdTools

Photoshop CC and Edge Reflow

I think a lot of designers create the UI for a project with Photoshop, last Monday (9th September) Adobe released an update of Photoshop CC and Edge Reflow, but we start with Photoshop because the news are really cool.
One of the most boring activity for a designer (or for me when I did it as freelance :D) is to cut all images and prepare assets in different folders for the developers.
Photoshop CC helps us introducing a new feature called Adobe Generator, a new way to automate this long and tedious phase, where the designer has only to follow some simple rules on how to nominate Photoshop levels and the software automatically export all the assets for us, ready to be delivered to the developers team!
For instance if you want to export a particular level as PNG you need only to nominate the level with a PNG extension (for example: “background.png”) and run the new Photoshop command Generate > Image Assets to have all our files ready to be added on the real project.

Photoshop Generate command

To know more about Adobe Generator and in particular to know how to set the name of each level I warmly suggest to take a look to Photoshop.com where there are all the information to do that.
Another option that we have (as you can see in the image above) is the capability to export the UI structure and the assets to Edge Reflow.
If you don’t know what is Edge Reflow I explain it in few words.
Edge Reflow is a tool useful to create responsive design layout and, from yesterday, completely integrated with Photoshop CC.
In fact now you can import in Edge Reflow your layout and you can start to customise it visually for any screen resolution your project will work.

Edge Reflow

The most interesting thing is that you can export from Photoshop an Edge Reflow project, or you can synchronise in real time the changes when the 2 softwares are open.
Then you can create your layout for different resolutions only copying and paste the code generate from Edge Reflow in your favorite code IDE; I mean copy and paste for now instead of import because probably (at 99%) you’ll have to improve or change it a little bit after paste but it’s really a good step forward for a software in preview like Edge Reflow.
With Edge Reflow you can create <div> adding box elements in your layout and you can show or hide elements present in different screen resolution simply with the options in the left side of the software interface.
Another very cool thing is the capability to work with your Typekit account (integrated in your Creative Cloud subscription) to download the fonts needed in the layout made with Photoshop.

Edge Reflow and Edge Inspect

Last but not least, Edge Reflow is integrated with another cool product of the Edge family called Inspect.
Edge Inspect is a simple application that you can add as plug-in in Chrome or you can download in your iOS or Android device from the relative store, and it allows you to test in real time all the changes you are doing in a website or more in general in HTML, JS or CSS file checking in real time the final result in one or more than one device simultaneously.
This is a capability that partially missed in the flash development workflow where the mobile test was a real pain (in particular the first releases of Adobe AIR on mobile), in this case with all those new technologies Adobe decides to evolve and improve this experience giving good tools to develop.

From a developer perspective

Personally I think that the integration of a technology like Node.JS in last Adobe softwares (Brackets, Adobe Generator, Edge Reflow and so on) is giving a real boost to them, and they are opening new horizons in the desktop application field, in particular I suggest to take a look to Node-Webkit, an open source project that allow you to work with HTML5, Javascript (Node.JS obviously) and WebGL to create desktop application for different platforms.
There are many other tools that could help to achieve the same goal like TideSDK for example, but I think Node-Webkit could be very interesting if the project will be well approach by the community.

Conclusions

Demo Photoshop and Edge Reflow

Finally the big players on the market are delivering tools that allow us to create engaging and amazing experience with HTML5 and Javascript like other technologies did in the past (Flash Platform in primis).
The combination of Photoshop CC, Adobe Generator, Edge Reflow and Edge Inspect give us a real flexible and integrated workflow where in few steps we can save a lot of hours spent on the code with great results.
Obviously those tools are new and in “preview” so they are not perfect but they are stable and useful enough at this point to be integrated in the actual daily workflow giving immediately importart results.
I really hope this is the first steps to give us the freedom to create instead became crazy to have layouts working in different browsers and devices.

Advertisement

Adobe AIR 3.8 introduces Socket Server on Android and iOS

Hi All,

after long time I’m back for all the developers are working with the Flash Platform right now!
Sorry for that but it was a really intensive period for me with the organization of “Having fun with Adobe AIR” so I haven’t a lot of time to share with you my new experiments.
Yesterday Adobe MAX is finished with a lots of design news, great and inspire case histories for designers and a lot of amusement during the Sneak Peek where they have shown the real power of Adobe labs with tons of really cool features that we could see in next releases of Adobe’s softwares.
For a developer perspective there weren’t big announces so, as usual, we can do it by ourselves…. and here we are!

During last few days Adobe release the Adobe AIR 3.8 and Flash Player 11.8, both in BETA but you can download and start to play with them.
When Adobe releases a new AIR SDK I always take a look to the release notes to see the new features of my favorite platform, this time I’m glad to announce that they add the opportunity to create TCP/IP and UDP socket server directly on iOS and Android.
This is a very cool feature because you can really create amazing things in particular for applications and games, for example local multiplayer, chat and so on.
I worked a lots with sockets during last years in several projects and my big concern was that I can’t create a socket server on smartphone and tablet with AIR, I could do that only with native code but I was pretty sure to see this feature will be implemented in next releases of AIR!

Today I had few time to spend experimenting new stuff so I decided to try AIR 3.8 BETA on mobile and create something cool to share with you.
As you can see in this short video I create a socket server on my iPhone 4 that interact with a client made on my iPad mini (I tried also with my Android smartphone and it works as well):


To create this sample you needn’t to learn something new, you can use the same APIs you will use on a desktop application, so to create a socket server you write those few lines of code:

//creation of a TCP/IP Socket server
private function createServer():void{
server = new ServerSocket();
server.addEventListener(Event.CONNECT, onConnect);
server.bind(7934); // this is the number of the port where your socket communicate
server.listen();
}

Then, when a client socket will join in the same network and it listens the same port of the server, the magic happens and you can start to comunicate:

//on the server socket application
protected function onConnect(event:ServerSocketConnectEvent):void {
incomingSocket = event.socket;
incomingSocket.addEventListener(ProgressEvent.SOCKET_DATA, onData);}

protected function onData(event:ProgressEvent):void {
if (incomingSocket.bytesAvailable > 0){
//here you can pass data to the client using writeBytes, writeUTFBytes and many other methods
/*an example could be:
incomingSocket.writeUTFBytes(String("HELLO!");
incomingSocket.flush();*/
}
}

// on the client socket application you have to create the connection and then manage (send and receive) data from the server
private function createSocketConnection():void{
socket = new Socket()
socket.addEventListener(Event.CONNECT, connectedToServer);
socket.addEventListener(ProgressEvent.SOCKET_DATA, receiveData);
socket.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
socket.addEventListener(Event.CLOSE, closeSocket});
//pass to connect method the server IP and the port to comunicate
socket.connect("127.0.0.1", 7934); 
}
protected function receiveData(event:ProgressEvent):void {
// here you can read all the packets sent from the server
}
protected function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}
private function connectedToServer(e:Event):void{
//yes! you are connected to the socket server
}
private function closeSocket(e:Event):void{
//your socket connection is closed
}

After that you can start to experiments with this new feature as I’ve just done.
Last but not least, as you can see on the release notes, Adobe adds another great feature, that is the capability to stop all movieclips are running on the stage calling a new method “stopAllChildren()” directly from the stage instance.
Simple, easy and useful!

Flash Platform Galaxy: why choose Flash Platform

In those days I’m reading a lots of mailing lists, forums, blogs and so on where Flash Platform supporters are so disappointed about the latest marketing movement of Adobe.

In fact yesterday Adobe announced that they stop the development of Flash Player on Mobile devices (on Desktop they are going ahead).
The road is clear HTML 5 inside the browser and Flash Platform for RIAs, Games and out of browser in combination with Adobe AIR.

For me Adobe for the second time (the first one was during Adobe MAX) has totally mistaken how to communicate this news and obviously tech blogs bring this announcement like the end of Flash…
Personally I don’t think that is the end of Flash but I think that Flash is moving on a new position in multimedia world probably out of browser.
I’m an Adobe addicted, like you know, and in particular I’m a Flash Platform supporter, so I think that we have to move on and make something to spread the word about this foggy situation, guys, Flash Platform is ALIVE!
To do this, I start making a pdf file called Flash Platform Galaxy that could help people to have an idea of what is Flash Platform and why choose it ( I know, I’m not a graphic designer but I think it could be useful), if you want to add more informations or change something feel free to leave a comment at this post or drop me a line via email.
Let’s go guys, we have a platform to save 😉

Tricks for tween on mobile devices with Flash Platform

In this quick post I’d like to share with you my experience about Tween on Flash Platform projects delivered on a mobile devices.
I started work on mobile since Flash Lite 1.1 so I grew up with mobile, I lived all the Flash mobile evolution and now, on tablet and smartphone, I had some good tricks to share with you, I really hope that those tips could help you during your developer life.
OK, let’s start:

  • Use quality property of stage
    This is a really good technique to use when you have to improve performance of your project, when you need to make a fluid tween before launch it, set stage quality to low and when tween will finish set stage quality to high or best.
    Avoid to use this technique when you have vectors (textfield for example) on the stage because you could have a worst result.
  • Use cacheAsBitmap and cacheAsBitmapMatrix
    If you have vector object that you’d like to animate in your project remember to cache them and then animate; remember also to set your application with GPU acceleration and you can see a really good performance with this technique.
    Avoid to cache objects that you need to remove from display list, it will be so expensive for your memory.
  • System.gc() works!
    I tried in few sample to use it on Android and I saw a good result, so the “old” tip to call System.gc() twice in a try/catch statement works on mobile device too (only on AIR apps)
  • Take care with multiple animations on iPad and iPhone
    On iOS devices we don’t have AIR runtime so LLVM translate our AIR project for us in Native Binary so it could help if you move few objects per time in particular if you have big objects to move like a background or something like that
  • Greensocks tweens are the best
    I tried tweener and other tween libraries for AS3, but the best one for me are the Greensock tween library, in particular on iOS devices.
  • Last but not least, remember to test your animation on the device because you could see “funny” results
    Sometimes happen that on your computer everything works well but when you port your content on a tablet or smartphone everything works not so well.
    Before hurt your head, remember to test a lots of times your mobile content on the device, it could save your projects!
Finally I suggest to take a look at dev center mobile development zone of Adobe site because you can find many tutorials and helpful tips on mobile development.
That’s all folks for now, I hope you enjoy those tips.

Presentation Model design pattern: multiple screen solution – part 1

Today I’d like to talk about Presentation Model design pattern because it’ll be so useful for anyone that is working on multiple screen project with Flash or Flex.
In latest months we lived in phrenetic mobile world where we have tons of new and powerful devices on the market with different screen sizes, different hardware and so on, on the other hand we have clients that are looking for new business opportunities and they are seeking a way to spend less but earn more.
So, one way to solve those problems could be find a way to deploy with the same technology in different devices (tablets, smartphones, computers…) saving time with great results!
That’s not a dream, it could be made with knowledge, architecture and a good developer or a team!

Our goal

For a developer find a way to have a good project architecture to maintain it’s so important, usually when you start a project you try to define the parts that could be re-usable in different part of the same project or in different project too.
So our aim is find a way to write less code but it will cover the project needs and that could be portable in different screens / operating systems easily.

What is Presentation Model design pattern?

My mentor Martin Fowler describes it with those words: “Represent the state and behavior of the presentation independently of the GUI controls used in the interface”  (here the full article of Martin Fowler).
In fact with this pattern we divide UI (components, movieclips, sprites…) from their behaviors; each view will have one and only that one presentation model and only the presentation model will interact with the whole architecture (like with model or proxy…).
Probably with this image you can easily understand better this concept (from Martin Fowler website):

Like you can see we have 3 class, AlbumTitle that is a view with a textfield, AlbumPresentationModel that is the presentation model of AlbumTitle and it has the copy of the view but storing datas inside and finally the main model Album where we have the data that could be used for the whole application.
There aren’t any connection trough the views and the application model because only the presentation model has access to the whole project, so the view is only a bunch of components and custom graphics, this it means that if you have to change UI on a mobile project for a different device, changing the views and anything else, you will have done your job.
In fact with this easy technique you perfectly solve our problem and you should create the same content for different devices changing only the views.
Probably your application in different devices will have the same functionalities but with a different UI dedicated for the OS is running on.
With this sample design pattern you’ll have a solid infrastructure that will solve the big problem to port the same application in different screen sizes.
So in next paragraph we can take a look on how to organize our files project.

Manage a project for different screen sizes

Another important thing before starts the project is understand how to organize the project for different OS, in fact if you work with Adobe AIR on Android you’ll have only the XML descriptor with Android permissions described in this file, on Playbook you’ll have another XML file dedicated to this platform and so on.
So, my suggestion is to organize the project in different projects that work together.
In this image you can see how I organize it for our final scope, I’ve a common project (Runtime Shared Libraries in this case but you can use also an Actionscript or AIR project if you work with Flash for example) where I’ll put all classes that are common for different target, so in my case all the presentation models, main models, utils classes, my notification bus and views that are common for different projects like components for example.

In the target device projects I add only what I need for that device, in this case only a couple of views and assets but in big projects could be more stuff that those one:

When you have a specific behavior only for a target device, you can easily extends the common presentation model and add new functionalities or create a side class that you’ll add in the specific view.
So with this infrastructure you can solve bugs and change stuff directly on the common project and all the platforms will be ready to package the project and upload to their store. That’s cool, isn’t it?

Summary

So in this post I hope to give you some ideas on how to solve the big problem to create a common base code that could be useful for different purpose.
In next post I’ll show you how to implement it in practice, for now if you have any feedback or suggestions for the second part of this article please add a comment to this post.

Think different?! NO… but maybe…

I want broken my silence about Apple vs Adobe “war” and share with you my thoughts.

It’s an hot topic and probably not all people will be agree with me but I feel to tell you my point of view.
First of all, today we are sure that Adobe will not invest anymore on iPhone packager for Flash CS5, so from a developer point of view I’m totally agree with Mike Chambers and Adobe too.
Android is a really amazing mobile OS not only for smartphone but also for MID, I saw on a Nvidia Tegra 2 and performance were really impressive.
I had an iPhone a year ago and now I’ve a HTC Hero with Android, guys believe me, it totally changes my life, everytime I say: “Android takes best features of Blackberry, iPhone and Nokia in one OS! Oh yes… phone calls work on Android :P”.

I saw AIR 2 and Flash Player 10.1 on Android in action during 3GSM in Barcelona and … WOW, Adobe is working very hard on that technologies and I test a Flash website not optimize for mobile on FP 10.1 and it works very well.
Future on Android will be very cool for every Flash Platform developers… but…

I’m also owner of a company and I know a little bit my customers or potential ones and if you talk about iPhone or Android they feel an app or game in different way.
I think the big problem is that few people known the powerful of Android OS and Google is not advertising so much it.
People that use Android after iPhone they don’t come back again, they are so happy about OS but if you take a look at carrier’s advertising they prepare great iPhone campaign but I didn’t see any Android campaign or carrier’s advertising dedicated to Android phones.
Adobe made a good job with iPhone packager and Apple close doors to it, if I see from point of view of both I could think that Adobe didn’t develop anything for iPhone and will not do that in the next future, Apple lose tons of possible applications in own store but they preserve their ecosystem, and freelances or IT companies?! Did you ever think to them?!

We are in a particular market moment where everybody is seeking a new way to make business or to invert the trend, those strategies could be useful in 80’s or 90’s not in 2010! Customers are not so happy to bring a company that make an iPhone app, another one for a RIA on web, another for a desktop apps and so on, or maybe one big company that make all but ask tons of money that there aren’t in this historical moment!
Lots of companies and developers were waiting for this new marketing possibility and probably, this possibility could create a win-win situation for everybody.
Companies and developers work more and have new possibilities to make business in a particular market moment, Adobe would be the first company that introduce in the market a technology that is real cross-platform, with AS3 I can develop on web, mobile, desktop apps and so on; probably many people upgrade to Flash CS5 only for iPhone packagers so they have a high ROI; finally Apple would have tons of new developers that will buy their products, probably approach Objective C maybe only to take a look but they will approach it, and they gain more revenue from the store… so everybody win nobody lose.
Probably it’s a poor point of view from a little man, but a win win situation could help in this moment…

I spent a couple of days to understand what is happening between Adobe and Apple but I think that nobody could know and nobody tell us the truth.
For now we can only wait and change our marketing strategy focusing on Android devices, maybe a day we could count more in big companies decisions… or maybe not…

MacWorld but also developer.apple.com

I love Apple so much!

This period is so interesting for MACWORLD and this year I’m so excite to view new iTV, new macbook AIR, new firmware upgrade for iPod Touch (finally I could see emails in my iPod Touch) and new services like rent video! That’s cool.

But also, I suggest to take a look at developer.apple.com, in particular in iPhone section, you must register for FREE and you’ll have a lots of materials about development on iPhone and so on.

There you can also submit your iPhone application and put in apple site. New opportunities ae growing up.
In 2008, I think that we’ll have a lots of changes from AIR to new Macbook AIR (everything we call AIR in 2008, it’s funny!).
I love Apple, I love AIR… and I love 2008!