tag:blogger.com,1999:blog-80001707668539070612024-02-20T19:04:59.845-08:00ElectrobunnyForays and Rants : The blog of a flasher in Brightonelectrobunnyhttp://www.blogger.com/profile/02643880520663924819noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-8000170766853907061.post-2736234309830266292009-02-05T02:24:00.000-08:002009-02-05T07:02:59.968-08:00Interactive pdfs: using javascriptRecently I have betrayed my flash counterparts, turning to javascript, javascript for PDF's. If that sentence doesn't make you shudder, it should, and perhaps this blog post will reveal why. However my main purpose for writing this is to lighten the learning curve (and horror) for any developers who are striving to create interactive pdfs.<br /><br />So the sceneario is this: you recive a PDF full of lovely images and designs, but you want the user to interact with elements on the screen; use buttons to navigate and reveal different layers and options. PDF's can contain a number of different media's: images, video and swf. You may also allow the users to submit forms which can be emailed, for example to a sales department who can deal with a request or feedback infromation.<br /><br /><span style="font-weight: bold;">Starting out</span><br />In order to start working you'll need Acrobat pro, I use Adobe Acrobat Pro 9. You'll need to specify an external text editor that you will be using to write your javascript, I use TextMate. Select Acrobat-> Preferences-> JavaScript select the radio button "Use external JavaScript editor" and browse for your appliacation.<br /><br />A word of warning, you can edit code interally using Acrobat JavaScript Editor, however this works less than well and if your planning on writing a lot of code (i.e scripting functionality for a 20-30 page pdf) it will either crash or Acrobat will throw an error.<br /><br />The documents I work with are created in Adobe's InDesign by a designer, exported in a magical way and sent to me for scripting. There are lots of <a href="http://livedocs.adobe.com/en_US/InDesign/5.0/help.html?content=WSa285fff53dea4f8617383751001ea8cb3f-70c7.html">tutorials </a>describing how to do this and is beyond the scope of this blog post. A quick note, the more consisitant your designer can be with naming layers and fields: the easier your job will be.<br /><br /><span style="font-weight: bold;">Debugging</span><br />A Debugger is available (Advanced -> Document processing -> JavaScript Debugger). You will find that the debugger is sadly lacking and generally uninformative, if you are lucky a reference to the line number of your error will be provided, if not, you're left guessing. Use <span style="font-size:85%;"><span style="color: rgb(255, 153, 0); font-style: italic;"><span style="font-family:courier new;">console.println("this is flash's version of a trace statement!");</span> </span></span>to output content to the debugger, this will help in your mystery hunt.<br /><br /><span style="font-weight: bold;">Adding javascript</span><br />To start adding code select Advanced -> Documet processing -> Document Javascripts<br />Select "add" and give your script a name, how about a creative name such as "myScript"?<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_7IXtiCpQ4xo/SYrHkvHrlzI/AAAAAAAAABQ/eDzYK0pdB_0/s1600-h/Picture+6.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 154px;" src="http://2.bp.blogspot.com/_7IXtiCpQ4xo/SYrHkvHrlzI/AAAAAAAAABQ/eDzYK0pdB_0/s320/Picture+6.png" alt="" id="BLOGGER_PHOTO_ID_5299267345492711218" border="0" /></a><br />At this point your external editor will open and your code will be surrounded with Acro Script. Ignore this, this is added by Adobe Acrobat, you won't be able to edit directly since it is created from your own code. For example you code a line which sends the user to page 14 when a button is clicked, you may get something like the following produced in Acro Script:<br /><br /><span style="color: rgb(51, 204, 255);font-family:courier new;font-size:85%;" ><span style="font-style: italic;">//<acroform></acroform></span> <span style="font-style: italic;">//<acro_source>menu_safety 2.Page 8:Annot1:MouseUp:Action1</acro_source></span> <span style="font-style: italic;">//<acro_script></acro_script></span> <span style="font-style: italic;">/*********** belongs to: AcroForm:menu_safety 2.Page 8:Annot1:MouseUp:Action1 ***********/</span> <span style="font-style: italic;">pageNum=14; close_menu(pageNum);</span> <span style="font-style: italic;">//</span> <span style="font-style: italic;">//</span></span><br /><br />As far as I can tell the language is horribly inefficient and by the time you have finished coding you will have literally thousands of lines of AcroScript.<br /><br /><span style="font-weight: bold;">Accessing fields and layers using javascript</span><br />To access elements (known as fields) within the pdf, use <span style="font-size:85%;"><span style="font-style: italic; color: rgb(255, 153, 102);font-family:courier new;" >this.getField("my_button_name");</span></span><br />"this" referring to the actual pdf document. You can use this for any fields, including buttons and text input fields. Lets say that at the beginning of your pdf you have a screen sized button that you want to let the users "enter" the pdf and go to the next page, aka page 1 (page numbers start from zero). You may use the following code:<br /><span style="font-size:85%;"><span style="color: rgb(255, 153, 0); font-style: italic;font-family:courier new;" >var mybtn=this.getField("enter_btn");<br /></span> <span style="color: rgb(255, 153, 0); font-style: italic;font-family:courier new;" >mybtn.setAction("MouseUp", "pageNum=1;");</span> <span style="color: rgb(255, 153, 0); font-style: italic;font-family:courier new;" ><br />//on mouseUp go to page number one!</span></span><br /><br />Layers are a little more complex as far as I can tell you cannot access layers by name. You must access layers using their page number and the layers are returned as an array.<br /><span style="color: rgb(255, 153, 102);font-family:courier new;font-size:85%;" >var ocgArray = this.getOCGs(pageNum); </span><br /><br />One may then cycle through the layers stored within the array and act accordingly. The following function is passed the page number, an array of layers that I want to be visible, and an array of layers which I want invisible. The function cycles through the layers for the particular page, where if finds a match between the layer name and a layer I have specified in my array it acts accordingly setting its state to visible (true) or invisible (false)<br /><blockquote><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_7IXtiCpQ4xo/SYr5IPZjj6I/AAAAAAAAAB4/-YUtwc2nyxs/s1600-h/Picture+10.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 450px; height: 173px;" src="http://4.bp.blogspot.com/_7IXtiCpQ4xo/SYr5IPZjj6I/AAAAAAAAAB4/-YUtwc2nyxs/s400/Picture+10.png" alt="" id="BLOGGER_PHOTO_ID_5299321831522799522" border="0" /></a></blockquote>Buttons also have states which can be used to control their visiblity, particulary useful if you want to disable an option once a button has been clicked, or maintain a button state upon the click. For example, quite often within my brochure a number of options are displayed as clickable buttons. A rollover state has been created using Indesign; ie the text turns orange and bold. I want to make it obvious which button has been selected by making selected buttons unclickable and maintaining this rolled over state of orange and bold text.<br /><br />One possible way of achieving this is to store an image of the 'over' state of the button within the content of the corresponding layer. This layer is visible once a button is selected, so all that remains is to render the clicked button invisible upon selection.<br /><br />Below is such an example <span style="font-size:85%;"><span style="font-style: italic;">(company name blurred out)</span></span>. The top Question is no longer a button but a static image (the button looked like the question below but is now invisible). The bottom question is a button complete with roll over state. The rest of the screen is filled with the layer which contains the image of the top most question and of course the corresponding answer image.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_7IXtiCpQ4xo/SYrrOsCk9kI/AAAAAAAAABo/dUfZF2LoA4s/s1600-h/Picture+8.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 38px;" src="http://3.bp.blogspot.com/_7IXtiCpQ4xo/SYrrOsCk9kI/AAAAAAAAABo/dUfZF2LoA4s/s320/Picture+8.jpg" alt="" id="BLOGGER_PHOTO_ID_5299306549127476802" border="0" /></a><br />To hide and show a button, the syntax is simple:<br /><blockquote><span style="color: rgb(255, 153, 102);font-size:85%;" ><span style="font-family:courier new;"> var mybtn= this.getField(BUTTON_NAME);</span> <span style="font-family:courier new;"> <br />mybtn.display=display.visible;</span> <span style="font-family:courier new;"> <br />//im here!<br /></span><span style="font-family:courier new;"> var mybtn=this.getField(BUTTON_NAME);<br /></span> <span style="font-family:courier new;">mybtn.display=display.hidden;<br />//im gone!<br /></span></span> </blockquote><span style="font-weight: bold;">Extra functionaltiy: Printing, Searching and Links</span><br />A couple of small bits of functionality are things like printing, searching and hyperlinks.<br />For Hyperlinks, get the field using the syntax mentioned before and then: <span style="font-style: italic;font-size:85%;" >(nb: dont forget the quotes around the url or it wont work)</span><br /><span style="font-size:85%;"><span style="color: rgb(255, 153, 102);font-family:courier new;" > URLbut.setAction("MouseUp", "app.launchURL('http://myURL.com', true);" );</span></span><br /><span style="color: rgb(255, 153, 102);font-family:courier new;font-size:85%;" ><br /></span>To give users the option to search use the syntax below. However it is worth noting that this will also search your hidden layers and make them visible again! This will quite possible mess up the look of your pdf, but it will aslo confuse users.<br /><span style="color: rgb(255, 153, 102);font-family:courier new;font-size:85%;" >searchBut.setAction("MouseUp", "app.execMenuItem('FindSearch');" );</span><br /><br />Acrobat prompting users to view the invisible layer shown below.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_7IXtiCpQ4xo/SYr27ofPM1I/AAAAAAAAABw/5nEMD3amAkM/s1600-h/Picture+9.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 154px;" src="http://2.bp.blogspot.com/_7IXtiCpQ4xo/SYr27ofPM1I/AAAAAAAAABw/5nEMD3amAkM/s320/Picture+9.png" alt="" id="BLOGGER_PHOTO_ID_5299319415895962450" border="0" /></a><br />I havent found a way of disabling the option of viewing invisible layers, however there are ways to correct the view after Acrobat has navigated the user to the page. You can set a page action which operates everytime the page opens. This happens after the user has been sent to the page via search and therefore can be used to recorrect the page. The code below will call the function startVis everytime a user navigates to page 12. startVis is a function which restores the default layer visiblities. There is another problem created by this solution, users who have searched content may find that the layer is no longer visible, you risk confusing the user. This solution makes the best of a bad situation, however if you find something better let me know!<br /><br /><span style="color: rgb(255, 153, 102);font-size:85%;" ><span style="font-family:courier new;">this.setPageAction(12, "Open", "startVis(pageDefaults));</span></span><br /><br /><span style="font-weight: bold;">Set up some Security!</span><br />Generally this is the basics of creating interactive pdfs. I just want to include a word about settings.<br /><br />Its likely that you wont want users to tamper with or steal your designs, so add some security, its easy!<br /><br />Advanced-> security -> show security properties<br />Select password security: here you can add passwords and restrict actions. There are varying security options, prohibiting editing, restricting printing to low res, etc. Be aware that if you want to edit your pdf after this you will need to remove security and enter in your password.<br /><br /><span style="font-weight: bold;">Finished!</span><br />When your finished don't forget to compress and reduce the bulk caused by all those layers!electrobunnyhttp://www.blogger.com/profile/02643880520663924819noreply@blogger.com3tag:blogger.com,1999:blog-8000170766853907061.post-3393806573100694582009-02-03T14:34:00.000-08:002009-02-03T14:45:41.448-08:00Media servers: smartfox and red5This post is a bit of a follow on from <a href="http://electro-bunny.blogspot.com/2009/01/socket-servers-and-bulding-multiplayer.html">my post about socket servers for muliplayer games</a> , I was asked to research a solution for providing streaming video which could be uploaded as well as downloaded; a kind of cross between you tube and I player. <br /><br />My first thoughts were to look at SmartFox; it cheaper than Adobe media streaming, but seems quite well supported. It was chosen by <a href="http://blog.iainlobb.com/">iain</a> as one of the best socket servers for multiplayer games, but it supports audio and video since it has paired up with Red5 so in my opinion is worth investigating as it is a proven implementation.<br /><br />The following is my quick piece of research/summary into RedBox (SmartFox and Red). I didnt manage to finish this as I was told to look at all inclusive platforms (to be blogged about another day). I havent tried or played with RedBox yet, but it definitly seems worth considering should a project require its use.<br /><br /><span style="font-family:Verdana, Helvetica, Arial;"><span style="font-size: 12px;">Although SmartFox Server was originally designed for games and chat applications, I think it should be considered because it is a powerful and commercially used and accepted server. It now has an addon from Red 5 (another good open source server). Called RedBox This means that Smart fox now supports audio and video streaming capabilities. The advantages of using SmartFox instead of Red 5 directly seems to be with the extra features that SmartFox offer, which can be used in conjunction with RedBox; effectively giving you the best of both worlds: smart fox and Red5. According to their website “With the only use of Red5 or FMS you don't get any advanced room management, buddy lists, chat filters, security etc... “ Another point to remember, is that because SmartFox is commercial, it will probably be better supported that open source implementations.<br /><br />Redbox brings the following extra features to the table:<br /></span></span><ul><li><span style="font-family:Verdana, Helvetica, Arial;"><span style="font-size: 12px;">live events –one broadcaster to many subscribers </span></span></li><li><span style="font-family:Verdana, Helvetica, Arial;"><span style="font-size: 12px;">remote A/V recording (video messages etc) </span></span></li><li><span style="font-family:Verdana, Helvetica, Arial;"><span style="font-size: 12px;">Video Streaming </span></span></li><li><span style="font-family:Verdana, Helvetica, Arial;"><span style="font-size: 12px;">Api for handlng A/V streaming <br /></span></span></li></ul><span style="font-family:Verdana, Helvetica, Arial;"><span style="font-size: 12px;"> One of the examples provided by RedBox with the API download is a application demonstrating how to build a live shared library of videos, providing tools for easily retrieving the list of available clips and assigning extra custom properties to each video clip.<br /><br />The API provided is split into three sections. The two we would be concerned with is the AVClipManager- handles the list of available a/v clips, streaming and playback. The AVCastManager, handles live video and audio broadcasts. <br /><br />Redbox can be run on a separate dedicated server, good/scalable if there are going to be a high number of users. </span></span>electrobunnyhttp://www.blogger.com/profile/02643880520663924819noreply@blogger.com0tag:blogger.com,1999:blog-8000170766853907061.post-58237685624498584492009-02-03T13:49:00.000-08:002009-02-03T14:32:55.648-08:00Creating a multiline button in flex<span style="font-size:100%;"><span style="font-family:arial;">I'm currently working on a charity website <a href="http://www.wigout.org.uk/">Wigout</a> with some colleagues, raising money and awareness for breast cancer. The downloads sections needed some links which would enable the user to save content such as jpg printable posters, raffle tickets and so on. Although I could have used a number of methods to provide the user with a means of saving content, those who know me know im stubborn. I have been meaning to dabble with/ investigate the flex framework for a while now: this was my first 'toe dip' into this world.</span><br /><br /><span style="font-family:arial;">Although maybe overkill, to solve the problem I have created a custom component ; a multiline button extending the button component provided with Flex. </span></span><span style=";font-family:arial;font-size:100%;" > </span><span style=";font-family:arial;font-size:100%;" >I guess there may be a number of reasons why you may like to do this, obviously this inherits the properties and methods of the button, for example I have a nice colour change when a user rolls over the text, making it more obvious that this is a link. I could also add some events, such as switching the text once the button has been pressed, providing an indication that the file has been downloaded. </span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_7IXtiCpQ4xo/SYi94bCfWgI/AAAAAAAAAA8/Znign5byJKo/s1600-h/Picture+1.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 71px;" src="http://3.bp.blogspot.com/_7IXtiCpQ4xo/SYi94bCfWgI/AAAAAAAAAA8/Znign5byJKo/s320/Picture+1.png" alt="" id="BLOGGER_PHOTO_ID_5298693738629913090" border="0" /></a><span style="font-size:85%;"><br /></span><span style="font-size:85%;"><span style="font-style: italic;">Above: 2 is a normal button; 3 is my shiny multiline button at work (button fill and border alpha is 0)<br /></span><span style="font-style: italic;"><br /></span><span style="font-size:100%;"><span style="font-size:130%;">A quick search in Google brings up Alex's (adobe) <a href="http://blogs.adobe.com/aharui/2007/04/multiline_buttons.html">blog</a> showing a method for creating multiline radio buttons by extending the radio button class. Essentially ive used this pattern as suggested to apply to the button component, with a few minor changes.</span><br /><span style="font-size:85%;"><br /></span><blockquote><span style="font-size:85%;"><span style="font-family:courier new;"> override protected function createChildren():void</span><br /><span style="font-family:courier new;"> {</span><br /><span style="font-family:courier new;"> if (!textField)</span><br /><span style="font-family:courier new;"> {</span><br /><span style="font-family:courier new;"> textField = new NoTruncationUITextField();</span><br /><span style="font-family:courier new;"> textField.styleName = this;</span><br /><span style="color: rgb(255, 102, 102);font-family:courier new;" >textField.width=this.width-8;</span><br /><span style="color: rgb(255, 102, 102);font-family:courier new;" > addChild(textField as DisplayObject);</span><br /><span style="font-family:courier new;"> }</span></span><br /><span style="font-size:130%;"><br /></span></blockquote><span style=";font-family:arial;font-size:130%;" >I needed to specify that the text field would be the same width (slightly less) than its container: the button, otherwise it reverted to a small default value. The original code "addChild(textField);" wouldn't work for me, producing the error:</span><br /><span style="font-size:85%;"> <span style="font-style: italic; color: rgb(255, 102, 102);">1067: implicit coersion of a value of type mx.core:UITextField to an unrelated type Flash.display:DisplayObject </span></span><span style="color: rgb(0, 0, 0);"><br /><span style="color: rgb(255, 255, 255);font-family:arial;font-size:130%;" >I cast it as a Display object which solved this issue. Although I admit im not entirely sure why I managed to get this error and Alex did not, difference in sdk's or flashplayer?</span><span style="color: rgb(255, 255, 255);font-size:130%;" ><br /><br /></span><span style="color: rgb(255, 255, 255);font-family:arial;font-size:130%;" >As far as changes go thats it, so full credit to Alex for providing a nice pattern. This also shows how easy it is to work with Flex with its powerful and customisable/ flexible framework. I can't wait to get stuck in some more...</span></span></span><span style="font-style: italic;"><span style="font-size:100%;"><br /></span></span></span>electrobunnyhttp://www.blogger.com/profile/02643880520663924819noreply@blogger.com0tag:blogger.com,1999:blog-8000170766853907061.post-8336475632065993722009-01-26T14:38:00.000-08:002009-01-29T02:54:25.628-08:00Flash Voip Api'sI've been investigating some of the voip API's available for Flash and Flex projects. The possibility to create applications which engage and interact with the user on an audio level is exciting. Ribbits <a href="http://killerappchallenge.ribbit.com/">Killer App challenge</a> should certainly provide some cutting edge inspiration.<br /><br />After dabbling with <a href="http://developer.ribbit.com/">Ribbits</a> API briefly, I felt disappointed. Firstly its seems you cannot send text messages from the UK (its a US company), although this problem may be limited to applications in development; it may work live. I also felt that the amount of control provided by the API was lacking, in reality it does everything one could expect from a voip api: voicemail; messaging; call bridging; inbound and outbound calls; transcription; conference calls and so on. But for all the hype I want more control over data; how about giving the developer the ability to store the audio data on our own servers.<br /><br />Obviously the ability to store audio in house is appealing since calls to Ribbits service cost money; a one time cost of a call with multiple accesses to an in house server is cheaper giving companies full access to data and seems like a more commercially viable solution.<br /><br />A feature which i'd like to see implemented is audio search, this would be a great feature for rich app's which require phone in's and audio interaction: an audio search could pull out related calls. Although Ribbit does not provide this, perhaps one could achieve this by utilising their transcription service. Store a call id along with its transcription (audio to text), simply search the text and pull out related calls. This could also work for a negative filtering process, aka remove calls with swearing or inappropriate language,<br /><br />Ribbit has an '<a href="http://ideawall.ribbit.com/">ideas</a>' wall for suggested implementations of their services and reading it is a good way to get creative juices flowing. I am especially interested in implementations which can converge medias and input, platforms and provide for the 'whereevers/ whenevers'.<br /><br />One point to note is Ribbit is based in America, I don't know much about telecommunications, but i get the impression the call would be routed via a server based in the US. This would be one explanation as to why the quality of the call is so poor, unfortunately I'm not sure whether using Ribbit is commercially viable because of quality issues. However my tests were conducted making calls between computers which were close to one another, other people may not experience the same issues. But its definitely a point to investigate. Also note that Ribbit does allow you to set the service up with your own telecommunications provider, which could be useful in improving quality/ service.<br /><br />As far as other voip solutions go, another US company <a href="http://www.tringme.com/">TringMe</a> offers a very similar service, although the documentation is pretty poor for this api, but they do provide convenient little widgets :). One to watch is <a href="http://blogs.adobe.com/pacifica/">Adobes Pacifica</a> which is said to be very high quality. I believe its still under development, though nothing seems to have been announced in a while. More info <a href="http://pac.ifica.net/2007/09/test.html">here</a>.electrobunnyhttp://www.blogger.com/profile/02643880520663924819noreply@blogger.com2tag:blogger.com,1999:blog-8000170766853907061.post-45804210525474322442009-01-26T13:03:00.000-08:002009-01-29T02:55:28.509-08:00puremvc<span style="font-family: arial;">Neil kinda gave a talk/ walk through of </span><a style="font-family: arial;" href="http://puremvc.org/">Puremvc</a><span style="font-family: arial;"> on the 20th. I've summarized the key points of the meeting, but also have some concerns about the framework and its uses.</span><br /><br /><span style="font-family: arial;">Puremvc is quite a verbose framework, therefore should only be used in contexts which warrant the extra weight. The applications which require its use should be complex large desktop or web applications. An example of its use, shown by Neil was an air (desktop) scheduling application. An example of a web application that I think could benefit from the Puremvc framework would be </span><a style="font-family: arial;" href="http://www.sumopaint.com/">SumoPaint</a><span style="font-family: arial;"> (an online paint application which mimics Photoshop).</span><br /><br /><span style="font-family: arial;">Neil made a point of warning that Puremvc is not suitable for games or 3d applications, because of heavy reliance on the view and its affect on performance. Puremcv adds a lot of bloat and layers to an application which would have a negative impact on a fast paced game, or a heavy rendering process.</span><br /><br /><span style="font-family: arial;">It seemed as though most members of the meeting were struggling with some of the abstract concepts during the session. Indeed it was pointed out that there is a high learning curve to using Puremvc. Writing an application in Puremvc isn't something you can simply leap into, since the flow of notifications is difficult to follow. Neil mentioned that this may be a good thing, since its forces him to plan and draw out an architecture before writing any code. However it does create a high barrier to entry for anyone not familiar with the framework.</span><br /><br /><span style="font-family: arial;">Neil recommended use of the Muliticore as apposed to the single core for flexibility. Multicore stops some of the core classes being instantiated as singletons; it allows cores to communicate with each other in larger, more complex applications which are ultimatly more flexible.</span><br /><br /><span style="font-family: arial;">The documentation for Puremvc is very good, although I found from personal experience one of the fastest ways to gain an understanding of the framework is to study the flow of instanciation and notifications. Since this notification process is considered difficult to follow, its beneficial to study a </span><a style="font-family: arial;" href="http://hubflanger.com/building-a-flash-site-using-puremvc/">small sample application</a><span style="font-family: arial;"> and draw out the flow as you guide yourself through the application. I think this gives more of an instantanous reference making the application more transparent as a learner.</span><br /><br /><span style="font-family: arial;">Although I can see how a framework such as Puremvc is benificial to developers creating large web applications; I am concerned about its use. Its easy to get wrapped up in creating "beautiful code" but without remembering a framework or design patterns original purpose its easy to end up with something that looks like its visited </span><strong style="font-family: arial; font-weight: normal;"><a href="http://www.monstrous.com/monstrous_people/jocelyn_wildenstein_.html">Jocelyn Wildenstein's</a> plastic surgeon. </strong><span style="font-family: arial;">Websites and small applications don't require the level of abstraction offered by Puremvc; and the reality is bulked out code, which is needlessly complex and probably quite confusing to update and maintain. The end solution becomes a bunch of classes which do not provide obvious answers as to their purpose, responsibilities and relationships.</span><br /><br /><span style="font-family: arial;">When all said and done, good code should always be flexible and maintainable which are qualities boasted by Puremvc. Ironically the complexity/ abstract(-ness?) of the system counteracts these qualities by creating a high barrier to its use. Imagine switching your team over to the Puremvc framework for your larger applications, granted once your employees have completed training they will have the skills and tools to create sophisticated flexible applications.</span><br /><br /><span style="font-family: arial;">However, now imagine (as with many digital creative agencies) you have a busy period, in the first scenerio you hire freelancers to come in and take some of the heat. In this scenerio you can't pick your usual freelances because they have no knowlege of the framework; if you do the projects are going to take a lot longer as they get up to speed. In the second scenario, you hire some new junior developers, again training takes alot longer but even usual junior tasks such as maintence become complex and daunting. I can imagine that debugging becomes a hugly more complex process as data flow becomes difficult to follow. Having said this I do believe that any training is a worthwhile investment and the knowelege will only benifit the quality of future projects, but my point is that when code becomes difficult to maintain that also means that its inflexible. By my book inflexible unmaintainable code = bad, so choose your weapon wisly.</span>electrobunnyhttp://www.blogger.com/profile/02643880520663924819noreply@blogger.com0tag:blogger.com,1999:blog-8000170766853907061.post-4647072623898324782009-01-16T11:31:00.000-08:002009-01-26T08:08:17.671-08:00Socket Servers and bulding multiplayer games in Flash<span style="font-family:arial;">The speech last night at Brighton Flash was quite interesting. It was</span><span style="font-family:arial;"> fairly informal but down to earth and </span><a style="font-family: arial;" href="http://blog.iainlobb.com/">Iain</a><span style="font-family:arial;"> was speaking about realistic</span><span style="font-family:arial;"> implementations of multiplayer flash games in a commercial setting. I was</span><span style="font-family:arial;"> slightly disappointed he didn't mention any of his 3d work for the bbc, but</span><span style="font-family:arial;"> then this wasn't particularly relevant to the topic of the speech, since</span><a style="font-family: arial;" href="http://www.bbc.co.uk/switch/meta4orce/"> Meta4orce</a><span style="font-family:arial;"> is single player.</span><br /><br /><span style="font-family:arial;">A large proportion of the talk was dedicated to selecting the right socket</span><span style="font-family:arial;"> server. This is important because as Ian put it "once you've made your</span><span style="font-family:arial;"> decision you're pretty much stuck with it", aka make sure you choose the</span><span style="font-family:arial;"> correct server for the project. However he did show us a game he's currently</span><span style="font-family:arial;"> developing which he has implemented using two different servers: </span><a style="font-family: arial;" href="http://www.smartfoxserver.com/">SmartFox</a><span style="font-family:arial;"><a href="http://www.smartfoxserver.com/"> </a>and </span><a style="font-family: arial;" href="http://www.blogger.com/www.electro-server.com/">ElectroServer,</a><span style="font-family:arial;"> essentially as an experiment for comparison. In order to</span><span style="font-family:arial;"> do this he's created a class for all server specific activities, so from</span><span style="font-family:arial;"> what I gather one one 'server class' for each server, decoupling it from the</span><span style="font-family:arial;"> game processing.</span><br /><br /><span style="font-family:arial;">He advised not to be a<span style="font-style: italic;"> smart ass</span> and create your own server, since these implementations have</span><span style="font-family:arial;"> been tested thoroughly and are optimized for a large number of users,</span><span style="font-family:arial;"> therefore would be less likely to break.</span><br /><br /><span style="font-weight: bold;font-family:arial;" >There are four main servers which were mentioned, each have their own pros</span><span style="font-weight: bold;font-family:arial;" > and con's.</span><br /><br /><ul><li><span style="font-family:arial;">-</span><a style="font-family: arial;" href="http://osflash.org/red5">Red 5</a></li><li><a style="font-family: arial;" href="http://www.smartfoxserver.com/">-Smart fox</a></li><li><a href="http://www.electro-server.com/"><span style="font-family:arial;">-</span></a><a style="font-family: arial;" href="http://www.electro-server.com/">Electroserver</a></li><li><span style="font-family:arial;">-</span><a style="font-family: arial;" href="http://www.projectdarkstar.com/">project Darkstar </a><span style="font-style: italic;font-family:arial;" >(queue starwars-esque music, dun dun dun dun....)</span></li></ul><br /><br /><span style="font-family:arial;">Red 5 is open source, so free/cheap. The downside is that from what I gather</span><span style="font-family:arial;"> there are less tutorials than those for Smart fox and ElectroServer. Its</span><span style="font-family:arial;"> written in Java which seems to be the standard for Flash Socket servers.</span><span style="font-family:arial;"> Its pretty general so can support Streaming Audio/ Video, Remoting etc.</span><span style="font-family:arial;"> This server wasn't spoken about too much, but someone at the meet did</span><span style="font-family:arial;"> mention that it had a feature which the others don't, object remoting :</span><span style="font-family:arial;"> making a flash object and pairing it with a java object on the server side.</span><br /><br /><span style="font-family:arial;">Smartfox- The most costly solution out of all the servers mentioned.</span><span style="font-family:arial;"> However it is very well documented and supported as it is a popular</span><span style="font-family:arial;"> solution. Unfortunately it was written by an Italian so some of the English</span><span style="font-family:arial;"> is a bit poor with bad spelling, but funny rather than too much of a hassle.</span><span style="font-family:arial;"> Smart fox comes with its own gui admin tool where you may edit the config</span><span style="font-family:arial;"> files, included rooms, banned word list, max users, you can kick and ban</span><span style="font-family:arial;"> users and keep track of the health of the server. Ian did mention that</span><span style="font-family:arial;"> although this feature is nice, its more of a crutch and not completely</span><span style="font-family:arial;"> necessary. I cant recall is this server allows binary rather than XML to be</span><span style="font-family:arial;"> sent- worth investigating. Disney's club penguin uses this server.</span><br /><br /><span style="font-family:arial;">Electroserver- Very similar to Smart fox and seems to work at a similar</span><span style="font-family:arial;"> speed, as in the differences aren't very noticeable. You can extend the</span><span style="font-family:arial;"> classes using java or actionscript 1. Electroserver also uses Strong</span><span style="font-family:arial;"> typing, its better practice and you know what kind of data you will be</span><span style="font-family:arial;"> receiving back from the server. Ian mentioned that although Electroserver</span><span style="font-family:arial;"> and Smart fox are very similar technologies, he is currently preferring</span><span style="font-family:arial;"> Electroserver, simply because its nicer to use, the classes are cleaner and</span><span style="font-family:arial;"> prefers the architecture. This server can use binary rather than XML, so</span><span style="font-family:arial;"> reduces the size of the data being sent to the server- faster.</span><br /><br /><span style="font-family:arial;">DarkStar- OpenSource- can support a huge number of users and has been used</span><span style="font-family:arial;"> for live commercial projects which prove this. Again its written in Java</span><span style="font-family:arial;"> with a flash api. Although Ian did not recommend this for anyone who</span><span style="font-family:arial;"> preferred not to extend classes server side. I think perhaps, in contrast</span><span style="font-family:arial;"> to the other servers, you cant modify this server functionality from within</span><br /><span style="font-family:arial;">flash.</span><br /><br /><span style="font-family:arial;">Red 5, Smartfox and Electroserver, you can affect server functionality</span><span style="font-family:arial;"> client side. Ian did not recommend this for a project with a large number</span><span style="font-family:arial;"> of users, since its less efficient and the server would be prone to fall</span><span style="font-family:arial;"> over (smartfox was the server he was using at the time, with PHP for</span><br /><span style="font-family:arial;">persistent user data). He gave an example of a game he produced where</span><span style="font-family:arial;"> modifications were only made in flash with no extra server side programming.</span><span style="font-family:arial;"> Although the game works well, when the game received a huge influx of users,</span><span style="font-family:arial;"> (I think he said about 700) the server fell over and needed restarting, and</span><span style="font-family:arial;"> a couple hours later again. Despite this draw back he did emphasis that the</span><span style="font-family:arial;"> game does work well and that the games usual user count are about 70 at a</span><span style="font-family:arial;"> time.</span><br /><br /><span style="font-style: italic;font-family:arial;" >A couple of other useful points...</span><br /><br /><ul><li><span style="font-family:arial;">-Although clients prefer data capture it does put off users if they have to fill in a form before playing. 'quick play' buttons are very useful and login facilities need to offer the player an incentive such as keeping their game character.</span></li></ul><ul><li><span style="font-family:arial;">-Storing game stats and other persistent data can done using another technology in combination with a socket server, for Zwock PHP was used.</span></li></ul><br /><span style="font-style: italic;font-family:arial;" >Multiplayer games are about creating an illusion-</span><br /><br /><ul><li><span style="font-family:arial;"> -Its good to create a number of 'bot' opponents, this is particularly important during the early days of release. If a player enters a lobby and theres noone else to play, they will exit immediately. Create realistic bots, Ian actually has an algorithm for producing realistic opponent names. Depending on the game, you can swap real players in for bots as more people join the game. This depends on the context of the game as can get quite confusing for players.</span></li></ul><ul><li><span style="font-family:arial;">-In addition to the problem of an empty lobby, users don't want to wait a long time to enter a game. Therefore if noone joins after a set amount oftime, Ian recommends sending bots in to fill up the spaces</span></li></ul><ul><li><span style="font-family:arial;">-With fluid movement of games characters, you wont be wanting to send every move the player makes. Send a limited number of coordinates per second. Then ease between the coordinates to create an illusion of fluid movement. For example with a car game send the coordinates, direction, speed etc to work out where to move the car, when you receive the next location of the car move to minimize the offset.</span></li></ul><br /><ul><li><span style="font-family:arial;">-Fighting/ shoot em ups- this genre (in flash) its important to get the level design correct. Generally these games are quite open plan because of lag and the offset of characters, everyone is literally playing a different game. They think they are playing the same game and its important not to shatter that illusion, player A may fire a bullet, player B ducks behind a wall, to Player B it appears that the bullet missed, but to player A it may have hit. Iain also suggests giving a player feedback straight away, show player A blood splats from player B, even if in the end logic has decided not to take health away from player B. There are complex ways to get around this problem involving calculations of players future positions etc, although iain didn't think this would be necessary for a flash game and was overly complex.</span></li></ul><ul><li><span style="font-family:arial;">-Game differences such a conflict between what clients think has actually happened- Iain suggests this can be decided at random, or that the games host's version of the game is always correct.</span></li></ul><br /><ul><li><span style="font-family:arial;">-Although users like chat areas it creates legal obligations- <a href="http://en.wikipedia.org/wiki/Gary_Glitter">pedophiles</a>, child molestation etc etc etc. The Disney virtual world has a huge number or moderators in comparison to developers. One game he produced has a number of preselected messages you can send to players during game play. An interesting feature is that the number of the message is sent to the server and depending on the selected language/country the actual message which appears is translated.</span></li></ul><ul><li><span style="font-family:arial;">-Score boards are an invitation to hackers to see their name plastered all over your web page. To get round this for Zwock, Iain made sure that the highest score you could get for a game was limited, therefore to get to the top of the league table to had to play games over and over.</span></li></ul><ul><li><span style="font-family:arial;">- Obviously turned based games are obviously a lot easier to implement.</span></li></ul><br /><span style="font-family:arial;">As an example of a game with very good implementation, Iain showed us</span><a style="font-family: arial;" href="http://www.xgenstudios.com/play/stickarena"> stick arena </a>. <span style="font-family:arial;">The talk at Brighton Flash was certainly inspirational and very useful regarding the practical implications of producing commercial muliplayers. Personally I can't wait to get stuck in.</span><br /><br /><span style="font-family:arial;">I hope this information is useful, I've tried to remember the topics as best</span><span style="font-family:arial;"> I can. But as I mentioned some topics will require some further</span><span style="font-family:arial;"> investigation.</span>electrobunnyhttp://www.blogger.com/profile/02643880520663924819noreply@blogger.com5tag:blogger.com,1999:blog-8000170766853907061.post-70864002944176875422008-10-25T07:18:00.000-07:002008-10-26T02:50:30.082-07:00Clipping in Away3d<span style="font-size:85%;"><span style="font-family:verdana;">As promised I've conducted a series of experiments to try and understand the differences between the various 3d engines for flash. Since I lack the time to learn and produce a movie using each api, i have concentrated on Away3d and Sandy. A study of all 4 of the engines I have previously mentioned can be found <a href="http://seeing-is-believing.blogspot.com/2008/08/flash-3d-engines-clipping-benchmark.html">here</a>.<br /><br />Since discussing some of the drawbacks of Away3d and clipping problems, I have researched <a href="http://groups.google.com/group/away3d-dev/browse_thread/thread/d3259cd08f5e1808">methods</a> to solve this issue. As suggested by Peter Kapelyan one of the easiest methods to correct clipping in Away3d or Papervision is to simply add extra triangles. Since the problem occurs when part of a face extends past the camera, this is an obvious solution, thus creating a smaller section to be culled.<br /><br />The following examples show a plane created with Away3d. Creating a plane with 3x3 segments results in extreme clipping and really is a problem. Upon increasing to 4x4 the problem is immediately less obvious; 5x5 segments completely irradiates the problem. Of course increasing the number of faces is going require more processing power and memory usage and is ultimately less efficient. It it is important to take this in perspective; as far as I am aware Away3d is quite a fast 3d engine. Sandy suffers from clipping as much as Away3d when segments are reduced to two. Essentially you must nearly double the number of faces used if converting from Sandy to Away3d (3 -5 segments). This is a primitive study and does not give indication of scalability; hence there is the possibility that differences between the two engines could become more or less exaggerated with complex scenes.<br /><br /><span style="font-style: italic;">please be patient waiting for these to load they are loading from a very slow server 0_o</span><br /><span style="font-weight: bold; font-style: italic;">use keypad up and down to move along the plane</span><br /><br /><br /><span style="font-weight: bold;">Away 3d 3x3 segments</span><br /><object height="300" width="300"><br /><param name="movie" value="http://electrobunny.is-the-boss.com/3dex1.swf"><br /><embed src="http://electrobunny.is-the-boss.com/3dex.swf" height="300" width="300"></embed></object><br /><span style="font-weight: bold;">Away 3d 4x4 segments</span><br /><object height="300" width="300"><br /><param name="movie" value="http://electrobunny.is-the-boss.com/3dex.swf"><br /><embed src="http://electrobunny.is-the-boss.com/3dex.swf" height="300" width="300"></embed></object><br /><span style="font-weight: bold;">Away 3d 5x5 segments</span><br /><object height="300" width="300"><br /><param name="movie" value="http://electrobunny.is-the-boss.com/3dex3.swf"><br /><embed src="http://electrobunny.is-the-boss.com/3dex.swf" height="300" width="300"></embed></object><br /><span style="font-weight: bold;">Sandy 3x3 segments</span><br /><object height="300" width="300"><br /><param name="movie" value="http://electrobunny.is-the-boss.com/example003.swf"><br /><embed src="http://electrobunny.is-the-boss.com/3dex.swf" height="300" width="300"></embed><br /><br /></object><br />Some interesting blogs regarding first impressions on a variety of 3d engines and workarounds for issues such as clipping. <a href="http://coobico.com/index.php/blog/article/3d_in_flash_papervision_away3d_and_sandy3d/away3d.com/">coobico</a>, <a href="http://saumyaray.wordpress.com/category/actionscript3/page/2/">saumyaray</a>, <a href="http://blog.iainlobb.com/2008_08_01_archive.html">Ian Lobb</a>.<br /></span></span>electrobunnyhttp://www.blogger.com/profile/02643880520663924819noreply@blogger.com2tag:blogger.com,1999:blog-8000170766853907061.post-22507566105236799742008-10-20T13:41:00.000-07:002008-10-20T14:42:11.682-07:00Foray into 3d<span style="font-size:85%;"><span style="font-family:verdana;">This is my first post and I want to talk about my recent foray into the world of 3d engines for Flash. The technology is moving rapidly, but emerging</span></span><span style="font-size:85%;"><span style="font-family:verdana;"> are the main players:<br /></span></span><ul><li><span style="font-size:85%;"><a href="http://www.papervision3d.org/">Papervision</a></span></li><li><span style="font-size:85%;"><a href="http://away3d.com/">away3d</a></span></li><li><span style="font-size:85%;"><a href="http://www.flashsandy.org/">Sandy</a></span></li><li><span style="font-size:85%;"><a href="http://alternativaplatform.com/">Alternativa</a></span></li></ul><span style=";font-family:verdana;font-size:85%;" >Being somewhat a novice to the 3d world, its difficult to begin to make a decision as to which API to use, and certainly word of mouth sometimes seems the best option. Having being recommended Away3d I embarked upon getting to grips with its API. A bit of experimentation revealed what I would call severe limitations of this engine. Both Papervision and Away3d suffer from severe clipping issues; and although a <a href="http://http//www.flashmagazine.com/tutorials/detail/away3d_basics_the_view_and_the_scene/">workaround</a> is suggested via embedding views within Sprites, this does not by any means rectify the situation. In particular clipping is noticeable where an object is moving along a horizontal plane, but does not seem to be a problem for vertical surroundings such as walls. In the defense of both papervision and Away3d, the advantage of these engines are in their speed and memory usage; and therefore may be justified for certain projects not affected by these limitations.<br /><br />My experiment (example to be added) was based upon creating a small 3d environment and from a proffessional stand point, the output from Away3d was not satisfactory. The clipping issues lead me to this <a href="http://seeing-is-believing.blogspot.com/2008/08/flash-3d-engines-clipping-benchmark.html">blog</a> benchmarking all of the afore mentioned engines for clipping issues. As seen in both the Papervision and Away3d examples clipping occurs between a cube moving on a flat plane. Although it could be argued that the clipping is minimal in these examples; anything more sophisticated, such as adding a texture would produce a much more noticeable effect.<br /><br />This lead me to experiment with Alternativa3d. Initially I was very impressed with the quality of documentation (something which is lacking for Away3d), this included a number of basic to advanced tutorials. As can be viewed in the <a href="http://alternativaplatform.com/en/demos/bunker/">demos</a> the results are exciting, and in this case reminiscent of the old PC shoot 'em up Doom. It's astounding that we can now produce <span style="font-style: italic;">PC</span> games which were cutting edge at the time and via the internet, using <span style="font-style: italic;">Flash</span>, once used as basic 2d animation tool.<br /><br />My criticism of Alternativa3d is whereas the api's for Sandy, Papervision and Away3d are largely the same, Alternativa uses slightly different terminology and is more complex. However this could reflect Alternativa's advanced capabilities which includes collision detection (a feature not yet available in Away3d).<br /><br />Sandy has some interesting <a href="http://www.flashsandy.org/demos/cars">demos</a>, this one in particular boasting collision detection and integration with a physics engine, although it don't seem to match Alternativa's sophistication, perhaps this is though lack of trying. The documentation and <a href="http://www.flashsandy.org/tutorials/3.0">tutorial's</a> offered are phenomenal and definitely the best so far. In light of this I would probably recommend any novice looking for a solid introduction to the 3d world to start with Sandy and for those who are still fearful of AS3 (why?!) Sandy is also available to AS2 users.<br /><span style="text-decoration: underline;"></span></span>electrobunnyhttp://www.blogger.com/profile/02643880520663924819noreply@blogger.com0