I just realized that I hadn’t updated the site about it, but I’m now (since a couple months) interactive designer/developer with Redworks, subsidiary or Ogilvy & Mather in Atlanta! I’ll be doing all kinds of interactive designing and programming, specifically with flash and I’m stoked to be waist deep in Flash and as3 daily.
What? You ask is RedWorks? Well, I have been explaining it to so many that I figured I’d post this awesome video that explains it better than I ever could! Enjoy, this if from the RedWorks 3D office in NY.
My latest stock flash video player of mine was just added to the database of stock flash items at activeDen. Go check it out and if you like it, download it for use in your projects! I’ve got lots in it for you. I’m using the principles I used as the architect for the video player for stomperNet and then at cornerstone media group in this decked out video player. Go get circlecube’s awesome stock flash video player.
An extensively customizable yet simple video player. Integrate the video into your user experience with javascript integration as well as Google Analytics tracking on the video interaction! Control functionality, layout and colors of the player easily! Plus don’t sweat the embed codes – an embed code generator included!
Let your video be the focus!
Features
Includes an embed script generator! With options for swfobject implementation or simple valid html object tags (or both)!
Embed generator makes setting your settings easy with a Live Preview!
Supports flv, f4v and any container format using H.264: mp4, m4a, mov, mp4v, 3GP, 3G2.
All images and video loaded externally
Run this player without additional files, just pass in the flv path and thumbnail path.
Supports most image file types: jpg, gif, png.
Google Analytics Integration (event tracking) – Uses on page analytics account or a specified account on a per video setting in flashvars.
Load any dimension video. Completely resizable
Set player width and height
Set video width and height
Full screen capabilities
All colors fully customizable in flashvars
Use a preview/thumbnail image.
Auto play option
Auto load option – in case you had a bunch of video on one page you wouldn’t want them all to auto load.
This magic button is almost always forgotten, but 90% of the time when you don’t see what you think you should be seeing on a webpage, the culprit is the same: cache.
Imagine: a few hours after discussing some edits to your site with your trusted designer. Your designer says he just updated the graphics or layout of your website and you’re excited to see it. You go to your favorite browser (which I hope is not IE), and type in your url. “Hm, that’s funny, I thought they said it was updated, do they think every day is April Fools or something?!” Then after an email and a phone call they confirm that they did update the page, you go back to it once again and still don’t see anything different! By this time you are wishing you could reach through the phone and smack somebody. You look on a different computer and see the update, and are beyond confused when you go to your computer and still don’t see the update.
Eventually, the designer tells you to try refreshing or clearing your cache. That sounds like a good plan, but what the heck is he talking about? Cache is one way smart guys have determined the internet can work better and faster. Essentially when your browser (for example Firefox, Safari or Internet Explorer) views a webpage it copies it from the internet to your computer. Then if you view that page again your browser remembers that it’s seen it recently, so it displays your local copy rather than connect with the server and download a new copy every single time. Especially with linked images and files such as style sheets and scripts. This helps you see the internet and websites faster. This is a good thing except when you want to see the most updated version in your browser.
There are however a couple ways you may tell the browser to forget the cached version of the page and load it all fresh from the server. The standard shortcuts are (windows) ‘ctrl + F5’ and (mac) ‘cmd + R’. You can also go to your browser options and delete browser history, but that will clear all your cache and not just the page you are on. This is almost always the case when you’re not seeing what you should be seeing on a site. So next time it happens, take a moment and hit F5 to save a headache.
Checking out an interesting article about Diaspora (back the project and the cause if you can) on NYTimes and then I noticed the words adobe and Apple in the same space. The ad reads “We Love Apple” and is followed by the Adobe logo. What a joke I thought, it takes a lot of gumption for Adobe to say they love Apple right now, but I’m sure they really do. Despite all the negative things Apple has been doing and saying towards Flash and Adobe in general. I admit I’m biased, but…
I {heart} flash
I would rather stop using Apple than stop using Adobe. I agree with the openness and empowering software that Adobe provides. True, it’s expensive and true it’s not perfect, but I’ve found Adobe to be a great company that cares about the web and progress. During the whole Flash/iPhone debate I’ve been bothered by the lack of response from Adobe. It was nice that they were above the name calling and flat out lying that Steve Jobs and Apple have turned to, but to be honest- a little disheartening that they had nothing to say. Then the ‘Thoughts on Flash’ came out and I was amazed at the silence from Adobe. This is the perfect and genius response to the unprofessional lashes from Apple. From the 3.3.1 iPhone developer clause to the sheer CLOSEDness of Apple in general. I used to be a big fan of Apple because they made a great product. Perhaps I gave them a little boost because who doesn’t like an underdog. But they have proven to me at least to be more closed and more evil than even Microsoft when they packaged IE with their OS. (Although Apple has done that too with Safari and iTunes, but I digress).
What we don’t love is anybody taking away your freedom to choose what you create, how you create it, and what you experience on the web.
I give props to Adobe. They were surely disturbed when Apple declared war on flash, but rather than stooping to the level of Steve Jobs, they thought it out and made an honorable move. I know it’s not the end, but if things continue a check-mate/game-point-match may be in order by the end of the decade…
The main reason I decided to write this was foxtrot:
The “community” is bringing out so-called enemies of flash. But I think the web is what it is today to a great part because of flash. I hope apple will one day open up and actually make the best web experience possible by putting flash on the iProducts (but seriously doubt Mr Jobs will ever come to his senses). The way I see it, blocking flash on apple products is a business decision (as flash would compete with the cash flow of the app store) cloaked in a technical and sorry excuse and passing the blame onto the very company (Adobe) which has repeatedly tried to work with mac to achieve improvements.
HTML5 killing flash? Flash not dead!
I could write paragraphs about it, I for one am very excited about the new possibilities with html5 and css3 and even cs5! I could go on but I’ll just reference some of the best articles I’ve seen:
//links links links
Flashvars 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. [cc lang=”html”] [/cc] 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. [cc lang=”actionscript”] this.loaderInfo.parameters [/cc] 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 0x000000 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 doesn’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: [kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2009/12/flashvars_as3.swf” width=”200″ height=”200″ targetclass=”flashmovie” fvars=”colors=0xFF0000,0x0FF000,0x00FF00,0x000FF0,0X0000FF,0xF0000F&delay=.66&loop=true&random=false”] [/kml_flashembed] And here are some more (please don’t have a seizure!) Here’s the full source if you’re interested: [cc lang=”actionscript”] /* 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); } } [/cc]
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!
Interactive Design project for StomperNet’s tease of the announced reveal on 09/09/09 at 09:09:09!
“Online Marketing Changes Forever!”
Wanted it to be unexpected, and I think we hit it! Check it out live at stomper999.com!
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.
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!
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.
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. Go to stomperf5.com to view the page.