Home Contact RSS

StomperNet’s Stomper Universe | Interactive Flash Site Map

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.

So go check out the StomperNet Universe now!

Stompernet universe thumbnail

Tags: , , , , , , , , ,

Using CSS Attribute Selectors to Stylize HTML | Style outbound links | Tutorial

Intro to CSS

We use css to apply styles to certain elements on the page, we can target any div like this:

HTML

  1. <div>Text</div>

CSS

  1. div {
  2. css-property: value;
  3. }

Any class selector <div class=”divClass”> like this:

HTML

  1. <div class="divClass">Text</div>

with this:

CSS

  1. div.divClass {
  2. css-property: value;
  3. }
  4. <!-- or simply -->
  5. .divClass {
  6. css-property: value;
  7. }

or any id selector, <div id=”divID”> like this:

HTML

  1. <div id="divID">Text</div>

with this:

CSS

  1. div#divID {
  2. css-property: value;
  3. }
  4. <!-- or simply -->
  5. #divID {
  6. css-property: value;
  7. }

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

  1. img [title] {
  2. border: 2px solid #000000;
  3. }

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.

HTML

  1. would style
  2. <img title="”MyImage”" src="http://blog.circlecube.com/wp-admin/”/images/sample.jpg”" alt="" />
  3. or even
  4. <img title="”&quot;" src="http://blog.circlecube.com/wp-admin/”/images/sample.jpg”" alt="" />
  5. but not
  6. <img src="http://blog.circlecube.com/wp-admin/”/images/sample.jpg”" alt="" />
  7. 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

  1. a[href="http://blog.circlecube.com"] {
  2. background-color: #EBEBEB;
  3. }

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.

HTML

  1. it would style
  2. <a href="”http://blog.circlecube.com”">This link</a>
  3. but not
  4. <a href="”http://blog.circlecube.com/2008/05/21/”">this one</a>
  5. because it is not an exact match, nor
  6. <a href="”http://www.google.com”">this one</a>
  7. 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.

HTML

  1. it would style
  2. <a href="”http://www.google.com”">This link</a>
  3. because it begins with ‘http://’ but not
  4. <a href="http://blog.circlecube.com/wp-admin/”/2008/05/21/”">this one</a>
  5. because it is does not begin with ‘http://’.
  6. But it would also style
  7. <a href="”https://paypal.com”">this</a>
  8. because it matches the selector after the comma ‘https://’,
  9. and even
  10. <a href="”http://blog.circlecube.com/2008/05/21/”">this</a>
  11. will be styled, because the link is absolute
  12. (even though it is local) so be careful with how you use it.

Summary

Hoping you will see the pattern and can use the rest of these somehow (I’m drawing blank on interesting examples),

1 is: [attribute] exists

target anchors with any titles attributes.

CSS

  1. a[title] {
  2. background-color:#0000FF; (blue)
  3. }

HTML

  1. <a title="some title" href="http://blog.circlecube.com/">Link</a>

2 equal: [attribute=x] equals x

target only anchors where the title attribute contains something exactly

CSS

  1. a[title="Only"] {
  2. background-color:#FF0000; (red)
  3. }

HTML

  1. <a title="Only" href="http://blog.circlecube.com/">Link</a>

3 hat: [attribute^=x] starts with x

target instances where something comes at the beginning of the attribute. This can prefix a word or even be the first word in a phrase or sentance.

CSS

  1. a[title^="Super"] {
  2. background-color:#00FF00; (green)
  3. }

HTML

  1. <a title="Supercalafragalisticexpialadosious" href="http://blog.circlecube.com/">Link</a>

4 dollar: [attribute$=x] ends with x

instances where something comes at the end of the attribute. This can be the suffix of the word or the last word in a phrase.

CSS

  1. a[title$="ious"] {
  2. background-color:#FFFF00; (yellow)
  3. }

HTML

  1. <a title="Supercalafragalisticexpialadosious" href="http://blog.circlecube.com/">Link</a>

5 asterisk: [attribute*=x] contains x

or even titles which contain a certain word somewhere/anywhere in the attribute. This wildcard be anywhere, in a word, as a word, whatever.

CSS

  1. a[title*="tic"] {
  2. background-color:#FF00FF; (magenta)
  3. }

HTML

  1. <a title="Supercalafragalisticexpialadosious" href="http://blog.circlecube.com/">Link</a>

6 tilde: [attribute~=x] one of which is exactly x.

a space-separated list of “words”, one of which is exactly x.

CSS

  1. a[title~="tic"] {
  2. background-color:#FF00FF; (magenta)
  3. }

HTML

  1. <a title="Super cala fragalis tic expi ala dosious" href="http://blog.circlecube.com/">Link</a>

7 pipe: [attribute|=x] which first word is exactly x.

a hyphen-separated list of “words”, first word is exactly x.

CSS

  1. a[title|="Super"] {
  2. background-color:#FF00FF; (magenta)
  3. }

HTML

  1. <a title="Super-cala-fragalis-tic-expi-ala-dosious" href="http://blog.circlecube.com/">Link</a>

view all examples on this page.
refer to w3 for more

Let me know what you come up with or if I’ve left out any essentials.

Tags: , , , , ,

Going Natural 3.0 at StomperNet

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.

On signing in there are a couple BONUS videos for you as well. So go check them out as well!
Watch Going Natural 3 - Adwords Triangulation Method and more

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!

Tags: , , , , , , , , , , , ,

Actionscript Javascript Communication | ExternalInterface call and addCallback 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:

  1. Be sure to import flash.external.*;
  2. Set up the javascript to actionscript lane of your communication road. (ExternalInterface.addCallback(methodName, instance, method);)
  3. Write your javascript function.
  4. 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.

Example:

View the live example here: ActionscriptJavascriptCommunication.html

Actionscript Javascript Communication thumbnail
Actionscript:

  1. import flash.external.*;
  2.  
  3. //Set up Javascript to Actioscript
  4. var methodName:String = "sendTextFromHtml";
  5. var instance:Object = null;
  6. var method:Function = recieveTextFromHtml;
  7. var wasSuccessful:Boolean = ExternalInterface.addCallback(methodName, instance, method);
  8.  
  9. //Actionscript to Javascript
  10. //ExternalInterface.call("recieveTextFromFlash", _root.theText.text);
  11.  
  12. function recieveTextFromHtml(t) {
  13. _root.theText.text = t;
  14. }
  15.  
  16. _root.button.onRelease = function() {
  17. ExternalInterface.call("recieveTextFromFlash", _root.theText.text);
  18. _root.theText.text = "";
  19. }

Javascript:

  1. function recieveTextFromFlash(Txt) {
  2. document.getElementById('htmlText').value = Txt;
  3. }

HTML: view Source of sample page

Download:

Download all source files (.fla, .html, .swf): ActionscriptJavascriptCommunication.zip

Tags: , , , , , , , , ,

Customize the Right-click menu in Flash | ContextMenuItem 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:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
Actionscript:

  1. var myMenu:ContextMenu = new ContextMenu();
  2. myMenu.hideBuiltInItems();
  3. var ccs:ContextMenuItem = new ContextMenuItem("Visit Circle Cube Studio", visitCCS, false, true, true);
  4. var pog:ContextMenuItem = new ContextMenuItem("Visit Interactive Flash Portfolio", visitPOG, false, true, true);
  5. var ct:ContextMenuItem = new ContextMenuItem("Clear Text", clearText, true, true, true);
  6. var rw:ContextMenuItem = new ContextMenuItem("Rewrite Text", rwText, true, false, true);
  7. var mt:ContextMenuItem = new ContextMenuItem("Move Text", moveText, false, true, true);
  8.  
  9. myMenu.customItems.push(ccs, pog, ct, mt, rw);
  10. _root.menu = myMenu;
  11.  
  12. function visitCCS () {
  13. getURL("http://blog.circlecube.com", "_blank");
  14. }
  15. function visitPOG () {
  16. getURL("http://www.circlecube.com/test/", "_blank");
  17. }
  18. function clearText() {
  19. myText = "";
  20. ct.enabled = false;
  21. rw.enabled = true;
  22. }
  23. function rwText() {
  24. myText = "Rewrite: \nRight-click to see the customized menu";
  25. ct.enabled = true;
  26. rw.enabled = false;
  27. }
  28. function moveText() {
  29. theText._y += 10;
  30. }

Download:

Download the Zip file (right-clickMenu.zip)

Tags: , , , , , , , ,

New Theme for Circlecube

I went for the basic and popular Qwilm 0.3

Theme hardly based on huddletogether.
This theme was designed by Lokesh and destriped and built by Oriol Sanchez

Over the next while I’ll be massaging the look and feel (mostly CSS) to fit my needs.

Please let me know if you see anything odd or broken, or if you have any other comments, thanks!

Update: Color Scheme adjusted and some minor layout changes. A little PHP tweaking, but mostly CSS.

Tags: , , , ,

About.StomperNet.com

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.

about stompernet screenshot

Tags: , , , , , , , , ,

StomperNet Scrutinizer

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.

Tags: , , , , , , , , ,
Next entries »