circlecube

RSS comments
LinkedIn Twitter delicious fb last.fm

Posts Tagged ‘interactive’

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:
scrutinizer loader

Scrutinizing this circlecube blog:
scrutinizer screenshot

Bookmarking my page for quick access:
scrutinizer bookmark

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS

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!

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).

Playlist

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.

Author

The IQPON window connects viewers to providers by giving users access to the content provider’s services!

IQPON

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.

Embed

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).

Email

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.

Social Bookmarking

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.

Menu

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!

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
3 Mar 2008

Free IQ Player Updated!

Author: Evan Mullins | Filed under: portfolio, work

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="http://blog.circlecube.com/wp-content/uploads/2008/02/MenCircle.swf" width="550" height="550" targetclass="flashmovie"]

Get Adobe Flash player

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
_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;
}
}
  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
20 Feb 2008

Men Circles | Interactive Experiment

Author: Evan Mullins | Filed under: portfolio

Go get the source files at Flashden

circlecube on FlashDen

Other Circlecube Items at FlashDen

21075 24687 45713 45893 22018

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS

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).’
pythagorean img

You may remember it as the formula you memorized in geometry or algebra class ‘a squared plus b squared equals c squared’

1
 a^2 + b^2 = c^2

pythag equ

Okay, but how does that help in flash? You want to find the distance between point

1
a

and point

1
b

. Well

1
c

would be the distance between the two points. We know the formula, solving for c.

1
c = square root of (a^2 + b^2)

.
pythag equ 2

1
c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2));
1
Math.sqrt()

is the square root function, so

1
Math.sqrt(4)=2

.

1
Math.sqrt(x)

computes and returns the square root of

1
x

.

1
Math.pow()

is the power function, so

1
Math.pow(4, 2)=16

(4 squared).

1
Math.pow(x, y)

computes and returns

1
x

to the power of

1
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.

Get Adobe Flash player

Actionscript

1
2
3
4
5
6
7
8
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);

Download

As usual, here’s the source flash file (flash 8 compatible) to take a look: distance.fla

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
15 Feb 2008

Distance Formula in Actionscript Tutorial | Pythagorean theorem

Author: Evan Mullins | Filed under: tutorial