CSS3 Tool, CSS3Please

Google Buzz

With all the buzz about new improvements in CSS3 I’ve been meaning to write about it, but…

I couldn’t find any excuses when I stumbled on Paul Irish’s new css3please.com: a cross-browser css3 rule generator. Just had to do a quick post to spread the word.

It’s great for cross-browser testing as well as generating the code for many css3 rules:

  • border-radius
  • box-shadow
  • gradient background
  • rgba backgrounds
  • transform (rotate)
  • @font-face

and more coming soon!

  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
Posted in review | Tagged , , , , , , , , | 1 Comment

Flashvars and as3

Google Buzz

flashvars_as3_thumbFlashvars and actionscript 3! Flashvar is a way that in your html embed codes (object tags) you can send variables and values into your swf file. These variables can then be grabbed internally and used your programming! Examples of these could be images that you want to use in your swf but don’t want to import or hardcode them into the flash file or paths to xml or flv files to use as well. Actionscript 3 has a different procedure than as2 did as to how you read these flashvars from the actionscript side. The embed codes and html side of things are still the same, but in case your new to actionscript altogether, I’ll give an example of the html as well.

1
2
3
<object width="200" height="200" type="application/x-shockwave-flash" data="flashvars_as3.swf">
<param name="flashvars" value="colors=0x012345,0x123456,0x234567,0x345678,0x456789,0x567890,0x678901,0x789012&delay=.11&loop=true&random=false"/>
</object>

In actionscript 3 we use the loaderInfo object to access the flashvars. The parameters Object of the loaderInfo will contain all the flashvar variables and values.

1
this.loaderInfo.parameters

As an example of something that is visual I’ve created this little app to read some options from flashvars about colors. An app that will read a list of colors and update a box that is on the stage already to those colors with the specified delay. I always have fun with randomness so I threw in the option for random colors as well. This file looks for certain flashvars: color, loop, delay and random. These are the keys or names of the variables and they are followed by the values you want them to hold. Note that flashvars can be set in any order, so you don’t have to start with color and end with random.

In this example I’m looking for 4 flashvars specifically (in any order):

  • colors:String – a comma delimited list of hex colors or simply a string “random” for randomly generated colors (the hex for black #000000 needs to be 0×000000 in flash) (default is random)
  • loop:Boolean – whether or not to repeat these colors (default is true)
  • delay:Number – the delay between colors (in seconds). (default is 1 second)
  • random:Boolean – determines whether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)

This is much more than is required for this example, but I was having fun playing with random colors and timing and options. I figured it diesn’t hurt to show the effect you can have with a couple different variables on one file. Here is an example using the object tags above:

Get Adobe Flash player

And here are some more (please don’t have a seizure!)

Here’s the full source if you’re interested:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/*
circlecube.com

App to demonstrate the process of getting flashvars from embed code to actionscript (as3)

Displays colors specified.

looking for 4 flashvars specifically (in any order):
colors:String - a comma delimited list of hex colors or simply a string "random" for randomly generated colors (the hex for black #000000 needs to be 0x000000) (default is random)
loop:Boolean - wether or not to repeat these colors (default is true)
delay:Number - the delay between colors (in seconds). (default is 1 second)
random:Boolean - determines wether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)

*/


//initialize vars
var myflashvars:Object = new Object()
var myColors:Array = new Array("random");
var myLoop:Boolean = true;
var myDelay:Number = 1;
var randomOrder:Boolean = false;
var allRandom:Boolean = false;
//read flashvars in actionscript3
//if colors flashvars doesn't exist use these defaults
if (!this.loaderInfo.parameters.colors){
    myflashvars = {colors: "random", delay: 1};
}
else{
    myflashvars = this.loaderInfo.parameters;
}
//assign flashvars to variables within flash
for (var item:String in myflashvars) {
    trace(item + ":\t" + myflashvars[item]);
    if (item == "colors"){
        myColors = myflashvars[item].split(',');
    }
    else if(item == "loop"){
        myLoop = parseBoolean(myflashvars[item]);
    }
    else if(item == "delay"){
        myDelay = myflashvars[item];
    }
    else if(item == "random"){
        randomOrder = parseBoolean(myflashvars[item]);
    }
}

//use my variables!
if (myColors[0] == "random"){
    allRandom = true;
   
}
var counter:Timer = new Timer(myDelay * 1000);
counter.addEventListener(TimerEvent.TIMER, nextColor);
trace ("color number: 0", "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);

counter.start();
stop();
function nextColor(e:Event):void{
    //cycle through colors
    if (!allRandom && !randomOrder){
        if (counter.currentCount+2 > myColors.length){
            if (myLoop == true || myLoop == "true"){
                counter.reset();
                counter.start();
            }
            else{
                counter.stop();
            }
        }
        trace ("color number: "+counter.currentCount, "color hex: "+myColors[counter.currentCount]);
        setColor(myBox, myColors[counter.currentCount - 1]);
    }
    //randomly select a color from the myColors array
    else if (!allRandom && randomOrder){
        var randomColor = Math.floor(Math.random() * myColors.length);
        trace ("random number: "+randomColor, "color hex: "+myColors[randomColor]);
        setColor(myBox, myColors[randomColor]);
    }
    //randomly create colors
    else{
        trace ("number: "+counter.currentCount, "color hex: "+myColors[0]);
        setColor(myBox, myColors[0]);
    }
}
function setColor(item:DisplayObject, col):void{
    if (col == "random"){
        setRandomColor(item);
    }
    else{
        setHexColor(item, col);
    }
   
}
function setHexColor(item:DisplayObject, col:Number):void {
    var myColor:ColorTransform  =  item.transform.colorTransform;
    //check color bounds
    if (col > 16777215) col = 16777215;
    else if (col < 0) col = 0;
    myColor.color = col;
    item.transform.colorTransform = myColor;
}
function setRandomColor(item:DisplayObject):void{
    setColor(item, (Math.floor(Math.random() * 16777215)));
}
function parseBoolean(str:String):Boolean
{
    switch(str.toLowerCase())
    {
        // Check for true values
        case "1":
        case "true":
        case "yes":
        return true;
 
        // Check for false values
        case "0":
        case "false":
        case "no":
        return false;
 
        // If all else fails cast string
        default:
        return Boolean(str);
    }
}
  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
Posted in tutorial | Tagged , , , , , , , , , , | 2 Comments

Tutorial to Create a Responsive Image Scroller in ActionScript 3.0

Google Buzz

responsive-images-scroller-as3-thumb

I’ve written a tutorial which is published over at flash.tutsplus. This tutorial demonstrates how to create a horizontally scrolling image viewer and covers xml parsing, loading and resizing external images, and creating intuitive and responsive scrolling!

Get Adobe Flash player

So check out the Tutorial to Create a Responsive Image Scroller in ActionScript 3.0 over at flash.tutsplus.com!

sourcedemomilestone

You’ll find full source code available for download as well as the demo files and step by step milestones all throughout the tutorial.

  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
Posted in portfolio, review, tutorial | Tagged , , , , , , , , , , , , , , , | 5 Comments

circlecube’s New Clothes – Theme Redesign

Google Buzz

blog-circlecube-com pageThanks for your patience as I’ve been tinkering with the theme, layout and css of circlecube.com.

old theme

old theme

The last theme I used was badly broken with the wordpress 2.8 update and then I noticed the developer actually discontinued support for the theme! So I had an opportunity to delve into wordpress theming. I’d been reading about child themes and wanted a nice stable basic parent theme to build from. Cue thematic framework. It was a great learning experience building a child theme for myself, many thanks to Ian Stewart for all the tips help and tuts to help me though it, not to mention for creating thematic .

new theme

new theme

I’ve kept the color scheme and general look of the site the same. So the reason I’m going on about it is I think I’m finished… and I’m asking you to let me know if you see anything that looks odd or fishy, or even just want to make a suggestion or comment on how much you like/hate the redesign. Comment on this post or contact me!

And as always, if there’s something you would like me to write about or have questions you can also contact me. I’ve even set up a poll in the sidebar showing post ideas I have which you can vote on and encourage me to write the one(s) you want most first! So let me know what you want, it encourages me to write more. And be sure to subscribe to the circlecube rss feed so you won’t miss anything that’s coming up!

  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
Posted in portfolio | Leave a comment

Stomper999

Google Buzz

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 flashDen for the countdown and used jquery and the easing and color plugins.

  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
Posted in portfolio | Tagged , , , , , , , , , , , , , , , , | Leave a comment

Forthcoming Actionscript Image Scroller Tutorial

Google Buzz

image-scroller-thumbnail

Here is a preview of a file I’m writing a tutorial for. It’s nothing groundbreaking, but it deals with many normal tasks and will show my process a bit. This tutorial will show how to create a horizontally scrolling image viewer. It will cover xml loading & parsing, loading & resizing external images to fit into a scrollable container, and creating intuitive and responsive scrolling!

Get Adobe Flash player

Let me know what you think, and if there’s anything you want specifically mentioned/explained in it I’ll do my best! Or if you have any ideas of how this could be improved.

Update: The article/tutorial has now been published follow the link to theTutorial to Create a Responsive Image Scroller in ActionScript 3.0

  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
Posted in tutorial | Tagged , , , , , , , , , , , | 5 Comments

StomperNet FormulaFIVE Launch Web Design

Google Buzz

StomperNet relaunched the popular FormaulFIVE and I was responsible for the design of the landing pages. Here are screenshots from the launch, FormulaFIVE was teased with a couple video trailers and even packaged with some bonus videos called the Cash Booster series.
Aviary stomperf5-com Picture 2Aviary stomperf5-com Picture 1Aviary-stomperf5-com-3a
Go to stomperf5.com to view the page.

  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
Posted in portfolio | Tagged , , , , , , , , , , , , | Leave a comment

Stock Flash Site, Introducing ‘BuyStockFlash.com’

Google Buzz

Buy Stock Flash


Sell & Buy Flash

Buy or Sell, Start Now -

Stock Flash – Royalty Free Stock Flash effects, Video, Audio

The New Kid on the block… it’s good to see some competition coming to the stock flash world. BuyStockFlash is revving it up. They are positioned to provide a place where flash-ers can upload components, templates, utilities, flv & mp3 players, logos & icons and any other flash elements to sell and earn at least 50% from the proceeds. I haven’t yet uploaded any files, but will once I have some time to do so. They also have a pretty rewarding affiliate program! They let the site speak for itself, displaying a gallery of available files on the homepage. The site just started last fall, is based in Prauge and since they have expanded to become buystocknetwork, including a site for flash, design templates, and sound files!

While the content is still somewhat bare, I’ve seen a few items that are top shelf! I see a lot of potential in this site! Good luck to them and to you, enjoy BuyStockFlash!

  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
Posted in review | Tagged , , , , , , , , | Leave a comment