circlecube

RSS comments
LinkedIn Twitter delicious fb last.fm

Archive for the ‘portfolio’ Category

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:

Using what I learned with the Actionscript Javascript Communication Tutorial, and pushing it a little further I’ve set up this example of how flash renders html and css. This is basically a wysiwyg (What you see is what you get) html editor! Natively flash only handles some html and css. Many people have enhanced it’s capabilities with projects and Classes, but I made this to show what is accepted by default as far as html and css is concerned. I know there are specs and many lists about what will work, but to me the best way to know if my code will work is to try and see…
I’ve made this app so if I have a question, I just paste in my html/css and send it to the swf to see it rendered live. This saved me a few headaches, so I thought other might enjoy it as well… So here it is.

Example:

Render your own html and or css in flash. htmlToFlash.html
Here is the flash rendering of some dummy text as html with css applied
htmltoflash thumb

Here’s the html interface where I paste in the html and css.
htmltoflash thumb 2
Each supported css property has a corresponding actionscript property, but the naming convention is a little different for css in actionscript. Each actionscript property name is derived from the corresponding CSS property name; the hyphen is omitted and the subsequent character is capitalized. So for example: ‘font-weight’ becomes ‘fontWeight’.

Download:

Here’s the open source files if you want to get your hands dirty.

Let me know if you improve this or even have any questions about it!

Again, note there are only certain HTMl and CSS supported by flash, follow the links for more info.
HTML supported by Flash and CSS supported by Flash

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

CSS and HTML WYSIWYG in Flash | Open Source Example

Author: Evan Mullins | Filed under: portfolio

Gives feel of perspective and depth by reacting to mouse movements. The effect is parallax, read more…
The city images are very choppy and ugly, I know, it’s just a test.

Get Adobe Flash player

Sample Actionscript. This in on one of the buildings which are separate movie clips. Adjust the equation for different effect.
The basic formula is as follows: this._x = _root._xmouse / (speed) + transform

1
2
3
onClipEvent (enterFrame) {
this._x = _root._xmouse/7 - 50;
}

Update: Here’s a similar effect achieved by just negating the relation between the mouse and the building movie clips.

Get Adobe Flash player

1
2
3
onClipEvent (enterFrame) {
this._x = -_root._xmouse/7 - 50;
}

Download Source Fla File

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

City Skyline Test | Depth Study

Author: Evan Mullins | Filed under: portfolio