Sally, a great photographer in the Augusta, GA area wanted help putting up a website that was easy to maintain and looked professional. I helped her out and set her up with a wordpress install, some essential plugins and a few themes! She is ecstatic!
Check out the site here: http://sallykolar.com/ and book her if you’re in the area and want great photography!
Color can sometimes make or break your design. I’ve put together this flash to show how to set a movieclip to a certain color, I’ve had to do this at runtime and had to go by different values such as a hex number, rgb values and have even wanted to just set a random color, so this example does them all! It’s even nice for translating a Hexadecimal color into RGB color.
Flash uses a Transform object to control certain properties of movie clips. To set color we need to use a Transform object as well as a ColorTransform object. ColorTransform objets are used to, you guessed it, tell the Transform object what color we want to set our clip to. It was a little unintuitive for me to learn, but now it makes sense, or at least enough sense to use.
I’ve made a function that does all this for you. You just send it the movieClip reference and a color.
1 | setColor(myMovieClip, myColor) |
There are functions to convert rgb values to a hex value, and from a hex value to red, blue and green values as well.
To make a random hexadecimal number Math.random() * 16777216 (the total number of hexadecimal numbers)
1 2 | import flash.geom.ColorTransform; import flash.geom.Transform; |
1 | var myTransform:Transform = new Transform(item); |
1 | var myColorTransform:ColorTransform = new ColorTransform(); |
1 | myColorTransform.rgb = myColor; |
1 | myTransform.colorTransform = myColorTransform; |
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 | //method to set a specified movieClip(item:movidClip) to a specified color(col:hex value number) function setColor(item, col) { //make transform object and send the specified movieClip to it var myTransform:Transform = new Transform(item); //make colorTransform var myColorTransform:ColorTransform = new ColorTransform(); //check color bounds if (col > 16777215) col = 16777215; else if (col < 0) col = 0; //variable to hold the color value var myColor:Number = col; //set color through color transformation myColorTransform.rgb = myColor; myTransform.colorTransform = myColorTransform; trace("the hex number: 0x" + addZeros(myColorTransform.rgb.toString(16))); var rgbObject = hex2rgb(myColor); trace("the hex number in rgb format: "+rgbObject.r+", "+rgbObject.g+", "+rgbObject.b); trace("the hex number in decimal format: " + myColorTransform.rgb); displayColors(myColorTransform.rgb); } //bitwise conversion of rgb color to a hex value function rgb2hex(r, g, b):Number { return(r<<16 | g<<8 | b); } //bitwise conversion of a hex color into rgb values function hex2rgb (hex):Object{ var red = hex>>16; var greenBlue = hex-(red<<16) var green = greenBlue>>8; var blue = greenBlue - (green << 8); //trace("r: " + red + " g: " + green + " b: " + blue); return({r:red, g:green, b:blue}); } //BUTTONS randomColor.onRelease = function() { //make random number (within hex number range) var theColor = Math.floor(Math.random() * 16777215); //set ball color to random color value setColor(colorBall.inner, theColor); } readHexColor.onRelease = function() { //convert 6 character input string into hex color format used by actionscript var theColor = "0x"+hexColorIn.text; //set ball color to hex color value setColor(colorBall.inner, theColor); } readRGBColor.onRelease = function() { //convert rgb values into hex value var theColor = rgb2hex(redColorIn.text, greenColorIn.text, blueColorIn.text); //set ball color to converted hex color value setColor(colorBall.inner, theColor); } readDecColor.onRelease = function() { //convert rgb values into hex value var theColor = decColorIn.text; //set ball color to converted hex color value setColor(colorBall.inner, theColor); } |
color.zip (containing color.fla and color.swf)
To accompany the last presidential debate, I ask a question:
It’s not just about what party you’re affiliated with, who you agree with more on an issue or which candidate you understand better… it’s a combination of them all. It’s more important how a candidate can handle the different issues facing us today than how they perform in a debate or advertisement.
There should be somewhere to assign a weight to each issue on the table and then issue by issue see which candidate I agree more with. Then it would calculate and tell me who I really support according to how I prioritize the issues. So if I think the only issue worth voting about is Iraq or the economy and I agree more with Barrack Obama or John McCain on those issues it will be reflect in the results.
It’s pretty hard to explain the whole idea, without building it myself, so that’s just what I did… while I couldn’t stop thinking about it I coded it.
Check it out, and I hope it helps! Cause we’re gonna need all the help we can get on this one! It can help you decide or just test yourself and see if you really support that candidate as much as you think.
I pulled info from CNN’s election center mostly because all the info was gathered for me already, each of the big issues, descriptions and the candidates position. I have a slider for each issue where users select how imortant it is to them (on a scale of 0 to 100 percent). Then users compare their own position on the issues with each candidate (on a scale of 0 to 100 toward each candidate). This is all considered while your support is calculated. Each issue’s importance as a percentage is multiplied by the amount you agree with each candidates position. These are all added up and totaled to give a final percentage. This is innovative in that it’s not just who you agree with mpre, it’s who you agree with more on the isues that you think are more important! Let me know what you think about this and let the candidates know what you think about their positions.
Voters Aide the flash app to help you decide who you support by letting you prioritize the issues and choose which candidate you lean towards on each issue and see the overall results.
Here are some screenshots from my example tutorial of integrating Flash with google analytics event tracking showing actionscript to use for event tracking in flash . To get to your Event Tracking Reports (once it is enabled) you just click on the Content section in the nav list and then Event Tracking drilldown will give all details…
The graphic chart report showing events
Numeric event stats
Event Categories and actions with stats
All actions reported for the ‘ball’ category
All labels for category ‘ball’ and action ‘created’.
Enjoy, and let me know if you want more images. Check out the full post with source code here: Event tracking with google analytics flash integration tutorial
Many have read my Integrate Google Analytics with Flash Tutorial in which I express enthusiasm for the new event tracking at google analytics! Well, it’s been a while, but I was admitted to the Beta testing group! So I’ve now had the chance to play with event tracking a bit and wanted to publish my findings!
Almost a year ago Google Analytics announced their new event tracking model and have had help documents published and code samples up. And as with many of Google’s products the beta stamp has lasted a very very long time. Many have seen my earlier tutorial exploring using traditional Google Analytics Tracking from within Flash, and it does wonders to track your flash apps in this manner, but there is a problem with it. We’re using supposed object oriented concepts to track objects as pageviews. One thing is it really isn’t a very intuitive way to represent that data, and another it inflates your pageviews! The solution? the long awaited and announced Event Tracking model. I’ve been itching for this to be released so I could refresh my analytic tactics I use in my flash projects. No, to answer your questions, it has not been released yet, but I contacted Google and explained that I would be a great beta tester for this feature and after a bit of correspondence they invited me to join in the beta testing! This is good news for you too! Because I will tell you all about how to do it and even show you what the reporting looks like and when it is released finally, you will know what you’re in for after this sneak peak!
UPDATE: Here are the reports for this very example: Report from Event Tracking with Flash Tutorial
The very quick summary is this:
1 | _trackEvent(category, action, optional_label, optional_value) |
Note that the _trackEvent function is called on the pageTracker object itself. (initially Google had you instantiate a separate event tracker for every object (or category) you wanted tracked)
For example, if we want to track a ball. All the actions that can apply to the ball are: it being created, dragged, dropped, bounced, deleted… You get the idea. We can have direct user actions tracked or even automatic actions. If we have gravity and physics running, the ball may bounce a lot without any direct user interaction. But it will never be dragged or dropped without direct interaction. I’d recommend only tracking user interactions because who cares how often a ball bounces on your page (unless you’re doing an experiment, of course), want we want to know is how and when a user interacts with the ball.
This is the name of the object you are tracking.
This is the action that happens to your object you want to track.
This can be more information to accompany the action.
A number to provide numerical information to accompany the action.
The tracking functions are below, I enhanced the earlier trackGA function I wrote about. Now you call trackGA with 2 required parameters, categoryOrPageTrack and action. categoryOrPageTrack is where you have to pay attention. I wanted to keep the ability to track pageviews as well as have event tracking, so as the first param you either send in the string ‘page’ to explicitly state that you want to track the page view, or you send in another string to state you want to track an event on that specified object. Action remains the same, the action you want tracked (either on the pageview, it is the path that will appear in your reports; or the event tracking will be the action tracked to the category)…
So to track a pageview I call
1 | trackGA("page", "swfLoaded"); |
and to track an event to an object I call ball:
1 | trackGA("ball", "created"); |
The trackGA function will rout your call to the appropriate place and send the info to Google through either the trackGAPage function or the trackGAEvent function.
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 | //trackGA (categoryOrPageTrack [required], action [required], label [optional], value [optional] //categoryOrPageTrack - either the category string or a string saying 'page' function trackGA(categoryOrPageTrack:String, action:String, optional_label:String, optional_value:Number) { //call page tracking version of Google analytics if (categoryOrPageTrack == "page") { //trace("GATC pageTracker call"); trackGAPage(action); } //call event tracking method else { //trace("GATC event tracker call"); trackGAEvent(categoryOrPageTrack, action, optional_label, optional_value); } } var prefix:String = "flashGA"; //Google Analytics Calls Page Tracking - for tracking page views function trackGAPage(action:String) { //GA call if (prefix != null && !eventTrack){ var call = "/" + prefix + "/" + action; //Old Google Analytics Code (urchinTracker) ExternalInterface.call("urchinTracker('"+call+"')"); //New Google Analytics Code (_trackPageview) pageview ExternalInterface.call("pageTracker._trackPageview('"+call+"')"); trace("==GATC==pageTracker._trackPageview('"+call+"')"); } _root.tracer.text = action; } //Google Analytics Event Tracking Calls - for tracking events and not pageviews //category, action, label (optional), value(optional) function trackGAEvent(category:String, action:String, optional_label:String, optional_value:Number) { /* objectTracker_trackEvent(category, action, optional_label, optional_value) category (required) - The name you supply for the group of objects you want to track. action (required) - A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object. label (optional) - An optional string to provide additional dimensions to the event data. value (optional) - An optional integer that you can use to provide numerical data about the user event. */ theCategory = "'" + category; theAction = "', '" + action + "'"; theLabel = (optional_label == null) ? "" : ", '" + optional_label + "'"; theValue = (optional_value == null) ? "" : ", " + optional_value; //New Google Analytics Code (_trackEvent) event tracking theCall = "pageTracker._trackEvent(" + theCategory + theAction + theLabel + theValue + ")"; ExternalInterface.call(theCall); trace("====GATC===="+theCall); _root.tracer.text = theCategory + theAction + theLabel + theValue; } |
Here’s the actionscript lines where I call the trackGA function:
1 2 3 4 5 6 7 8 9 10 11 12 | //Tracks that the swf loads, so I pass 'page' to let it know I want a pageview tracked... trackGA("page", "swfLoaded"); //Tracks various objects sending various actions trackGA("gravity", "on"); trackGA("gravity", "off"); trackGA("friction", "on"); trackGA("friction", "off"); trackGA("ball", "deleted", count); trackGA("ball", "created", ballCount); trackGA("ball", "drag", this.ballNum, this.ballNum); trackGA("ball", "drop", this.ballNum, this.ballNum); trackGA("ball", "bounce", "right", this.ballNum); |
View example in it’s own html page, I even added a couple html buttons with javascript hooked in to show javascript event tracking implementation.
I’ve noticed while putting this together that the calls to google analytics are not completely fullfilled, this example sends out correct calls to javascript, but (in firefox at least) a max of about 1 tracking call is registered with the tracking code every 5 seconds or so. I noticed this as I was monitoring the drag and drop events for each ball, although the drag and drop events are both fired, usually the drag event was received and the drop is not. After verifying that my code was consistent, I noticed that no matter how fast I interacted with the objects, the calls were much slower. I’m guessing this is a limit placed by the google team to keep us from sending pointless data such as is posted at the bottom of the event tracking implementation guide, titled Events Per Session Limit.
I’ve had a couple inquiries about how to do a simple preloader in Flash. The technique and also the actionscript which implements the technique. So here is a percentage preloader example with source code and a source file to play with.
So the idea of a preloader is to hold the swf until the file has sufficiently loaded. Once it’s is fully loaded, then the preloader advances to swf to the actual content.
There are different types of preloaders: status preloaders and percentage preloaders. Status preloaders only tell you the status of the loading file. So it will have a simple looping animation like a spinning wheel and you just wait until it is fully loaded. Percentage preloaders will actually tell you how much has been loaded or how much is left and usually will have a bar or something that fills as the file loads or at least tell you in numbers how much has been loaded.
These techniques require the same first few steps. As you can guess, the percentage preloader takes a couple extra steps, but it is much worth the extra few minutes in my opinion. It gives the users valuable information about the program or file they are waiting on. If they are waiting and have no idea how much longer their wait will be, who knows how long they will stick around and watch an hourglass.
In actionscript the only special methods we use for a preloader are getBytesLoaded and getBytesTotal. Once we know the bytes loaded and the total bytes to load, with a little math we calculate what percentage is loaded.
This is a preview, note that it is not actually a preloader, just what one looks like. You can see this preloader working in my Interactive Image Viewer…
I’ve put this code on the preloader movieclip which sits alone on frame one with a simple stop(); actionscript command. Frame 2 contains the beginnings of the actual content. To break down the code, we first see that it is performed every frame: onClipEvent(enterFrame), so every frame we will see how much has loaded. In this case the frame rate is 20 frames per second, so we check the amount loaded every 20th of a second!
First we find the percentLoaded by dividing the total bytes to load by the number of bytes currently loaded. Then we display the percent loaded in a text box named feedback and adjust the xscale of the orange bar according to percentLoaded. Finally we’ll check to see if the percentLoaded has reached 100 yet, and if it has we play the parent clip (which in this case is the root, but it could be used to load numerous objects on the stage). When we play the parent clip, we then go to frame 2 or the actual content of the swf and this preloader is removed from the stage and the code will stop executing. But if percentLoaded is not 100% yet this frame is repeated and the code executes all over again, finding the (hopefully) new number of bytes loaded, and updating the display to inform the user. The code executes so fast that the preloader will actually animate the loading process and inform the user simultaneously.
1 2 3 4 5 6 7 8 9 10 | onClipEvent (enterFrame) { percentLoaded = _parent.getBytesLoaded() / _parent.getBytesTotal() * 100; this.feedback.text = "%" + Math.ceil(percentLoaded ); this.bar._xscale = percentLoaded ; if (percentLoaded => 100) { _parent.play(); } } |
FlashDen is hosting this preloader file: Round Preloader Bar
I’ve re-purposed an old project of mine, the interactive pog portfolio viewer, to FlashDen. I call it the pog portfolio because each work is represented by a circle, or pog, and you play ith it in the “bay” with different interactive physics configurations. When you click a pog you can view a close up image of that item and more details. The whole file has been cleaned up (code and graphics) and documented for easy customizations.It is a small file size as well, under 36kb swf!
This is mainly an image viewer, stay tuned for any updates, like video support etc.
Works and configuration loaded in through a single xml file. Select works from the bay to view title, description image and a link (if applicable). Organize works with the tags or select all and choose the physics of the bay for interactivity control (gravity, spring, grid and friction).
It is fully customizable and fully driven by xml. The xml file contains values for configuring the swf, and also all the information about each work to be included in the portfolio.
Each work is loaded into the “bay�? as a round thumbnail or “pog�?. These pogs are animated with the interaction options (gravity, friction, spring and grid). The pogs are sortable by tags (parsed in from the xml).
The whole color scheme of the image viewer is configurable, or can even be set to random! Have a different color scheme every time your image viewer loads!
Clicking a pog in the interactive bay sends that thumb to the holding area and loads the close up into the focus window for that work. It also loads the details about that work into the detail box (to the right of the focus box). Each works needs a 50×50 thumbnail and a close up (max 375px x 270px) image. Focus images are all loaded in with an informative preloader and fade is once loaded.
Site easily integrates with Google Analytics to track user interactions within this flash portfolio!
All works in the portfolio are passed in through an external xml file, here is a sample work node from xml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- Name or Title of work --> Random Gear <!-- Description of work --> Random gear photograph from FlashDen assets. <!-- Image paths (thumb and focus) are both constructed with the directory names above, or you can use an absolute path (http://flashden.net/new/images/pictures/icon_newsroom.gif) --> <!-- Image thumbnial, this is brought in and masked to a circle (width:50px x height:50px) --> random_gear.jpg <!-- Focus thumbnail, loaded into the Focus Box when pog is clicked (max width:375px x height:270px) --> random_gear.jpg <!-- If a link exsists place it here the Text goes in the title node and the url in the url, if no link leave empty --> http://flashden.net <!-- Tags for this work. Tags are parsed and displayed across the bottom of the bay (seperated by a pipe '|') --> Photo|Industrial |
Enjoy, and let me know what you think!
Loading ...
from Twitter shared from reader
Voters Aide, a Google Analytics Event Tracking Report Example
Overview
Voters Aide – a little flash app I made in some spare time to help prioritize the issues and positions for the 2008 presidential election. The app would let uses assign a weight to each of the big issues (0 – 100), and then read each candidates positions on every issue and record to which candidate they leaned (0 -100). The app did all the math then. Simply multiply the weight by their leaning and total it up. So if on the economy (which was reported the heaviest weighted issue overall) you say it is a weight of 90 and you lean one way +25 then your economy position is calculated 25 x .9 toward that candidate (22.5). To get a better understanding of it even though the election is over, go ahead and run through it yourself. I copied the selection of top issues and each candidate’s position from CNN’s website. I even randomized which side each candidate would show up on and left them unmarked so no one would be prejudiced toward their candidate. I wanted uses actual positions and priorities to speak louder than their preconceived preference or bias. I know this is flawed because the candidates position descriptions often were dead a give away, even sometimes saying the candidates name. Ideally it’d be great to simplify the positions but I wasn’t about to try to summarize it all! =)
Now that the election is decided though, I wanted to share what else I learned with this app. I included my google analytics event tracking methods in the voters aide app. So to everyone that has been using the app, I was watching!
Results
I used event tracking to see what weight was applied to every issue, to see which way users leaned on every issue and of course their final calculations which told them who they support. The reports are interesting because they not only tell you how many people apply a weight to an issue, but also what value. They say not only how many users actually continued through each issue and stated which way they lean, but also how far they lean and who they lean to! Not only how many users actually completed voters aide to the final screen which shows their calculation, but also which candidate they supported in voters aide and even by how much!
The results were very interesting in the weights people used to prioritize the issues. Maybe that is because is is easier to visualize? But the issues were ranked in the following order:
Here is an example of the report for the most important issue, economy. It stats which candidate had the users support and even how many times and the average value.
I’ll go ahead and say, (although the app was not designed to predict the president or even considered your location, it just counted how many times it reported to users which candidate they leaned towards) according to Voters Aide, John McCain would have won the election. So more people who used Voters Aide lean McCain in the end, once they get to the end of the issues. I’d have to add that this is a very small sample size and even if it were larger, I never tested the app for usability and user understanding, so the end result doesn’t mean that much in the end. But as you will be curious here is the report for the final page events:
Anyways, great election. I hope all this change will be a change for the better.
Congratulations to everyone who is excited about the future & condolences to everyone lamenting the end of the world.