Bairas Website Complete!
by admin on Jun.24, 2009, under Flash
I am happy to announce I ‘ve just finished the development of the website “Εκλεκτά Χοιρινά Μπαΐρας”. It is about a meat processing industry located in Xanthi, Greece. It’s completely made in Flash, and it combines various technologies, like xml for database, css for text styling, php for server scripting, an air application to help the customer upload pdf stat files in daily basis and some fresh as3 techniques like deep-linking and progressive enhancement. I was really pleased with the deep-linking feature, because in this way I can directly access a specific sector of the website (for instance the products sector).
Take a look at the screen shots I attached below, or either visit the website and tell what you think about it…
AS3 Dock Menu: A x-y Approach
by admin on Mar.07, 2009, under Flash
Recently, I ‘ve been searching the web to find information on how to create a dock (mac, tsunami, fish-eye, these are some terms that refer to the same type of menu) menu. What I found interesting, was that almost everyone that worked on a menu like that, tried to think in circles (polar - coordinates, PI radians etc.). The first thing I thought was to calculate the distance between the mouse cursor and the items, and check if this distance is less than a specified radius. I also try to keep a fixed distance between those items, by continuously updating the items’ position according to the mouse movement.
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 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 | package com.iplat.utils{ // Display Imports import flash.display.MovieClip; // Events import flash.events.Event; import flash.events.MouseEvent; // Caurina import caurina.transitions.*; import caurina.transitions.properties.ColorShortcuts; // iPlat Utils import com.iplat.utils.Display; // Pixel Fumes Reflection import com.pixelfumes.reflect.Reflect; public class Dock { // Main MovieClips; private var _container:MovieClip; private var _background:MovieClip; private var _mouseArea:MovieClip; private var _ribbon:MovieClip; // Constructor Arguments private var _target:MovieClip; private var _x:Number; private var _y:Number; private var _width:Number; private var _height:Number; private var _space:Number; private var _orientation:String; private var _radius:Number; private var _ratio:Number; private var _align:String; // Dock Properties private var _state:Boolean; private var _length = 5; private var _items:Array; private var _nextPosition:Number; private var _nextIndex:Number; // Positions & Sizes private var _initXs:Array; private var _initYs:Array; private var _initWidths:Array; private var _initHeights:Array; private var _xLefts:Array; private var _yLefts:Array; private var _xCenters:Array; private var _yCenters:Array; private var _xRights:Array; private var _yRights:Array; // Anti-jumping Variables private var _lastX:Number = -1; private var _lastY:Number = -1; // Constants public static const HORIZONTAL:String = "horizontal"; public static const VERTICAL:String = "vertical"; public static const TOP:String = "top"; public static const BOTTOM:String = "bottom"; public static const CENTER:String = "center"; public static const LEFT:String = "left"; public static const RIGHT:String = "right"; public function Dock($target:MovieClip, $x:Number, $y:Number, $width:Number, $height:Number, $space:Number, $orientation:String, $radius:Number = 150, $ratio:Number = 2, $align:String = Dock.BOTTOM) { ColorShortcuts.init(); _target = $target; _x = $x; _y = $y; _width = $width; _height = $height; _space = $space; _orientation = $orientation; _radius = $radius; _ratio = $ratio; _align = $align; designLayout(); } private function designLayout():void { _container = new MovieClip(); _target.addChild(_container); _container.x = _x; _container.y = _y; _background = Display.solidRectangle(_container, 0, 0, _width, _height, 0x333333, 0.20); _mouseArea = Display.solidRectangle(_container, 0, 0, 200, 200, 0x990000, 0); _ribbon = new MovieClip(); _container.addChild(_ribbon); _ribbon.x = 0; _ribbon.y = 0; _nextPosition = 0; _nextIndex = 0; _state = false; _items = new Array(); _initXs = new Array(); _initYs = new Array(); _initWidths = new Array(); _initHeights = new Array(); _xLefts = new Array(); _yLefts = new Array(); _xCenters = new Array(); _yCenters = new Array(); _xRights = new Array(); _yRights = new Array(); placeItems(); } private function placeItems():void { for (_nextIndex = 0; _nextIndex < _length; _nextIndex++) { var item:MovieClip; if ((_nextIndex % 3) == 0) { item = new ItemMovie(); } else if ((_nextIndex % 3) == 1) { item = new ItemMovie2(); } else if ((_nextIndex % 3) == 2) { item = new ItemMovie3(); } addItem(item); Tweener.addTween(item, { _saturation: 0, time: 0.50, transition: "easeOutQuad" } ); item.buttonMode = true; item.useHandCursor = true; item.addEventListener(MouseEvent.MOUSE_OVER, itemOver); item.addEventListener(MouseEvent.MOUSE_OUT, itemOut); item.addEventListener(MouseEvent.CLICK, itemClick); } _container.addEventListener(Event.ENTER_FRAME, dockFrame); } private function itemOver($evt:MouseEvent):void { Tweener.addTween($evt.currentTarget, { _saturation: 1, transition: "easeInOutQuad", time: 0.50 } ); } private function itemOut($evt:MouseEvent):void { Tweener.addTween($evt.currentTarget, { _saturation: 0, transition: "easeInOutQuad", time: 0.50 } ); } private function itemClick($evt:MouseEvent):void { trace("clicked"); } private function addItem(item:MovieClip):void { _ribbon.addChild(item); _items[_nextIndex] = item; _items[_nextIndex].x = _nextPosition; alignItem(_nextIndex); _initXs[_nextIndex] = item.x; _initYs[_nextIndex] = item.y; _initWidths[_nextIndex] = item.width; _initHeights[_nextIndex] = item.height; updatePositions(_nextIndex); _ribbon.x = (_width - _ribbon.width) / 2; if (_align == BOTTOM) { _ribbon.y = _background.height; var r1:Reflect = new Reflect({mc:_items[_nextIndex], alpha:50, ratio:50, distance:1, updateTime:0, reflectionDropoff:1}); } else if (_align == TOP) { _ribbon.y = 0; } else if (_align == CENTER) { _ribbon.y = _background.height / 2; } _nextPosition += item.width + _space; updateMouseArea(); } private function updatePositions($index):void { _xLefts[$index] = _items[$index].x; _yLefts[$index] = _items[$index].y; _xCenters[$index] = _items[$index].x + _items[$index].width / 2; _yCenters[$index] = _items[$index].y + _items[$index].height / 2; _xRights[$index] = _items[$index].x + _items[$index].width; _yRights[$index] = _items[$index].y + _items[$index].height; } private function updateMouseArea():void { _mouseArea.width = _ribbon.width + 2 * _space; _mouseArea.x = _ribbon.x - _space; _mouseArea.y = - (_mouseArea.height - _background.height) / 2; } private function alignItem($index):void { if (_align == BOTTOM) { _items[$index].y = - _items[$index].height; } else if (_align == TOP) { _items[$index].y = 0; } else if (_align == CENTER) { _items[$index].y = - (_items[$index].height / 2); } } private function specialAlignItem($index):void { if (_align == BOTTOM) { _items[$index].y = - _initHeights[$index] * _items[$index].scaleX; } else if (_align == TOP) { _items[$index].y = 0; } else if (_align == CENTER) { _items[$index].y = - (_items[$index].height / 2); } } private function dockFrame($evt:Event):void { var i:uint; var currentX:Number; if (_lastX != _mouseArea.mouseX || _lastY != _mouseArea.mouseY) { if (_mouseArea.mouseX > 0 && _mouseArea.mouseX <= (_mouseArea.width / _mouseArea.scaleX) && _mouseArea.mouseY > 0 && _mouseArea.mouseY <= _mouseArea.height) { currentX = 0; for (i = 0; i < _length; i++) { var cDistance:Number = Math.round(Math.sqrt(Math.pow(Math.abs(_ribbon.mouseX - _xCenters[i]), 2) + Math.pow(Math.abs(_ribbon.mouseY - _yCenters[i]), 2)) * 100) / 100; var lDistance:Number = Math.round(Math.sqrt(Math.pow(Math.abs(_ribbon.mouseX - _xLefts[i]), 2) + Math.pow(Math.abs(_ribbon.mouseY - _yLefts[i]), 2)) * 100) / 100; var rDistance:Number = Math.round(Math.sqrt(Math.pow(Math.abs(_ribbon.mouseX - _xRights[i]), 2) + Math.pow(Math.abs(_ribbon.mouseY - _yRights[i]), 2)) * 100) / 100; if (cDistance <= _radius || lDistance <= _radius || rDistance <= _radius) { var dist:Number = Math.min(cDistance, lDistance, rDistance); _items[i].scaleX = _items[i].scaleY = 1 + (1 - Math.pow((Math.round((dist / _radius) * 100) / 100), (3))) * (_ratio - 1); } else { _items[i].scaleX = _items[i].scaleY = 1; } _items[i].x = currentX; specialAlignItem(i); currentX += _items[i].width + _space; if (i == _length - 1) { currentX += _space; } _mouseArea.width = currentX; _mouseArea.x = (_background.width - _mouseArea.width) / 2; _ribbon.x = (_background.width - _ribbon.width) / 2; updatePositions(i); _lastX = _mouseArea.mouseX; _lastY = _mouseArea.mouseY; } } else { for (i = 0; i < _length; i++) { updatePositions(i); Tweener.addTween(_items[i], { scaleX: 1, scaleY: 1, x: _initXs[i], y: _initYs[i], time: 0.15, transition: "easeOutQuad" } ); } Tweener.addTween(_mouseArea, { width: _nextPosition + _space, x: (_background.width - (_nextPosition + _space)) / 2, time: 0.15, transition: "easeOutQuad" } ); Tweener.addTween(_ribbon, { x: (_background.width - (_nextPosition - _space)) / 2, time: 0.15, transition: "easeOutQuad" } ); } } } } } |
Well, the result is quite good if you consider the fact that it took 30 minutes approximately for me to create it. It’s a little buggy on the edges, and it doesn’t respond well on fast mouse movements. But I think it’s a good start, don’t you think?.You can always make suggestions!
Πάμε Στοίχημα Air Application: Bet24
by admin on Dec.04, 2008, under Flash
Κατόπιν απαίτησης του αδερφού μου, δημιούργησα μια απλή Air εφαρμογή η οποία φορτώνει το κουπόνι της ημέρας (ΟΠΑΠ) και υπολογίζει το κόστος συστημάτων (Απλό, 3/4, 3,4/4, 3/5, 4/5, 3,4,5/5). Επίσης δίνει την δυνατότητα στον χρήστη να δει ποια είναι τα πιθανά κέρδη των γεγονότων που επέλεξε, καθώς επίσης και τα ακριβή κέρδη με βάση επιτυχημένα γεγονότα (βλέπε την παρακάτω εικόνα). Η εφαρμογή έχει μερικά bugs ακομά, αλλά μόλις τα διορθώσω σκοπεύω να την διαθέσω δωρεάν μέσα από το blog. Οποιοδήποτε σχόλιο, ή πρόταση για προσθήκη feature στην εφαρμογή, ευπρόσδεκτα.

Καλό Ξεκίνημα…
by admin on Sep.16, 2008, under Flash

Πάει καιρός από τότε που δημοσίευσα κάτι σ’ αυτό το blog. Μεσολάβησαν διακοπές, εξεταστικές και πολλά άλλα. Ξεκίνησε και το πρωτάθλημα της Super League και σκέφτηκα να διατυπώσω μια δυο σκέψεις που με βασανίζουν τις τελευταίες μέρες μετά και το ΠΑΟΚ - ΑΕΚ 1-1.
Έχω την αίσθηση ότι ο περισσότερος κόσμος που βρέθηκε στην Τούμπα το βράδυ της Κυριακής γύρισε απογοητευμένος στο σπίτι του, όχι τόσο για το τελικό αποτέλεσμα, αλλά κυρίως για το τρόπο με τον οποίο η ομάδα διαχειρίστηκε το παιχνίδι.
Θεωρώ ότι ο ΠΑΟΚ, ναι μεν θα μπορούσε να είχε κερδίσει το συγκεκριμένο παιχνίδι ωστόσο 4 βαθμοί στα πρώτα δύο παιχνίδια είναι μια εξαιρετική συγκομιδή βαθμών και δε θυμάμαι να έχει γίνει κάτι ανάλογο τα τελευταία δέκα χρόνια.
Μπορεί μέσα από τέτοια παιχνίδια να κερδίζονται πρωταθλήματα, όμως στόχος της ομάδας είναι άλλος - η έξοδος στο κύπελο UEFA (ή UEFA European leage όπως ακούγεται ότι θα ονομαστεί από την καινούρια χρονιά).
Το να διώξεις καμιά δεκαριά ποδοσφαιριστές, να φέρεις άλλους τόσους καινούριους και να κάνεις ομάδα για να πάρεις πρωτάθλημα την ίδια χρονιά, δεν έχει γίνει ποτέ και ούτε πρόκειται να γίνει. Ο ΠΑΟΚ βήμα - βήμα πρέπει να ξαναγίνει μεγάλος. Θα χρειαστεί καιρός αλλά θα γίνει.
Σκοπός φέτος του ΠΑΟΚ, είναι να κερδίζει τις θεωρητικά μικρότερες ομάδες και να παλεύει τα ντέρμπι. Αυτή η λογική αυτόματα καθιστά το επόμενο παιχνίδι με τον Πανθρακικό, σημαντικότερο απ’ αυτό με την ΑΕΚ. Και είναι σημαντικότερο για έναν ακόμη λόγο. Με δεδομένο ότι η διοίκηση του Πανθρακικού δεν προτίθεται να διαθέσει εισητήρια στους οπαδούς του ΠΑΟΚ, το συγκεκριμένο παιχνίδι θα είναι το πρώτο εκτός έδρας…
TextShortcuts Example
by admin on Jul.17, 2008, under Flash
I was searching the other day to find some examples demonstrating the use of the TextShortcuts classes of the AS3 Tweener API. The truth is that I didn’t find something specific, so I thought to myself why don’t you try using the Tweener the normal way. So I did, I created a textField with some initial text value and I tried to animate the content of the textField. Surprisingly, the textField disappeared after testing and I was a bit confused about what happened. The code that I initially used was this single actionscript line:
1 2 | Tweener.addTween(_myTextField, {_text: "RandomText", time: 1, transition:"easeOutQuad"}); |
As I said, this didn’t seem to work so after a lot of expreriments and tests, I found out that I had to come up with a way to update the textFormat of the textField continuously to actually see the animation. So I added an onUpdate method to achieve that.
1 2 3 4 5 6 | Tweener.addTween(_myTextField, {_text:"Random Text", time: 1, transition: "easeOutQuad", onUpdate: updateTextFromat}); private function updateTextFormat():void { _textFormat.setTextFormat(_myFormat); } |
That did the work, although I didn’ t like the animation at all! Anyway, I thought that was useful for some of you.






