ctrl-zetta » 2007

javascript slideShow con Scriptaculous

July 27th, 2007

Hace tiempo que hice un script con script.aculo.us y php para crear un SlideShow

Aqui puedes ver el Demo

Ademáas del framework de scriptaculous necesitamos este codigo

zetta.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

if(!Array.prototype.push){
Array.prototype.push = function(){
var i;
for(i=0; j=arguments[i]; i++) this[this.length] = j;
return this.length;
};
};
Effect.BlindRight = function(element) {
element = $(element);
element.makeClipping();
return new Effect.Scale(element, 0,
Object.extend({ scaleContent: true,
scaleY: false,
restoreAfterFinish: true,
afterFinishInternal: function(effect) {
effect.element.hide();
effect.element.undoClipping();
}
}, arguments[1] || {})
);
};
Effect.BlindLeft = function(element) {
element = $(element);
var elementDimensions = element.getDimensions();
return new Effect.Scale(element, 100,
Object.extend({ scaleContent: true,
scaleY: false,
scaleFrom: 0,
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
restoreAfterFinish: true,
afterSetup: function(effect) {
effect.element.makeClipping();
effect.element.setStyle({width: '0px'});
effect.element.show();
},
afterFinishInternal: function(effect) {
effect.element.undoClipping();
}
}, arguments[1] || {})
);
};
Effect.Jump = function(element) {
element = $(element);
var oldStyle = {
top: element.getStyle('top'),
left: element.getStyle('left') };
return new Effect.Move(element,
{ y: 20, x: 0, duration: 0.05, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ y: -40, x: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ y: 40, x: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ y: -40, x: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ y: 40, x: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ y: -20, x: 0, duration: 0.05, afterFinishInternal: function(effect) {
effect.element.undoPositioned();
effect.element.setStyle(oldStyle);
}}) }}) }}) }}) }}) }});
};
Object.extend(Element, {
getWidth: function(element) {
element = $(element);
return element.offsetWidth;
},
setWidth: function(element,w) {
element = $(element);
element.style.width = w +"px";
},
setHeight: function(element,h) {
element = $(element);
element.style.height = h +"px";
},
setTop: function(element,t) {
element = $(element);
element.style.top = t +"px";
},
setSrc: function(element,src) {
element = $(element);
element.src = src;
},
setHref: function(element,href) {
element = $(element);
element.href = href;
},
setInnerHTML: function(element,content) {
element = $(element);
element.innerHTML = content;
}
});

var zetta = {
identifier : {},
type : {},
inplaced : Array(),
load : function(){
imagenes = document.getElementsByTagName('img');
for (var a = 0; (elemento = imagenes[a]); a++) {
if (elemento.className.match("transition")){
var settings = elemento.className;
elemento.setAttribute("settings",settings);
elemento.className = null;
dupNode = elemento.cloneNode(true);
padre = elemento.parentNode;
var tDiv = document.createElement("div");
tDiv.appendChild(dupNode);
padre.replaceChild(tDiv, elemento);
tDiv.setAttribute("width",dupNode.getAttribute("width"));
tDiv.setAttribute("height",dupNode.getAttribute("height"));
tDiv.style.display = "inline";
//alert(settings);
//var time = settings.split("_");
//time = time[4];
setTimeout("zetta.transition('"+dupNode.id+"');",(( time = settings.split("_")[4] )*1000)+(a*132));
}
}
},
transition : function(target){
to = document.getElementById(target);
if(to == null)
return false;
target = ($(target));
var u = 'transition/transition.php?target=' + target.id + "&url=" + target.src.replace('http://','') + "&settings=" + target.getAttribute("settings");
uno = new Ajax.Request( u ,{ onComplete : function (){ eval(uno.transport.responseText); } })
},
_transition : function(element,img,effect,time){
var daTime = time
var daEffect = effect
imgPreloader = new Image();
imgPreloader.onload=function(){
var ran = Math.round(3*Math.random());
i = (daEffect == "jump") ? 0 :( (daEffect == "shake") ? 1 :( (daEffect == "pulsate") ? 2 :( (daEffect == "fade") ? 3 :( ran ) ) ) );
switch (i){
case 0:
Effect.Jump(element);
setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",500);
break;
case 1:
Effect.Shake(element);
setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",500);
break;
case 2:
Effect.Pulsate(element, {duration : 1.0});
setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",1000);
break;
default:
Effect.Fade(element);
setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",1200);
setTimeout("zetta._conditional('"+element+"',\"Effect.Appear('"+element+"');\");",1215);
}
setTimeout("zetta._conditional('"+element+"',\"zetta.transition('"+element+"');\");",(time*1172));
}
imgPreloader.src = img;
},
_conditional : function(target,code){
to = document.getElementById(target);
if(to == null)
return false;
eval(code);
}
};
window.onload = zetta.load;

y un php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

function ext($file_name){
ereg("(.+)\.(.+)", basename($file_name), $regs);
return strtolower($regs[2]);
}
if($_GET['target'] and $_GET['settings'] and $_GET['url']){

$var = explode("_", $_GET['settings']);
$im = array();
if ($gestor = opendir("{$var[1]}/")) {
while (false !== ($archivo = readdir($gestor))) {
if ($archivo != "." && $archivo != ".." and ( ext($archivo) == "png" or ext($archivo) == "jpg" or ext($archivo) == "gif")) {
$im[] = rawurlencode($archivo);
}
}
closedir($gestor);
}
$ims = array_merge($im,$im);

if($var[2] == "random"){
shuffle($im);
$d = current($im);
}else{
$oldFile = explode("/", $_GET['url']);
$oldFile = $oldFile[count($oldFile)-1];
for($i=0; $i
if($ims[$i] == $oldFile){
$d = $ims[$i+1];
break;
}
}

}

$img = "transition/{$var[1]}/{$d}";
echo "zetta._transition('{$_GET['target']}','{$img}','{$var[3]}',{$var[4]})";

}
?>

Para utilizar en tu header coloca esto

1 2	<script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js" type="text/javascript"></script>

y para mandar llamar solo pon una imagen con clase (class) “transition_”
Ejemplo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<img id="h1D7ugF5RL" class="transition_stewie_linear_random_2" src="transition/stewie/st1.jpg" alt="Demo Imagen" width="150" height="170" />

class="transition_[folder]_[mode]_[effect]_[wait]"

folder:String // folder donde estan las imagenes

mode:String // modo de busqueda de las imagenes
random
linear

effect:String // efecto al hacer la transicion
jump
shake
pulsate
fade
random

wait:Number //tiempo de espera entre los cambios en segundos

A mi se me hace que pesa mucho, pero espero pronto hacer una version mas ligera con mootols

Descargar transition.zip

Posted in Javascript | 2 Comments »

sudo que insulta

July 25th, 2007

Todas las personas que desarrollamos cualquier tipo de aplicación tenemos que pensar en los mensajes de los diferentes errores que suceden (en lo personal soy muy pelado). Los desarrolladores de sudo no se quedan atrá porque este programita también te insulta cuando no pones bien tu contraseña de administrador, aunque esta opción viene desactivada por default, para activarla debes

Ejecutar: sudo visudo
Encuentra la linea que comienza con Defaults
Añade ,insults y guarda
Reinicia tu sesión y ejecuta sudo de nuevo pero equivocate

Posted in Linux | 4 Comments »

Juego con Prototype

July 24th, 2007

Michal Wallace escribió un tutorial paso a paso de como crear un juego con el famoso framework Prototype

Setting Up Shop: Herramientas que necesitaras y las primeras versiones del código
The Paddle: Our First Sprite: Creando un elemento y moviendolo manualmente con firebug
Keyboard Control: Sistema de Eventos Cross-browser de Prototype.
Animating the Paddle: Animación utilizando setInterval
Building the World: Las paredes, la bola y un monton de ladrillos
Collision Detection: Física de la bola. Pruebas de Unidad y el Objeto Math.
Keeping Score: Ganando perdiendo y golpeando ladrillos.
Adding Sound: Generar audio con el sounManager.
Those Other Screens: Pausa, Game Over. Nivel Completo. Pantalla de Inicio.
The High Score List: Enviando informacion a un PHP con el objeto AJAX de Prototype
Potential Enhancements: Ideas para hacer este juego como propio

Posted in Javascript, Juegos | No Comments »

Primer Meme

July 23rd, 2007

Leyendo el blog de Mauricio Caballero encontré este meme… respondamos

¿Cuanto tiempo llevas blogueando?
Lo he intentado varias veces, nunca he pasado de un par de meses
¿Como te enteraste de la existencia de los blogs y te animaste a participar?
No recuerdo, creo que por culpa de Mauricio
Dime cinco blogs que sigas a a diario o con mucha frecuencia.
- Mauricio Caballero
- Microsiervos
- Ajaxian
- klr20mg
- Apollo Code
- También Kadazuro pero casi no escribe ( se parece a mi pero el no desiste)
¿Eres lector anónimo de algún blog?
De muchisimos no acabaria
¿Algunos autores que te despierten especial simpatía?
Cualquier autor que le guste compartir sus conocimientos
¿Con que cinco blogueros te irias de borrachera?
Con todos los que les guste el pisto
¿Con que tres blogueros pasarías una noche de locura sexual?
x_X
¿Te has enamorado alguna vez de algún blogger?
nah!
¿Estas satisfecho (a) con tu blog?No! x.x nunca!
Elige entre tres y cinco blogueros para que contesten a estas preguntas en sus blogs.
Todos los que estan mencionados arriba (y que no lo hayan hecho)

Posted in General | No Comments »

class flash.Window.as Beta

July 20th, 2007

Window v.alpha

Clase Window.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import mx.utils.Delegate;
import mx.transitions.Tween;
import mx.transitions.easing.Regular;
class Window {
var width:Number;
var height:Number;
var home:MovieClip;
var im:MovieClip;
function Window(home:MovieClip,width:Number, height:Number) {
this.width = width;
this.height = height;
this.home = home;
}
public function draw(x:Number,y:Number,params:Object):Void{
var num:Number = home.getNextHighestDepth();
this.im = this.home.attachMovie("window","customWindow"+num,num);
this.im._y = y;
this.im._x = x;
this.im.bar._width = this.width;
if(params.showbar == false) this.im.bar._visible = false;
this.im.content._width = this.width;
this.im.content._height = this.height;
if(params.draggable != false){
this.im.bar.onPress = Delegate.create (this, startDrag);
this.im.bar.onRelease = Delegate.create(this,stopDrag);
this.im.bar.onReleaseOutside = Delegate.create(this,stopDrag);
}
this.im.content.onPress = Delegate.create (this, top);
if((params.forceDrag == true && params.showbar == false) || (params.allDraggable == true)){
this.im.content.onPress = Delegate.create (this, startDrag);
this.im.content.onRelease = Delegate.create(this,stopDrag);
this.im.content.onReleaseOutside = Delegate.create(this,stopDrag);
}
}
private function top():Void{
this.im.swapDepths(this.home.getNextHighestDepth());
}
private function startDrag():Void{
this.setProperty(this.im.content,"_alpha", 25, .5);
this.top();
this.im.startDrag(false);
}
private function stopDrag():Void{
this.setProperty(this.im.content,"_alpha", 100, .5);
this.im.stopDrag();
}
private function setProperty(target:MovieClip,property:String,value:Number,time:Number):Void{
var set:Tween = new Tween(target, property, Regular.easeOut, target[property], value, time, true);
}
public function get xny():Object{
return {x : this.im._x, y : this.im._y};
}
public function addContent(add:MovieClip):Void{
//todo
}
}

Uso

1 2	var w1:Window = new Window(target:MovieClip,width:Number,height:Number); w1.draw(x:Number,y:Number);

Donde:

target => Donde se construira la ventana
width => Ancho de la ventanta
height => Alto de la ventana

Métodos

draw:VoidDibuja la ventana en las coordenadas especificadas

Propiedades

xny

Devuelve un objeto con las coordenadas actuales de la ventana

Descargar windowBeta.zip
[tags]flash, actionscript, class, window, opensource[/tags]

Posted in Flash | 1 Comment »

class flash.scrollPane.as

July 17th, 2007

Pane v1.3

Multiples instancias
Integración con la rueda del ratón (al parecer no funciona en MacOs X)

Clase Pane.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172

import mx.utils.Delegate;
class Pane {
var mask: MovieClip,
sc1: MovieClip,
sc2: MovieClip,
origin: MovieClip,
sBar: MovieClip,
Target: MovieClip;
var sTotal: Number,
top: Number,
h: Number,
w: Number;
var ml: Object;
var delayer: Number;
function Pane(clip, width, height, pos) {
delayer = 0;
ml = new Object();
Mouse.addListener(ml);
this.origin = clip;
this.w = width;
this.h = height;
mask = clip._parent.createEmptyMovieClip("masking_" + clip._name, clip._parent.getNextHighestDepth());
mask._x = clip._x;
mask._y = clip._y;
mask.lineStyle(1, 0x000000, 100, true, "none", "round", "miter", 1);
mask.beginFill(0x000000);
mask.moveTo(0, 0);
mask.lineTo(width, 0);
mask.lineTo(width, height);
mask.lineTo(0, height);
mask.moveTo(0, 0);
clip.setMask(mask);
sc1 = clip._parent.attachMovie("paneScrollButon", "sc1_" + clip._name, clip._parent.getNextHighestDepth());
sc1._x = (pos == "left") ? Math.ceil(clip._x - sc1._width) : Math.ceil(clip._x + width);
sc1._y = Math.ceil(clip._y);
sc1.onPress = function() {
var nombre: MovieClip = this._parent["sBar_" + this._name.substr(4, this._name.length)];
nombre.onEnterFrame = track;
this.onEnterFrame = function() {
if (nombre._y > nombre._top) {
nombre._y -= 10;
} else {
nombre._y = nombre._top;
}
};
};
sc1.onRelease = sc1.onReleaseOutside = function() {
delete this.onEnterFrame;
};
sc2 = clip._parent.attachMovie("paneScrollButon2", "sc2_" + clip._name, clip._parent.getNextHighestDepth());
sc2._x = (pos == "left") ? Math.ceil(clip._x - sc1._width) : Math.ceil(clip._x + width);
sc2._y = Math.ceil((clip._y + height) - sc1._height);
sc2.onPress = function() {
var nombre: MovieClip = this._parent["sBar_" + this._name.substr(4, this._name.length)];
nombre.onEnterFrame = track;
this.onEnterFrame = function() {
if (nombre._y < nombre._bottom) {
nombre._y += 10;
} else {
nombre._y = nombre._bottom;
}
};
};
sc2.onRelease = sc1.onReleaseOutside = function() {
delete this.onEnterFrame;
};
sTotal = clip.sTotal = Math.ceil(sc2._y - (sc1._y + sc1._height));
sBar = clip._parent.attachMovie("paneScrollBar", "sBar_" + clip._name, clip._parent.getNextHighestDepth());
sBar.Target = clip;
sBar._x = Math.ceil(sc1._x);
sBar._y = Math.ceil(sc1._y + sc1._height);
sBar._height = (((height * 100) / clip._height) / 100) * height;;
sBar.onRelease = sBar.onReleaseOutside = function() {
this.isPressed = false;
this.stopDrag();
};
var left: Number = Math.ceil(sc1._x);
var top: Number = Math.ceil(sc1._y + sc1._height + 1);
var bottom: Number = Math.ceil((sc1._y + sTotal + sc1._height) - (sBar._height) - 1);
sBar._top = top;
sBar._left = left;
sBar._bottom = bottom;
sBar.delayer = 0;
sBar.isPressed = false;
sBar.onPress = function() {
this.startDrag(false, this._left, this._top, this._left, this._bottom);
this.onEnterFrame = track;
this.delayer = 0;
this.isPressed = true;
};
function track() {
var percent: Number = Math.round((this._y - this._top) * 100) / (this._bottom - this._top);
var nombre: MovieClip = this._parent[this._name.substr(5, this._name.length)];
var mask: MovieClip = nombre._parent["masking_" + nombre._name];
var diff: Number = nombre._height - mask._height;
var newVal = ( - ((diff * percent) / 100)) + mask._y;
nombre._y += (newVal - nombre._y) * 0.4;
this.delayer = this.isPressed == false ? this.delayer + 1 : this.delayer;
if (this.delayer == 10) {
delete this.onEnterFrame
}
}
ml.onMouseWheel = Delegate.create(this, wheel);
}
private function _track() {
var percent: Number = Math.round((sBar._y - sBar._top) * 100) / (sBar._bottom - sBar._top);
var diff: Number = origin._height - mask._height;
var newVal = ( - ((diff * percent) / 100)) + mask._y;
origin._y += (newVal - origin._y) * 0.4;
delayer++;
if (delayer == 10) {
delete sBar.onEnterFrame
}
}
private function wheel(delta) {
var ob: MovieClip = this.origin._parent;
var obj: MovieClip = this.mask;
if (ob._xmouse > = obj._x && ob._xmouse < = obj._x + this.w && ob._ymouse > = obj._y && ob._ymouse < = obj._y + this.h) {
delayer = 0;
if (delta < 0) {
sBar.onEnterFrame = Delegate.create(this, _track);
if (sBar._y + 25 < sBar._bottom) {
sBar._y += 25;
} else {
sBar._y = sBar._bottom;
}
} else {
sBar.onEnterFrame = Delegate.create(this, _track);
if (sBar._y - 25 > sBar._top) {
sBar._y -= 25;
} else {
sBar._y = sBar._top;
}
}
}
}
public function is() {
return true;
}
public function die() {
this.mask.removeMovieClip();
this.sBar.removeMovieClip();
this.sc1.removeMovieClip();
this.sc2.removeMovieClip();
}
public function hide() {
this.mask._visible = false;
this.sBar._visible = false;
this.sc1._visible = false;
this.sc2._visible = false;
this.origin._visible = false;
}
public function show() {
this.mask._visible = true;
this.sBar._visible = true;
this.sc1._visible = true;
this.sc2._visible = true;
this.origin._visible = true;
}
public function reset() {
sBar._x = Math.ceil(sc1._x);
sBar._y = Math.ceil(sc1._y + sc1._height);
origin._y = sc1._y;
show();
}
public function resize() {
sBar._height = (((h * 100) / origin._height) / 100) * h;
sBar._left = Math.ceil(sc1._x);
sBar._top = Math.ceil(sc1._y + sc1._height + 1);
sBar._bottom = Math.ceil((sc1._y + sTotal + sc1._height) - (sBar._height) - 1);
}
}

Uso

1	var newPane:Pane = new Pane(clip:MovieClip, Width:Number, height:Number, type:String);

Donde:

clip => MovieClip que se enmascarará
width => Ancho del cuadro a crear
height => Alto del cuadro a crear
type => De que lado estara la barra de scroll (left / right)

Métodos

is:BooleanDevuelve verdadero en caso de existir la instancia
hide:VoidOculta el objeto Pane
show:VoidVuelve a mostrar el objeto Pane
reset:VoidRegresa el scrollbar al inicio (arriba)
resize:VoidRegenera el tamaño del scroll (útil en contenido dinámico)

Descargar Pane.zip
[tags]flash, actionscript, class, scroll, scrollPane[/tags]

Posted in Flash | 8 Comments »