Accessing the Stage From an External Movie Clip

Lots of things have changed in the migration from AS2 to AS3. One of which is the stage and how it is accessed. First, you need to understand that there is only one stage. Therefore, in the example I am going to give the external movie clip doesn’t have its own stage. The stage is a Display Object Container and houses all other display objects including the main timeline.

Having access to the stage and its properties is a very useful thing. I find it helps me be a little more dynamic in my coding and not be restricted to hard coded variables. Quite often I find myself centering both vertically and horizontally with respect to the stage. Being able to access properties such as stageHeight and stageWidth allow me some flexibility were I to ever change the size of the stage.

An Example

When I’m loading large Flash apps I usually start with a “shim” swf, which has the preloader only. This reduces the time of the very first initial load. That shim then preloads and loads the main site, or whatever it is. Other people may preload differently, but this is what I’m accustomed to. Here’s a visual:

Example 1

The Problem

Simply put…It’s not straight forward how you access the properties of the “Shim” stage from the “Main App” once you’ve loaded it in. If you’ve run into the problem you know what I’m talking about and are probably really tired of trying to figure out why the stage is null. Many people will tell you that this is a bug in Flash, while other people just curse. In all reality, you just need a little forethought on the part of the developer and things turn out fine.

I’ve seen an example from the all mighty Senocular suggesting that you could create a “TopLevel” class and then extend your subsequent classes off that one. But, as he mentions, this is not the best solution if you happen to be working in a group and files are being passed around. It is very likely that the others might not have your TopLevel class at which point things go to crap.

The Solution

In my example I simply place the following code in the constructor function of my externally loaded swf:

if (stage == null) {

	addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

} else {

	onAddedToStage();

}

The above code obviously calls a function, onAddedToStage(), which can kick things off for you and the rest of your app. Within this function you should place anything that might need to reference stage properties and the like.

I’d be curious as to what others like doing. This is my preferred method as it seems quick and straight forward.

Posted in Flash/ActionScript, Web Development | Tagged , , | Leave a comment

AS3 – stageHeight 100px Bug

Not sure why I all of a sudden stumbled across this little doozy. I’ve been using Flash for a helluva long time and never hit this one until today. This particular bug can occur when referencing and/or tracing the stageHeight property while having the Bandwidth Profiler enabled. When the bug is triggered you’ll notice that the stage height is 100px less than it should be.

In my research I learned that this bug has been around since Flash 8, and seems to be more prevalent on Macs. I wish I could provide more info on what exactly triggers it. This is the first time I’ve come across it in six years of Flashing.

The Solution

The fix is easy. Just disable the Bandwidth Profiler to eliminate the issue.

Posted in Flash/ActionScript | Tagged , , , | 2 Comments

How to Create a Gradient Background Fill With ActionScript

“But, I can do that without code.” This is true. Creating a gradient is a somewhat mundane task that is found in almost every graphics program on the market. Flash is no exception. So why would you want to create it with code? The initial and easy answer is file size. Accomplishing tasks through code is inherently lighter. But, given the negligible difference in file size here, I would use code for the flexibility it offers.

Do you own or have you ever played a PS3? If you have, you’ve probably noticed that the background of the menu screen is a gradient. However, the gradient is unique in that it changes its hues depending on the time of day. It’s a subtle aesthetic change that shows a bit of forethought on the designers part. I can guarantee you there aren’t little critters inside the PS3 with paintbrushes that change the gradient colors at the top of the hour. It’s done through code.

The Code

There’s nothing too revolutionary here. In fact, all we’re doing here is drawing out a rectangle the size of the stage and then applying the gradient to it. Note: I’ll just be using the dimensions 800 x 600 to show how this can be used for any size shape. It this was truly meant for a stage background you’d probably want to use stage.width and stage.height.

ActionScript 3.0:

package {

	import flash.display.*;
	import flash.geom.*;

	public class DocClass extends Sprite {

		private var _gradientBG:Shape;
		private var _matrix:Matrix;
		private var _gradient:String;
		private var _colors:Array;
		private var _alphas:Array;
		private var _ratios:Array;

		public function DocClass() {

			//Instantiate

			_gradientBG = new Shape();

			//Gradient Properties

			_matrix = new Matrix();
			_gradient = GradientType.LINEAR;
			_colors = [0xFF0000, 0x000000];
			_alphas = [0, 1];
			_ratios = [0, 255];

			//Gradient Matrix

			_matrix.createGradientBox(800, 600, deg2rad(90), 0, 0);

			//Gradient Fills

			_gradientBG.graphics.beginGradientFill(_gradient, _colors, _alphas, _ratios, _matrix);

			//The shapes of the gradients

			_gradientBG.graphics.drawRoundRect(0, 0, 800, 600, 0);

			//Add to display list

			addChild(_gradientBG);

		}

		private function deg2rad(deg:Number):Number {

			return deg * (Math.PI/180);

		}
	}
}

There are a couple things to note here. I don’t ever write on the timeline, so you’ll notice that this package is called DocClass. That is simply the name I normally give to the, yup you guessed it, Document Class.

You’ll also notice that I use rounded rectangles in my code. You can, of course, just use drawRect(), but I like the option of adding rounded corners down the road.

I think the code is well written enough and commented out so that you shouldn’t have any problems getting this to work. Feel free to ask any questions in the comments if you get stuck. You can see how easy it would be to implement the PS3 example because you’d just have to change the _colors variable in relation to the time of day. Pretty sweet.

Posted in Flash/AS, Flash/ActionScript, Tutorials | Tagged , , , | Leave a comment

Adobe Still Trying to Bring Flash to the iPhone

Rumors began swirling around the internet last night and this morning about Adobe pressuring Apple to allow Flash to come to the iPhone. It sounds as if Adobe is moving forward and seriously working towards a iPhone Flash or Flash Lite app. Apple is notoriously staying locked down and continues its claims that Flash is a resource hog and would perform poorly on the iPhone.

I’d really just appreciate the option to have it on my phone, and be able to turn it off (like javascript) when I don’t want it. It seems like if I want to live with shorter battery life that is my decision. Put it on the phone and give us the option. Sheesh. I think Apple is peeved that Flash video murders Quicktime when it comes to web video.

From Ars Technica:

At the Flash on the Beach 08 conference in Brighton, UK, Betlem took another public shot at sinking Adobe’s claws further into Apple’s mobile OS. “My team is working on Flash on the iPhone,” Betlem reminded attendees. He also restated that “it’s a closed platform.” Thanks, Captain Obvious.

Betlem told those listening that Apple makes all the decisions, but apparently didn’t say much about whether any performance progress had been made since Steve Jobs slammed both Flash and Flash Lite at a shareholder’s meeting in March. Jobs says Flash runs too slowly on the iPhone, and Flash Lite is simply “not capable of being used with the web.”

Posted in Industry News, Misc. | Tagged , | 1 Comment

Image Alignment Fix for WordPress

Many of you are probably like me and start with your own styles sheet when your designing your WordPress themes. There are, however, some necessary styles that you need to include in order for WordPress to render your site correctly. One area of these style pertains to image alignment in your posts.

If you’ve found this post via a Google search you’re probably wondering why aligning right or aligning center isn’t quite working in your posts. Well, look no further. A quick look in the styles sheet of the default theme provides us with our answer.

WordPress uses the following styles in order to align images. Just copy and paste this code into your styles sheet and modify to your liking. That’s it!

CSS:

img.centered, .aligncenter, div.aligncenter {
	padding:5px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding:5px;
	display: inline;
	}

img.alignleft {
	padding:5px;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
Posted in Web Design, Web Development, WordPress | Tagged , | Leave a comment

Creating Apple’s Chrome Logo

If you’ve been to my site before you’ve probably seen me take this approach to various desktop and iPhone wallpapers. The look was originally inspired by Apple’s “chrome” version of their logo. This technique seems to work best with simple shapes without a lot of parts and/or divisions. I’m not intending for this to be an exact replica, but merely a method I’ve found works well for anything you want to apply it to.

Create/Locate your subject

I’m going to be using Apple’s logo here. You can still follow along with this tutorial even if you are choosing to use a different subject. If I don’t have a particular logo or graphic that I want to use I always start at Best Brands of the World. They’ve been around a while and host thousands of popular logos in vector format. Head over there to get your Apple logo if you don’t have it lying around.

Vector Apple Logo

If you’re someone who likes to follow along verbatim, I’m working with a document size of 400×400 px at 72px/inch.

Fill your background with black (#000000) and then either place or copy and paste the newly acquired Apple logo onto a new layer in your document. Rename that layer “Apple.”

Set background to black

Layer Styles

Quite a few embellishments are achieved through layer styles. Select the Apple layer and click the “fx” at the bottom of your layers pallete to open up the layer styles dialogue box. We will first apply a Gradient Overlay. Check the Gradient Overlay box and apply the following settings:

Apply Gradient Overlay

Next, check the Stroke box to apply a stroke. We’re actually going to be using a gradient stroke in order to achieve a slightly bevelled metalic look around the edges. Use the settings below. The gradient I used was “Silver.” You may have to append this to the stock set if you don’t see it available.

Stroke settings

At this point you should be looking at something like the image below. I’ve added a slight radial gradient to the background to give some depth as opposed to the static black. You can do this if you choose.

Image after adding layer styles

Adding the Gloss

With the base and the edges layed down, it’s time to add the bling. There are a million ways to do this, but this is my method. First, I like to duplicate my layer for safe keeping and hide the original. Do that by clicking Layer > Duplicate Layer… or by dragging the layer down to “New Layer.”

After duplicating your layer you can hide the original. Next, right click on the fx of the duplicated layers and select Create layers. It’s near the bottom. This essentially breaks apart all the layer styles into their own layers. We’re doing this because we want to separate the stroke, which is essentially the edge, from everything else. We won’t apply the gloss to the edge because it would handle the light differently due to its bevel.

Now that you’ve created your layers you’ll want to merge both the Apple copy layer and its respective gradient fill. Do this by shift-selecting the layers and then pressing command+e (Mac) or ctrl+e (PC) on your keyboard. Your layers palette should now look like this:

Current status of layers palette

Now our edge/stroke is separated from the fill and we can apply the gloss. Add a new layer just above the Apple copy’s Gradient FIll layer. Then right click the layer and select Create Clipping Mask. For those of you who don’t use clipping masks…get used to them. It’s a much simpler and quicker way of restricting a layer’s viewable area with respect to its parent layer.

After that, with layer 1 selected, we’ll drag out an elliptical marquee for our division in the gloss. With that selection active, click your gradient fill button in the tool bar. I’ve chosen white as my foreground color with a dark grey blue as my background color. These will the two colors of my gradient.

Adding the gloss

Once you’ve done that successfully, change the blend mode of that layer to Multiply. You can then adjust the opacity of that layer to your choosing. Don’t make it too dark because we’ve got another highlight coming that will be almost black.

Achieving the black highlight is simple. Duplicate Layer 1, and with the duplicated layer selected hit command+t (Mac) ctrl+t (PC) and you’ll enter the free transform mode. I like to rotate the layer clockwise slightly along with moving it up along the y axis a few pixels. This gives me a funny venn diagram, most of which I will remove.

With Layer 1 copy selected, command+click (Mac) ctrl+click (Pc) Layer 1′s layer icon. This will highlight the bounds of the layer with a marquee. Now, simply hit delete. The result should be a thin sliver getting wider as you go from right to left. You’ll probably want to increase the the opacity so that you can achieve the darker highlight.

Final product

Go grab your beverage of choice because you’re done. Many of you might be snickering and saying, “That isn’t what the Apple logo looks like.” I know that. I could take some additonal time to apply extra highlights to fully replicate the Apple logo, but like I said earlier, this is inspired by the original logo. This is also less labor intensive and can be rolled out on various different graphics, if you so choose.

Posted in Photoshop, Photoshop, Tutorials | Tagged , , | 1 Comment

Adobe Creative Suite 4 Announced

Adobe’s Creative Suite 4 was announced today. It seems like they are making a pretty big push for the ability to design across media. In my opinion this probably means that for the first time since the Macromedia takeover all the apps are fundamentally Adobe. For example, CS3 brought new GUI’s to Photoshop, Illustrator, InDesign while leaving programs like Dreamweaver to carryover the Macromedia designed interfaces. As for a launch date…you’ll need to register here to be notified.

I also just finished watching the live announcement broadcast and was somewhat underwhelmed. There are definitely some cool new things. I think the programs will run a bit faster and work flow should improve. But, if you were looking for a lot of eye candy then you might be disappointing. They have been taking some flak saying that this is just a “dot” release and shouldn’t be considered a new product. I half agree.

I would say if your on the interactive side of things (Flash, Dreamweaver) then this may be worth the cost of upgrading. I don’t know that the print folks will have as much to cheer about. Just my two cents.

Below are the top new/enhanced features as outlined by Adobe for the products I tend to use the most:

Photoshop CS4

  • 3D painting and compositing
  • New Adjustments panel – although it doesn’t look the same think Lightroom
  • Masks panel – gives a bit more control. Nothing too fancy
  • Auto-blending of images – essentially photo collaging with a bit of help
  • Auto-alignment of layers – A feature I use like once a year anyways
  • Extended depth of field – WICKED! So if you ever bracket a shot in your photography you’ll be able to use this tool to combine the bracketed shots and adjust the exposure, color, and focal point, after the fact.
  • More powerful printing options
  • Integration with Adobe Software
  • Improved Adobe Photoshop Lightroom workflow – couldn’t you have just made this assumption based on the previous “Feature?”
  • 3D object and property editing – probably cool if you’re in to 3D stuff. But again, you’re still going to have to model in Maya or Max.
  • Fluid canvas rotation – ummm…
  • Smoother panning and zooming – includes a new “Pixel Grid”
  • Content-Aware Scaling – a dynamic feature when used by the pros, an annoying feature when the hacks get a hold of it.
  • Enhanced motion graphics editing
  • Better raw image processing
  • Industry-leading color correction
  • File display options – tabbed document display (interesting)
  • Extensibility – Not totally sure what this is. A new feature to replace “actions” perhaps

Illustrator CS4

  • Multiple Artboards – a pretty smart new features. Allows you individual artboards within a document and control over each. I can see this being very cool for identity documents.
  • Transparency in gradients – finally!
  • Blob brush tool – a paint brush that creates a single shape.
  • Gradients exposed – live control over gradients
  • Integration and delivery – same as all the other apps
  • In-panel appearance editing – thank the design gods
  • Refined graphic styles – cool if you don’t mind using stock stuff
  • Clipping masks demystified – I didn’t know they were mysterious
  • Separations Preview – I’m not a print guy, but this will probably be nice to you old schoolers out there

Flash CS4

  • 3D Transformation – an obvious cool new feature. Seems like a port from After Effects.
  • Procedural modeling with Deco and Spray Brush – like using a cool brush in PS but with symbols
  • Metadata (XMP) Support – add meta data to swfs
  • Authoring for Adobe Air – do it from Flash now
  • XFL Support – If you’re a Flash hack you can now go from InDesign or After Effects to Flash and remain file integrity.
  • Inverse kinematics with the Bones tool – cool. Reminds me of the puppet tool in After Effects. Jib Jab should have fun with this.
  • Motion Editor – Again, much more like After Effects. I think I’ll welcome this.
  • Motion presets – self explanatory
  • H.264 Support – nice.

Dreamweaver CS4

I don’t really use Dreamweaver anymore. I mostly code in TextMate. But, there are some promissing new features in Dreamweaver that might pull me back. Namley a Firebug like “Live View” that works within Dreamweaver.

  • Code hinting for AJAX and JavaScript frameworks
  • Related Files and Code Navigator – freakin awesome! Essentially shows you all file includes in tabs. CSS, JavaScript, headers, etc.
  • Adobe InContext Editing – seems like this will cannibalize Contribute. Gives users the ability to edit their own sites.
  • CSS best practices – help for hacks
  • New user interface – looks like the others
  • HTML data sets – for those scared of databases
  • Adobe Photoshop Smart Objects – what it sounds like. Link to files.
  • Subversion integration – better “check in” and “check out”
  • Adobe Air authoring support – do it from Dreamweaver.
Posted in Flash/ActionScript, Industry News, Photoshop, Web Design, Web Development | 5 Comments

Scroll Bar Class Release Friday

Hey all. I just wanted to let you know that I’ll be releasing my custom scroll bar class friday. Development will wrap up today or tomorrow. Then I want to put a little work into the branding along with an interactive app showing how it works.

The scroll bar will be heavily customizable and not require the use or modification of any image assets. Straight code baby! This should make it much lighter than Flash’s built in scroll bar component.

I hope that this will become an asset to a lot of you and therefore spread its tentacles accross the internet tubes. I might be slow posting other stuff until I’m done with this. I really want to finish it and get it up. Thanks for being paitent.

Posted in Flash/ActionScript, Web Development | Tagged , , | 1 Comment

How to Start Building a Class Library in Flash

Hopefully if you’re reading this you’re at the stage where you’ve begun to use and understand OOP (Object Oriented Programming) as it relates to Flash. OOP sort of existed in Actionscript 2, but it’s really off to the the races in Actionscript 3. This may seem like a basic step for some of you, but to others it could end a horribly frustrating Google search fest. This is generally how libraries are setup and you can use this structure and advice at will in your workflow.

The Basics

What are classes, and why should you use them? Personally, I like to think of classes like Legos. You’ve got a bunch of them lying around. Each Lego block has it’s own characteristics such as color, size, shape, and function. As the builder, you pick and choose which Legos you think will best work together to complete your project.

Classes and OOP are essentially the same thing. At some point, you’ll have hundreds of classes that all do certain things. At this point you can pull from that library and use classes that help expidite your project. I won’t blabber on too much about OOP in this tutorial, but spend some time researching it if you’re not familiar with the concept.

Classpaths

This tutorial is really about setting up a library. So the first thing to understand is how Flash searches for external classes. Be default, Flash looks in the same directory as the .fla file that you’re working on. This is dandy for a one-off project, but we’re building a library here dag gummit.

What we’re looking to do is organize all our classes in a central location and group them in relation to their function. This way they are all saved in one location on your computer giving you the ability to pull from them at will.

You can setup a top-level directory anywhere on your computer. Put it on your desktop, put it in a dedicated Flash folder, put it wherever. There is a common directory naming convention that I would suggest you adopt and it looks like the following.

A common class structure

The above structure would often live inside a top-level directory. You could simply call it “Flash” if you like. You’ll notice the structure is simply a reversal of a domain name. Rather than matthaliski.com, it’s com.matthaliski. This allows you to orgainize your libraries by contributor if you so choose. At the third level you start to have directories that group the classes into useful areas. You can see the way I’ve broken mine down, but feel free to group them in whatever way makes sense to you.

So that takes care of the structure, but as of right now. Flash has no idea where to begin looking for this library. Let’s fix that.

Telling Flash Where Your Library Is

We need to tell Flash where to look for our files. To do that you need to go into the preferences of Flash. Click Flash > Preferences... if you’re on a Mac, or Edit > Preferences if you’re on a PC. (Hopefully my PC memories serve me correctly, if its not there go buy a Mac) Once you’re in preferences you’ll see something like the following:

Click on "Actionscript 3.0 Settings..."

You’ll want to click on “Actionscript 3.0 Settings..” It is here that you’re going to want to add your new classpath. I’ve set mine up like this:

Setting up classpath

You don’t have to follow my example exactly. In fact, some people would prefer to stop at the classes folder if they were using my example from above. This allows them the ability to go into an .org or .net if thats there thing. Once you’re done with entering your classpath, click OK.

Classpaths in the Files Themselves

The last step is to make sure your .as files in our library are setup correctly. An example in my library is the following:

package matthaliski.gui {
   //imports

   public class CustomScrollBar extends Sprite {
      //Variables

      public function CustomScrollBar() {
         //Constructor function
      }
   }
}

You can see that after the package declaration I’m listing out the path to the class. E.g. matthaliski.gui. This tells Flash where to go. At this point, you’re all gravy. Hopefully this was enough to give you an idea of how to start setting up your own library. Not everyone does it the same, but I’ve found this to be a pretty common practice. And maybe this way the OOP police won’t hound you as much.

Posted in Flash/AS, Flash/ActionScript, Tutorials | Tagged , , | 4 Comments

SEC iPhone Chrome/Leather Wallpaper

I’d planned on taking a break from making these iPhone wallpapers, but I got a nice email from a reader explaining that they were getting their Dad an iPhone for his birthday and how awesome it would be to have an Alabama wallpaper preloaded on the phone. There wasn’t any sense in me just putting up a roll tide wallpaper without the rest of the SEC. So everyone who uses these has Jason to thank.

Some of these don’t look great in my opinion. Florida’s is kinda wonky. Too much detail in the logo for this style. It makes you appreciate the simplicty of other logos. Anywhoo….

If you use them just say thanks!

Alabama iPhone Wallpaper

Alabama iPhone Wallpaper

Arkansas iPhone Wallpaper

Arkansas iPhone Wallpaper

Auburn iPhone Wallpaper

Auburn iPhone Wallpaper

Florida iPhone Wallpaper

Florida iPhone Wallpaper

Georgia iPhone Wallpaper

Georgia iPhone Wallpaper

Kentucky iPhone Wallpaper

Kentucky iPhone Wallpaper

LSU iPhone Wallpaper

LSU iPhone Wallpaper

Mississippi iPhone Wallpaper

Mississippi iPhone Wallpaper

Mississippi State iPhone Wallpaper

Mississippi State iPhone Wallpaper

South Carolina iPhone Wallpaper

South Carolina iPhone Wallpaper

I don’t know if anyone has a better logo out there to use. This is by far the worst logo I have ever had to deal with. Yuck. Sorry cocks.

Tennessee iPhone Wallpaper

Tennesse iPhone Wallpaper

Vanderbilt iPhone Wallpaper

Vanderbilt iPhone Wallpaper

Posted in Freebs, Wallpaper | Tagged , , , | 12 Comments