Categories Displayed in Flash

Archive for March, 2008

Flash: Rapid IA, IxD, XD, UX with Flash

Gageing interest for a free class on rapid prototyping in Flash in the Los Angeles area.  Flash can be a powerful ally in developing mockups, prototypes, it's easily integrated with
graphics, video, images, and animation, yet I run into a large number of IA and IxD'er who think the tool isn't for them (!).

For those of you not into the acronyms.

  • IA is Information Architecture,  early stage breaking applications into wireframes and copy.
  • IxD is Interaction/Interactive Design,  - starting to break away from page metaphors, and start getting into applications, workflows.
  • XD is Experience Design,- merging workflow with narrative, and a cinematic, broadcasty feel.
  • UX is User Experience - similar to User Centric Design, making sure that the information experience however delivered is gender, culture, and workflow appropriate.

Here's what I'm contemplating:

  • Flash basics, if you use Visio, you have most of the skills already,
  • how to create mockups using basic animation, these are very useful in group meetings
  • whiteboard sessions and storeboards converted to interactive wireframes or low fidelity prototypes.
  • illustrator and photoshop high fidelity prototypes.
  • interactive design patterns (media players, collections, login)
  • using animation to create more narrative UI's
  • specing interactive applications with flow and state diagrams,

Any suggestions of topics you'd like to see? would you be interested in attending?

March 22, 2008 at 5:59 pm   and Filed Under flash  | Add Comment

Flash: TextField actionscript hyperlink in AS3.0

In this article we cover how to get flash.text.TextFields HTML anchors/hyperlinks, to call actionscript functions, how to use CSS to style the up, over/hover and down/active and [UPDATE] visited states similar to hyperlinks in normal html.

The applications of this are numerous. Perhaps clicking a hyperlink will deeplink into your Flash application without navigating away, or perhaps it would open up a dictionary definition on the term.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
In this example clicking on the 3 links will show in the bottom text box where the link was meant to go.  This is based on the event handler receiving a flash.events.TextEvent.LINK event, as dispatched by formatting the '<a href=..' to dispatch the link event instead of the default navigateToURL.

The 'blog1' and 'blog2' links both go to the same URL, when either are clicked on both will change to the visited style.   This change color requires a hack, as the 'a:visited' isn't one of the CSS tags supported by Flash.   However we CAN overwrite the CSS style to display a different style, on the click.   This is more complex as we have to figure out, a) are we interested in changing all links that point to that location? or b) just the one that was clicked on?.   Keep in mind that this is a hack, and differs from the way browsers behave the links won't persist past that flash session, or across different TextFields unless you code it that way.

In a future article I'll discuss how to clean and process HTML, and replace the links with internal flash link's if you are using CMS'd, progressive enhancement websites, with Flash as the RIA style/presentation layer.  So the same HTML will work as expected when in HTML only site (e.g. for search bots) or in the Flash only.

  1.  
  2. import flash.text.StyleSheet;
  3. import flash.events.TextEvent;
  4.  
  5. var style:StyleSheet = new StyleSheet();
  6.  
  7. var hover:Object = new Object();
  8. hover.fontWeight = "bold";
  9. hover.color = "#00FF00";
  10. var link:Object = new Object();
  11. link.fontWeight = "bold";
  12. link.textDecoration= "underline";
  13. link.color = "#555555";
  14. var active:Object = new Object();
  15. active.fontWeight = "bold";
  16. active.color = "#FF0000";
  17.  
  18. var visited:Object = new Object();
  19. visited.fontWeight = "bold";
  20. visited.color = "#cc0099";
  21. visited.textDecoration= "underline";
  22.  
  23. style.setStyle("a:link", link);
  24. style.setStyle("a:hover", hover);
  25. style.setStyle("a:active", active);
  26. style.setStyle(".visited", visited); //note Flash doesn't support a:visited
  27.  
  28. html_txt.styleSheet = style;
  29. var htm:Array = new Array();
  30. htm.push("
  31. <p align="center">Example of HTML hyperlinks calling actionscript in AS3.0
  32.  
  33. ");
  34. htm.push("
  35.  
  36. Click to visit <a href="event:http://www.TroyWorks.com">home</a> ");
  37. htm.push("<a href="event:http://www.TroyWorks.com/blog/">blog1</a> ");
  38. htm.push("<a href="event:http://www.TroyWorks.com/blog/">blog2</a>");
  39. html_txt.htmlText= htm.join("");
  40.  
  41. function onHyperLinkEvent(evt:TextEvent):void {
  42.         trace("**click**"+ evt.text);
  43.         define_txt.text = ( "Clicked on " + evt.text);
  44.         var str:String = html_txt.htmlText;
  45.      //// update the link to the 'visited' state'
  46.  
  47.         str = str.split("'event:"+evt.text+"'").join("'event:"+evt.text+"' class='visited' ");
  48.         html_txt.htmlText = str;
  49. }
  50.  
  51. html_txt.addEventListener(TextEvent.LINK, onHyperLinkEvent);

March 14, 2008 at 1:45 am   and Filed Under as3, events, text  | 2 Comments

Flash: 4 Tricks for using MovieClips as Buttons

So here are 4 tricks I've found useful:

  1. Use actionscript to create the Button behavior (enlarging etc), centralizing it in one place.
  2. Use clips styled in the IDE, and copy their style/filters for mouse over, down, disabled state.
  3. Use mouseEnabled (and alpha/brightness) to temporarily disable a button
  4. Use the instance name as the label, and in the event parsing.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Styling MOUSE_OVER, MOUSE_DOWN States

Similar to CSS centralizing style, centralizing behavioral style offers the same maintenance advantages.   Using clips on the stage for style allows the designer to visually see what's desired, rather than spending countless iterations tweaking actionscript to get it right, it's a good handoff in team based approach.   I also sometimes use describeType 'autowire' any buttons of particular classes.   For the disabled state I stacked two brightness filters ontop of each other.

Styling it to send all the events to a central controller (MVC UCM style), allows things to be debugged far easier than when events are going everywhere, and the controller has internal state, respond appropriately, say ignoring all clicks during loading, without having to rewire all the various components.

For 1 and 2 here's the underlying code. Notice I use mouseChildren = false to keep the label textfield from generating events.

  1.  
  2. function configureMC_Button(ary:Array, addL:Boolean = true):void {var a:MovieClip;
  3.  
  4. var i:int = 0;
  5.  
  6. var n:int =ary.length;
  7.  
  8. for (true; i < n; ++i) {
  9.  
  10. a = ary[i];
  11.  
  12. if (addL) {
  13.  
  14. a.addEventListener(MouseEvent.MOUSE_OVER, onMouseOverHandler);
  15.  
  16. a.addEventListener(MouseEvent.MOUSE_OUT, onMouseOutHandler);
  17.  
  18. a.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);
  19.  
  20. a.addEventListener(MouseEvent.MOUSE_UP, onMouseOverHandler);a.addEventListener(MouseEvent.CLICK, onMouseClickHandler);
  21.  
  22. a.mouseChildren =false;
  23.  
  24. } else {
  25.  
  26. a.removeEventListener(MouseEvent.MOUSE_OVER, onMouseOverHandler);
  27.  
  28. a.removeEventListener(MouseEvent.MOUSE_OUT, onMouseOutHandler);
  29.  
  30. a.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);
  31.  
  32. a.removeEventListener(MouseEvent.MOUSE_UP, onMouseOverHandler);
  33.  
  34. a.removeEventListener(MouseEvent.CLICK, onMouseClickHandler);
  35.  
  36. }
  37.  
  38. }
  39.  
  40. }
  41.  
  42. function onMouseClickHandler(evt:Event):void {
  43.  
  44. var mc:MovieClip = MovieClip(evt.target);
  45.  
  46. output_txt.text =(" \r"+ mc.label_txt.text + "**Clicked **");
  47.  
  48. }
  49.  
  50. function onMouseDownHandler(evt:Event):void {
  51.  
  52. var mc:MovieClip = MovieClip(evt.target);
  53.  
  54. mc.filters = downTreatment.filters;
  55.  
  56. }
  57.  
  58. function onMouseOverHandler(evt:Event):void {
  59.  
  60. var mc:MovieClip = MovieClip(evt.target);
  61.  
  62. mc.scaleX = mc.scaleY = 1.2;
  63.  
  64. mc.filters = overTreatment.filters;
  65.  
  66. }
  67.  
  68. function onMouseOutHandler(evt:Event):void {
  69.  
  70. var mc:MovieClip = MovieClip(evt.target);
  71.  
  72. mc.scaleX = mc.scaleY = 1;
  73.  
  74. mc.filters = [];
  75.  
  76. }
  77.  
  78. overTreatment.visible = downTreatment.visible = disabledTreatment.visible = false;
  79.  
  80. configureMC_Button([a_btn, b_btn, c_btn, d_btn, e_btn, f_btn, g_btn]);

Enabling and Disabling via ActionScript

You can disable/enable a clip simply by using the mouseEnabled field which will turn on or off mouse events.   Contrast this with the approach of adding/removing listeners to enable or disable a button, which may have multiple listeners for different classes, you can't see, so you never know if you got them all.

  1.  
  2. function setEnabled(  ary:Array, enable:Boolean = true):void {var a:MovieClip;
  3.  
  4. var i:int = 0;
  5.  
  6. var n:int =ary.length;
  7.  
  8. for (true; i < n; ++i) {
  9.  
  10. a = ary[i];
  11.  
  12. if (enable) {
  13.  
  14. a.mouseEnabled = false;
  15.  
  16. a.filters =[];
  17.  
  18. } else {
  19.  
  20. a.mouseEnabled = false;
  21.  
  22. a.filters = disabledTreatment.filters;
  23.  
  24. }
  25.  
  26. }
  27.  
  28. }
  29.  
  30. setEnabled([d_btn, e_btn], false);

Using the instance name as id.

Using the instance as the basis for identification, saying parsing it for use the label, and in the event, can make things more uniform than having buttons dispatching events,.   In internationalized apps where the label changes based on whatever language is present, the instance name can serve as a key to finding the appropriate text in some multilanguage dictionary, or even show when a label is missing.

In Closing
Using a single movieClip has many advantages,  only one skin has to be created instead of 4-5 for a SimpleButton.   When handled in the way outlined above it has many of the advantages of being a component, without the work of being a full blown one.   It minimizes the number of classes/library items when each button is created with a unique label hard coded into it.

In conjunction with a tweening engine, it allows for what I call momentum styled buttons.   Buttons that don't have crisp state changes like SimpleButton attempts on the mouse up/over/down. Things that fade up, and down, like real world lightbulbs, cars.   When used with ColorTransform this can allow for adaptively styled UI, like that of CSS.

There are also safety benefits. In AS3.0 the timeline is purely script driven, there are still bugs when using multiple frames to manage state on particular versions of the flash player.   I've had odd issues with sound not firing or not stopping firing, components blowing up when in tweens or in timelines.

March 13, 2008 at 4:55 am   and Filed Under Flash IDE, Sketch, as3, decoupling, events, flash, introspection  | Add Comment

Flash: Johnny Lee on Wii

Awesome interview with, Johnny Lee who has done some really fun work with the Wii. The research is completely relevant to working with the WiiFlash server.

In its short history, the Nintendo Wii has become one of the most popular game consoles available. In particular, its remote controller is sophisticated, containing a number of input devices that outperform regular personal computers. Johnny Lee, a graduate student at Carnegie Mellon University is working on a number of exciting projects with the controller. He joins Phil and Scott to discuss his applications, including his video demonstrations available on YouTube.

Johnny talks about what led him to the Wii remote, as well as how he was able to work with the new device. He reviews the process he used with the projects, as well as what other people are doing with the controller.

March 13, 2008 at 1:10 am   and Filed Under wiiflash  | Add Comment

Flash + SEO tricks with SWFObject, and SWFObject2

 Progressive enhancement  is a highly recommended technique for integrating flash into html pages in an SEO compatible manner.   As recommended by google, adobe, and others.   How it works is at the base is a plain html page that define the site structure using conventional links, which when javascript and flash are present autoupgrades/overwrites the boring html with your stunning flash file.

One thing that should be aware of is that unless there is some text in the html div that gets ovewritten, nothing will be indexed by the any search engine, as yet none are rendering javascript rendered html pages. ..meaning you'll be invisible on google ( perhaps that's what' you want if you're in stealthmode). Even if your index.swf was indexed, if your breakdown is one swf per section, the odds of those getting indexed are remote at best. To demonstrate.

In a recent project, we were in a rush to get everything up so just left it with an html + swfObject to embed the swf file and for everyone else a warning graphic saying "javascript + flash required" (meaning almost no text other than the meta tags). We assumed/required user's needing flash for the content, and we didn't have budget for a rich html site (client requires high end design). Amusingly, despite the unique name., after a few months, the main website the CEO and President's LinkedIn pages scored higher in rank than the main website, presumably getting more hits.

So in a recent push of a new landing page, we upgraded to the nice SWFObject 2.0 but were still in a crunch so couldn't get an html site up underneath yet. But what we did have time to do is create a DIV containing a mirror of the text so that the search bots had something to chew on, and used CSS/Javascript to hide the div so normal users couldn't see it. Within a week, that new page is at the top of google, surpassing the President's pages, with the hidden div text showing up in the link summary below it, so it demonstrate how important powerful having the html text beneath the flash is!

Here's how it works, you have a html div beneath the flash site that contains the info that you want. Including links to other html pages.

  1.  
  2.  
  3. <div id="contentToReplaceDiv">
  4.  
  5. <div id="main">
  6. <h1>Flash SEO tricks</h1>
  7. <p>Improve your search engine ranking quickly</p>
  8. <p>easy changes</p>
  9. <p>best of both worlds, high experience flash for your users, richly targeted text for the search bots</p>
  10. <div>
  11. <ul>
  12. <li><a href="http://www.troyworks.com">http://www.troyworks.com</a></li>
  13. <li><a href="http://www.troyworks.com/blog">http://www.troyworks.com/blog/</a></li>
  14.  
  15. </ul>
  16. </div>

In the CSS you just hide the div

  1.  
  2. div#contentToReplaceDiv
  3. {
  4. margin: 0px 20px 0px 20px;
  5. display: none;
  6. }

Then just follow the normal SWFObject instructions to embed a swf

A working verison can be seen here:

March 11, 2008 at 12:14 am   and Filed Under SWFObject, seo  | Add Comment

Flash: Blend Modes and Optimal Contrast

Got some chance to play with blend modes this weekend...cool stuff. While the example is neat looking, In particular was looking for a solution to (dynamically) contrasting against an unknown background, as is likely to happen with developing tools with unknown content, else whatever you pick will break.. This is easy to see on my TV programs, where the 'bug' has to show up against an rapidly changing background of. Say showing white text against a dark background and a light text against a dark, versus the normal technique of white text with a dark blur around it, to always have an moat of safety around it.

Flash blend modes exploration on high contrast backgrounds
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

What you're seeing is a 3 line text with:

Snow (white and black)
Snow (50% gray, 50% gray 50% transparent)
Snow (black and white)

Repeated a bunch of times, in a clip with the blend mode listed at the top.

Unfortunately in the gray zone most techniques just fail. Helped me realize what's really desired is some intelligence as to what is beneath the image to pick a suitable offset, say at when 50% gray, just choosing white or black based on the dominate color of the page. Leading to the only way to get high contrast between menu items is the halo..which I suppose is more consistent from a usability, if less integrated with the image.

Kaourantin the implementer of these in the flash player has great information on how they behave, and the impact on performance. As mentioned here To use Alpha and erase blend modes you have to do extra work: 1) put them in a parent movie clip, and turn that parent's movieclip blend mode to 'layer', else they don't show up at all.

Contrast this approach with the use of ColorUtils and Adaptive Color

March 10, 2008 at 4:32 am   and Filed Under ColorUtil, UI, color  | Add Comment
Copyright © 2008. All Rights Reserved  |   MADE IN METHOD-E
info@TroyWorks.com