Fort Fiction Blog

Scource – Full flash mousewheel enabled scrollbar for AS3 (Mac compatible)

FF Flash Geek — Tue, 13 Oct 2009 10:54:58 +0000

Here’s a little flash scrollbar that will be working in most major browsers and is compatible with both Windows and Mac osx. It’s configured to be resizable and reused, as always. I have tested it on various major browsers, but obviously not all of them, so if there’s any bugs out there kindly leave us a comment and I will try to get a fix on that.

The Mac compatible mousewheel scroll is courtesy of SWFwheel from Spark Project. For full documentation on the protocol (including a list of browser that will be working) click here.

Alas, the scrollbar itself can be seen by clicking here (shadowbox preview).

I am please to say that this scrollbar does all the basics of a html scrollbar, including clickable and dragable functions. The only apparent set back is that it wouldn’t react to a cursor that is not in the flash area, this could be somewhat annoying when the user is dragging the scroll face and rolled his mouse outside the stage. Once again, this is one of many flash flaws. Depending on the usage, it might not be significant, even so, this is why we don’t generally use a full screen flash scrollbar; We recommend using javascript to resize the HTML scrollbar. A great source could be found in Duncan Reid’s website.

We needed a fullscreen flash scrollbar for a very specific reason, so I might as well share what we did with you.

Sourcecode Scroller.as: (download at the end of post)

package com.fortfiction {

import flash.display.Sprite;
import flash.events.*;
import flash.geom.*;
import flash.display.MovieClip;
import flash.display.Stage;

public class Scroller extends Sprite {

private static var scroller:MovieClip = new MovieClip();
private static var stageHeight:Number;
private static var previousHeight:Number = 0;
private static var bgCount:uint = 0;
private static var scrollFace:iScrollface = new iScrollface();
public static var containerHeight:Number = 0;
private static var savedHeight:Number = 0;
private static var top:Number;
private static var bottom:Number;
private static var dragBot:Number;
private static var range:Number;
private static var sRect:Rectangle = new Rectangle(0,0,0,1);
private static var sPos:Number;
private static var ratio:Number;
private static var allowScroll:Boolean;
private static var stage:Stage;

public function Scroller(s:Stage) {
stage = s
addChild(scroller);
addChild(scrollFace);
scrollFace.addEventListener(MouseEvent.MOUSE_DOWN, dragScroll);
s.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
}
public static function adjustHeightBg (num:Number) {
//duplicating scrollbar background
stageHeight = num;
if(previousHeight < stageHeight) {
var scrollBg:iScrollbg = new iScrollbg();
scroller.addChild(scrollBg);
scrollBg.y = bgCount*scrollBg.height;
bgCount++;
previousHeight += scrollBg.height;
adjustHeightBg(num);
}
}
public static function init() {
savedHeight = containerHeight;
if(savedHeight < stageHeight) {
scrollFace.alpha = 0;
allowScroll = false;
scroller.removeEventListener(MouseEvent.MOUSE_DOWN, clickScroll);
} else {
scrollFace.alpha = 1;
allowScroll = true;
scroller.addEventListener(MouseEvent.MOUSE_DOWN, clickScroll);
}
top = 0;
dragBot = (0 + stageHeight) - scrollFace.height;
bottom = stageHeight - (scrollFace.height);
range = bottom - top;
// CONTAINER MOVEMENT, change to refer to anything you want to scroll
Main.container.y = 0;
// CONTAINER MOVEMENT END
scrollFace.y = 0;
sRect.height = dragBot;
}
private static function dragScroll(e:MouseEvent):void {
scrollFace.startDrag(false, sRect);
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
}
public static function mouseWheelHandler(event:MouseEvent):void {
if(allowScroll == true) {
if (event.delta < 0) {
if (scrollFace.y < dragBot) {
scrollFace.y-=(event.delta*2);
if (scrollFace.y > dragBot) {
scrollFace.y = dragBot;
}
startScroll();
}
} else {
if (scrollFace.y > top) {
scrollFace.y-=(event.delta*2);
if (scrollFace.y < top) {
scrollFace.y = top;
}
startScroll();
}
}
}
}
private static function clickScroll(event:MouseEvent):void {
scrollFace.y = scroller.mouseY - scrollFace.height;
if(scrollFace.y < 0) {
scrollFace.y = 0;
}
startScroll();
}
private static function stopScroll(event:MouseEvent):void {
scrollFace.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
}
private static function moveScroll(event:MouseEvent):void {
startScroll();
}
private static function startScroll():void {
ratio = (savedHeight - range)/range;
sPos = (scrollFace.y * ratio);
// CONTAINER MOVEMENT, change to refer to anything you want to scroll
Main.container.y = -sPos;
// CONTAINER MOVEMENT END
}
}
}

Download here.

New blog design is up

FF Flash Geek — Tue, 29 Sep 2009 03:44:55 +0000

Announcing the new blog design, we don’t actually have a codename for this production because it took us a reasonably short amount of time to finalize it. Once again, feel free to mess around with everything we have here, it might take us some time to get some proper content up, but we are looking at a couple of really interesting post for flash deep linking.

We are currently developing a fully flash website for an energy supply company. That website that we are developing would be able to react (almost) as good as a HTML website. Which means it supports deep linking, scrollbars, mousewheel scrolling for different OSes, and SEO! I know, you probably heard about Gaia framework that has the capabilities of doing that (with the exception of seo?), but what we really plan to do with it is giving you snippet (in-depth) information of how to do it. Just in case you don’t want to browse through thousands of sourcecodes to get what you need.

Just so you know what’s coming.

edit: By the way, I haven’t have time to hack the design on PCs display, so sorry for any mess I’ll have you slog through. And don’t tell anyone.

Papervision triangle plane field with blur

FF Flash Geek — Fri, 18 Sep 2009 11:25:09 +0000

Here is a sample to trying to get blur filter to work on papervision. The good thing is, it worked, that bad thing is, like all flash filters, it could drastically slow down your flash production if it is used on a mass scale. You can download the source at the very end of the post, and it’s quite short and self explainary. May your creative juice splatter all over:

(click to view sample via shadowbox)

Scripts:

package {

import org.papervision3d.cameras.*;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.objects.special.*;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.core.geom.renderables.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.core.geom.*;
import org.papervision3d.objects.*;
import org.papervision3d.view.layer.BitmapEffectLayer;
import org.papervision3d.view.layer.ViewportLayer;
import org.papervision3d.view.layer.util.ViewportLayerSortMode;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.*;

public class TriangleField extends Sprite {

private var viewport:Viewport3D;
private var scene:Scene3D = new Scene3D();
private var camera:FreeCamera3D = new FreeCamera3D();
private var renderer:BasicRenderEngine;
private var _triNum:uint = 0;
private const material1:ColorMaterial = new ColorMaterial(0xccce00);
private const material2:ColorMaterial = new ColorMaterial(0xabad00);
private const material3:ColorMaterial = new ColorMaterial(0x848500);
private const material4:ColorMaterial = new ColorMaterial(0x0BE5FF);
private const material5:ColorMaterial = new ColorMaterial(0x08a8bb);
private var matCount:uint = 80;

public function TriangleField() {
viewport = new Viewport3D(750, 550, false, false);
addChild(viewport);
renderer = new BasicRenderEngine();
camera.z = 0;
camera.zoom = 4;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
public function onEnterFrame(e:Event):void {
renderer.renderScene(scene, camera, viewport);
camera.yaw(-2);
//camera.pitch((240)*-0.002);
//camera.x += speed*Math.sin(camera.rotationY*Math.PI/180);
}
public function init3D():void {
material1.doubleSided = true;
material2.doubleSided = true;
material3.doubleSided = true;
material4.doubleSided = true;
material5.doubleSided = true;
var sphere:Sphere = new Sphere(null, 20, 8, 10);
var sphereFaces:Array = sphere.geometry.faces;
for each (var sphereTriangle:Triangle3D in sphereFaces) {
if(_triNum <= 100) {
var sphereTriangleVertices:Array = sphereTriangle.vertices;
var triangleVertices:Array = new Array();
for each (var sphereTriangleVertex3D:Vertex3D in sphereTriangleVertices) {
var vertex3D:Vertex3D = new Vertex3D(sphereTriangleVertex3D.x, sphereTriangleVertex3D.y, sphereTriangleVertex3D.z);
triangleVertices.push(vertex3D);
}
var triangle3D:Triangle3D = new Triangle3D(null, triangleVertices, material1, sphereTriangle.uv);
var triangleFaces:Array = [triangle3D];
//SIMPLE SETTINGS FOR MULTIPLE TRIANGLE COLORS
_triNum += 1;
if (_triNum <= 40) {
var triangleMesh3D:TriangleMesh3D = new TriangleMesh3D(material1, triangleVertices, triangleFaces, null);
} else if (_triNum <= 50) {
var triangleMesh3D:TriangleMesh3D = new TriangleMesh3D(material2, triangleVertices, triangleFaces, null);
} else if (_triNum <= 60) {
var triangleMesh3D:TriangleMesh3D = new TriangleMesh3D(material3, triangleVertices, triangleFaces, null);
} else if (_triNum <= 70) {
var triangleMesh3D:TriangleMesh3D = new TriangleMesh3D(material4, triangleVertices, triangleFaces, null);
} else {
var triangleMesh3D:TriangleMesh3D = new TriangleMesh3D(material5, triangleVertices, triangleFaces, null);
}
//SETTING END
triangle3D.instance = triangleMesh3D;
//TO RANDOMIZE THE POSITION OF EACH TRIANGLE
triangleMesh3D.x = Math.random() * 350 - 175;
triangleMesh3D.y = Math.random() * 350 - 175;
triangleMesh3D.z = Math.random() * 350 - 175;
//CUSTOM SETTING TO BLUR OUT TRIANGLE IF THEY APPEARED TOO FAR
if(triangleMesh3D.z > 100 || triangleMesh3D.z < -100) {
triangleMesh3D.createViewportLayer(viewport, false).filters = [new BlurFilter(8, 8, 4)];
}
triangleMesh3D.rotationY = Math.random() * 360 - (360 / 2);
triangleMesh3D.rotationX = Math.random() * 360 - (360 / 2);
scene.addChild(triangleMesh3D);
}
}
}
}
}

Download Link.

Here’s another way to play with it, it’s running too slow but I’m sure someday we’ll find some uses for it:

How to create instance name in AS3

FF Flash Geek — Thu, 17 Sep 2009 13:06:55 +0000

This is already very well known, but if you’ve been on AS3 for a while you’ll notice that they have eliminate the instance name usage for AS3 (this, I agree is more practical for AS3 OOP’s structure). We can however, insert an instance name manually on stage, but what about the rest of us that are adding movieclips on stage programmatically?

Here’s what you might be attempting already:

for (var i:uint=0; i < someNumber; i++) {
var mc:MovieClip = new MovieClip();
mc.name = i;
addChild(mc);
}

And when you try to declare it (1.gotoAndPlay(2)), you can’t. I have yet to find a usage for the .name parameter (seriously, other than scene class, but in OOP you hardly use scene), but so far, it’s confirmed that it’s declaring it in such a way is not working by any means. Here’s what we could do to turn it around – by create an Array or Object to store your movieclip.

private var mcArr:Array = [];

for (var i:uint=0; i < someNumber; i++) {
var mc:MovieClip = new MovieClip();
mcArr.push(mc);
addChild(mc);
}

We can now run the gotoAndPlay function by using mcArr[0].gotoAndPlay(2). This method also goes with any form of display, for example if it’s a textfield that is in the array, you could change it’s text by using mcArr[0].text = myString. What about trying to insert a mouse event for the movieclips? Surely we won’t use the no brainer way to declare mcArr[0].addEventListener(…) onto each and everyone of the movieclip.

Either that, or we can store another variable inside the movieclip so that we can read it from the listener later.

private var mcArr:Array = [];

for (var i:uint = 0; i < someNumber; i++) {
var mc:MovieClip = new MovieClip();
var num:uint = i
mc.num = i;
mc.addEventListener(MouseEvent.MOUSE_DOWN, down)
mcArr.push(mc);
addChild(mc);
}

In order to put it in good use, your mouse event function could look like this:

private function down(e:MouseEvent) {
trace(e.currentTarget.num);
mcArr[e.currentTarget.num].gotoAndPlay(2);
}

What the above script and function does is creating numerous movieclips, and each of them will gotoAndPlay(2) itself when clicked. This is just a tip of an iceberg, but it could turn into a pretty fancy xml gallery. To those professionals, I know this is a little bit ameteurish, but I’m sure someone or something out there will find this useful. And they could thank me.

AS3 Masked dynamic textfield animation

FF Flash Geek — Thu, 17 Sep 2009 10:25:21 +0000

This is a class developed internally to animate a dynamic textfield full of content, with masking. The best one I’ve seen animated so far is seen on the world renowned RED INTERACTIVE AGENCY’s website. Here is our replica of that class using caurina tween (click to view shadowbox sample):

You may realize that the code is longer that what it’s needed to create something like this, but. It’s best that we could include these functionality to that class:
1) reusable, this is because flash as3 collects garbage data. If you create a new one over and over again, flash will eventually crash due to too much memory usage. Which is the thing that makes this class special, by the way.
2) text changable, flexible text field height, so that you can trace it for other reasons
3) including functions Start() and Reset()
4) able to use your own imported font
5) able to change colour
6) able to set your width
so on so forth.

To call the class, it is required to do something like this:
private static var myText:Readingtext = new Readingtext(font:String, size:uint, color:String, width:uint, speed:Number, words:String);

You can change the font type, font size, font color, width of textfield, speed of animation(seconds) and the text from the parameters respectively. Please bare in mind that you have to import your font into flash in order for this script to use that font, or any script, for that matter. To import your font, click on the top right of your flash’s library, choose “New Font” and add your font. Then you have to do some linkage settings on your fonts for flash to read it, to do this, right click on your font in the library, select “Linkage”, choose “Export for ActionScript”, the put in whatever name for the class; it doesn’t matter. When you need to call your font via scripts, make sure to type the ORIGINAL name of the font instead of the class name. For my sample, I imported “Futura Medium” instead of “FuturaMedium”, which is the class name I’ve given that font. This is a bug in flash’s side, as far as CS3 in concerned.

NOTE: It is essentially required to import font or else people without your particular font in their computer will not see your font properly, they will see a default font of Times New Roman, if I’m not mistaken.

Here’s the script, a download link can be found at the end of the post.

package {

import flash.display.Sprite;
import flash.display.MovieClip;
import flash.text.*;
import caurina.transitions.Tweener;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.Event;
import flash.display.Shape;

public class Readingtext extends Sprite {

//CREATE TEXT FIELD
private var texter:TextField = new TextField();
private var texterFormat:TextFormat = new TextFormat();
//CREATE MASK
private var masker:MovieClip = new MovieClip();
private var clips:Array = [];
//CREATE TIMER
private var repeatcount:uint = 1;
private var delay:uint;
private var myTimer:Timer;
private var mc:uint = 0;
private var time:Number;
//LEADING AND SPACING OF YOUR TEXT FIELD, SIZER IS TO SAVE THE FONT SIZE
private var sizer:uint;
private var leading:uint = 6;
private var letterSpacing:Number = 0.5;
//THIS IS A WILDCARD SETTING FOR TEXT HEIGHT, SINCE EACH FONT HAVE A DIFFERENT HEIGHT
private var wildCardNum:uint = 3;
//LINES NUMBERS
private var lineNum:uint;

public function Readingtext(font:String, size:uint, color:String, w:uint, speed:Number, words:String) {
sizer = size;
texter.width = w;
time = speed;
delay = speed*1000;
myTimer = new Timer(delay, repeatcount);
texter.multiline = true;
texter.selectable = false;
texter.condenseWhite = true;
texter.autoSize = TextFieldAutoSize.LEFT;
texter.wordWrap = true;
texter.text = words;
texter.antiAliasType = "advanced";
texter.embedFonts = true;
texterFormat.color = color;
texterFormat.align = TextFormatAlign.LEFT;
texterFormat.size = size;
//SEE EVENT FOR THE USE OF THIS
texter.addEventListener(Event.SCROLL, onScroll);
//
texterFormat.letterSpacing = letterSpacing;
texterFormat.font = font;
texterFormat.leading = leading;
texter.setTextFormat(texterFormat);
//DYNAMICALLY SETTING UP THE MASK
var num:uint = Math.round(texter.height/(size+wildCardNum));
num = texter.numLines;
lineNum = num;
for (var i:uint = 0; i < num; i++) {
var _masker:Shape = new Shape;
_masker.graphics.beginFill(0x000000);
_masker.graphics.drawRect(0, 0, 100, 32);
_masker.graphics.endFill();
_masker.width = 1;
_masker.height = size+leading+letterSpacing+wildCardNum;
_masker.y = i*(_masker.height);
masker.addChild(_masker);
clips[i] = _masker;
}
//COUNTING HOW MANY TIMES THE TIMER SHOULD MOVE
repeatcount = num;
myTimer.repeatCount = repeatcount;
//
addChild(texter);
addChild(masker);
//DEACTIVATE THIS TO SEE HOW THE MASK WORKS
texter.mask = masker;
myTimer.addEventListener("timer", timedFunction);
}
//BY DEFAULT, SOME BROWSER ALLOW USER TO USE MOUSEWHEEL TO SCROLL THE TEXTFIELD, THIS COULD BE ANNOYING TO SOME, THIS FUNCTION IS TO DEACTIVATE IT
private function onScroll(evt:Event):void {
texter.scrollV = 0;
}
private function timedFunction(e:TimerEvent) {
if(mc == lineNum-1) {
Tweener.addTween(clips[mc], {width:texter.width, time:(time*4), transition:"easeOutSine"});
} else {
Tweener.addTween(clips[mc], {width:texter.width, time:time, transition:"easeOutSine"});
}
mc++;
}
//THIS FUNCTION IS FOR YOU TO CHANGE THE TEXT IN THE TEXT FIELD, ALLOWING YOU TO REUSE THE TEXT FIELD
//THIS IS ADDED SO THAT AS3 WOULDN'T COLLECT GARBAGE DATA, WHICH EVENTUALLY WILL CRASH YOUR BROWSER
public function changeText(wordie:String) {
for (var j:uint = 0; j < clips.length; j++) {
Tweener.removeTweens(clips[j]);
clips[j].width = 1;
}
//NOTE: THIS IS A USEFUL FUNCTION TO REMOVE ALL CHILD IN A MOVIECLIP
var v = masker.numChildren;
while (v--) {
masker.removeChildAt(v);
}
texter.text = wordie;
texter.setTextFormat(texterFormat);
var num:uint = Math.round(texter.height/(sizer+wildCardNum));
num = texter.numLines;
lineNum = num;
for (var i:uint = 0; i < num; i++) {
var _masker:Shape = new Shape;
_masker.graphics.beginFill(0x000000);
_masker.graphics.drawRect(0, 0, 100, 32);
_masker.graphics.endFill();
_masker.width = 1;
_masker.height = sizer+leading+letterSpacing+wildCardNum;
_masker.y = i*(_masker.height);
masker.addChild(_masker);
clips[i] = _masker;
}
repeatcount = num;
myTimer.repeatCount = repeatcount;
Start();
}
//CALL THIS FUNCTION EXTERNALLY TO REMOVE THE TEXTFIELD (TO RENDER IT INVISIBLE)
//YOU MAY MANUALLY CHANGE TO TEXTFIELD X AND Y POSITION TO REMOVE IT, WHICH IS RECOMMENEDED IF YOU'LL EB REUSING IT
public function Reset() {
Tweener.removeAllTweens();
myTimer.stop();
for (var i:uint = 0; i < clips.length; i++) {
clips[i].width = 1;
}
}
//START THE ANIMATION. CAN BE USED OVER AND OVER AGAIN
public function Start() {
Tweener.removeAllTweens();
mc = 0;
myTimer.reset();
myTimer.start();
for (var i:uint = 0; i < clips.length; i++) {
clips[i].width = 1;
}
}
}
}

Download link. By the way, pretty nifty code colorer plugin for wordpress huh? We used this plugin from Dmytro Shteflyuk’s site.

Covering the basics

FF Flash Geek — Thu, 17 Sep 2009 06:47:07 +0000

Hello strangers.

We build this blog in hopes of being a part of the web open source community, to give back what we took, here, at our very own start of a long and perilous journey on becoming an ActionScript developer. That’s about it for the introduction, the old joke would be if you don’t have anything more to say in your blog, get your readers occupied by showing them who you are and what you do. If you like what you see, tell us if you’re considering hiring us. Else, if you want to know how we did what we did, ask him how and we’ll be as naked as possible.

For a starter, we’ll be covering the basics on AS 3.0, bug fixes and tutorials as we go along the way developing our projects. Please leave us a message on your struggle in AS 3.0 that you do not already see here and we will try to get to a solution for you as soon as possible.

If we have one.