unic8 Studios - External image transitions

You are here: Home

External image transitions - Part 3

Sunday, 18 March 2007

Ok, ok... this should never get so far but let's get it on! We just released the first article to solve the problem with tiles-component and the ability of loading external images into it. In the meantime we received many question of possible extensions with our sample. I just wanted to show a solution instead of distributing a new "project".

The images are from the DeviantArt.com member lonelywolf2. Thanks for sharing these fantastic pictures.

Here are the new features...

All features of the first version and second version

Image loading ProgressBar

Extensions for ImageList.xml (Album name, author + url, timer (interval), auto-play)

Thumbnail overview

Dynamic scaling of images (images will be scaled to fit into the Stage)

Highly customizable: thumbs width & height, colors, timer, etc.

Source code

Download

Source files (567.96 KB)

Trackback(0)

TrackBack URI for this entry

Comments (33) add comment

Subscribe to this comment's feed

Marlon said:

WOW, really nice one. Nice works man. Congratz smilies/wink.gif

2007-03-23 14:59:52 | url

Marc said:

cool stuff.
kompliment hast du wirklich schön gemacht!

best,
Marc

2007-04-03 09:26:00 | url

blank said:

but when image size < flash size
image is not full screen flash
change this line can solve problem
before

bmpTarget.draw(bmpSource, mtxScale, new ColorTransform(), "normal", bmpSource.rectangle, true);
after
imgrectangle=new rectangle(0,0,Stage.width,Stage.height)
bmpTarget.draw(bmpSource, mtxScale, new ColorTransform(), "normal", imgrectangle, true);

thanks
i am sorry for poor english

2007-04-18 13:32:31 | url

CHums Crumb said:

Please inform how to make different album categories.

Eg
1 Cars
2 Bikes
3 Beach

2007-05-23 05:17:49

Marlon said:

Cool, existe any way to show a random imgs?

2007-05-24 21:36:11 | url

erik said:

@CHums Crumb: The file "ImageList.xml" inside the package contains all meta information for the slideshow. The root node "album" has the attribute "title" which defines it. Currently the example just uses a single album which is used for demonstration. If you would like to use more you have just to extend the source files.

@Marlon: For sure! Just edit the URL variable of the "ExternalTransition3.fla" which points to the "ImageList.xml". You can also call a PHP, ASP, CGI or other script which produces a XML content with the common structure or a custom one which has to be parsed from Flash in another way.

2007-05-24 22:35:16

Marlon said:

@Erik , what the right way for this variable? thx

2007-05-25 13:03:52 | url

Marlon said:

I dont know, but seems it is :

// Index of currently shown image
var intSourceIndex:Number = -1;
// Index of next shown image
var intTargetIndex:Number = -1;

2007-05-25 14:26:16 | url

Marlon said:

@Erik i am lost smilies/sad.gif

I dont know where start hehe. Can u show me a exemple maybe? thanks

2007-05-25 14:32:55 | url

erik said:

Hi Marlon,

what kind of random do you like to have? A random played slideshow or a random source of pictures? Both is possible but the one is solved by editing the ActionScript code the other by altering AS code and building a dynamic source.

2007-05-26 11:41:10

Daft said:

wirklich gute arbeit. so einen script hab ich noch nie gesehen und irgendwie krieg ich nicht raus, wo die effekte erzeugt werden. ich wollte die "zerbrösel" effekte raus nehmen und ne einfache überblendung erzeugen jedoch blick ich einfach nicht durch. könnt ihr mir helfen? ich möchte nur keine übergangseffekte. der rest soll bleiben. das mit den thumbs ist genial und dann auch noch alles mit xml. alles was zur vollkommenheit fehlen würde, wäre dass man author und url auch für jedes bild definieren kann... aber das werde ich glaub ich selber hinkriegen.
erbitte antwort
mfg daft

2007-05-28 02:34:20

Marlon said:

well, a random source of pictures. But a don't know how do it. Can u maybe help me on it? Thanks

2007-05-28 12:18:03 | url

erik said:

I don't know about your skills in server-side programming like PHP but here's a link to a sample http://de3.php.net/manual/en/function.readdir.php how you can dynamically create a list of files in a specific directory. You just have to rewrite that so it'll build a valid xml output similar to the "ImageList.xml".

Then modify the URL inside your ActionScript code where it generally points to the "ImageList.xml" and set it to the URL of the PHP script.

2007-05-29 08:18:01

Marlon said:

ohh, isn't possible by action scritp?
Erik I was looking in "Flash 8 Component: Tile Transitions" post by satori and Colin Campbell Replied a random metod:

-----------------------------------------------------
Random Image work around :

-----------------------------------------------------
-----------------------------------------------------

var array_1:Array = new Array("img01","img02",
"img03", img04);

var array_2:Array = new Array("start_image");

var img_count = 1;

clip.setImageArray(array_2);

function randomImage() {
if (img_count == 2) img_count = 0;

array_2 = array_1[random(array1.length)];

if (img_count == 0) clip.getNextImage();
else clip.getPreviousImage();

img_count ;
}

clip.randomImage();
setInterval(randomImage, 6000);

-----------------------------------------------------

The problem is i dont know how to implement it in yr script. Maybe u can look into it. Thanks anyway.

2007-05-29 13:51:37 | url

erik said:

No, this is just for random image selection not a random source of images. This is much easier...

movSmartTile:
replace both lines with the one below
this.attachBitmap(_root.getImage(),0);

_root:
replace the alter the function with the lines below
function getImage():BitmapData{
var intIndex:Number = random(aryBitmaps.length);
...
}

I've not tested it yet but it should work as expected with a random image of the list.

2007-05-29 18:57:12

Marlon said:

ohh nice!!! i will test it

cool thanks Erik! smilies/grin.gif

2007-05-30 18:56:00 | url

Marlon said:

Erik, the randomic works fine, it looks like i requested but when it call a new img a wrong transition backgroud appear. So the transition effect call different img.

Code:

root:

// Random
function getImage():BitmapData{
var intIndex:Number = random(aryBitmaps.length);
var bmpSource:BitmapData = aryBitmaps[intIndex];
var bmpTarget:BitmapData = new BitmapData(Stage.width, Stage.height);
var mtxScale:Matrix = new Matrix();
mtxScale.scale(Stage.width/bmpSource.width, Stage.height/bmpSource.height);

bmpTarget.draw(bmpSource, mtxScale, new ColorTransform(), "normal", bmpSource.rectangle, true);
return bmpTarget;
}

movSmartTile:

if(_name.substr(0,1) == "_"){
// this.attachBitmap(_root.getImage(_root.intSourceIndex),0);
this.attachBitmap(_root.getImage(),0);
}else{
// this.attachBitmap(_root.getImage(_root.intTargetIndex),0);,
this.attachBitmap(_root.getImage(),0);
}

2007-05-30 19:08:23 | url

erik said:

Marlon please try the following instructions with the original code:

function TransRoot():Void{
// proof whether component is in use
if(!transComp.isInTransit){
// Block inputs
btnPrevious.enabled = false;
btnNext.enabled = false;

// Calculatur next image index
intTargetIndex = random(aryBitmaps.length);

// init effect
transComp.getNextImage();

// Display title and details
lblImage.text = (intTargetIndex 1) "/" aryImages.length " Title: " aryImages[intTargetIndex]["title"];
}
}

... and also replace the calls of TransRoot so that no parameter is passed.

I just forgot the two "integer" values which I used to define the indices. And if I read my code more exact I would have seen the comment with Calculatur next image index

Sorry!

2007-06-05 18:54:51

Ice said:

How we can change the width of transition effects? I loaded images of size 670 and changed the stage size to 670, but the transition component still shows the transition in rectangle of size 500 width. How to change that?

2007-06-22 08:32:01

Salvatore said:

Hi Eric,
This flash file s great! I was wondering if it's possible to add a link to each image passing by. So when you click a certain image it goes to the corresponding URL. Thx

2007-06-22 16:10:06 | url

Marco said:

I missed the answer to the previous post. How do you change the transition size to match a change to the stage size. For instance if I wanted to do 640 x 480 as my stage.

cheers

2007-06-28 01:38:38

erik said:

Hello and sorry for the delay!

@ICE and MARCO:

Open the "movSmartTile" in the library and change the size of the transparent rectangle inside the layer to your favorite size or replace this by your own code snippet which has to draw a rectangle which is necessary as a placeholder.

@SALVATORE:

Not in the current version. For sure. I don't know how familiar you're with ActionScript but at least you havt to add a "link" attribute to each entry in the XML file. After this you have to parse and process it inside Flash.

2007-07-03 17:29:14

Simon said:

I am having problems getting a preloader to work with this component. I noticed other people are having the same problems.

I don't mean a preloader for each image, I just mean a preloader which comes before the component actually starts.

I have tried all the simple preloaders I can find including the progressbar and they never appear or work properly. Anybody have an idea or have an example of a preloader working for this component?

Thanks,

Simon

2007-08-17 15:11:24

Flame said:

Hello, I would like to see how all this works but I can't get to the source files.. when I try to download I see only some flash encoder or smth to download..
Is it possible I can get the fla and the xml from somewhere ?
thanks

2007-09-03 13:43:48

erik said:

Hi Flame,

sorry... the system linked the automatic generated URL to the "unicode panel". Should be fixed now! Thanks for the feedback!

2007-09-03 14:31:22 | url

EADOIN said:

Erik,

Your revision is phenomenal, kudos to your dedication and skills.

I do have question, however:

I am looking to make my own transitions between images, but I cannot for the life of me discern how to create the tiles of a dynamically loaded image using Bitmap Data. Do you make as many copies of the bitmap image as you have tiles and offset a square mask to achieve the effect? I've studied both the original component and this version and I still have immense difficulty determining how it is done.

Any assistance would be a godsend,

Thank you

2007-09-17 23:28:04 | url

erik said:

Hi EADOIN,

first of all you'll have to know that since Flash 8 you should use BitmapData instead of copying MovieClips and do the old-school tricks with offsets and masks smilies/wink.gif

(Note: don't forget to dispose!)
The BitmapData object is able to copy a specified rectangle of the source (bitmap, movie, etc...). This rectangle is used to do the offset because you can set attributes like: top, left, width and height.
That's all and how this solution is done. Hope this helps!

2007-09-18 10:37:11 | url

Helio said:

Hi,

Congratulations for the wonderful component.

I'd like to know if is possible to use movie clips as a buttons, instead of flash component buttons that you are using.

Thanks in advance,

Helio

2007-12-26 06:33:09

erik said:

Hi Helio,

yes... you can use whatever you want to no matter if the UI elements are components, movieclips or buttons.

2008-01-01 22:38:43 | url

helio said:

I've tried, but I've couldn't accomplish it, maybe I'm doing something wrong... I've tried placing 2 movie clips instead buttons components that you're using, with the same name instances, but it doesn't work! Don't you have any working example using movie clips instead components buttons?

Thanks in advance
Best wishes,
Helio

2008-01-21 05:20:07

anonymous said:

to change the size of the transparent rectangle, override the "createTiles" function in your root actions layer

this is the function with variables mw & mh being my only changes to make the transparent rectangle the same size as the stage.

// create tiles - overrides default
myTransitionsComponentNameHere.clip.createTiles = function(s:String, w:Number, h:Number):Void {
this._x = w/2 this._tileBuffer;
this._y = h/2 this._tileBuffer;
var m:MovieClip = this.attachMovie(s, "temp", this.getNextHighestDepth());
var mw:Number = Stage.width; // original value: m._width
var mh:Number = Stage.height; // original value: m._height
m.removeMovieClip();
var y = Math.ceil(mh/h);

while (y--) {
var x = Math.ceil(mw/w);
while (x--) {
m = this.attachMovie("FallingTile", "tile" this.getNextHighestDepth(), this.getNextHighestDepth());
m.addListener(this);
m.setMaskSize(w this._tileBuffer*2, h this._tileBuffer*2);
m.setImage(s);
m._x = w * x;
m._y = h * y;
m.setOffset(m._x, m._y);
m.setGravity(this._fadeRate);
m.cacheAsBitmap = true;
this._tileArray.push(m);
}
}
};

2008-02-12 20:04:25

Chris said:

Hey Eric,

Thanks for this nice component! I am having a black backround in my project and was wondering if I can change the initial background color before the first photo loads and while it animates in. It seems to be set to white and I would like to have it black.

Thanks in advance!

2008-04-03 03:41:05

erik said:

Hi Chris,

maybe the line 263 causes the mentioned color:
--------------------------------------------------------
bmpThumb = new BitmapData(intThumbWidth, intThumbHeight, true, 0xFF990000);
--------------------------------------------------------
The color is setup with the alpha channel that's the reason why it contains the leading "FF". Try to set it to 0x00000000.

2008-04-03 13:59:09 | url

Write comment