Stomper999

Interactive Design project for StomperNet’s tease of the announced reveal on 09/09/09 at 09:09:09!

“Online Marketing Changes Forever!”

stomper999-black
Wanted it to be unexpected, and I think we hit it! Check it out live at stomper999.com!
stomper999-white

Details:
For this project I used flash, html, css and javascript. Tweener for the fading effects. Found a nice stock flash from activeden for the countdown and used jquery and the easing and color plugins.

Rounded Bar Percentage Preloader for Flash Tutorial

I’ve had a couple inquiries about how to do a simple preloader in Flash. The technique and also the actionscript which implements the technique. So here is a percentage preloader example with source code and a source file to play with.

Overview

So the idea of a preloader is to hold the swf until the file has sufficiently loaded. Once it’s is fully loaded, then the preloader advances to swf to the actual content.

There are different types of preloaders: status preloaders and percentage preloaders. Status preloaders only tell you the status of the loading file. So it will have a simple looping animation like a spinning wheel and you just wait until it is fully loaded. Percentage preloaders will actually tell you how much has been loaded or how much is left and usually will have a bar or something that fills as the file loads or at least tell you in numbers how much has been loaded.

These techniques require the same first few steps. As you can guess, the percentage preloader takes a couple extra steps, but it is much worth the extra few minutes in my opinion. It gives the users valuable information about the program or file they are waiting on. If they are waiting and have no idea how much longer their wait will be, who knows how long they will stick around and watch an hourglass.

In actionscript the only special methods we use for a preloader are getBytesLoaded and getBytesTotal. Once we know the bytes loaded and the total bytes to load, with a little math we calculate what percentage is loaded.

Steps

  • Hold the viewers at frame 1
  • Check if file is loaded yet (percentLoaded)
  • If not loaded, update display (if applicable) and check again
  • If loaded, continue

Example

This is a preview, note that it is not actually a preloader, just what one looks like. You can see this preloader working in my Interactive Image Viewer
[kml_flashembed fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/09/preloader_bar_preview.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”550″ height=”125″]

Get Adobe Flash player

[/kml_flashembed]

Actionscript

I’ve put this code on the preloader movieclip which sits alone on frame one with a simple stop(); actionscript command. Frame 2 contains the beginnings of the actual content. To break down the code, we first see that it is performed every frame: onClipEvent(enterFrame), so every frame we will see how much has loaded. In this case the frame rate is 20 frames per second, so we check the amount loaded every 20th of a second!
First we find the percentLoaded by dividing the total bytes to load by the number of bytes currently loaded. Then we display the percent loaded in a text box named feedback and adjust the xscale of the orange bar according to percentLoaded. Finally we’ll check to see if the percentLoaded has reached 100 yet, and if it has we play the parent clip (which in this case is the root, but it could be used to load numerous objects on the stage). When we play the parent clip, we then go to frame 2 or the actual content of the swf and this preloader is removed from the stage and the code will stop executing. But if percentLoaded is not 100% yet this frame is repeated and the code executes all over again, finding the (hopefully) new number of bytes loaded, and updating the display to inform the user. The code executes so fast that the preloader will actually animate the loading process and inform the user simultaneously.
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
onClipEvent (enterFrame) {
percentLoaded = _parent.getBytesLoaded() / _parent.getBytesTotal() * 100;

this.feedback.text = “%” + Math.ceil(percentLoaded );
this.bar._xscale = percentLoaded ;

if (percentLoaded => 100) {
_parent.play();
}
}
[/cc]

Download

activeden is hosting this preloader file: Round Preloader Bar

Circlecube Flash Items on activeden

21075 24687 45713 45893 22018

Interactive Image Viewer v1 @ FlashDen

I’ve re-purposed an old project of mine, the interactive pog portfolio viewer, to activeden. I call it the pog portfolio because each work is represented by a circle, or pog, and you play ith it in the “bay” with different interactive physics configurations. When you click a pog you can view a close up image of that item and more details. The whole file has been cleaned up (code and graphics) and documented for easy customizations.It is a small file size as well, under 36kb swf!

This is mainly an image viewer, stay tuned for any updates, like video support etc.

INTERACTIVE IMAGE VIEWER WITH PHYSICS AND ANIMATION EXAMPLE!

pog portfolio image

View Details here at activeden

Works and configuration loaded in through a single xml file. Select works from the bay to view title, description image and a link (if applicable). Organize works with the tags or select all and choose the physics of the bay for interactivity control (gravity, spring, grid and friction).

It is fully customizable and fully driven by xml. The xml file contains values for configuring the swf, and also all the information about each work to be included in the portfolio.

Each work is loaded into the ‘bay’ as a round thumbnail or ‘pog’. These pogs are animated with the interaction options (gravity, friction, spring and grid). The pogs are sortable by tags (parsed in from the xml).

The whole color scheme of the image viewer is configurable, or can even be set to random! Have a different color scheme every time your image viewer loads!

Clicking a pog in the interactive bay sends that thumb to the holding area and loads the close up into the focus window for that work. It also loads the details about that work into the detail box (to the right of the focus box). Each works needs a 50×50 thumbnail and a close up (max 375px x 270px) image. Focus images are all loaded in with an informative preloader and fade is once loaded.

Site easily integrates with Google Analytics to track user interactions within this flash portfolio!

All works in the portfolio are passed in through an external xml file, here is a sample work node from xml:
[cc lang=”xml” tab_size=”2″ lines=”40″]


Random Gear

Random gear photograph from activeden assets.

random_gear.jpg


random_gear.jpg

http://activeden.net


Photo|Industrial

[/cc]

Download source at activeden

Enjoy, and let me know what you think!

Circlecube Flash Items on activeden

21075 24687 45713 45893 22018

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″]

Get Adobe Flash player

[/kml_flashembed]

Circlecube Flash Items at ActiveDen

21075 24687 45713 45893 22018

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

Get Adobe Flash player

[/kml_flashembed]

circlecube on activeden

Circlecube Flash Items at ActiveDen

21075 24687 45713 45893 22018

Dynamic Flash Vertical Scrolling Link List with XML

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