blackcj.com » Flash http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Thu, 15 Dec 2011 01:01:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 Publishing Apps to iOS, Android and BlackBerry with AIR http://www.blackcj.com/blog/2011/02/02/publishing-apps-to-ios-android-and-blackberry-with-air/ http://www.blackcj.com/blog/2011/02/02/publishing-apps-to-ios-android-and-blackberry-with-air/#comments Wed, 02 Feb 2011 20:44:19 +0000 Chris Black http://www.blackcj.com/blog/?p=942 Using Flash Builder Burrito and the Flash IDE you can export your ActionScript projects to three mobile platforms without any change in code! Let's take a look at how to make this possible. Before we get started, here is a video with one of my demo apps running on all three devices:

Multi-screen:
The variety of screen resolutions and DPIs can be the hardest part of building a mobile app. When building an AIR app for mobile devices you have two important properties Capabilities.screenResolutionX(Y) and Capabilities.screenDPI. Using stage.stageWidth on mobile devices does not work the way you would expect it to. If you set up your application in Flash to have a width of 480 and a height of 800, the stageWidth and stageHeight will return these numbers even if the screen is smaller. Another thing to note is that the iOS packager currently targets 320x480 even though many of the iOS devices run 640x960. We'll account for that by adding a screenResolution check.

In my application when a device has lower than 400 pixels in width I drop down the paint brush width. When the device has higher than 400 pixels I increase the size of the menu accordingly. A better approach would be to use the Capabilities.screenDPI for this calculation rather than just the screenResolution. All of your view components should be able to render at different DPIs and resolutions. When you know this from the start it is easy to build into the code. Here is an example:

PLAIN TEXT
Actionscript:
  1. if(Capabilities.screenResolutionX <400){
  2.     _canvas = new SimplePaint(Capabilities.screenResolutionX, Capabilities.screenResolutionY-85);
  3.     _canvas.ratio = 0.66;
  4. }else{
  5.     _canvas = new SimplePaint(Capabilities.screenResolutionX, Capabilities.screenResolutionY-125);
  6.     _menuBar.scaleX = _menuBar.scaleY = 1.5;
  7. }

Notice how we are changing the size ratio of the brushes for smaller screens with a lower DPI. For larger screens we are increasing the size of the menu. This makes the application appear the same to the end user even when the app is running at 480x800 on the Android and 320x480 on the iOS! This could be improved to use the actual DPI value but the basic idea is there.

Multi-touch
This is the easy part. Use the Multitouch.maxTouchPoints to determine if the device supports touch. If it does than add touch listeners, if the device has 0 touch points add mouse event listeners. Don't be that person that only codes for one device. With only a few extra lines of code you app will work on desktop and mobile. This also makes debugging much easier!

PLAIN TEXT
Actionscript:
  1. if(Multitouch.maxTouchPoints> 0){
  2.     Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
  3.     _canvas.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
  4.     _canvas.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
  5.     _canvas.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
  6. }else{
  7.     _canvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseBegin);
  8.     _canvas.addEventListener(MouseEvent.MOUSE_MOVE, onMyMouseMove);
  9.     _canvas.addEventListener(MouseEvent.MOUSE_UP, onMouseEnd);
  10. }

Wasn't that easy? One thing to note is that TOUCH_END was not always dispatched, especially when you start using 3+ touch points. To work around this add a timer into your class that checks to see if a TOUCH_MOVE event has been called. The TOUCH_MOVE event is dispatched even when the user has stopped moving and only stops when the touch has ended. As a backup, check every half a second or so to make sure the specific touch point id is still moving.

Setup:
To setup your workspace to export to all three platforms you'll need to create a ActionScript only Mobile project in Flash Builder Burrito. Create an FLA in the source folder that uses the runnable AS file as its base. Create your assets in the FLA file, export them into a SWC to be used for FB and mark them as run time compiled so they work with the Flash IDE. From here you can export to all three devices without changing any files. Life is good :)

Conclusion:
In just 17 lines of code and a little setup we've got our multi-screen, multi-touch application ready to go! Make sure to add your event listeners for Android to close the app when the user hits back or home. This entire painting application is less than 400 lines of code (~4KB compiled), was built from scratch in less than 12 hours and is easily maintainable across multiple platforms. Performance is great and native APIs are easy to use. My only complaints are that the file size for the iOS is rather large and the iOS exporter doesn't support the Camera API yet. Outside of that, this is the best way to build cross platform apps.

Wet Paint on the Web:

Wet Paint Flash application.

Get Adobe Flash player

Porting to the web required changing 3 lines of code. To get these source files running on mobile devices change the _webMode value to false and remove the width / height from the SWF declaration. I also had to comment out the cacheAsBitmapMatrix to get it running on the web. Still very easy to convert!

Source files.

Enjoy!

]]> http://www.blackcj.com/blog/2011/02/02/publishing-apps-to-ios-android-and-blackberry-with-air/feed/ 5 Cut the Drama. Flash is Here to Stay. http://www.blackcj.com/blog/2010/02/01/cut-the-drama-flash-is-here-to-stay/ http://www.blackcj.com/blog/2010/02/01/cut-the-drama-flash-is-here-to-stay/#comments Tue, 02 Feb 2010 05:00:27 +0000 Chris Black http://www.blackcj.com/blog/?p=682 I really wish that Steve Jobs would quit misinforming the public. It amazes me that Apple and Adobe's childish feud is even news worthy. I've had a number of people tell me that I should start looking for a new profession because HTML5 is the future and Flash is dead (link). All of them iPhone users and each of them were just tech savvy enough not to know what the hell they were talking about. Here is ten minutes worth of research to show Steve Jobs' opinion on the matter is a bit more like a leap of blind faith.

What does this graph tell us?
Well, even through a recession, ActionScript job growth has held strong. Objective C on the other hand looks very unstable.

And this one?
Nobody seems to be able to make up their mind about how much to pay Objective C programmers. Is it worth more than HTML or not? Would you work in a development language that had the potential for a 50% pay cut if you lost your job?


http://www.hiten.net/wilberwind/wordpress/?p=826

How about this chart?
I would like someone to point out the web development language that died. Anyone? Oh wait... none of them have ever died! When somebody comes out with something better, the competition does the same. Not to mention that it took AJAX nearly ten years to catch on. As much as some people hate PHP, it is still around. As much as some people hate Microsoft, .NET is still kicking. As much as Steve Jobs hates Adobe, Flash is here to stay.

Do I hate HTML5 and think it will fail? No. I hope it succeeds. The reason I code ActionScript is because it is widely supported and cutting edge. HTML4 wasn't enough for me. When HTML5 has a 3D engine, physics support, frameworks, blogs of examples, full browser support, and a great IDE, I'll strongly consider it. Until then, please don't tell me I should look for a new profession.

*Update 02/02/2010 @ 7am in response to a comment below*

Analysis:
Perl seems to be holding strong. I wish the data went back further, was there ever a significant decline? They still have a pretty big market for jobs with a steady incline. Coldfusion jobs have not gone up but have also not really gone down over the past 5 years. That's pretty good job security for 'dead' languages.

Looks like Silverlight has seen nothing but positive growth over the past few years. Was it two years ago Microsoft and .NET developers where predicting the death of Flash due to Silverlight? Looks like there is enough market for both. If the web wants interactive maybe there is room for Flash, HTML5, and Silverlight to all grow over the next 5 years. Based on the data at hand, that would be my prediction.

]]> http://www.blackcj.com/blog/2010/02/01/cut-the-drama-flash-is-here-to-stay/feed/ 10 Compress Transparent PNGs with Flash http://www.blackcj.com/blog/2009/07/24/compress-transparent-pngs-with-flash/ http://www.blackcj.com/blog/2009/07/24/compress-transparent-pngs-with-flash/#comments Fri, 24 Jul 2009 14:52:48 +0000 Chris Black http://www.blackcj.com/blog/?p=465 Do you use transparent PNGs in Flash, Flex or AIR? Want to cut your application file size in half?

Problem:
Embedding transparent PNGs dramatically increases the size of your Flash, Flex and AIR applications. Photoshop and Fireworks dot not have any compression available for transparent PNGs (that I am aware of).

Solution:
Import your PNGs into Flash, give them a linkage id, and export the file as a SWF. Make sure to set your compression level in the publish settings (default is 80%). Using this method, I was able to cut the file size in half for a number of applications.

PLAIN TEXT
Actionscript:
  1. [Embed(source="/assets/images/images.swf#myImage")]
  2. private var MyImage:Class;
  3. private var myImage:Sprite = new MyImage() as Sprite;

rather than...

PLAIN TEXT
Actionscript:
  1. // Don't use this one ;)
  2. [Embed(source="/assets/images/myImage.png")]
  3. private var MyImage:Class;
  4. private var myImage:BitmapAsset = new MyImage() as BitmapAsset;

It is also much easier to manage your external assets from a SWF. Designers can set up a nice slice sheet using the stage in Flash. Much easier than managing tons of small PNGs in folders everywhere.

Image Manager

In addition to using the SWF it can also be very useful to set up an ImageManager to serve out images to your application. This prevents having to change code in multiple places to update the same image reference.

Image Manager Class:

PLAIN TEXT
Actionscript:
  1. package com.cb.utils
  2. {
  3.     import flash.display.Sprite;
  4.    
  5.     public class ImageManager
  6.     {
  7.         public static const MY_IMAGE_ID:String = "my_image_id";
  8.        
  9.         [Embed(source="/assets/images/images.swf#myImage")]
  10.         public static var MyImage:Class;
  11.  
  12.         public static function getMovie(id:String):Sprite
  13.         {
  14.             var result:Sprite;
  15.             switch(id){
  16.                 case MY_IMAGE_ID:
  17.                 default:
  18.                     result = new MyImage();
  19.                 break;
  20.             }
  21.             return result;
  22.         }
  23.     }
  24. }

To access an image from the manager class just make this call:

PLAIN TEXT
Actionscript:
  1. var myImage:BitmapAsset = ImageManager.getImage(ImageManager.MY_IMAGE_ID);

Importing PNGs into Flash

And for those of you that need a refresher on importing PNGs into Flash and setting up linkage IDs:

File->Import->Import to Stage...

File->Import->Import to Stage...

Right click on the image. Select 'Convert to Symbol'...

Step 2

Finally...

Step 3

Enjoy!

Disclaimer: It may be obvious but you must be using transparent PNGs in your app to see a decrease in file size ;) Most of the apps I work on have lots of transparent PNGs!

]]> http://www.blackcj.com/blog/2009/07/24/compress-transparent-pngs-with-flash/feed/ 2 Registration Open for MN.swf Camp 2009 http://www.blackcj.com/blog/2009/03/05/mnswf-camp-2009/ http://www.blackcj.com/blog/2009/03/05/mnswf-camp-2009/#comments Thu, 05 Mar 2009 22:15:44 +0000 Chris Black http://www.blackcj.com/blog/?p=257 MN.swf Camp presented by Flashbelt

MN.swf Camp presented by Flashbelt

Who Should Attend?
Anyone interested in Flash, Flex, ActionScript or Adobe AIR.

What is MN.swf Camp?
A one-day event focused on connecting the local developer community and providing education on Flash Platform technologies. All for only $40!

When is it?
Monday, April 6, 2009 from 9:00am - 5:00pm

How do I register?
Go to http://mnswf.com/camp/ and register today!

Where will it be?
Minneapolis Central Library, 300 Nicollet Mall, Minneapolis, MN 55401 (Google Maps)

Speakers:
Jason Grey, Brad Bollinger, Chris Black, Nate Pacyga, Danny Patterson, Scott Langeberg, Wade Arnold, Jonathan Doklovic and Dustin Tauer

]]> http://www.blackcj.com/blog/2009/03/05/mnswf-camp-2009/feed/ 1 Flashbelt 2009 Tickets http://www.blackcj.com/blog/2009/01/13/flashbelt-2009-tickets/ http://www.blackcj.com/blog/2009/01/13/flashbelt-2009-tickets/#comments Tue, 13 Jan 2009 17:37:33 +0000 Chris Black http://www.blackcj.com/blog/?p=176

The first 100 Flashbelt Tickets are going for a sale price of $279.

Flashbelt is a yearly conference held in Minneapolis, Minnesota and focuses on RIA development.

Confirmed speakers include:
James Patterson (presstube), Hoss Gifford, Mario Klingemann (quasimondo),
Joa Ebert, Seb Lee-Delisle (plug-in media), Drew Trujillo (dr. woohoo),
Lisa Larson-Kelley, Geoff Stearns (youtube), Jeremy Thorp (blprnt.com),
Koen DeWeggheleire, Veronique Brossier (v-ro.com), Stacey Mulcahey, Julian
Dolce (fuel industries), Robert Reinhardt, Rich Shupe, Niqui Merret, and
Andre Michelle...with more on the way.

For more information about Flashbelt check out the webpage: Flashbelt

]]> http://www.blackcj.com/blog/2009/01/13/flashbelt-2009-tickets/feed/ 2 PSDTemple: Turn Your PSD’s into xHTML http://www.blackcj.com/blog/2008/12/01/psdtemple-turn-your-psds-into-xhtml/ http://www.blackcj.com/blog/2008/12/01/psdtemple-turn-your-psds-into-xhtml/#comments Tue, 02 Dec 2008 02:55:20 +0000 Chris Black http://www.blackcj.com/blog/?p=122 This is an ActionScript blog, however, I'm going to show my support for a very good friend of mine (and very successful entrepreneur) who has started: PSDTemple. A service that allows designers to turn their PSDs into functional user interfaces. Great price and great service deserves a bit of attention :) Thank you for understanding the off topic post. If all goes well PSDTemple will soon be creating Flash websites as well. Which would definitely make my day!

http://www.psdtemple.com/

]]> http://www.blackcj.com/blog/2008/12/01/psdtemple-turn-your-psds-into-xhtml/feed/ 0 FlexFeed: Twitter RSS Feeds in Flex http://www.blackcj.com/blog/2008/10/04/flexfeed-integrate-twitter-rss-feeds-into-flex/ http://www.blackcj.com/blog/2008/10/04/flexfeed-integrate-twitter-rss-feeds-into-flex/#comments Sat, 04 Oct 2008 20:29:12 +0000 Chris Black http://www.blackcj.com/blog/?p=3 Using Flex and PHP it is possible to integrate Twitter RSS feeds into a Flex web page. Twitters cross domain policy (which is used by Flash) does not allow external resources to access feeds. Using PHP as a medium to the data, Flex can access the feed and display all contents. This technique can be used to access any xml data that Flex may not have access to.

Let's start by creating an HTTPService:

PLAIN TEXT
HTML:
  1. <mx:HTTPService
  2.     id="rssParse"
  3.     url="http://twitter.com/statuses/user_timeline/16584421.rss"
  4.     result="processResult(event)"
  5.     resultFormat="e4x" />

Next we will create the function to process the results:

PLAIN TEXT
Actionscript:
  1. import mx.collections.ArrayCollection;
  2. import mx.rpc.events.ResultEvent;
  3.  
  4. [Bindable]
  5. private var _rssResults:ArrayCollection;
  6.  
  7. // Define and use atom namespace.
  8. private namespace atom = "http://www.w3.org/2005/Atom";
  9. use namespace atom;
  10.  
  11. private function processResult(event:ResultEvent):void
  12. {
  13. var xmlList:XMLList = event.result.channel.item as XMLList;
  14. for each(var item:XML in xmlList){
  15. var myDate:String = item.pubDate;
  16. myDate = myDate.slice(0,22);
  17. _rssResults.addItem({title: item.title, date: myDate});
  18. }
  19. }
  20.  
  21. private function init():void
  22. {
  23. _rssResults = new ArrayCollection();
  24. rssParse.send();
  25. }

Now lets add the mxml to display the content:

PLAIN TEXT
HTML:
  1. <mx:VBox width="400" height="600" horizontalAlign="center"> 
  2.     <mx:Label styleName="subTitleText" text="Twitter Feed:" fontWeight="bold" fontSize="16"/>
  3.     <mx:VBox height="500" width="400" verticalScrollPolicy="auto" horizontalScrollPolicy="off" horizontalAlign="center">
  4.         <mx:Repeater id="twitter" dataProvider="{_rssResults}">
  5.             <mx:Text textAlign="center" width="300" text="{twitter.currentItem.date}"/>
  6.             <mx:Text textAlign="center" width="300" text="{twitter.currentItem.title}"/>
  7.         </mx:Repeater>     
  8.     </mx:VBox> 
  9. </mx:VBox>

After testing the application locally everything works great! But wait... what about the PHP code? Well first export a release build of the application and upload it to a web server for testing.

Here is the error that you should recieve:
[RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" faultDetail="Destination: DefaultHTTP"]

To get around this let's create a php file that collects the twitter data:

PLAIN TEXT
PHP:
  1. $twitter_feed = 'http://twitter.com/statuses/user_timeline/16584421.rss';
  2. $rawfeed = @file_get_contents($twitter_feed);
  3. print $rawfeed;

Now we need to update our HTTPService request to pull from the new php file:

PLAIN TEXT
HTML:
  1. <mx:HTTPService
  2.     id="rssParse"
  3.     url="php/twitter.php"
  4.     result="processResult(event)"
  5.     resultFormat="e4x" />

Now everything works great!

Check out this link to view a functional example:
http://www.blackcj.com/FlexFeed/index.html

And the source files:
http://www.blackcj.com/FlexFeed/srcview/index.html

Please leave a comment if you have any questions, comments, or suggestions. Thanks!

]]> http://www.blackcj.com/blog/2008/10/04/flexfeed-integrate-twitter-rss-feeds-into-flex/feed/ 11