switch(case)

One of my first blog posts, catches me ranting about how I’m going to show you how to do everything in my Portfolio…

Thats right all my dirty little secrets; including a mix of both very strong OOP,  and a bunch of sweet little workarounds(hacks), for getting things done. Don’t judge! I’m actually trying to show that you can do things in Actionscript in more than one way. And sometimes the bad way, can work better. (there are a few things I’m keeping stashed,  mainly what happens in the FLA’s, you shouldn’t need em though, if you do…)

Enter the first installment.

If you travel over to my portfolio you’ll notice the home page now contains an extra button for “source” when clicked you go here: http://juanbonfante.com/SourceView/srcview/index.html (you can also right click anywhere on the flash movie, and choose “Source”).

That’s where the magic happens! If you’ve ever published a Flex project, you’ll recognize this is the “Poject -> Export release build” source viewer. For the most part it is built on the fly by Flex. Of course because it’s Flex there are some issues with the original code…

• Target: Get Flex Builder to build non-Flex project.

I used FDT to write this whole thing, the steps are probably going to be similar, if you use a different IDE, or if you just use Flex Builder.

Step 1: Create a copy of your project within your workspace.

Copy of Project within workspace

Step 2: Remove Flash Nature from project (if using FDT)

Step 3: Switch over to Flex Perspective, and Add Flex Project Nature, to the folder.

Copy of Project with Flex Nature

You can save yourself step 4, by unchecking the “Automatically declare stage instance” box. The reason for this is FDT and FlexBuilder will actually throw errors if you don’t  properly declare an instance, at the top of the class. While this box is checked, Flash will add the instances for you, but you’ll get a compile-time error, if you leave the manual declaration in the class.  To properly showcase this i left a few of the fla’s with this box checked.

AS3 Settings

Step 4: Declare the instances that are throwing errors in the compiler. Since this will prevent the project from compiling.

Error Console

Luckily in this example there are only 3 unique errors, in 2 different .as files.

So we look up the source file and add the variable it’s looking for.

Added Missing Declaration

Step 5: Repeat this process for any other remaining variables.

Step 6: Once you’ve finished cleaning up your code, the error console should be free of errors. (!!!Warnings are OK!!!!).

Step 7: By now Flex has already created the main.mxml, so we’ll just publish that. You can add something to the code if you’d like. This way you can put a message, or instructions as I have. Head on over to the Project -> Export Release Build…

Step 8:

a) Check ON, “Enable view source”

b) if there’s files you don’t want exported it, now is your chance, otherwise it will include everything including fla’s, and any other type of file it can find.

c) Hit finish, let it do its thing for a few minutes.

d) Once its done head on over to the folder that you chose to dump it in.

c) Look for “srcview” folder

d) Run index.html

(in this case its viewSource/srcview/index.thml)

Step 9: Go out. You’re done.

http://juanbonfante.com/SourceView/srcview/index.html

Reality is all you’re doing is copying your project, sticking an mxml file into it,
then making sure flex has access to all of the same libraries your  code uses. Then compiling a pretty much empty mxml file.

Just finished adding my recent posts to my portfolio. Actually you could be reading this on my portfolio site right now….

Well not like it hasn’t been done before, but this time, i did it with Gaia. In the site.xml you have to add an asset

then in AS3:

var theXML : XML = IXml(Gaia.api.getPage("index").assets.blogRoll).xml;
			parseTheXML(theXML);

Not too shabby, then you dump everything into a TextArea and skin it appropriately. Unfortunately there are two very much needed work arounds I had to find in order to make the TextArea fit my taste. Actually they should both be implemented directly into the class. One was the sheer inability to work with StyleSheets whiles trying to use custom fonts within the textArea.

http://www.sharedknowhow.com/2008/07/fixed-flash-textarea-css-incompatibility/

Then the fact that in css if you declare the font family they have to be the name of the Font as it’s embedded, not as you set it in the export properties. It’s extremely frustrating but this function helps you figure out what that name should be:

import flash.text.Font;
var allFonts:Array = Font.enumerateFonts(true);
allFonts.sortOn("fontName", Array.CASEINSENSITIVE);
var embeddedFonts:Array = Font.enumerateFonts(false);
embeddedFonts.sortOn("fontName", Array.CASEINSENSITIVE);
for(var i:int=0;i++)
{
trace(embeddedFonts.fontName);
 
}

Then your css should read:

.desc
{
		 font-size:11px;
		 font-family:"(fontName here)";
		 color:#FFFFFF;
}

Then of course this always helps with cs3 components and skinning them:
http://www.gskinner.com/blog/archives/2007/05/variable_scroll.html

juanbonfante.com

Once i had my schema for tagging my data it was easy sailing but all the descriptions got a little bit tedious. I’m not a copywriter so i may of had a little bit of help; still it does take quite alot not to just resort to a project i worked on simply by the acronyms involved (i.e. AS3, PV3d,PureMVC, Gaia, RPC,OOP…etc);

Anyhow since I’m still living, my portfolio will always be a work in progress. There are a few things I’m still working on, but they are all just for kicks. One will be connecting my FlickR image library, that is once I actually get my FlickR image library, either that or I’m just gonna feed straight from facebook. Still working out the kinks. I love mashups and API’s, they are all great for RAD. For now my portfolio is  more of a definite show of my core strengths. I want to show people what I have done with MY work, and not just how much I can piggy back off of all the open API’s out there. Now don’t get me wrong I’m all for the use of open source, I use ALOT of it in my own work, parts of my portfolio would not be possible if it wasn’t for open source!

Let’s see open source frameworks I used in building portfolio:

1. Papervision 3D 2.0
2. Gaia Framework for Flash
3. Flint Particles
4. Tweener
5. Coverflow from http://johndyer.name
6. Navigation Mod for Gaia
7. …and probably some other core libraries

I like to mold things. Thanks to the community for posting, I myself try to give back as much as I can. Well i hope you enjoy what you see, and that any of this you may find useful at some point. The amount of customization i’ve done is getting really FAR OUT, but I’m gonna post the secrets of the different parts of my site bit by bit. No use in showing you a bunch of cool stuff if I’m not gonna teach you how to do it yourself.

Getting to know the framework I really enjoy the 100% by 100% site layouts, but found that aligning something to

//example to align to the right of the stage
var i:DisplayObject = new DisplayObject();
i.x = stage.stageWidth - i.width;

Gives some very screwed up results. Instead you have use functions part of the Gaia.api package. So the previous example would be written as follows
var targ:DisplayObject = new DisaplayObject();
targ.x = stage.stageWidth + Gaia.api.getWidth() /2 - targ.width;