The flash video player designed and developed for Free IQ and StomperNet. Plays video and audio content for a user. I implemented 85% of the actionscript, creating intuitive interactivity and functionality. External xml plsylist, author biography display, content details, share by email, social bookmarking, get embed codes, and more. Sleek design for maximum intuitive user engagement including navigable playlist, author biography, video detail, embedding, email, social bookmarking, volume control, full screen, multiple size options, etc.
Tag: interactive
Dynamic Flash Scrolling Link List XML driven Component on FlashDen
Go get the file at ActiveDen
Dynamic Scrolling Link List XML driven (No Wrap)
An interactive link list. Vertically scrolling list of links or just text. Could be used for a nav menu or a link list, or even just a scrolling list. Scroll speed calculated dynamically from mouse position to give not only scrolling control, but also speed control. Reads an external XML file containing just titles and url paths and creates this interactive click-able link list! On click the link is highlighted and on release loads the url either in a blank window or not (configurable). On rollover the list item grows with animation and is highlighted (all configurable, size speed etc). Once end of list is reached scrolling stops, another version is available with a wrap-around feature: Dynamic Scrolling Link List XML driven Auto wrapping
[kml_flashembed fversion=”9.0.0″ movie=” https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/03/LinkListNoWrap.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”550″ height=”250″]
[/kml_flashembed]
Circlecube Flash Items at ActiveDen
Interactive Spin Actionscript Tutorial
I have been thinking of different interactions that are possible with objects. If you’ve read this blog at all you’ll know that I’ve played with physics and gravity and throwing balls and bouncing balls and all sorts. But I hadn’t wrapped my head around an interactive spinner. I know it’d be easy to make a slider or something that would apply a spin to an object, but this just isn’t interactive enough for me.
Circle with slider to rotate and button for random spin:
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/03/spin.swf” width=”500″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
This attempt at spinning is ok. I mean, it spins the object and it even glides to a stop if you press the button for a random spin… But it’s just not intuitive and not fun. But if you want this, here’s how I did it.
Actionscript:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
drag = .96;
speed = 0;
slider.handle.onPress = function() {
spinning = false;
//drag along the line
this.startDrag(true, slider.line._x-slider.handle._width/2, slider.line._y-slider.handle._height/2, slider.line._width-slider.handle._width/2, slider.line._y-slider.handle._height/2);
}
slider.handle.onRelease = slider.handle.onReleaseOutside = function() {
this.stopDrag();
}
_root.onEnterFrame = function() {
if (spinning) {
//apply the speed to the rotation
knob._rotation += speed;
//recalculate speed
speed = speed*drag;
//if speed gets unnoticeably tiny just set it to 0
if (Math.pow(speed, 2) < .0001) {
speed = 0;
}
}
else {
//set the rotation from the slider position
knob._rotation = slider.line._x + slider.handle._x + slider.handle._width/2;
}
//spit out feedback continuously
feedbackr.text = knob._rotation;
feedbackaccr.text = speed;
}
spinner.onRelease = function() {
//find a random speed
speed = (Math.random()* 50) – 25;
spinning = true;
}
[/cc]
I want to grab it and spin it though. I want to apply the same principles from physics, like acceleration and friction as forces to the object, so I can grab to spin and release to watch it glide gracefully to a stop. I’ve been thinking about this and how I’d have to use trigonometry and stuff to do it. One day I finally had the time and tried it out. It took me a minute but I figured out that what I needed was arctangent. So (with pointers from jbum, thanks Jim!) I came up with this:
Interactive grab-able circle to spin and twirl:
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/03/interactivespin.swf” width=”500″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
This one is much more interactive and intuitive. I really think this is because there are no sliders or buttons, no controls, just an object to interact with. It’s much more like real life!
Steps:
In order to make a grab and spin object
1. You have to know where you grab. The user clicks on the shape (knob) and you must figure out what degree or rotation point they have started at. (atan2)
2. As the knob is clicked and the mouse moves (dragging), calculate new rotation by mouse position
3. When mouse is released figure out the current speed of rotation and apply it to the knob with friction, so it can be thrown and spun in that way. (Of course this is optional, if you just want to spin it when the mouse is down you’re done at step 2)
Actionscript:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
damp = .96; //friction
r = 0; //rotation
accr = 0; //speed of rotation
knob.onPress = function() {
dragging = true;
//find mouse y coordinate in relation to knob origin
a = _root._ymouse – knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse – knob._x;
//using arctangent find the spot of rotation (in degrees)
oldr = Math.atan2(a,b)*180/Math.PI;
}
knob.onRelease = knob.onReleaseOutside = function() {
dragging = false;
}
knob.onEnterFrame = function() {
if (dragging) {
//find mouse y coordinate in relation to knob origin
a = _root._ymouse-knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse-knob._x;
//using arctangent find the spot of rotation (in degrees)
r = Math.atan2(a,b)*180/Math.PI;
//use current rotation and previous rotation
//to find acceleration
//averages the acceleration with the
//previous acceleration for smoother spins
accr = ((r – oldr) + accr)/2;
//apply the acceleration to the rotation
knob._rotation += accr;
//remember current rotation as old rotation
oldr = r;
feedbacka.text = a;
feedbackb.text = b;
}
else {
knob._rotation += accr;
//apply friction to acceleration force
//and if acceleration gets tiny, just set it to zero
if (Math.pow(accr, 2) > .0001 ) {
accr *= damp;
}
else{
accr = 0;
}
}
//spit out feedback continuosly
feedbackr.text = knob._rotation;
feedbackaccr.text = accr;
}
[/cc]
I commented the code to explain what is happening, if you need more just post a comment. Let me know if you find this useful and what you end up making with it.
Downloads:
StomperNet Scrutinizer Update | Features include Bookmarking, Screenshots & Loader
Scrutinizer is constantly being updated and enhanced and with the launch of Adobe AIR 1.0 is easier than ever to install!
It now supports bookmarking, capturing and saving screenshots and displays progress as pages load.
With even more to come soon!
Go check it out at StomperNet’s public site for free download!
Here’s some images to show off scrutinizer!
Watching the loader while my page loads:
Scrutinizing this circlecube blog:
Bookmarking my page for quick access:
Free IQ Player Updated!
Here’s a post from the Free IQ Team!
We’ve been busy at Free IQ and just released our new video player!
Check it out by watching Brad Fallon on the vision of Free IQ.
Or see circlecube at Free IQ!
[kml_flashembed movie=”http://freeiq.com/ipprime.swf” height=”338″ width=”450″ fvars=” playlistURL = http://www.freeiq.com/vidxml.dhtml?lx=bradfallononthevisionoffreeiq ; autoplay = false ; embed = 1 ” allowfullscreen=”true” fversion=”9″ useexpressinstall=”true” allowscriptaccess=”always” /]
At the surface, the player looks much the same, but as you dig into the secondary functions, you’ll see a slew of enhancements made with you and all freeiq-ers in mind.
The layout has been updated to be more dynamic, more readable and web 2.0 friendly. The graphics got a make-over.
The updates to the playlist have cleaned up the interface and give helpful information about the content. We still get the ReviewRank for each item, and also we can see our personal viewing history, a feature we’re calling the ‘high water mark’. You can see how far into a video you’ve been. This high water mark is also shown in the scrub bar, for returning to where you left off quickly, just click the yellow arrow to return. Also the video currently being played in the player is specified as ‘Now Watching’ (how original).
The author window still displays the author’s portrait, biography and links to the author page. The author biography may contain html- such as links, which help viewers learn more about authors.
The IQPON window connects viewers to providers by giving users access to the content provider’s services!
Sharing options have been improved greatly!
Users may embed content on their own site directly from the player now! By choosing options for auto play and format user’s copy embed codes straight from the player, and paste it into their own site. The normal format uses javascript to ensure maximum compatibility with different browsing software, and the the extra simple format is for embedding content into sites which restrict javascript, such as MySpace and a handful of others, so there is always a way to embed content into your very own space.
Sharing by email is much faster now, as you can send to multiple people at once directly through the player itself (just separate the email addresses with a comma).
Sharing with the web is just as easy! You can copy the link or click your preferred social bookmarking site. Social bookmarking capabilities are built into the player, so with one click you can bookmark content to any of a number of social bookmarking sites (del.icio.us, digg, furl, google bookmarks, magnolia, reddit, stumble upon, technorati, windows live favorites and yahoo! bookmarks) with more to come.
All these methods are used to share content and are useful no matter where the player is embedded!
This player release features updates to the Full Screen mode as well. To take full advantage of the screen size we stretched the control across the bottom of the screen! The control tray will slide away after a few seconds giving access to full screen video playback. To bring the controls back, just more the mouse again.
Volume controls are updated for faster more intuitive interactive control.
By using the internal menu (just right-click to access it) you have access to all options in the player.
Also updated with this release is the integration with Google Analytics! There is new tracking built into the player and best news of all is that the player now supports both versions of the Google Analytics Tracking Code. So whether you’ve updated to the new tracking system or still use the Legacy code, this player logs interactions with the player to your google analytics reports! It will tell you how much people are watching your videos, which ones and how users interact with the player on your site. We’ll post about that later, once you’ve gotten used to your new player!
Another point to mention… if you’re a Free IQ regular and have already embedded content onto your site, the updates are automatic. You have nothing to do to enable these updates! It’s already done!
Enjoy the updates, we put a lot into it!
Let us know any suggestions you have for making the Free IQ video player even better – for you!
Men Circles | Interactive Experiment
Here’s a graphic of a circle of men. You may recognize the outline from any public restroom. They’re standing in a corny circle holding hands, like an all over the world theme., let’s just hope they all washed their hands…
I made the graphic a while ago, and have been wanting to interactive-ize it. I’ve really been wanting to play with elasticity, throwing things and snapping to a point… Although I’m still thinking about a version where I’d spin the objects rather than just throw them, I figured I’d put it up for any feedback that comes.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/02/MenCircle.swf” width=”550″ height=”550″ targetclass=”flashmovie”]
[/kml_flashembed]
The different pieces all rotate differently and it changes if you are dragging or ‘holding’ them. Then you can press the anchor (gray) button to toggle the snap. The objects will all center around the anchor and spring into place (elasticity applied to position and rotation). And then the interactivity changes and rather than dragging and dropping them, you push and bump or throw them. It almost turns into a game…
Here’s some of the actionscript
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
_root.tr = 0;
_root.k = 0.2;
_root.damp = .9;
_root.margin = 150;
_root.heads.ax = 0;
_root.heads.vx = 0;
_root.heads.ay = 0;
_root.heads.vy = 0;
_root.heads.ar = 0;
_root.heads.vr = 0;
_root.heads._x = (Math.random() * (Stage.width + _root.heads._width)) – _root.margin;
_root.heads._y = (Math.random() * (Stage.height + _root.heads._height)) – _root.margin;
//Heads
_root.heads.dragging = false;
_root.heads.onEnterFrame = function() {
if (!_root.center.dragging){
if (_root.heads.dragging){
this._rotation += 1.2;
}
else {
rot = this._rotation + Math.random();
xmouse = _root._xmouse/Stage.width;
this._rotation += rot + xmouse;
}
this._x+=Math.random()*2 – 1;
this._y+=Math.random()*2 – 1;
}
else {
//_root.heads._x = _root.center._x;
//_root.heads._y = _root.center._y;
_root.heads.ax = (_root.center._x – _root.heads._x) * _root.k;
_root.heads.vx += _root.heads.ax;
_root.heads.vx *= _root.damp;
_root.heads._x += _root.heads.vx;
_root.heads.ay = (_root.center._y – _root.heads._y) * _root.k;
_root.heads.vy += _root.heads.ay;
_root.heads.vy *= _root.damp;
_root.heads._y += _root.heads.vy;
_root.heads.ar = (_root.tr – _root.heads._rotation) * _root.k;
_root.heads.vr += _root.heads.ar;
_root.heads.vr *= _root.damp;
_root.heads._rotation+=_root.heads.vr;
}
this.onPress = function() {
startDrag(this, false);
_root.heads.dragging = true;
}
this.onRelease = this.onReleaseOutside = function() {
stopDrag();
_root.heads.dragging = false;
}
this.onRollOver = function() {
if(_root.center.dragging){
startDrag(this, false);
_root.heads.dragging = true;
}
}
this.onRollOut = function() {
if(_root.center.dragging) {
stopDrag();
_root.heads.dragging = false;
}
}
}
//Button
_root.center.dragging = false;
_root.center.onEnterFrame = function() {
this.onPress = function() {
startDrag(_root.center, false);
_root.center.dragging = !_root.center.dragging;
if (_root.center.dragging) {
this.gotoAndStop(“on”);
}
else {
this.gotoAndStop(“off”);
}
//var vr:Number = 0;
}
this.onRelease = this.onReleaseOutside = function () {
stopDrag();
//_root.center.dragging = false;
}
}
[/cc]
Dynamic Flash Vertical Scrolling Link List with XML download at Flashden
Go get the source files at Activeden
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2007/08/linklist.swf” width=”550″ height=”500″ targetclass=”flashmovie”]
[/kml_flashembed]
Circlecube Flash Items at ActiveDen
Distance Formula in Actionscript Tutorial | Pythagorean theorem
Overview
To find the distance of any two points on an axis is easy, just subtract them. But what about when you have to find the distance of something not on the axis (a diagonal)? Find the distance between any two points with the Pythagorean theorem. This is an old problem we can look to history and find the Pythagorean theorem and Pythagoras, the Greek we’ve named this after. His theorem states that ‘In any right triangle, the area of the square whose side is the hypotenuse (the side opposite the right angle) is equal to the sum of the areas of the squares whose sides are the two legs (the two sides that meet at a right angle).’
You may remember it as the formula you memorized in geometry or algebra class ‘a squared plus b squared equals c squared’
a^2 + b^2 = c^2
Okay, but how does that help in flash? You want to find the distance between point a
and point b
. Well c
would be the distance between the two points. We know the formula, solving for c.
c = square root of (a^2 + b^2)
.
c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2));
Math.sqrt()
is the square root function, so Math.sqrt(4)=2
.
Math.sqrt(x)
computes and returns the square root of x
.
Math.pow()
is the power function, so Math.pow(4, 2)=16
(4 squared). Math.pow(x, y)
computes and returns x
to the power of y
.
You say I remember using this for triangles and stuff, I just want to know the distance between two points, there’s no triangles.
Well, there actually is a triangle we can draw. Go from your first, along an axis (this makes one side), and the other point, along the other axis (this is another side), and you’ll see that the distance you’re looking for is the third side of the triangle (the hypotenuse).
Example
Here’s a quick interactive flash file to show the idea.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/02/distance.swf” width=”500″ height=”500″ targetclass=”flashmovie”]
[/kml_flashembed]
Actionscript
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
xmid = Stage.width/2;
ymid = Stage.height/2;
a = _root._ymouse-ymid;
b = _root._xmouse-xmid;
c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2));
feedbacka.text = Math.round(a);
feedbackb.text = Math.round(b);
feedbackc.text = Math.round(c);
[/cc]
Download
As usual, here’s the source flash file (flash 8 compatible) to take a look: distance.fla
Actionscript Javascript Communication | ExternalInterface call and addCallback Tutorial
UPDATE: there’s a newer post about this same thing (actionscript javascript communication – but in as3)! I encourage you to check it out!
Overview:
Using ExternalInterface.addCallback() we can expose an actionscript function and make it available to javascript. This would be helpful to have your webpage with embedded flash communicate to your flash swf file and even control it with javascript! Say we wanted to have buttons in the html page that would control an object in the flash. Communication is a two-way road so wouldn’t it be great to be able to go the other way as well, you can! That is the main function of ExternalInterface! In this example/tutorial I will explain both directions of communication with flash and javascript! Communication between flash and javascript isn’t just a myth or mystery!
Steps:
- Be sure to import flash.external.*;
- Set up the javascript to actionscript lane of your communication road. (ExternalInterface.addCallback(methodName, instance, method);)
- Write your javascript function.
- Set up the actionscript to javascript lane. (ExternalInterface.call(functionNameInJavascript);)
We will follow the text’s journey on our road of communication…
The One way: I type in ‘Johnny Appleseed’ in the html text box and press the Send Text To Flash button. The onclick javascript event finds the flash element and calls it’s function (sendTextFromHtml) and then clears the text in the html box. This function has been set up and is exposed to javascript (in actionscript lines 4-7) with the methodName ‘sendTextFromHtml’ while the method it calls is recieveTextFromHtml() in the actionscript. So ‘Johnny Appleseed’ is received as the parameter of the recieveTextFromHtml() function and is assigned to the text of the theText text box.
And back: Now I delete ‘Johnny Appleseed’ since he’s only a fable and enter ‘Paul Bunyan’ in the swf text box and press the Send From Flash to Javascript button. This calls the onRelease function associated with this button. ExternalInterface.call calls the ‘recieveTextFromFlash’ function in the javascript of the page and passes ‘Paul Bunyan’ as the parameter. The javascript function finds the html text box using getElementById() and assigns the parameter to the value of that text box!
This technique will even work if you’re not sending folklore character down the road.
Example:
View the live example here: ActionscriptJavascriptCommunication.html
NEW live example with swfobject2 works in IE! ActionscriptJavascriptCommunication2.html
Actionscript:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
import flash.external.*;
//Set up Javascript to Actioscript
var methodName:String = “sendTextFromHtml”;
var instance:Object = null;
var method:Function = recieveTextFromHtml;
var wasSuccessful:Boolean = ExternalInterface.addCallback(methodName, instance, method);
//Actionscript to Javascript
//ExternalInterface.call(“recieveTextFromFlash”, _root.theText.text);
function recieveTextFromHtml(t) {
_root.theText.text = t;
}
_root.button.onRelease = function() {
ExternalInterface.call(“recieveTextFromFlash”, _root.theText.text);
_root.theText.text = “”;
}
[/cc]
Javascript:
[cc lang=”javascript” tab_size=”2″ lines=”40″]
function recieveTextFromFlash(Txt) {
document.getElementById(‘htmlText’).value = Txt;
}
[/cc]
HTML: view Source of sample page
Download:
Download all source files (.fla, .html, .swf): ActionscriptJavascriptCommunication.zip
Integrate Google Analytics with Flash | Tutorial
The results are in and the requested topic is “Integrate Google Analytics into Flash.” The poll has been reset and is ready to recieve your post requests, so keep voting! It’s located in the side bar!
Overview:
Tracking your visitors and attempting to better understand them is a large part of even having content on the web. Since the days of visitor counters displayed proudly on every site, along with dozens of animated gifs to the days when site were designed solely with efficiency and conversion in mind. There are many services that will do this for a fee and other that will do it for free. A popular free web analytics tool is provided by Google. Google Analytics is started by including JavaScript on each page the user wishes to track. This JavaScript loads larger files from the Google webserver and then sets variables with the user’s account number. This JavaScript is used to track and log page views and visitors interaction with the site. This post discusses what to do if your site includes a lot of interactive flash elements you wish to track as well. With the little Google has published related to this(New Code, Old Code), I’ve tried to fill in.
Note: This explains how to set up to track flash events as page views, which does have a drawback- it inflates your pageviews in the analytics and in turn may skew your data. Il’l beposting again soon about how to use then new event tracking, which would track flash events not as pageviews, but as events and thus not inflate the page view count.
UPDATE
I now have an Event Tracking Tutorial as well with actionscript updates!
Event Tracking With Google Analytics & Flash/Actionscript Integration Tutorial
Steps:
- If you haven’t already, install Google Analytics on your site. (Note that your analytics tracking code must be placed on the page above the flash call(s) to _trackPageview or urchinTracker)
- Determine which events in flash you want to track.
- Place in the external.interface code in your actionscript at the specific event(s).
- Watch the events get logged in you Google Analytics Reports!
Example:
Here’s a simple example, say you want to track how many times an object is clicked or dragged by a user or how many times it bounces (something that could be tracked but doesn’t necessarily have any required user interaction). In this example flash file I have a ball which bounces off the walls and users can click to drag and even throw it, press the spacebar to create more balls and toggle the gravity on and off with the arrow keys (up is weightlessness, and down is gravity). Each of these events has code to communicate with Google Analytics JavaScript and track the events. I made my own function to call the google analytics code. Do I hear “but sometimes I want to use the new version of Google analytics, and sometimes I want to use the old one…” Have no fear, this function works for either one, or even both. If you’re not using the newer code the calls to the functions in the new code (pageTracker._trackPageview()) will be ignored and vice versa, if you are using the new code, then the calls to the functions in the old code (urchinTracker()) will be ignored, since the functions are not defined. You can track virtually anything with this method. I’ve exaggerated greatly in this example- just to show the variety of different ways this can be used. You might want to make certain the things you track will be useful and relevant for you.
Here is the swf file, I’ve added a text box that will print all actions that are logged to Google Analytics
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/01/integrategoogleanalytics/integrategoogleanalytics.swf” width=”550″ height=”550″ targetclass=”flashmovie”]
[/kml_flashembed]
track Google Analytics actionscript function
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
function trackGA(action:String) {
//Old Google Analytics Code
ExternalInterface.call(“urchinTracker(‘/urchin/IntegrateGoogleAnalytics/”+action+”‘)”);
//New Google Analytics Code
ExternalInterface.call(“pageTracker._trackPageview(‘/pageTracker/IntegrateGoogleAnalytics/”+action+”‘)”);
trace(“Google Analytics Tracking: ” + action);
}
[/cc]
Calls to Google Analytics actionscript function
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
trackGA(“swfLoaded”);
trackGA(“ball/”+_root.id+”/created/”);
trackGA(“ball/”+this.ballNum+”/released/”);
trackGA(“ball/”+this.ballNum+”/pressed/”);
trackGA(“ball/”+this.ballNum+”/bounced/top”);
trackGA(“ball/”+this.ballNum+”/bounced/left”);
trackGA(“ball/”+this.ballNum+”/bounced/right”);
trackGA(“ball/”+this.ballNum+”/bounced/bottom”);
trackGA(“gravity/on”);
trackGA(“gravity/off”);
[/cc]
Download:
Update:
Here is a screenshot of my Google Analytics Top Content after I search for “pageTracker/IntegrateGoogleAnalytics” (because I’m using the new code version, if I were using the old version I’d search for “urchin/IntegrateGoogleAnalytics”). This just shows that every event was logged to Google Analytics. This screenshot was taken mere hours after this post published.
New Event Tracking technique tutorial rather than posting each event you want to track in flash as a pageview it can be a specific event!