June 25, 2008 at 10:20 pm · 205 views · Filed under portfolio, work
StomperNet now has a site map. Only it’s much bigger than just a site map, we’re calling it Stomper Universe! It contains all the pieces parts that make up StomperNet. It links to different sites, video series, tools, and more by giving a 3D interactive space to inspect the thumbnails and click through to the sites! It will help visitors navigate easily to all areas of StomperNet, whether they are new to them or old favorites.
May 21, 2008 at 8:45 pm · 576 views · Filed under tutorial
Intro to CSS
We use css to apply styles to certain elements on the page, we can target any div like this:
HTML
<div>Text</div>
CSS
div {
css-property: value;
}
Any class selector <div class=”divClass”> like this:
HTML
<divclass="divClass">Text</div>
with this:
CSS
div.divClass{
css-property: value;
}
<!-- or simply -->
.divClass{
css-property: value;
}
or any id selector, <div id=”divID”> like this:
HTML
<divid="divID">Text</div>
with this:
CSS
div#divID{
css-property: value;
}
<!-- or simply -->
#divID{
css-property: value;
}
These are the basics of css. Use an element tag name to target it, use a dot to access class names and a hash (#) to represent id names. A lot can be done with just that, but sometimes you may want to access something differently, an option is to use attribute selection.
Overview
More advanced we can apply styles to elements based on their attributes. Attribute selectors use the attributes of the tag.
We can use attribute selection to specify certain elements to stylize. For example if we have a page with many images but only certain ones have title attributes, which we want to stand out more, this css rule would do the trick:
CSS
img [title]{
border: 2pxsolid#000000;
}
It would cause any image with a title tag (no matter what the value of the title tag is) to have a 2px wide solid black border, such as <img title=”MyImage” src=”/images/sample.jpg” /> or <img title=”" src=”/images/sample.jpg” /> but not <img src=”/images/sample.jpg” /> because it has no title attribute.
Further we can specify which values of the title attribute we want to target. If we want to stylizee links to a certain site we can do this: a[href="http://blog.circlecube.com"] { }
CSS
a[href="http://blog.circlecube.com"]{
background-color: #EBEBEB;
}
it would style <a href=”http://blog.circlecube.com”>This link</a> but not <a href=”http://blog.circlecube.com/2008/05/21/”>this one</a> because it is not an exact match, nor <a href=”http://www.google.com”>this one</a> because it isn’t a match either, or at all.
For another example, if we want to stylize local links differently than absolute links, we’d want to look at the beginning of the attribute’s value only so we’d use ‘^=’. We could have something like this:
a[href^="http://"], a[href^="https://"] {
background: url(/images/external.gif) no-repeat right center;
padding-right:20px;
}
it would style <a href=”http://www.google.com”>This link</a> because it begins with ‘http://’ but not <a href=”/2008/05/21/”>this one</a> because it is does not begin with ‘http://’. But it would also style <a href=”https://paypal.com”>this</a> because it matches the selector after the comma ‘https://’, and even <a href=”http://blog.circlecube.com/2008/05/21/”>this</a> will be styled, because the link is absolute (even though it is local) so be careful with how you use it.
May 9, 2008 at 7:05 pm · 255 views · Filed under portfolio
Here’s a new site and series from StomperNet called Going Natural 3!
It’s a bit of free videos made and released to showcase the talents and business of what StomperNet is about and what they do for their clients. They’re ‘moving the freeline’ so to speak…
The first video series begins with Dan Thies talking about his ‘Crazy Theory’ for AdWords.
This site contains the latest flash video player built by yours truly. I also did the design of the site: involving html, css, php, javascript and dealing with drupal too!
February 1, 2008 at 6:59 pm · 8,416 views · Filed under tutorial
Overview:
Using ExternalInterface.addCallback() we can expose an actionscript function and make it available to javascript. This would be helpful to have your webpage with embedded flash communicate to your flash swf file and even control it with javascript! Say we wanted to have buttons in the html page that would control an object in the flash. Communication is a two-way road so wouldn’t it be great to be able to go the other way as well, you can! That is the main function of ExternalInterface! In this example/tutorial I will explain both directions of communication with flash and javascript! Communication between flash and javascript isn’t just a myth or mystery!
Steps:
Be sure to import flash.external.*;
Set up the javascript to actionscript lane of your communication road. (ExternalInterface.addCallback(methodName, instance, method);)
Write your javascript function.
Set up the actionscript to javascript lane. (ExternalInterface.call(functionNameInJavascript);)
We will follow the text’s journey on our road of communication…
The One way: I type in ‘Johnny Appleseed’ in the html text box and press the Send Text To Flash button. The onclick javascript event finds the flash element and calls it’s function (sendTextFromHtml) and then clears the text in the html box. This function has been set up and is exposed to javascript (in actionscript lines 4-7) with the methodName ’sendTextFromHtml’ while the method it calls is recieveTextFromHtml() in the actionscript. So ‘Johnny Appleseed’ is received as the parameter of the recieveTextFromHtml() function and is assigned to the text of the theText text box.
And back: Now I delete ‘Johnny Appleseed’ since he’s only a fable and enter ‘Paul Bunyan’ in the swf text box and press the Send From Flash to Javascript button. This calls the onRelease function associated with this button. ExternalInterface.call calls the ‘recieveTextFromFlash’ function in the javascript of the page and passes ‘Paul Bunyan’ as the parameter. The javascript function finds the html text box using getElementById() and assigns the parameter to the value of that text box!
This technique will even work if you’re not sending folklore character down the road.
January 21, 2008 at 7:19 pm · 1,762 views · Filed under tutorial
Overview:
Flash give publishers the opportunity to customize the right-click menu which pops up in the swf file with a context menu item in actionscript.
ContextMenuItem ContextMenuItem(caption:String, callbackFunction:Function, [separatorBefore:Boolean], [enabled:Boolean], [visible:Boolean])
Creates a new ContextMenuItem object that can be added to the ContextMenu.customItems array.
Steps:
The menu item has a caption, which is displayed to the user in the right click menu. It also has a a callback function handler by naming the function in the code to be invoked once the menu item is selected. It then has three boolean values which specify whether the item has a separator before it, is enabled, and is visible.
To add a new context menu item to a context menu, you simply create the context menu items and then push them into the customItems array.
You can enable or disable specific menu items, make items visible or invisible, or change the caption or callback handler associated with a menu item at any time.
In the example here the menu items about clearing and rewriting the text are set to toggle each other, so you can’t rewrite the text if it hasn’t yet been cleared and vice versa.
To further customize the context menu flash allows us to hide the built in items in the menu with hideBuiltInItems(). This hides all the built in item from view (except ’settings’) by setting their visibility to false.
Example:
Actionscript:
var myMenu:ContextMenu = newContextMenu();
myMenu.hideBuiltInItems();
var ccs:ContextMenuItem = newContextMenuItem("Visit Circle Cube Studio", visitCCS, false, true, true);
January 11, 2008 at 6:03 pm · 251 views · Filed under portfolio, work
About dot Stompernet dot Com (about.stompernet.com) is the new public (free) website from StomperNet. I helped implement this design and had to learn all about themes in Drupal. It’s still in beta, but it’s well on it’s way. It is an agglomeration site, where all the StomperNet Faculty’s feeds can be found and various other free content, like video in the Squambido player, and the Scrutinizer software.
December 28, 2007 at 7:58 pm · 260 views · Filed under portfolio, work
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.
Loading ...