Download: AS 2.0 star rating class
April 19, 2006
Just wanted to quickly post an as 2.0 class. It’s a rating component which can display any number of customizable labels and rating items. In the example below I’ve used the common stars as rating items but you could use any other graphics (just go into the fla, modify the ObjectRaterItem symbol and put in your own graphics).
The ObjectRater class has an init method that accepts the labels as an array and a setRating method that accepts two parameters: totalRating and numRatings (e.g. if you got the totalRating and numRatings via the getter methods and stored it somewhere you can initialize the ObjectRater later with those two values). If you click on a star the rating is automatically added but you could also provide another button, combo box or whatever and call the rate method manually.
The class fires a few events and has some getter methods to display all rating infos (rating, roundedRating, totalRating, numRatings…). Just look at the demo file. You can download it in the download section.
[Additional Note: It’s currently compiled for Flash Player 8 as there’s a DropShadowFilter in the ObjectRaterItem class. If you want to compile it for Flash Player 7 just remove the DropShadowFilter in the init method…]
Filed under: Flex/AS3
Hi, I like the idea of the component – but the functionality is a bit counter-intuitive – I thought I’d be able to click on the rightmost star to give a top rating – but I seem to need to do that about a dozen times to increase the meter. Am I missing something?
Alex.
hi alex,
it simply calculates the average rating. So, if it’s initialized with a rating of 5 and 8, the average is 13/2 which is 6.5 which means 3 and a half stars. If you click on the top rating it’s 23/3 which means 7.7 which is 4 stars and so on…
I just found your blog for the first time. You’ve created some very excelent and useful classes. I think it would be cool for this to log the users IP and not allow them to rate again, for a specified period of time. Default could be turned off and allow the user to rate several times or it could allow them to rate again after 24 hours or whatever.
the example above doesn’t store the rating, that’s just a demo…but you could for example disable the rating via objectRater.enabled = false when the user has voted…
I really like your component, great idea, but I agree with Alexander McCabe : initially you do not expect that stars are interactive by its nature, you expect that star rating only serves the goal to display the rate result
I’ve used yahoo’s “rating an object” pattern as a guidline. You could use the component like yahoo does and simply put two instances next to the item: one to display the rating (which has another style) and one to actually rate…
Hi Felix, cudos to you that you had selected to follow Yahoo UI pattern, I should interact some day with your “Rating a object” component harder.
I like this feature. I have seen them in use before but until now i have never had a need for it. I recently had a client ask for this. Thanks, It helped me out knowing it was available.
Laura
Don Lapre Lover
http://www.lauraglydaband.com
laura@lauraglydaband.com