Montgomery Bank Design
The latest design for Banc Intranets is the Montgomery Bank re-design. Hot off the presses below is the home page design getting ready for CSS/HTML and integration into the Banc Intranets framework.
Flash Video Player
Recently I also created a custom video player/skin for promoting internal video on the intranet. Below is a screen shot of the final player, which resizes based on content from 250px to 750px. The player also has logic controlled by passing flash vars into it to determine whether or not the video is streaming or progressive, allowing us to use one player skin for all video internally.
note - To preserve any complications with compliance of King Pharmaceuticals I am only posting simple screenshots of applications that I have created. Any content that may be shown is strictly for demonstration purposes of my portfolio.
Flash mp3 player
I recently created a custom mp3 player/skin for promoting company sound bytes on the internal portal. Using Flash and AS3 was a no brainer for this type of project. I will package the project and classes soon to include in this post.
note - To preserve any complications with compliance of King Pharmaceuticals I am only posting simple screenshots of applications that I have created. Any content that may be shown is strictly for demonstration purposes of my portfolio.
FDT3 by Powerflasher - AS3 super editor!
I have seen the light. An old friend sent me a link today to FDT3, an AS3 super editor based on Eclipse. There is a plugin for Eclipse as well as a stand alone install. The basic features that I have used so far would help any new or seasoned AS3 developer greatly. The real time debugging and strict coding parameters alone have already improved my quality of coding. Check it out at http://fdt.powerflasher.com/. Now if I can only talk my boss into getting me a copy…but I have to admit it’s pretty damn expensive.
AS3: Re-Usable TextFormat class
In this simple tip I provide an easy to use text formatting class. To use this class, simply import the class into your existing document class or other, and then create a variable instance. To call the formatter you will use “textfield.setTextFormat(variable.formatfunction);
The formatting class is below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | package com.riareviver{
//FLASH CLASS IMPORT
import flash.display.MovieClip |
Below is a sample textfield class using the formatter
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 | package com.riareviver{
//FLASH CLASS IMPORT
//CUSTOM CLASS IMPORT
import com.riareviver.TxtFormat |
Click here to see more text formatting properties
Related Articles:
AS3: Using Array and For Loop to create movable panels
This tip will show you how to 1. create movable panels, and 2. to create them using array and for loop statements to access the panel class. This is an exercise in creating re-usable code classes, and accessing them with and array.
First we create a Flash project to hold all the files for the exercise. Then we create 3 separate files, one .fla and two .as files. The .fla does nothing more than access the document class and set the size of the stage. I usually name the document class the same as the .fla, but feel free to name it as you like. The two .as classes that we will create are the one we will use as the document class (PanelNav.as) and a class that holds the panel creation code (PanelSpawn.as).
The class PanelNav.as imports the class Panel Spawn.as, creating panels by cycling through an array of information. I am passing a few arguments from the array, but more can be passes as you get into the class, such as header color, border color, etc. Everything is generated by using one major for/loop statement, cycling through the amount of Array items, generating a panel from the PanelSpawn.as class for each array item. You can use the PanelSpawn.as class to create one panel, but why when you can create an unlimited amount of panels by using a simple array and for statement? Enough of my explanation, here is the code.
Download the source project here
Click and drag a panel below, note the transparency on click.
Below is the code for the Document Class
package com.riareviver{
//FLASH CLASS IMPORT
import flash.display.MovieClip
import flash.events.*
//CUSTOM CLASS IMPORT
import com.riareviver.PanelSpawn
import com.riareviver.DebugPanel
public class PanelNav extends MovieClip {
//VARS
public var panelArray:Array = new Array()
public var genPanel:Array = new Array()
public var debugPanel:DebugPanel
public function PanelNav() {
//Debug Panel
debugPanel = new DebugPanel()
//Panel Array push
panelArray.push({width:200, height:180, title:"Panel One", xLoc:20, yLoc:20})
panelArray.push({width:200, height:180, title:"Panel Two", xLoc:120, yLoc:60})
panelArray.push({width:200, height:180, title:"Panel Three", xLoc:220, yLoc:100})
for (var b:int = 0 b < panelArray.length b++) {
///////////////////////////////////////////////////////////////////////
//Create new Panel from Array
genPanel[b] = new PanelSpawn(panelArray[b].width, panelArray[b].height, panelArray[b].title)
genPanel[b].x = panelArray[b].xLoc
genPanel[b].y = panelArray[b].yLoc
addChild(genPanel[b])
///////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////
//Add Panel Event Listeners
genPanel[b].addEventListener(MouseEvent.MOUSE_DOWN, startPanelDrag)
genPanel[b].addEventListener(MouseEvent.MOUSE_UP, stopPanelDrag)
stage.addEventListener(MouseEvent.MOUSE_UP, stopPanelDrag)
///////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////
//Add Event Handlers for Panels
function startPanelDrag(e:MouseEvent):void {
for (var g:int = 0 g < panelArray.length g++) {
switch (e.currentTarget) {
case genPanel[g] :
genPanel[g].startDrag()
genPanel[g].alpha = .5
setChildIndex(genPanel[g], numChildren - 1)
break
}
}
}
function stopPanelDrag(e:MouseEvent):void {
for (var g:int = 0 g < panelArray.length g++) {
switch (e.currentTarget) {
case genPanel[g] :
genPanel[g].alpha = 1
genPanel[g].stopDrag()
break
case stage :
genPanel[g].alpha = 1
genPanel[g].stopDrag()
break
}
}
}
///////////////////////////////////////////////////////////////////////
}
}
}
} The Panel creation class is below:
package com.riareviver{
//FLASH CLASS IMPORT
import flash.display.MovieClip
import flash.events.*
import flash.text.TextField
//CUSTOM CLASS IMPORT
import com.riareviver.TxtFormat
public class PanelSpawn extends MovieClip {
//PUBLIC VARS
public var panelContainer:MovieClip
public var panelHeader:MovieClip
public var panelBody:MovieClip
//PRIVATE VARS
private var pLineStyleWidth:Number
private var pLineStyleColor:uint
private var pHeaderFillColor:uint
private var pFillColor:uint
private var pPanelWidth:Number
private var pHeaderXloc:Number
private var pHeaderYloc:Number
private var pHeaderWidth:Number
private var pHeaderHeight:Number
private var pBodyHeight:Number
private var headerText:TextField
private var txtFormat:TxtFormat = new TxtFormat()
public function PanelSpawn(panelWidth:Number, bodyHeight:Number, panelTitle:String) {
pPanelWidth = panelWidth
pBodyHeight = bodyHeight
pLineStyleWidth = .5
pLineStyleColor = 0x666666
pHeaderFillColor = pLineStyleColor
pFillColor = 0xFFFFFF
pHeaderXloc = 0
pHeaderYloc = 0
pHeaderWidth = pPanelWidth
pHeaderHeight = 20
//CONTAINER
panelContainer = new MovieClip()
panelContainer.x = 0
panelContainer.y = 0
addChild(panelContainer)
//HEADER
panelHeader = new MovieClip()
panelHeader.graphics.lineStyle(pLineStyleWidth, pLineStyleColor)
panelHeader.graphics.beginFill(pHeaderFillColor)
panelHeader.graphics.drawRect(pHeaderXloc, pHeaderYloc, pPanelWidth, pHeaderHeight)
panelHeader.graphics.endFill()
panelContainer.addChild(panelHeader)
headerText = new TextField()
headerText.x = 5
headerText.y = 1
headerText.width = pPanelWidth - 20
headerText.text = panelTitle
headerText.setTextFormat(txtFormat.displayFormat) //TxtFormat class reference
headerText.selectable = false
panelHeader.addChild(headerText)
//BODY
panelBody = new MovieClip()
panelBody.graphics.lineStyle(pLineStyleWidth, pLineStyleColor)
panelBody.graphics.beginFill(pFillColor)
panelBody.graphics.drawRect(pHeaderXloc , pHeaderYloc + pHeaderHeight, pPanelWidth, pBodyHeight)
panelBody.graphics.endFill()
panelContainer.addChild(panelBody)
}
}
} Related Articles:
Unbelievable new features in Flash CS4 @gotoAndLearn()
Check out the new unbelievable features of Flash CS4, highlighted on gotoAndLearn() by Lee Brimelow.
Flash CS4 Feature tour
SlideRocket now open for public Beta
The public can now check out SlideRocket…Sign up for a public beta account here.
A great new, well at least a “new” product…FeatureCreep.
I work with a great team of designers and developers, but one thing exists in this internal facing team as does with any other external facing team I have been on…feature creep. Our team is very Adobe oriented (not saying it is a bad thing), especially one of my coworkers…and I am convinced that he is secretly working on a new product with Adobe. I threw together a quick mock-up of the new logo for his product pitch to Adobe. Also coming soon, Feature Creep’s open source framework, Scope Creep. Both will be a WTFWYT (What the F*** Were you Thinking) based product.
By popular demand…get your FeatureCreep Apparel here.
AS3: Homegrown particles
First off, I will say that without Matthew Tretter’s garbage collection classes this demo would not be possible…While generating this many “particles” on ENTER_FRAME, the Flash Player can not keep up (or wouldn’t in my case), with the 3 tweens on X, Y, and alpha.
After saying that…here is a demo that I came up with tonight playing around in Flash and practicing some rapid development prototyping. It is a “particle” generator (that’s what I am calling it) using the display class, randomly positioning X and Y, as well as tweening the alpha channel.
Go ahead, click and drag below…you know you want to.
import flash.display.MovieClipimport fl.transitions.Tween import fl.transitions.easing.* import fl.transitions.TweenEvent import fl.transitions.* import fl.motion.easing.* //Matthew Tretter's Garbage collection class import com.exanimo.transitions.GCSafeTween //VARIABLES var circBubble:MovieClip var XLocMove:Number = 10 var YLocMove:Number = 10 var circRadius:Number = Math.random()*10 var bubbleTween:Tween var bubbleColor:uint = 0x000000 var bubbleArray:Array = new Array() //Event Listeners stage.addEventListener(MouseEvent.MOUSE_DOWN, checkMouseDown) stage.addEventListener(MouseEvent.MOUSE_UP, checkMouseUp) //Check Mouse Actions function checkMouseDown(e:MouseEvent):void { stage.addEventListener(Event.ENTER_FRAME,tweenBubble) } function checkMouseUp(e:MouseEvent):void { stage.removeEventListener(Event.ENTER_FRAME,tweenBubble) } //Method to kick off the particles, gets called on every frame at 30fps. function tweenBubble(e:Event):void { circBubble = new MovieClip() addChild(circBubble) circBubble.graphics.beginFill(bubbleColor) circBubble.graphics.drawCircle(mouseX,mouseY, circRadius) circBubble.graphics.endFill() //Matthew Tretter's garbage collection class calls the tweens new GCSafeTween(circBubble, "y", Elastic.easeOut, 0, XLocMove, 2, true) new GCSafeTween(circBubble, "x", Elastic.easeOut, 0, YLocMove, 2, true) new GCSafeTween(circBubble, 'alpha', None.easeNone, 1, 0, 1, true) //Randominze the XLOC - both negative and positive coordinate results if (XLocMove > -1) { XLocMove = (Math.random()*100) * -1 } else if (XLocMove < -1) { XLocMove = (Math.random()*100) + -1 } //Randominze the YLOC - both negative and positive coordinate results if (YLocMove > -1) { YLocMove = (Math.random()*100) * -1 } else if (YLocMove < -1) { YLocMove = (Math.random()*100) + -1 } //Randomize the radius of the generated bubbles circRadius = Math.random()*10 //Randomly add to the bubble Color, I am partial to blue... bubbleColor += 000022 }
Related Articles:
AS3: Alternate row colors on dynamic movieclips
Below is an example of how to dynamically change the row color of generated movieclips. I find this helpfu when making grid based layouts, buttons, etc. You can have an unlimited amount of row colors by adding to the two if/then statements. Also, you can make this class re-usable by simply adding variables in the public function, passing them into the constructor method from your main fla movieclip instantiation. I try to keep all variables outside the main constructor, or at least in a single area, to help maintain the code and keep it cleaner.
Download the source project here
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 | package com.riareviver{
//Flash Class imports
import flash.display.MovieClip |
Related Articles:
I am going to Adobe MAX 08
For the first time since MAX 2004 in New Orleans, I get to go this year in San Francisco. I have been to several, including back in the day when it was DEVCON, twice in Orlando. I am very excited and will be blogging about what I see. This year should be the best ever.
AS3: Floating Tool Tip using currentTarget
Without a lot of explanation on the topic, the following package creates 4 squares dynamically, then uses event listeners to point to global methods that checks the currentTarget. Based on mouse over or mouse out a method is called to show the tool tip (created on the fly) and changes its X and Y based on your mouse location. Basically, it is a floating tooltip demo, showing you how helpful currentTarget is.
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 128 129 130 131 132 133 134 135 136 137 138 139 140 | package com.riareviver{
//Flash Class Imports
import flash.display.MovieClip |
Related Articles:
AS3: Using currentTarget to listen for your buttons
A lot of times when I am working on a project that has a lot of buttons, I like to simplify my event listeners into two methods, watching the currentTarget to see where to go. This is extremely helpful when you have to have a mouse down effect that needs to keep looping, say on a zoom. So, when the user holds the mouse down, I add an ENTER_FRAME event that keeps the event in a loop. By using currentTarget and a switch statement, you can keep your listeners set up nice and clean, also helps the next guy figure out what you are trying to accomplish…
1 2 3 4 5 6 | btnOne.addEventListener(MouseEvent.MOUSE_DOWN,checkMouseDown) |
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 | function checkMouseDown(e:MouseEvent):void {
switch (e.currentTarget) {
case btnOne :
stage.addEventListener(Event.ENTER_FRAME,myMethod) |
Related Articles:
AS3: Learn how to create a re-usable class
AS3: Learn how to create a re-usable class
Download an entire Flash project using this example here.
One thing that I found hard, being a designer turn developer turn pseudo programmer, was understanding how packages, classes, and overall re-usable code is handled. Once it clicked with me then I was off and running, but every example that I found was so complex or a small part of a larger project. What I am presenting below is a simple walk through of how to create a very simple package, and use it passing arguments.
You will need 3 files, newBox.fla, newBox.as, and setNewBox.as. Feel free to use any name for this, but it will be easier to follow along if you name them as I have. To start off, set your document class in the newBox.fla file. I have named my document class newBox.as. That is all you need to do in the .fla, no “frame coding” going on here…
Our constructor function, or the function that gets called in when you assign a document class…is then created as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | package com.connatserdev{
//FLASH CLASS IMPORTS
import flash.display.MovieClip |
Next, we can start creating our re-usable classes, in this instance a class to create a simple box. You will notice in the setNewBox method, we are setting several variables. These values get passed as arguments from the document class, newBox.as. This is what helps make a class re-usable, meaning I can create as many children that I want in the document class by simple creating a new instance and pass these values.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | package com. connatserdev{
//FLASH CLASS IMPORTS
import flash.display.MovieClip |
Now all we need to do to use the class is add some actionscript to the constructor function in newBox.as, as follows:
1 2 3 4 5 | var boxOne:setNewBox = new setNewBox(20,100,100,20,0xCCCCCC,.5,0x000000, 0) |
Finally, here are our final .as files:
newBox.as
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | package com.connatserdev{
//FLASH CLASS IMPORTS
import flash.display.MovieClip |
setNexBox.as
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | package com.connatserdev{
//FLASH CLASS IMPORTS
import flash.display.MovieClip |
Related Articles:
