
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.






Archive for the ‘portfolio’ Category
Go get the file at FlashDen
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
Circlecube Items at FlashDen
Dynamic Flash Scrolling Link List XML driven Component on FlashDen
Author: Evan Mullins | Filed under: portfolioI 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:
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:
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 | 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; } |
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:
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:
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 | 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; } |
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:
Interactive Spin Actionscript Tutorial
Author: Evan Mullins | Filed under: portfolio, tutorialScrutinizer 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:

StomperNet Scrutinizer Update | Features include Bookmarking, Screenshots & Loader
Author: Evan Mullins | Filed under: portfolio, workAs announced, the Free IQ Media Player now incorporates Google Analytics with it’s custom flash video player. Simply put, users may upload their own content (or even use anyone else’s content that is on Free IQ), embed it on their own sites and then view the tracking/logging/usage/analytics/metrics it their own Google analytics account. You don’t have to do anything- the player will do it automatically, but if you don’t have google analytics installed on your site, nothing happens. So go ahead and sign up, it’s free and very useful.
This works with both versions of Google analytics tracking code. Recently Google updated the code they give users to enhance the functionality of the analytics they give you in their reports. Some have voiced concern about whether they can update to the new code and still use the Free IQ video tracking, now the answer is yes! This new updated player works with the new Google Analytics Tracking Code! Others have voiced a concern that they aren’t ready to update the Google code on the rest of their site yet, this is not a problem either. The Free IQ Player works with either version of the GATC (Google Analytics Tracking Code). It would even work with both… say you had a site with some old code and some new code, the player knows and will tell Google what people are doing with this player on your site.

To see the report, go to your google analytics account, click on ‘Content’, and then ‘Top Content’. This page shows you the most viewed pages on your site. You can filter the report by typing in the box under the list of urls. Find the ‘Find Url’ box (be sure ‘containing’ is selected in the drop-down) and type ‘freeiqvideo/’. Press ‘go’ and you should see all the analytics for the Free IQ player on your site! All the analytics from the player start with ‘freeiqvideo/’ in the url path and we’ve organized all the analytics into three different types: Video, Actions and Navigation. Every time someone does any of these things on your site, google analytics will log a pageview to a certain page. This certain page changes and depends upon what the user did exactly. When a user visits your site and begins to watch a certain video called ‘My Cool Video’, google analytics logs a pageview to ‘freeiqvideo/playstart/mycoolvideo! Notice that the title of the video is incorporated into the report, this helps determine which video is more popular and such. The title of the video is the title you give Free IQ upon uploading your content and can usually also be found at http://freeiq.com/mycoolvideo
This information can be very helful as you think about which video to place or keep on your site, and even where to put it. You can also see how many times the video was finished (freeiqvideo/playcomplete/mycoolvideo). This can be very useful to help you determine if your video is too long, too boring, or on the other end very engaging- it’s essentially your video bounce rate.
Other than video tracking, the Free IQ Player also logs to google analytics actions users have with the player itself. The Free IQ Player enables users to share your content with others. There are interactions with the player for users to email a link to their friends about the content they are watching, get html codes to embed that content onto their own site, and even share the content with any of a number of social bookmarking sites! If someone were to use the Free IQ Player to link to your content through a popular del.icio.us the report would log a pageview at ‘freeiqvideo/PlayerInteraction/SharedVideo/delicious/mycoolvideo’! You will see which bookmarking service was used and what content was bookmarked! You will know what users are doing with your content!

And lastly you can see how users navigate through the embedded Free IQ Player. Inside the player, users are presented with information about the content they watch. All this information is organized into tabbed windows. Every time a user view’s this information, the player logs to google analytics a page view. These logs are independent of the content, so the url reported does not include the video Title as before. An example is a user views the author window is: /freeiqvideo/PlayerNav/WindowSelected/author.
Here is the breakdown of all the logging from the Free IQ Player to Google Analytics:
Video Tracking:
Play Started: /freeiqvideo/playstart/mycoolvideo
Play Completed: /freeiqvideo/playcomplete/mycoolvideo
Interactions:
Embed Codes Copied: /freeiqvideo/PlayerInteraction/EmbedCodesCopied/mycoolvideo
Email Sent: /freeiqvideo/PlayerInteraction/EmailSent/mycoolvideo
Bookmark: /freeiqvideo/PlayerInteraction/SharedVideo/bookmarkingService/mycoolvideo
Navigation:
Author Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/author
Playlist Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/playlist
IQPON Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/iqpon
Share Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/share
Email Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/email
Embed Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/embed
This is the list of current integration with Google Analytics from the Free IQ Player. If you have any questions or requests, feel free to comment here or contact Free IQ.


























