No luck.

Now frustrated, I started Googling. I came across several forum posts, one of which lead me to a solution. Several people commented on this Embed code disappears (for some users) in Wordpress 2.7 string, having the same, or very similar issue as me. After reading that and several other confirming posts, I found out that WPMU does not allow any additional tags such as <embed>, <iframe>, <form>, etc. WPMU automatically strips posts of these and rightfully so. When you have a large site with multiple users there can be added security issues, especially if a site will allow anyone to sign up. WPMU strips the code as a security measure.

Okay, now for the solution. Because my client will only have very trustworthy administrators, I am utilizing the Unfiltered MU plugin to allow the additional code.

Hopefully I just saved some people a few hours by posting this! Good luck.

Before the scrolling, I had an XML document with categories and projects. My code loaded the XML, parsed it and duplicated my menu item (nav button) using the duplicateMovieClip() method. I had it nested in a for loop and so it did all of the naming and depth placement at once. When you clicked on a menu item, a second function was called to populate the second list, passing through the category number and using the same duplicateMovieClip() method.

After looking at the way kirupa.com set up the scrollbar file I realized I needed to put both of my menu lists into container movie clips. That way I would be able to get the _y and _height properties of the grouped nav buttons. I’ve been working a lot with AS 3.0 and needed a refresher in AS 2 on how to nest duplicated items inside a movie clip. I Googled and found this article on actionscript.org reminding me you must use the attachMovie() method.

First I put both nav buttons into their own movie clips and call them: listOneHolder and listTwoHolder. Then I changed both duplicateMovieClip() methods to attachMovie(). Now the code looked like this:

function loadXML(loaded)
{
if (loaded)
{
xml = this.firstChild;
totalSections = xml.childNodes.length;
for (i = 0; i < totalSections; i++)
{
//duplicateMovieClip(myNav, ‘myNav’+i, i + 10); //OLD duplicate nav buttons
_root.listOneHolder.attachMovie(‘myNav’, ‘myNav’ + i, i + 10); //new attach movies

setProperty(_root.listOneHolder['myNav'+i], _x, navX); //set the x property
setProperty(_root.listOneHolder['myNav'+i], _y, navY); //set the y property

_root.listOneHolder['myNav'+i].navTxt.htmlText = xml.childNodes[i].attributes.name; // set the text value
}
}
}

note: in addition to having my two menu item movie clips on the stage (myNav and btn), i made sure to right click on them in the library, select “Linkage…” and clicked “Export for ActionScript”.

after that i was able to start tackling the actual scrollbar issue. i figured out that i could use the code from kirupa.com (as seen below) and modify it to accommodate for my two lists.

// KIRUPA //
function scrolling () {
var scrollHeight:Number = theScrollbar.scrollTrack._height;
var contentHeight:Number = contentMain._height;
var scrollFaceHeight:Number = theScrollbar.scrollFace._height;
var maskHeight:Number = maskedView._height;
var initPosition:Number = theScrollbar.scrollFace._y=theScrollbar.scrollTrack._y;
var initContentPos:Number = contentMain._y;
var finalContentPos:Number = maskHeight-contentHeight+initContentPos;
var left:Number = theScrollbar.scrollTrack._x;
var top:Number = theScrollbar.scrollTrack._y;
var right:Number = theScrollbar.scrollTrack._x;
var bottom:Number = theScrollbar.scrollTrack._height-scrollFaceHeight+theScrollbar.scrollTrack._y;
var dy:Number = 0;
var speed:Number = 10;
var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);

theScrollbar.scrollFace.onPress = function() {
var currPos:Number = this._y;
startDrag(this, false, left, top, right, bottom);
this.onMouseMove = function() {
dy = Math.abs(initPosition-this._y);
contentMain._y = Math.round(dy*-1*moveVal+initContentPos);
};
};
theScrollbar.scrollFace.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
};
theScrollbar.btnUp.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y+speed
if (theScrollbar.scrollFace._y<=top) {
theScrollbar.scrollFace._y = top;
} else {
theScrollbar.scrollFace._y -= speed/moveVal;
}
contentMain._y += speed;
} else {
theScrollbar.scrollFace._y = top;
contentMain._y = maskedView._y;
delete this.onEnterFrame;
}
};
};
theScrollbar.btnUp.onDragOut = function() {
delete this.onEnterFrame;
};
theScrollbar.btnUp.onRelease = function() {
delete this.onEnterFrame;
};
theScrollbar.btnDown.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y-speed>finalContentPos) {
if (theScrollbar.scrollFace._y>=bottom) {
theScrollbar.scrollFace._y = bottom;
} else {
theScrollbar.scrollFace._y += speed/moveVal;
}
contentMain._y -= speed;
} else {
theScrollbar.scrollFace._y = bottom;
contentMain._y = finalContentPos;
delete this.onEnterFrame;
}
};
};
theScrollbar.btnDown.onRelease = function() {
delete this.onEnterFrame;
};
theScrollbar.btnDown.onDragOut = function() {
delete this.onEnterFrame;
};

if (contentHeight
theScrollbar.scrollFace._visible = false;
theScrollbar.btnUp.enabled = false;
theScrollbar.btnDown.enabled = false;
} else {
theScrollbar.scrollFace._visible = true;
theScrollbar.btnUp.enabled = true;
theScrollbar.btnDown.enabled = true;
}
};

In order to accommodate for my two lists I needed to modify the function to have a few parameters passed through … those were the scrollbar instance (i put two on my stage, one for each list), the mask instance (again, two on each stage, one for each list), and the list. So my new function looked like this:

function goScrolling (_mc, mask_mc, listHolder_mc)
{
var scrollHeight:Number = _mc.scrollTrack._height;
var contentHeight:Number = listHolder_mc._height;
var scrollFaceHeight:Number = _mc.scrollFace._height;
var maskHeight:Number = mask_mc._height;
var initPosition:Number = _mc.scrollFace._y = _mc.scrollTrack._y;
var initContentPos:Number = listHolder_mc._y;
var finalContentPos:Number = maskHeight – contentHeight + initContentPos;
var left:Number = _mc.scrollTrack._x;
var top:Number = _mc.scrollTrack._y;
var right:Number = _mc.scrollTrack._x;
var bottom:Number = _mc.scrollTrack._height – scrollFaceHeight + _mc.scrollTrack._y;
var dy:Number = 0;
var speed:Number = 10;
var moveVal:Number = (contentHeight – maskHeight) / (scrollHeight-scrollFaceHeight);

_mc.scrollFace.onPress = function()
{
var currPos:Number = this._y;
startDrag(this, false, left, top, right, bottom);
this.onMouseMove = function()
{
dy = Math.abs(initPosition – this._y);
listHolder_mc._y = Math.round(((dy * -1) * moveVal) + initContentPos);
}
}
_mc.scrollFace.onMouseUp = function()
{
stopDrag();
delete this.onMouseMove;
}
_mc.btnUp.onPress = function()
{
this.onEnterFrame = function()
{
if (listHolder_mc._y + speed < mask_mc._y)
{
if (_mc.scrollFace._y <= top)
{
_mc.scrollFace._y = top;
}
else
{
_mc.scrollFace._y -= speed / moveVal;
}
listHolder_mc._y += speed;
}
else
{
_mc.scrollFace._y = top;
listHolder_mc._y = mask_mc._y;
delete this.onEnterFrame;
}
}
}
_mc.btnUp.onDragOut = function()
{
delete this.onEnterFrame;
}
_mc.btnUp.onRelease = function()
{
delete this.onEnterFrame;
}
_mc.btnDown.onPress = function()
{
this.onEnterFrame = function()
{
if ((listHolder_mc._y – speed) > finalContentPos)
{
if (_mc.scrollFace._y >= bottom)
{
_mc.scrollFace._y = bottom;
}
else
{
_mc.scrollFace._y += speed / moveVal;
}
listHolder_mc._y -= speed;
}
else
{
_mc.scrollFace._y = bottom;
listHolder_mc._y = finalContentPos;
delete this.onEnterFrame;
}
}
}
_mc.btnDown.onRelease = function()
{
delete this.onEnterFrame;
}
_mc.btnDown.onDragOut = function()
{
delete this.onEnterFrame;
}

if (contentHeight < maskHeight)
{
_mc._visible = false;
}
else
{
_mc._visible = true;
}
}

Once I had that modified, I needed to figure out when to call the function. First I called it right away. The first menu populates and at the end of my XML loader function I call the scrolling function to check to see if either list needs a scrollbar. Then, once one of the categories is selected (from list one), I needed to call the scrolling function again, checking to see if list two needs a scrollbar.

So, the first time I call it, inside my XML loader function, I am passing through the scrollbar for list one, the mask for list one and list one mc:

goScrolling(_root.theScrollbar1, _root.maskedView1, _root.listOneHolder);

The second time I call the function, inside my XML loader function, inside the onRelease function for my main menu (list one) nav i pass through the second list, mask and scrollbar:

_root.listOneHolder['myNav'+i].onRelease = function ()
{
goScrolling(_root.theScrollbar2, _root.maskedView2, _root.listTwoHolder);
}

I then had two functioning scrollbars! However, I have run into two problems … one of which I have solved, the other won’t take long but I have not yet done. I clicked on one of the main menu items. List two was long enough to have a scrollbar and I then scrolled to the bottom and selected one of the projects (or secondary menu items). When I went to another category, I realized list two did not reset itself. The _y property was still at the same value, as if I had used the scrollbar. SO. I added to the end of the scrolling function a short bit of logic:

// the number 55 represents the starting _y value
if (initContentPos < 55)
{
listHolder_mc._y = 55;
}

Here’s a link to the project as it is today. The second issue I found has to do with the mathematical calculation of height and/or how far down the scroll bar needs to go. The scroll current goes too far down, or rather, sets the _y property too low. So now I am off to fix that. I’ll post in the comments the solution when I have it.

Good luck!

After the design was finalized, I began to code. I quickly realized there could be a better way of coding, using a more modular approach and actually utilizing the principles of OOP (Object Oriented Programming … if you’re not techy, please negate all geeky words and phrases). These principles basically make it possible to reuse code. More work up front = less work in the long term. One of my goals this year is to become more efficient and knowledgeable in the realm of ActionScript and more specifically, OOP. My hope is that the new knowledge will improve my ability to teach and create, design and implement RIA (Rich Internet Applications).

Anyway, before this project I scheduled a one-on-one four hour tutoring session with Dana Payne, an ActionScript/Flex/Flash expert and Adobe Certified Instructor. Wednesday of this week I completed this tutoring session and felt like I had a handle on the principles we talked about. Dana was great and I intend to hire her again in a few months for a more intensive eight hour session. I highly recommend her to anyone looking to learn these things. So, yesterday when I sat down to implement what I had learned the day before in my current project, I struggled. I was stressed from other projects, on mind overload, and frustrated that this project was taking longer than I had anticipated, hence why the hourly quote was a shot in the foot. I do not charge for my learning experiences, however, I also did not anticipate spending four times the time on the project. It’s not about money … more about personal / professional proficiency (or lack there of).

At this moment of ultimate frustration, the realization hit me. It has been over a year and a half that I have been in this position of learning. Of course, I am not saying I have not learned anything in the last year and a half. Or that I have not been frustrated. Rather, it is that I decided to take my skills to the next level and in doing so, lacked the self preparation and patience to hit the exponential learning curve head on. As I sit here now, humbled and a bit more at ease, I recognize this things and am ready to be more patient with myself and my ability to learn.

One year later, I am striving to take on larger projects, bigger clients and growing out of my single person shop. It is time to rename, or rather, name my business. The biggest obstical is how to name it with out having to rebrand. I have a few ideas in mind and checked with the State and the interweb to make sure they are available. Once I land on something catchy and awesome, I’ll let you know! In the meantime, if you have any suggestions, post a comment below.

While reading, watching and listening to this blog post, something not-so-profound dawned on me. I was struck with annoyance while attempting to “navigate” David Carson’s website. While he is a fantastic designer, I wish his website communicated that through ease of use—taking my focus from “How the hell do I get to what I want to see?” to “Wow.”

One of my biggest design pet peeves has to do with fashion verses function. Designers notoriously design their websites focusing on only one end of the equation: design. No user considerations. Hidden links tweak my mouse from cursor to pointer without understanding, disorganization halts intuitive navigation and all of this, in the name of design, forces me to click the little red X in less than 30 seconds because: you are no longer interesting to me.

* I must make one small disclaimer: There is a time and place for unusable websites; when the lack of usability coincides with the messaging of the site. *

Onward. There is a fine balance between usability and aesthetics. In print, the variables reside between paper and ink. In web, we are not so fortunate. Many more factors come into play and design takes on a distinct and crucial role. More than communicating a message, the design of a site must communicate direction, intention, and be a catalyst for information absorption. It is almost as if the designer has more opportunities to drive home the messaging through web, which is probably why I am so very in love with web. When all of these facets collide with savvy technology, unique design solutions and logical organization, great websites are born.

So while design does not always equal web design, web design always equals design. Moreover, web design, presents more occassions where design can be utilized.

While traffic to our venue (Swan’s Trail Chapel) was a bit slow at times, we still managed to have a great time. The other vendors there were fun to be around and had interesting things to offer. Something Blue was fabulous with her chic dresses and clever display. And my other favorite was Brian with Special Occassions Catering. His food was AMAZING. And let’s be honest, it’s really all about the food.

Below are some photos Michelle Bartholomew took (Picky Penguin Photography):

Sometimes it takes a bit of your own medicine to give you the boost you need to follow through. For the past year I have had my ear to the blogging tracks, I’ve known that posting at least once a day is essential. It bumps your search results, keeps you sharp and on task and gives others enough to maintain interest. However, an abandoned blog simply wastes away in cyberspace, serving no purpose and aiding no cause.

Recently I decided to update my site. In addition to some smaller cosmetic changes and content updates I put together a new *and improved* blog section. The design I had before for this was not functional and not “bloggy” enough for my liking. From now on, I intend to jump on the band wagon, once again, and this time hold on tight!

1. Open a new Flash file (AS 3.0).

2. First we’ll make our four buttons. Draw a rectangle on the stage. I set my x and y coordinates to be at 25.

figure 1

3. Turn the shape into a movie clip. Double click to select the shape, press F8 (or right click and Convert to Symbol), name it “navbg_mc”, and hit OK.

figure 2

4. Now we’ll create three more instances of this movie clip object. To align them we can select all, hit Command (⌘) + K to open our Align panel (or Window > Align), then click “Align left edge” (figure 4: circled in red). You may need to reposition the x coordinate of the rectangles on the stage to 25. Next, click “Distribute vertical center” (figure 4: circled in blue). This will distribute all of the items evenly between the first (top) and last (bottom) item.

figure 3

figure 4

5. Title the layer “nav bkgnd” for navigation background.
6. Add a new layer and title it “nav txt” for the navigation text and lock the nav bkgnd layer.

figure 5

7. Now add text for each of the navigational buttons. Be sure your text boxes are on whole pixels. This will be important when we publish our movie. The text may appear blurry if it sits on a partial pixel (i.e. if x was equal to 25.5).

figure 6

8. Unlock the nav bkgnd layer. We are now going to turn these into individual movie clips, but first, give each rectangle (instance of navbg_mc) an instance name of “navbg”.

figure 7

9. Now that we have done that we can select each rectangle and the text corresponding and create our movie clips. Select the home text and the rectangle underneath. Convert it into a Movie Clip Symbol (F8 or right click, Convert to Symbol). Name it nav_home_mc. Repeat this for each item, naming them appropriately (nav_about_mc, nav_services_mc, nav_contact_mc).

figure 8

10. We can now delete the layer we are no longer using and rename the one with all of our buttons: nav buttons.
11. Out on frame 25, add a frame (F5 or right click > Insert Frame).

figure 9

12. For each nav item, give it an instance name. Start with the home nav button and name it: home_btn
Do the same for every button (about_btn, services_btn, contact_btn).

figure 10

13. Lock the nav buttons layer then create a new layer and title it: home content.
14. Add two more layers. Title the top one “actions” and the middle one “labels”. These will be used for our ActionScript and our timeline markers for each section.

figure 11

15. On frames 8, 17 and 25 insert blank keyframes on the actions and labels layers.

figure 12

16. Lock the actions layer.
17. We now need to label our sections. First, on frame 1, we will name this section “home”. Click on the first frame on the labels layer. Then, down in the properties panel you’ll find a place to define the Frame Label.

figure 13

18. Give it a label of “home”. Then go to frame 8 and label it “about”; frame 17 label “services”; frame 25 label “contact”.

figure 14

19. So because we will need Flash to stop at each of these sections, we need to add a stop action (stop();) for each. Press Control + F9 or go to Window > Actions to pull up your ActionScript panel. In the actions layer on each of the blank keyframes type into your ActionScript Panel the stop action.

figure 15

20. Now we need some elements for each section. Lock all the layers and create a new layer in between layers nav buttons and labels and title it: home content.
21. On the home content layer, add a title and body content.

figure 16

22. Select both text items, create a new movie clip symbol (F8 or right click, Convert to Symbol). Name the movie clip: home_content
23. Insert a blank keyframe on the 2nd frame.

figure 17

24. In your library panel, find the movie clip you just created and duplicate the symbol, renaming it to: about_content
25. Double click on the about_content movie clip. Change the title to ABOUT.
26. Go back to the main timeline by clicking on Scene 1.

figure 18

27. We now need to create another layer and name it: about content
28. Insert a blank keyframe on the same frame as our “about” label (frame 8).
29. Drag the new about_content movie clip onto the stage.
30. Insert a blank keyframe on frame 9.

figure 19

31. Repeat steps 24 through 30 for both of the remaining sections.

figure 20

32. Now for the good stuff! Click on the first frame on our actions layer. We now need to tell Flash what we want to happen when the user clicks on one of our buttons.
33. Since we are going to use our movie clips as buttons, we need to tell each of these instances to be buttons. (change each)

figure 21

34. In the Actions panel, type:

import flash.display.MovieClip;

This will allow us to give actions to the movie clips on our stage. You really don’t need to know anything more than it is necessary to have at the top of your code.

35. Now to create the function that will navigate us to the proper sections when we click one of the buttons. Type this into your Actions panel (on that same frame, frame 1 of the main timeline).

function clickHome (event:MouseEvent):void {
trace("home button clicked");
};

36. Now that we have a function that will tell us when the home button is clicked, we need to link it to the actual click event. In order to do that we need to add above our function a line of code. This line of code will add an event listener to the home button and call our clickHome() function when it is clicked.

home_btn.addEventListener(MouseEvent.CLICK, clickHome);

function clickHome (event:MouseEvent):void {
trace("home button clicked");
};

37. Let’s test the movie and click the home button.

figure 22

38. It worked!

39. Okay so now we need to be able to do this for every one of the buttons. So we need to create a function for each section and add the call on the CLICK event:

about_btn.addEventListener(MouseEvent.CLICK, clickAbout);

function clickAbout (event:MouseEvent):void {
trace("about button clicked");
};

figure 23

40. Test your movie again. Notice now you get results every time you click one of the buttons?

41. From here we need to tell it what to do when we click on a button. Currently it just gives us a trace(); to let us know it is working. But what we need is to tell it to go to the specific sections, which is where gotoAndStop(); comes in! In between the curly brackets (“{” and “}”) in our clickAbout() function type:

gotoAndStop('about');

The function should now look like this:

function clickAbout (event:MouseEvent):void {
trace("about button clicked");
gotoAndStop('about');
};

If you remember, we labeled our sections on the timeline using the Frame Label in our Properties panel. These are now coming in handy. For each of our functions we need to tell it to go to the specific sections.

figure 24

42. Test your movie. You have just completed creating a simple Flash website!

Download finished files

Addendum:
Change your button instance names to match that of the labels for each section: take off the “_btn”. The code below will use the instance names of each button in order to find the corresponding frame label and navigate there.

stop();

import flash.display.MovieClip;

home.addEventListener(MouseEvent.CLICK, gotoMySection);
about.addEventListener(MouseEvent.CLICK, gotoMySection);
services.addEventListener(MouseEvent.CLICK, gotoMySection);
contact.addEventListener(MouseEvent.CLICK, gotoMySection);

// this function takes user to specified section or frame label
function gotoMySection (event:MouseEvent):void {

gotoAndStop(event.target.name);

trace(event.target.name + " was clicked");

};

Download these files w/ updated code