Tag: actionscript

Squambido from StomperNet

Posted on by Evan Mullins

The new video player from StomperNet!

Feature Set: This Video Player is built in Adobe flash. I was involved in the actionscripting and design of the player and implementing many of the functions. There is a playlist imported into the player and even an html ‘sales pages’ loaded into the player. The progress bar shows download progress, watched progress and even history. It shows you how far you’ve ever watched in each specific video in the playlist, the “high-water mark”, and it lets you jump back to that spot easily by clicking in the progress bar. A feature I’m proud of is the mute, it doesn’t just cut the audio, but has a fade to silent quality- which even remembers your preferred volume if you come back to the page later. The player incorporates google analytics. Full Screen mode allows use of the entire monitor. Another ‘tab’ is used to show info about the author.

There is a lot packed into this one player, and we have plans to pack in even more!

Stompernet is using this player to promote their new line of content: Going Natural 2

[kml_flashembed movie=”http://www.stompernet.net/squambido/pagetest/squambido.swf” height=”338″ width=”450″ fvars=” playlistURL = http://www.stompernet.net/GoingNatural20/files/GoingNatural20Public.dhtml.xml ; autoplay = false ; awiz = 1126 ” allowfullscreen=”true” fversion=”9″ useexpressinstall=”true” allowscriptaccess=”always” /]

Get current url to Flash swf using an External Interface call

Posted on by Evan Mullins

Update: please see the newer tut talking about getting the current url with as3

Overview:

Many have struggled with the task of getting you swf to read or get the current url showing in the browser, the html page the browser is at which has the swf embedded. Not to be confused with the _root._url which returns the path of the swf file. This would be helpful to know if someone is embedding your swfs on their site, or even customize your swf depending on which page it resides on. There is a pretty simple, yet virtually undocumented way to do this. We have to use javascript by calling External Interface and get the url from the DOM. Window.location.href. Then we must call the toString() function only because ExternalInterface.call requires a function rather than only reading a static property.

Steps:

  1. Import external interface into your file: import flash.external.ExternalInterface;

  2. Initialize a variable to store the url path: var urlPath;

  3. Create a function to call external interface and assign the html page path to your variable: urlPath = ExternalInterface.call(“window.location.href.toString”);

  4. Call the function when/if needed.

Example:

With javascript: window.location.href or window.location.href.toString();
With actionscript: ExternalInterface.call(“window.location.href.toString”);
External Interface html Example
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/01/externalinterface.swf” width=”550″ height=”200″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]
Actionscript:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
import flash.external.*;
var urlPath;

function geturlhttp() {
urlPath = ExternalInterface.call(“window.location.href.toString”);
}
geturlhttp();
//Here I assign the url to a text box on the stage
_root.urlText.text = urlPath;

[/cc]

Download:

ExternalInterface.zip

StomperNet Scrutinizer

Posted on by Evan Mullins

StomperNet releases Scrutinizer, software for viewing websites through a simulated fovea vision. Since not everyone could set-up, let alone afford a real eye-tracker. This software uses the mouse pointer as the user’s focal point, or foveal view. It blurs everything except where your focal point (the mouse) is. It is helpful because it forces you to re-think web design from an extreme usability standpoint. This browser software was built in conjunction with Nitobi using Adobe AIR and Flex. I had the chance to do the skinning of the browser in flex! I really hope to have a good excuse to play more with flex.

Scrutinizer Thumbnail

Anyways, check out the free software (master-minded by Andy Edmonds), this ‘Click Fu’ video created to explain it, and the many uses of Scrutinizer.

[kml_flashembed movie=”http://www.stompernet.net/squambido/pagetest/squambido.swf” height=”338″ width=”450″ fvars=” playlistURL = http://www.stompernet.net/GoingNatural20/files/GoingNatural20Public.dhtml.xml ; autoplay = false ; awiz = 1126 ; playlistoffset = 4″ allowfullscreen=”true” fversion=”9″ useexpressinstall=”true” allowscriptaccess=”always” /]

www.WinnersWall.com

Posted on by Evan Mullins

A website (sales letter site) to order an engraved tile to be placed on a wall at you choice of NASCAR race tracks. Proceeds benefit Speedway Childrens’ Charities. Get yours today…

Site design with Dreamweaver using html and css. Incorporated flash elements for multiple video and audio players. Graphic Design in Fireworks and Illustrator.

winnerswall thumb

Click to visit!

Free IQ Player updated!

Posted on by Evan Mullins

The video player at Free IQ now supports Google Analytics and remembers your history!

We’ve just released a few new features for the flash player. For the user, we’ve added a “high water” mark showing furthest point in the video you’ve watched. For the web-site owner who embeds a FreeIQ video player on their sites, we’re now integrated with Google Analytics to help you understand how users are engaging with your video. Read on…

For the User

Say you start a video one Saturday afternoon and don’t get to watch all of it, or you’re watching a video and you rewind because you missed a bit of content. The high water mark helps you know where in the video you left off.

The image below shows a player where the user has watched up to about 3 minutes, but rewound to minute 1. The green vertical bar in the timeline helps the viewer return to finish watching the video.
freeiq_video_player_watermark.png

For the Hoster

If you embed a FreeIQ video player and use the free Google Analtyics solution, we’ll log entries to your analytics telling you how many folks start watching the video, completed watching the video, click through to your author page, etc.

Here’s the full table of events you’ll see in your analytics stream:

Log EntryUser Action
/freeiqvideo/playstart/(video name) start the video
/freeiqvideo/playcomplete/(video name) finish the video
/freeiqvideo/authorinfo/(authorHomepage)view author tab
/freeiqvideo/outgoing/freeiqauthorpage/(authorHomepage)click through to author homepage
/freeiqvideo/outgoing/freeiqiqpon/(authorHomepage)/(iqponPage) click through to iqpon
/freeiqvideo/email/(video name)send a share email
/freeiqvideo/embed/(video name) get embed codes

You can opt out of this by sending the parameter “useGoogleAnalytics” as false in the embed code, and of course, if you don’t use Google Analytics, nothing undesirable will happen. If you use Google Analytics on your site, this will automatically appear in your reports. If you don’t, you may want to consider adding Google Analytics to your site, at which point, these will begin appearing in your reports.

So, to our users, happy viewing. To our web-site owners, dedicated stats on viewership of video on your site is yet another reason to use FreeIQ.

Read the full article at: the FreeIQTeam blog

Free IQ Player Released!

Posted on by Evan Mullins

Introducing our new Free IQ player! It’s got lots of new bells and whistles, and is the first player on the internet to directly incorporate e-commerce.



Let us take you through the tour of:

  1. Our new “scrub bar”
  2. Volume controls
  3. The playlist
  4. Full screen mode
  5. Author information
  6. IQpons


The term “scrub bar” refers to widgetry for moving back and forth in the video. Pictured in the middle of the bottom control bar, it shows you the elapsed time out of the total and the amount of the video loaded. Skip forward or back within the loaded area by simply clicking on the bar or even “scrub” through the video by dragging the handle.




Click the volume icon for interactive volume settings and a mute button inside the video panel.




Full screen is one of our most exciting features! Get ready for Free IQ immersion!

The text in the middle of the screen tells you that you can press ESC to exit full screen. The player control at the bottom disappears after a few seconds and re-appears when click on the screen.




Select among related content with the playlist. Note the presence of our estimation of the quality of the content through your input, ReviewRank.




Click the graphic of a person to access the author panel and learn more about this content’s author and jump to his homepage at Free IQ.




With the IQPon, you can hire a Free IQ author for direct consultation! Anyone can create an IQpon product at Free IQ, so put your expertise to work today.




For authors who are not offering consulting services, this button is replaced with Share — the broadcast icon on the far right of the control bar.



From Share, you can get code to put the video on your page, or mail to a friend. This is available in the tabbed widget from Author Info or Playlist as well.

Thanks to Andy Beard for the his writeup of Free IQ today. His core complaint about our player, an inability to get to the product page, is now resolved. You can reach the authors homepage from within the Author Info tab, or the homepage of the currently playing video from the FreeIQ logo on the control bar.

What This Means To You

These improvements have advantages for you, no matter how you use FreeIQ:

As a user – you get an improved user experience, with more viewing options and the ability to easily find out more information on the author or the subject.

As an affiliate – you get more sales, because viewers are more likely to click through to content, the author’s site, or FreeIQ in general. Plus, with ecommerce enabled in the player itself, you’re more likely to get a sale!

As a content provider – users are more likely to watch your video all the way through and to click to your site. Plus, full screen mode makes it so that screen-capture-type videos are more readable, so the learning experience you provide is enhanced.

We think you’ll find this new viewer to be a very cool step forward. We’d like to hear your reactions too by adding a comment below! Try it out with one of the links below:

Stay tuned!

Visit the Free IQ Team blog to read more at freeiqteam.com!

Dynamic Flash Vertical Scrolling Link List with XML

Posted on by Evan Mullins

As seen at activeden. I’ve fixed it up a lot and made it much easier to incorporate into your own files.

A link list. Vertically scrolling list of links or just words. Scrolls and wraps automatically and interactively. Reads an external XML file containing just titles and paths and creates an interactive click-able link list!

[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”]

Get Adobe Flash player

[/kml_flashembed]

Download the source files (linkList.fla, cats.xml, linkList.swf): Link List at activeden.

Other Circlecube Items at activeden

21075 24687 45713 45893 22018

Mazamedia Splash

Posted on by Evan Mullins

The new splash is in effect for Mazamedia’s 5th anniversary!

I just re-vamped Mark Callahan’s splash on his Mazamedia.com
Re-vamped as in made interactive innovative and fun. I was just playing with different effects and wanted to see it in action, so I applied it to Mark’s splash intro. He liked it so much he wanted to put it live on his site. That’s cool with me, thanks Mark.

New Version – The letters are anchored to their spot, but use the mouse to push or nudge them. You can also drag them try throwing them even.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2007/08/mazasplash.swf” width=”550″ height=”275″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

Vs the old static version
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2007/08/mazasplashold.swf” width=”550″ height=”275″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

Rollover elastic bounce rezise

Posted on by Evan Mullins

Flash experiment that could be used for navigation. Rollover each area and watch them all resize themself to accomodate the growing box. It’s pretty fun to play with.

Example

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2007/07/rolloverresizeevan.swf” width=”550″ height=”400″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]
I’m sure there is a way to simplify the code, but this worked so there was no need.

Actionscript

[cc lang=”actionscript” tab_size=”2″ lines=”70″]
import mx.transitions.easing.*;
import mx.transitions.Tween;
var normWidth:Number = mc_1._width;
mc1x = mc_1._x;
mc2x = mc_2._x;
mc3x = mc_3._x;
mc4x = mc_4._x;
mc_1.onRollOver = function ():Void {
//Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
//Double in size
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth, normWidth * 2, 1, true);
mc_1.gotoAndPlay(“over”);
//Shrink by 33% and move 66% along using width
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc2x, (mc2x) + (normWidth * 2 / 3), 1, true);
//Shrink by 33% and move 33% along using width
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
//Shrink by 33%, no need to move as already in position
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//trace(“rollOver 1”);
};
mc_1.onRollOut = function ():Void {
//Return to normal width
var mc1Move:Tween = new Tween (this, “_width”, Elastic.easeOut, normWidth * 2, normWidth, 1, true);
mc_1.gotoAndStop(“up”);
//Return to normal width and use mc_1 as basis for x
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, (mc2x) + (normWidth * 2 / 3), mc2x, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
//Return to normal width and use mc_4 as basis for x
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
//Return to normal width
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
//trace(“rollOut 1”);
};
mc_2.onRollOver = function ():Void {
//Double in size and move left 33%
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth, normWidth * 2, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc2x, (mc2x) + (normWidth * 2 / 3), 1, true);
mc_2.gotoAndPlay(“over”);
//Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
//shrink by 33% mc1
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
//Shrink by 33% and move 33% along using width
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
//Shrink by 33%, no need to move as already in position
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//trace(“rollOver 2”);
};
mc_2.onRollOut = function ():Void {
//Return to normal width and position
var mc2Move:Tween = new Tween (this, “_width”, Elastic.easeOut, normWidth * 2, normWidth, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, (mc2x) + (normWidth * 2 / 3), mc2x, 1, true);
mc_2.gotoAndStop(“up”);
//Return to normal width and use mc_1 as basis for x
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
//Return to normal width and use mc_4 as basis for x
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
//Return to normal width
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut,normWidth * 2 / 3, normWidth, 1, true);
//trace(“rollOut 2”);
};
mc_3.onRollOver = function ():Void {
//Double in size and move left 33%
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth, normWidth * 2, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
mc_3.gotoAndPlay(“over”);
//Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
//shrink by 33% mc1
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
//Shrink by 33% and move 33% along using width
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc2x, (mc2x) + (normWidth * -2 / 3), 1, true);
//Shrink by 33%, no need to move as already in position
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//trace(“rollOver 3”);
};
mc_3.onRollOut = function ():Void {
//Return to normal width and position
var mc3Move:Tween = new Tween (this, “_width”, Elastic.easeOut, normWidth * 2, normWidth, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
mc_3.gotoAndStop(“up”);
//Return to normal width and use mc_1 as basis for x
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
//Return to normal width and use mc_4 as basis for x
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, (mc2x) + (normWidth * -2 / 3), mc2x, 1, true);
//Return to normal width
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
//trace(“rollOut 3”);
};
mc_4.onRollOver = function ():Void {
//shrink in size and move left 33%
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth, normWidth * 2/3, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, mc3x, (mc3x) + (normWidth * – 3 / 3), 1, true);
//Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
//shrink by 33% mc1
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
//Shrink by 33% and move 33% along using width
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc2x, (mc2x) + (normWidth * -2 / 3), 1, true);
//double in size, no need to move as already in position
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth, normWidth * 2, 1, true);
mc_4.gotoAndPlay(“over”);
//trace(“rollOver 4”);
};
mc_4.onRollOut = function ():Void {
//Return to normal width and position
var mc3Move:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth * 2/3, normWidth, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, (mc3x) + (normWidth * – 3 / 3), mc3x, 1, true);
//Return to normal width and use mc_1 as basis for x
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
//Return to normal width and use mc_4 as basis for x
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, (mc2x) + (normWidth * -2 / 3), mc2x, 1, true);
//Return to normal width
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth * 2, normWidth, 1, true);
mc_4.gotoAndStop(“up”);
//trace(“rollOut 4”);
};
[/cc]

Download

Here is the source file: rolloverResizeEvan.fla for those who want.

Pog Portfolio – Interactive flash portfolio

Posted on by Evan Mullins

An interactive flash portfolio featuring ‘pog’ thumbnails sortable by tags and adjustable properties.

open Circle Cube POG portfolio
Pog Thmb

Circle Cube . com
Toggle the help window with ‘h’.
Click the pogs to explore each piece, if applicaple click the ‘open window’ link.
Pog options are aligned across the top of the bay window, use them to adjust the properties within the bay area. Mix and match until you find your fit. Tag buttons are across the bottom, click to specify the genre of art to display.

Gravity:
Toggle the force of gravity acting on the pogs. Pogs with gravity on will be pulled down and bounce according to mass.
White is on. Black is off.

Spring:
Toggle the spring or elasticity option. Pogs will hinge to a point and orbit that point.
White is on. Black is off.

Grid:
Toggle the grid option. The pogs can either form into an array of pogs or move aimlessly in the space.
White is on. Black is off.

Friction:
Toggle the force of friction acting on the pogs. Pogs with friction will slow down and over time eventually stop.
White is on. Black is off.

Tags:
Click these tag button descriptors to see only that style of work in the portfolio.
Select all work, video, new media, animation, or drawing.