What is Dribbble?

Dribbble is show and tell for designers, developers and other creatives. Share sneak peeks of your work as “shots” – small screenshots of the designs and applications you’re working on.

The Dribbble API

The Dribbble API has been developed recently to allow developers access to the “shots” that people share. There are a small amount of methods available at the moment, with plans in the future for more advanced API methods such as login and publishing a “shot”.

StarDribbbleLib

StarDribbbleLib is an AS3 library, which was built using StarRequests, that allows developers to connect to the Dribbble API. If you’ve used StarRequests (or StarImageLib) before then you’ll already know how to use StarDribbbleLib. Each of the methods of the Dribbble API have been made available as modular requests.

Modular Requests

Each request in the library implements the same interface, which is displayed below.

The started, progress and failed signals always dispatch the same payload. The started signal doesn’t dispatch a payload, the progress signal dispatches a Number (percentage) and the failed signal dispatches a String (the reason why it failed).

The only signal that changes its payload is the completed signal; this changes depending on the type of request you are making. For example, if you’re requesting shots (PopularShotsRequest) then the payload is of Shots type, whereas if you’re requesting a player (PlayerByIDRequest) then the payload is of Player type, likewise a shot request (ShotByIDRequest) will have a payload of type Shot.

Available API Methods

• DebutShotsRequest( page, amountPerPage )
• EveryoneShotsRequest( page, amountPerPage )
• FollowingShotsByPlayerIDRequest( playerID, page, amountPerPage )
• FollowingShotsByPlayerUsernameRequest( playerUsername, page, amountPerPage )
• PlayerByIDRequest( playerID )
• PlayerByUsernameRequest( playerUsername )
• PlayerShotsByIDRequest( playerID, page, amountPerPage )
• PlayerShotsByUsernameRequest( playerUsername, page, amountPerPage )
• PopularShotsRequest( page, amountPerPage )
• ShotByIDRequest( shotID )

Code examples

Simply download the SWC from the downloads page and use it in your project.

GitHub

The StarDribbbleLib is available on GitHub. Don’t forget you can fork the project and add issues.

Disclaimer

The Dribbble API is in its first draft and therefore isn’t completely defined. This library works with the API in its current form and is no way affiliated with Dribbble. I have been providing feedback to the API developers to help improve the service and will continue to keep this library up to date. The information displayed above is correct at the time of writing.

The concept of making modular requests is one I’ve used in recent projects, and I thought it was time to standardise and release this as a library. Each request revolves around a simple interface:

The aim is to make each request modular, consistent, simple and for it to clean up after itself. By making each request implement an interface, and therefore consistent, it facilitates the creation of useful utilities. With this in mind I thought I’d put together a library of common requests and utilities.

Benefits of using AS3 Signals

The main benefits of using AS3 signals over the traditional AS3 event system (for me) are that signals can be defined in an interface and a signal can free itself up for garbage collection by removing all of its listeners.

By defining the signals in an interface we can be certain that any implementation of the interface implements the defined signals; in this case each request much have an implementation of the started, progress, completed and failed signals. The advantage of this is that any utility class we create knows the signals that each request can dispatch, because they are enforced by the interface.

Another advantage of using AS3 signals in this library is the ability to remove all of the listeners of a particular signal at once, which is another feature not available to us when using the traditional event model. The benefit of using this method is that once a request has dispatch its failed or completed signal it can then confidently free itself up for garbage collection without worrying if all listeners have been removed (we all know that not removing event listeners is a common cause of memory leaks!).

As a side note, without the AS3 signals library I wouldn’t have thought of requests in terms of interfaces and thus created this library!

StarRequests

The initial release of StarRequests includes some common load requests, a batch utility and a queue utility. For now, I’ve only included the common requests that I’ve used in recent projects, which include loading an XML file, a Bitmap and BitmapData. I plan to add more varied requests as times go on as there’s no restriction on the types of requests that can be implemented. Heck, you could have a move request that moves a Sprite to a specified position. The point is that as long as a request implements the correct interface it doesn’t matter what the request does. Other ideas for requests include File I/O requests, database requests, etc.

The library includes a queue utility, which allows you to continuously add requests to the queue utility and it will execute them in the order they are added.  This utility could prove particularly useful when creating applications that are continuously updated via external APIs, such as a Twitter client.

The other utility that’s included initially is a batch utility that allows you to set up a batch of requests to be sent together, one after the other. The clever thing about this utility is that it also implements the request interface, so you can create a batch of requests that can then be included in another batch or added to a queue. Without defined interfaces, and the use of AS3 signals, implementing this functionality using the traditional event model would have been a lot more complex!

Timesaver

Not only are the requests included in StarRequests modular and consistent they also help you save time when coding. The idea being that not only do StarRequests promote a good use of polymorphism, but they also require less lines of code to use. The following snippet shows loading an XML file using normal loading techniques, and cleaning that request once it’s complete.

And now look at the same functionality using StarRequests.

It’s much quicker to write the code to load XML files using StarRequests, and it takes out the complexities of cleaning up for you! Now imagine trying to create a queue for loading XML files in the normal way, or a batch process, it would be complicated but StarRequests makes that really easy for you.

Using StarRequests with Robotlegs

I’m almost exclusively using Robotlegs with AS3 signals for all Flash Platform projects and so I wanted to make sure that StarRequests fits in with my current workflow. I think it does. Each request is completely modular, fitting in with Robotlegs’ philosophy, and therefore can easily incorporated into a Robotlegs project. It’s even possible to set up a centralised request queue service for your application so every service sends their requests to the centralised queue to be sent.

Using StarRequests to build API libraries

Using StarRequests to build API libraries could prove to be very powerful. Imagine a Twittier API library built using StarRequests; you could have a login request, update status request, get friends request and a get timeline request all of which could return strongly typed responses in their completed signals, and could be added to queues. This would be much more efficient than expecting the user to manual parse each response. Furthermore, if you look at the code examples above you’ll see how easy the API for the library could be!

Another advantage to using StarRequests is that, because each request is modular, the compiler only needs to include the requests that are used as opposed to the entire library (usually an API library is encompassed in one class). Separating the requests into their own classes can help to reduce the final file size of the compiled application.

Download StarRequests

The StarRequests library is available to download from GitHub as both the source code and a SWC file. It can be used in any AS3 project whether it uses the Flex framework or not; so you have no excuse not to try it out!

Feedback

Please feedback on any issues or requests you have using the issue tracking at GitHub and I will endeavour to solve the issue or implement your request (if I feel it fits in with the library).

Todo list

• Add ASDoc comments to the library Update: The library now has ASDocs!
• Implement unit testing
• Add more common requests/utilities
• (Possibly) create API libraries for common services (Twitter, Flickr, etc) using StarRequests

Disclaimer

This is the first release of StarRequests and thus as improvements and additions are made the structure of the library may change slightly.

Robotlegs has been gaining a lot of ground over the last few months within the Flash community, and so I thought it was about time I gave it a shot. This post includes some of the resources I found really useful when getting started with the framework.

What is Robotlegs?

If you haven’t heard of Robotlegs before there’s a good explanation on their website:

Robotlegs is a pure AS3 micro-architecture (framework) with a light footprint and limited scope. Simply put, Robotlegs is there to help you wire your objects together. It provides the glue that your application needs to easily function in a decoupled way. Through the use of automated metadata based dependency injection Robotlegs removes boilerplate code in an application. By promoting loose coupling and avoiding the use of Singletons and statics in the framework Robotlegs can help you write code that is highly testable.

Robotlegs was heavily influenced by PureMVC, another pure AS3 micro-architecture framework, therefore if you are familiar with the roles and architecture PureMVC has then you will find Robotlegs easy to pick up. You will also notice that there’s a helluva lot less boiler-plate code in Robotlegs!

Where should I start?

A lot of people recommend getting started with the Robotlegs best practices document and whilst this is a good place to start it can be really overwhelming, even for someone familiar with frameworks, so I’d recommend watching the following video tutorials first.

• RobotLegs Hello World Video Tutorial by John Lindquist
• Robotlegs MVCS: Walkthrough of an AIR Twitter Client by Joel Hooks

Once you watched the videos you’ll have an rough understanding of each of the roles within Robotlegs; this is a great time to check out the best practices document and build on that knowledge. If you then watch the video tutorials again you should really understand exactly what’s going on!

What’s next?

Start using it! You can download the latest release version from the Robotlegs website or, if you’re familiar with GitHub, you can fork the repository. There’s some really useful demos available on GitHub too, which include examples of using the framework with Flash, modular development and the integration of services such as Flickr and GoogleMaps.

Don’t forget, if you’re really stuck you can always ask for help!

Update: The source code is now available.

]]> http://markstar.co.uk/blog/2010/flashplatform/actionscript/hype-shapelayout-experiment/feed/ 4 http://markstar.co.uk/blog/2010/flashplatform/actionscript/filereference-woes-on-macs/ http://markstar.co.uk/blog/2010/flashplatform/actionscript/filereference-woes-on-macs/#comments Wed, 17 Feb 2010 22:37:02 +0000 Mark http://markstar.co.uk/blog/?p=221 Today I found out (the hard way) that there are several issues that can occur when trying to upload files using the FileReference class on MACs.

FileReference.type always returns null

It’s often that case that you want to restrict the file type the user can upload, or perform different processes depending on the type of file uploaded. However the type property of a FileReference object always returns null on MACs; to work around this you must get the file extension manually. To do this you can use the following code (it’s good practice to always convert the file extension to lower case before working with it).

Server script must return data

When uploading files using the FileReference class you may experience the upload getting stuck at 100% progress and never firing the Event.COMPLETE event. This will only happen on the MAC and it’s because Flash doesn’t realise that the file has finished uploading until it gets a response from the server. I don’t why this is implemented differently on the different operating systems, but to overcome this problem your server script must write something to the page (it can just be a space character!).

Parameters must be added using URLVariables

You may want to pass URL parameters to the server script when uploading a file, and in our case the parameters and the URL were passed as one string via Flash vars. MACs don’t like this. So instead we have to pass the parameters using the data property of the URLRequest; to do this you need to use the URLVariables class. The following code snippet shows you how.

Feedback!

Has anyone else come across any weird quirks or handy hints when working with the FileReference class? Please leave a comment if you have and I’ll add it to the post!

This tutorial will build upon the Introduction to using the StatefulToolkit example; it will add the ability to utilize the Clipboard in our example. The example will use the ClipboardUtil, which is a utility class included in the toolkit that allows the user to copy and paste objects using the clipboard. The example application will build upon the last one; it will allow the user to position four circles, to save and load the state of the circles (i.e. where the circles are positioned) and to copy and paste the circles. The example can be seen here and source files are available.

Preparation

Before you being implementing this tutorial make sure you have the latest version of the StatefulToolkit SWC, and that you’re project is set to target Flash Player 10 (if you want to target FP9, simple replace the Vector with an array in the circle container) . This tutorial also uses Keith Peter’s Minimal Comps component set to create the buttons in the application so you may want to grab the SWC for that too, but you can use your own buttons if you prefer. Both SWC files are included in the available flex project.

Creating the Statable Object

The original circle class could be left as it is, however it would be helpful to know which circle we have selected, so we know which one we are adding to the clipboard. In order to do show this we will add two new methods to the Circle; select and deselect. Each method draws the circle in a different colour. The full contents of this class can be seen below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

package couk.markstar.examples.ui
{
	import couk.markstar.statefultoolkit.core.IStatable;
 
	import flash.display.Sprite;
 
	public class Circle extends Sprite implements IStatable
	{
		/**
		 * The constructor draws the circle with a grey outline
		 */
		public function Circle():void
		{
			super();
 
			drawCircle( 0x999999 );
		}
 
		/**
		 * Change the display of the circle to show it's selected
		 */
		public function select():void
		{
			drawCircle( 0x990000 );
		}
 
		/**
		 * Change the display of the circle to the default
		 */
		public function deselect():void
		{
			drawCircle( 0x999999 );
		}
 
		/**
		 * Retrieve the state of the circle storing the x and y properties
		 *
		 * @return The current state of the circle as an XML string
		 */
		public function retrieveState():String
		{
			var xml:String = '<object>';
			xml += '<x>' + x + '</x>';
			xml += '<y>' + y + '</y>';
			xml += '</object>';
			return xml;
		}
 
		/**
		 * Set the state of the circle by getting it's x and y values from the xml
		 *
		 * @param state The new state of the circle
		 */
		public function setState( state:XML ):void
		{
			x = Number( state.x );
			y = Number( state.y );
		}
 
		/**
		 * Used internally for creating the circles' graphics
		 * 
		 * @param lineColor The color of the line around the circle
		 */
		protected function drawCircle( lineColor:uint ):void
		{
			graphics.clear();
			graphics.lineStyle( 1, lineColor )
			graphics.beginFill( 0xFFFFFFF );
			graphics.drawCircle( 0, 0, 10 );
			graphics.endFill();
		}
	}
}

Creating the Container

Previously the circle container implemented the IStatable interface but it now implements the IStateContainer interface, because it needs to interact with the ClipboardUtil. The IStateContainer interface inherits functionality from the IStatable interface, so the circle container is still required to have the methods setState and retrieveState, but it is also required to have the methods addObjectByState, hasSelectedObject and retrieveSelectedObject.

The addObjectByState method was already implemented in the previous function, but was used internally, now it will be used by the ClipboardUtil when the user is pasting an object. In order to implement hasSelectedObject and retrieveSelectedObject we must add to the circleDownListener. After setting the _currentCircle we can call the select method of the circle to show that it has been selected. Then, before we set the _currentCircle to the one the user has mouse downed, we must deselect the old one by calling it’s deselect method. The full contents of this class can be seen below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

package couk.markstar.examples.ui
{
	import couk.markstar.statefultoolkit.core.IStatable;
	import couk.markstar.statefultoolkit.core.IStateContainer;
 
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;
 
	public class CircleContainer extends Sprite implements IStateContainer
	{
		protected var _circles:Vector.<Circle>;
 
		protected var _currentCircle:Circle;
		protected var _dragOffset:Point;
 
		/**
		 * The constructor the vector containing the circles shown in the container
		 */
		public function CircleContainer():void
		{
			_circles = new Vector.<Circle>();
			super();
		}
 
		/**
		 * Retrieve the selected object
		 *
		 * @return The selected object
		 */
		public function retrieveSelectedObject():IStatable
		{
			return _currentCircle;
		}
 
		/**
		 * Check whether the container has a selected object
		 *
		 * @return Boolean denoting if the container has a selected object
		 */
		public function hasSelectedObject():Boolean
		{
			return( _currentCircle ) ? true : false;
		}
 
		/**
		 * Retrieve the state of the container and all contained circles
		 *
		 * @return The current state of the container, including the state's of all circles
		 */
		public function retrieveState():String
		{
			var xml:String = "<container>";
 
			for( var i:uint = 0; i < _circles.length; i++ )
			{
				xml += _circles[ i ].retrieveState();
			}
			xml += "</container>";
			return xml;
		}
 
		/**
		 * Add an object to the container by it's state.
		 *
		 * @param state The state of the object to add, in this case the circle
		 */
		public function addObjectByState( state:XML ):void
		{
			var circle:Circle = new Circle();
			circle.addEventListener( MouseEvent.MOUSE_DOWN, circleDownListener );
			circle.setState( state );
			addChild( circle );
			_circles[ _circles.length ] = circle;
		}
 
		/**
		 * Set the state of the container by adding all circles contained within the state. The container will be cleared first.
		 *
		 * @param state The new state of the container
		 */
		public function setState( state:XML ):void
		{
			clearContainer();
 
			for( var i:uint = 0; i < state.object.length(); i++ )
			{
				addObjectByState( XML( state.object[ i ] ) );
			}
		}
 
		/**
		 * Clear the container of all circles
		 *
		 */
		protected function clearContainer():void
		{
			for( var i:uint = 0; i < _circles.length; i++ )
			{
				removeChild( _circles[ i ] );
			}
			_circles.splice( 0, _circles.length );
		}
 
		/*
		 * The following methods are all event listeners to enable the circles to be dragged
		 */
		protected function circleDownListener( e:MouseEvent ):void
		{
			// Deselect the current circle (if there is one)
			if( _currentCircle )
			{
				_currentCircle.deselect();
			}
 
			_currentCircle = Circle( e.currentTarget );
			_currentCircle.select();
 
			stage.addEventListener( MouseEvent.MOUSE_MOVE, circleMouseMoveListener );
			stage.addEventListener( MouseEvent.MOUSE_UP, circleMouseUpListener );
 
			_dragOffset = new Point( _currentCircle.x - mouseX, _currentCircle.y - mouseY );
		}
 
		protected function circleMouseMoveListener( e:MouseEvent ):void
		{
			_currentCircle.x = mouseX + _dragOffset.x;
			_currentCircle.y = mouseY + _dragOffset.y;
			e.updateAfterEvent();
		}
 
		protected function circleMouseUpListener( e:MouseEvent ):void
		{
			stage.removeEventListener( MouseEvent.MOUSE_MOVE, circleMouseMoveListener );
			stage.removeEventListener( MouseEvent.MOUSE_UP, circleMouseUpListener );
		}
	}
}

Creating the Document Class

The document class for this application very similar to the previous one. It was already responsible for creating the save and load buttons, creating the circle container, registering the circle container with the FileUtil and initialising the container with a default state. The only thing we need to add is the registration of the circle container with the ClipboardUtil. The full contents of this class can be seen below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

package {
	import com.bit101.components.PushButton;
 
	import couk.markstar.examples.ui.CircleContainer;
	import couk.markstar.statefultoolkit.utils.ClipboardUtil;
	import couk.markstar.statefultoolkit.utils.FileUtil;
	import couk.markstar.statefultoolkit.utils.IClipboardUtil;
	import couk.markstar.statefultoolkit.utils.IFileUtil;
 
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldType;
 
	[SWF( backgroundColor='#F3F3F3',frameRate='30',width='592',height='300' )]
	public class ClipboardExample extends Sprite
	{
		protected var _saveButton:PushButton;
		protected var _loadButton:PushButton;
 
		protected var _circleContainer:CircleContainer;
		protected var _fileUtil:IFileUtil;
		protected var _clipboardUtil:IClipboardUtil;
 
		/**
		 * Create the save and load buttons to save and load the state. Then create the circle container and register it with the FileUtil.
		 * By registering the container with the FileUtil it means the FileUtil knows which statable object to retrieve and set the state on
		 * when save and load are executed.
		 * Register the container with the ClipboardUtil so it can capture keyboard shortcuts.
		 */
 
		public function ClipboardExample():void
		{
			// PushButton( parent, x, y, label, MouseEvent.CLICK event listener )
			_saveButton = new PushButton( this, 196, 275, "Save", saveClickListener );
			_loadButton = new PushButton( this, 295, 275, "Load", loadClickListener );
 
			_circleContainer = new CircleContainer();
 
			_fileUtil = new FileUtil();
			_fileUtil.registerObject( _circleContainer );
 
			// ClipboardUtil requires reference to the stage so it can manage the keyboard shortcuts
			_clipboardUtil = new ClipboardUtil( stage );
			_clipboardUtil.registerContainer( _circleContainer );
 
			addChild( _circleContainer );
 
			initDefaultState();
		}
 
		protected function saveClickListener( e:MouseEvent ):void
		{
			_fileUtil.save();
		}
 
		protected function loadClickListener( e:MouseEvent ):void
		{
			_fileUtil.load();
		}
 
		/**
		 * Initialise the circle container with four circles
		 */
		protected function initDefaultState():void
		{
			var defaultState:String = '<container>';
			defaultState += '<object><x>196</x><y>100</y></object>';
			defaultState += '<object><x>196</x><y>200</y></object>';
			defaultState += '<object><x>396</x><y>100</y></object>';
			defaultState += '<object><x>396</x><y>200</y></object>';
			defaultState += '</container>';
 
			_circleContainer.setState( new XML( defaultState ) );
		}
	}
}

Testing the application

You will now be able to run the application and test that the state of the application can be saved and loaded and that you can copy and paste circles. The structure of the project can be seen below. If you do have any questions about the tutorial, or constructive criticism on the toolkit, don’t hesitate leave a comment below.

Compiled Application

Once you have compiled the application, you should get the same output as below. Try copying and pasting the circles, you will also be able to save and load the state like before.

Source Files

Source files are available from GitHub, under the heading ClipboardExample.

Getting Started

The HYPE framework lowers the barrier for people to begin playing with Flash by offering a lot of functionality out-of-the-box. It’s really easy to get started with HYPE, just download the framework from the homepage. They’ve even put together a nice set of installation and setup instructions, which shows you everything from how to install the files to adding basic functionality. Branden has also posted a Halloween themed tutorial screencast that shows how to use some of the core functionality of HYPE.

There’s a plethora of examples, with code, on the site too. The examples vary from demonstrating sound analysis, object pooling and swarm behaviours amongst others.

Extending HYPE

Branden has posted a video that shows the developer through the various packages within the framework. It’s really easy to create your own extensions to the framework, and I’m sure that in a few months we’ll see a lot of developers posting their own rhythms and layouts.

My Experiment

I’ve been looking forward to playing with the HYPE framework since Joshua and Branden started tweeting about it. I love the idea of them doing the leg work for us, allowing us to just play with code. One of the areas I’ve always been interested in is audio visualizers, and what’s really cool is that HYPE contains sound analyzers out-of-the-box. So rather than me spending days getting bogged down in code, I was able to put together the following simple visualiser in a couple of hours.

Click on the image above to see it in action, as soon as I can find a decent code plugin for wordpress I’ll post the source code.

I hope HYPE will gain a lot of ground amongst the community, it’s a brilliant framework with a great aim and something I’ll be playing with more in the future.

Downloading the plug-in

There is a version of the plug-in available here, but I haven’t installed it from there. Below I’ve included instructions on how to install the plug-in using the software updates feature in Flex Builder.

Installing the plug-in via Software Updates

1. Launch Flex Builder 3 and go to Help>Software Updates>Find and install…
2. Check the Search for new features to install option and click Next
3. Now create a New Remote Site…
4. Enter the following URL for the remote site and give it a name, such as Flex Code Formatter and click Finish:
   http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite
5. Browse the tree to find the code formatter plugin ( FlexPrettyPrintCommandFeature Feature 0.6.27 ) and click Next.
6. Accept the license agreement and click Next then Finish.
7. Click Install All and restart Flex Builder 3. The plug-in is now installed and ready to use.

Using the plug-in

Once Flex Builder has restarted you should notice a new toolbar with some black and white icons. This toolbar gives you access to the following features:

• Generating ASDoc comments for the file
• Generating ASDoc comment for the current element
• Format code
• Indent code
• Rearrage the code of the file

There will also be a shortcut key set up for formatting code; the default is CTRL+SHIFT+F.

Editing the Preferences

To edit the preferences of the plugin go to Window>Preferences. Then browse to Flex Formatting using the tree navigation on the left. There are a vast array of formatting and restructuring options available, so you should be able to find something to suit the way you code. It is also worth browsing the navigation tree to show the options for Auto Format; this will give you the option to format or indent code when you save.