inicio mail me! sindicaci;ón

Archive for Flash snippets

SWFAddress url sorting utility

UPDATE:

I don’t know how I missed this, but since v 2.1 SwfAddress has the getPathNames() method which does exactly what my bit of code does… ah well. Anyway I’ll leave it up as it has the basics of string splitting and other stuff…

Thanks to Cam for pointing this out… and while you’re at it check out his blog, he’s a much better coder than myself (but sucks at the guitar ;) )

Just thought I’d post this up as it might be helpful to someone…

Normally if you’re building a site using SwfAddress (and you should, not having any form of deeplinking in your flash site these days is utterly unforgivable) you could just on the swfAddress change do something like

switch(String(e.value).replace("/", "")){

case "news" :

openNews();

break;

case "shows" :

openShows();

break;

}

But what happens if you want to use subpages (/news/news-item), or subsubpages (/news/news-item/photo)… or however many… well, something like this will help you a lot.

var string:String = "/news/news-item";

function sortDeepLink(_deeplink:String):void{

var urlArray:Array = [];

if(_deeplink.charAt(_deeplink.length - 1) == “/”){

urlArray = _deeplink.substring(1, _deeplink.length - 1).split(”/”);

} else {

urlArray = _deeplink.substring(1, _deeplink.length).split(”/”);

}

switch(urlArray.length){

case 0 :

//Home address

trace(”Home”);

break;

case 1 :

//One tier address - ie. /news/

trace(”URL (one tier): ” + urlArray[0]);

break;

case 2 :

//Two tier array - ie. /news/news-item

trace(”URL (two tier): ” + urlArray[0],urlArray[1]);

break;

default :

//Invalid URL

trace(”URL invalid”);

break;

}

}

sortDeepLink(string);

//

You can extend the switch function to handle as many tiers as you need by just adding more cases - you can also add a 404 function in the default case if you want.

I’d love to know if anyone uses this, so post a comment if you do!

AS3 - Clock Clock clone

A few days ago the fantasticly talented Ed Watt (@designed) posted up a link on Twitter to the Clock Clock project by those crazy Swedes Humans since 1982… Anyway, I decided to have a go at recreating it in AS3 just for the hell of it…

Here’s the example, and here’s the source (it’s pretty bad, just thrown together but it works)…

EXAMPLE

- and Illuminated Example

SOURCE

3D page flip!

Trent_Bailey_image_1

Check Out the screencast - Made with the awesome Jing!

How I built it…

Just finished the first draft of a site for photographer Trent Bailey… I essentially got free reign on this for the page transitions - just the basic layout was to be kept the same… so I sat down and tried to figure out something I wanted to try out for a while… a 3d page transition.
For this I had a few things to figure out before I started the project - One of them being what method to use for the transition; A) use f10’s new 3D api, B) use papervision and it’s interactive material method, or C), use flash’s Bitmap data to snap each page then add it to a 3d engine to make the flip then remove from the stage. In the end I choose the last method, because using f10’s 3d api would mean using f10 which I wasdn’t too keen on as it’ll be a while before everyone is using it. And I didn’t use papervision because even adding your displayObject to a plane as an interactiveMoveMaterial doesn’t have complete functionality (for example, you can’t use input text in them). So I went with the snapshot method… Now I needed a 3D engine.
After building a working example in Papervision on which I’d had experience in the past, I decided to look at five3D which was a much lighter engine - after all using papervision just to snap a page, flip it and remove it would be akin to driving a car down your driveway to pick up the papers.
Anyway… I have so much good to say about five3D - it made things an absolute breeze to build the pageFlipper - it’s developer Mathieu Badimon has made a great job of it…
Right, on to how I made it! Now baring in mind I built this as a proof of concept to myself - so it’s not all tidied and put into a class - I built this on… the timeline! sshh, I know….

CODE

//FLIP PAGES

function flipPages(originalMC:MovieClip, destinationMC:MovieClip, axis:String = "X"):void{

if(_pageInTransition == false){
//Note: Make sure you import the five3D classes needed.

_pageInTransition = true;

//init
destinationMC.visible = false;

//Snapshot mc's
//Create bitmapData for both the mc's
var imageOriginalBMD:BitmapData = new BitmapData(720,470, false, 0xFFFFFFFF);
var imageDestinationBMD:BitmapData = new BitmapData(720,470, false, 0xFFFFFFFF);

//Draw mc into BitMaps
imageOriginalBMD.draw(originalMC);
imageDestinationBMD.draw(destinationMC);

//The Flip

// We create a new Scene3D named "scene", center it and add it to the display list.
var scene:Scene3D = new Scene3D();
scene.x = 720 / 2;
scene.y = 470 / 2;
main.pages.addChild(scene);

//Create a Sprite3D holder - to hold our bitmaps
var bitmapHolder:Sprite3D = new Sprite3D();
bitmapHolder.childrenSorted = true;
scene.addChild(bitmapHolder);

//Add out Bitmaps to it
var originalBitmap3D:Bitmap3D = new Bitmap3D(imageOriginalBMD);
originalBitmap3D.x = - 720 / 2;
originalBitmap3D.y = - 470 / 2;
originalBitmap3D.z = 0;

bitmapHolder.addChild(originalBitmap3D);

var destinationBitmap3D:Bitmap3D = new Bitmap3D(imageDestinationBMD);

//bitmapHolder.addChild(destinationBitmap3D);

//Remove Original MC's
originalMC.visible = false;

if(axis == "Y"){

TweenLite.to(bitmapHolder, 0.3, {rotationY:90, alpha:0, onComplete:addDestination});
destinationBitmap3D.rotationY = 180;
destinationBitmap3D.x = 720 / 2;
destinationBitmap3D.y = - 470 / 2;
destinationBitmap3D.z = 0;

} else {

TweenLite.to(bitmapHolder, 0.3, {rotationX:90, alpha:0, onComplete:addDestination});
destinationBitmap3D.rotationX = 180;
destinationBitmap3D.x = - 720 / 2;
destinationBitmap3D.y = 470 / 2;
destinationBitmap3D.z = 0;
}

function addDestination(){
bitmapHolder.removeChild(originalBitmap3D)
bitmapHolder.addChild(destinationBitmap3D);
if(axis == "Y"){
TweenLite.to(bitmapHolder, 0.3, {rotationY:180, alpha:1, onComplete:finishFlip});
} else {
TweenLite.to(bitmapHolder, 0.3, {rotationX:180, alpha:1, onComplete:finishFlip});
}
}

function finishFlip(){
bitmapHolder.removeChild(destinationBitmap3D);

destinationMC.visible = true;

_pageInTransition = false;
}

} else {

trace("Already in transition!");

}

/*//Add to Stage
addChild(imageOriginalBM);
addChild(imageDestinationBM);*/

}

Now you might notice a bit of trickery here… what I had originally programmed was that the two snapshots of the pages would be put back to back, then all you’d need to do would be rotate the Sprite3D in which they both were held… well, I’m not too sure if this is a bug with five3d, or something went wrong with my code (probably the latter)… but everytime you rotated, the backMc, or Destination mc would disappear. So I ended up having the front mc rotate 90, then remove it, and adding the back mc and rotate that from -90 to 0… if anyone has any luck figuring it out, gimme a comment!

Anyway, hope this helps anyone, but I had fun doing it!

figuring out file extensions in AS3

I’m currently in the middle of building quite a large content management system in AS3, and I’ve come to the part of working in a decent file manager - so far it can upload, rename, delete and preview (only images) at this moment, but I need to add other things - a downloader, and a thumbnailer, which I’ve spent the last two days doing, anyway - I was looking into how to improve the preview system I have in place… it would be nice for the system to automatically detect what kind of file I’m looking at and decide what the correct way to preview it would be. To do this I need to have flash look at the extension each file has and take it from there - anyway here a little bit of code that’ll remove the extension…

function extractFileType(file:String):String {
var extensionIndex:Number = file.lastIndexOf(".");
if (extensionIndex == -1) {
//No extension
return "";
} else {
return file.substr(extensionIndex + 1,file.length);
}
}

trace(extractFileType("file.jpeg");

And here’s a sneak peek of the thumbnailer - apologies about the photograph ;) - I’ve there’s enough demand I might clean the code up a bit and release it on here…

And here is a glimpse of the editor and file manager - It’s so beta I haven’t even got round to labeling the buttons!

More on this soon !

Flash Image Loader As2

Here’s just a really basic example of loading images into flash… simple.

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
WIDTH="420" HEIGHT="420" id="myMovieName"> NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">

Here’s the code:
//ImageLoader Function - Liamr.com/blog/?p=86

//Load in TweenLite

import gs.TweenLite;
import gs.TweenFilterLite;
import mx.transitions.easing.*

//Preview Button
preview_btn.onRelease = function(){

loadImage("http://www.liamr.com/labs/source/imageLoader/images/image_1.jpg");

}

preview_resize_btn.onRelease = function(){

loadImage("http://www.liamr.com/labs/source/imageLoader/images/image_2.jpg");

}

//Load function
function loadImage(source:String):Void{

var frameSize:Number = 10;
var frameColor:String = "0x000000";
var frameAlpha:Number = 95;

var mclLoader:MovieClipLoader = new MovieClipLoader ();
var mediaPoplistener:Object = new Object ();

mediaPop.holder._alpha = 0;

mclLoader.addListener (mediaPoplistener);
mclLoader.loadClip(source, mediaPop.holder);

TweenLite.to(mediaPop.bg, 0, {_y:0, _x:0, _alpha:50, _width:Number(Stage.width), _height:Number(Stage.height), ease:Strong.easeOut});
TweenLite.to(mediaPop.frame, 1, {_alpha:50, tint:frameColor, _height:20, _width:80, ease:Strong.easeOut});
TweenLite.to(mediaPop.loader, 0.1, {_alpha:50});
TweenLite.to(mediaPop, 1, {autoAlpha:100});
mediaPoplistener.onLoadProgress = function (target:MovieClip, loadedBytes:Number, totalBytes:Number):Void {
TweenLite.to(mediaPop.loader, 0.1, {_alpha:50});
percentageLoaded = Math.round(loadedBytes/totalBytes * 100);
mediaPop.loader.loadertext_txt.text = "Loading " + Math.floor(percentageLoaded) + "%";

}

mediaPoplistener.onLoadInit = function (target:MovieClip):Void {
mediaW = Math.round(mediaPop.holder._width);
mediaH = Math.round(mediaPop.holder._height);
frameW = mediaW + Number(frameSize*2);
frameH = mediaH + Number(frameSize*2);
TweenLite.to(mediaPop.loader, 1, {_alpha:0, ease:Strong.easeOut});
TweenLite.to(mediaPop.frame, 1, {_x:0, _y:0, _width:Number(frameW), _height:Number(frameH), tint:frameColor, ease:Strong.easeOut});
TweenLite.to(mediaPop.frame, 1, {_alpha:frameAlpha, delay:1, overwrite:false});
mediaPop.holder._x = frameSize;
mediaPop.holder._y = frameSize;
TweenLite.to(mediaPop.holder, 1, {_alpha:100, overwrite:false, delay:2, ease:Strong.easeOut});

}

}

And here is the zip (flash 8 ) …

SOURCE

Flash Security Snippet

Just found this little gem over at flashmatics.co.uk (awesome resource site), so I thought I’d post it up here. It basically checks to see whether the swf is being run from your specified domain - if not it redirects to your website. It’s perfect for stopping the use of unwanted distribution of your flash projects.
var domain:String = "http://www.yourdomain.com" //enter your domain name here

if(_root._url.indexOf(domain) == -1 ){
getURL(domain, "_self");
}

Flash String Replace - As2

Just a small function to replace text in a string, handy for things at times…

//String Replace Class

function stringReplace(block:String, find:String, replace:String):String
{
return block.split(find).join(replace);
}

myString = "I love actionscript";
output = stringReplace(myString, "love", "hate");
trace("NewString = " + output);

Flash Thumbnailer - with automatic thumbnail generation - As2/PHP

Here’s just a quick method of automatically generating thumbnails on the fly - no more fiddling about with photoshop to create thumbnails… :P.

EXAMPLE

SOURCE

Simple XML app - Flash as2

Just thought I’d post an example I knocked up for a friend here to show him how xml can be read into flash…

xml-flash.jpg

xml-flash.zip

Function// String Split (AS2 & AS3)

Here’s a little code snippet I thought someone would find useful - It just splits a variable into an array easily.

//String Split Function

function stringSplit(myString){
//Create new array
var myArray = new Array();

//Splits string by the hash symbol (#) and adds to array
myArray = myString.split('#');

//Traces out the first entry in the array
trace(myArray[0]);
}

stringSplit(”var01#var02#var03#var5″);