Loading...
Archive for July, 2007
  1. javascript slideShow con Scriptaculous
    July 27th, 2007 by zetta | 2 Comments »

    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. if(!Array.prototype.push){
    2. Array.prototype.push =  function(){
    3. var i;
    4. for(i=0; j=arguments[i]; i++) this[this.length] = j;
    5. return this.length;
    6. };
    7. };
    8. Effect.BlindRight = function(element) {
    9. element = $(element);
    10. element.makeClipping();
    11. return new Effect.Scale(element, 0,
    12. Object.extend({ scaleContent: true,
    13. scaleY: false,
    14. restoreAfterFinish: true,
    15. afterFinishInternal: function(effect) {
    16. effect.element.hide();
    17. effect.element.undoClipping();
    18. }
    19. }, arguments[1] || {})
    20. );
    21. };
    22. Effect.BlindLeft = function(element) {
    23. element = $(element);
    24. var elementDimensions = element.getDimensions();
    25. return new Effect.Scale(element, 100,
    26. Object.extend({ scaleContent: true,
    27. scaleY: false,
    28. scaleFrom: 0,
    29. scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    30. restoreAfterFinish: true,
    31. afterSetup: function(effect) {
    32. effect.element.makeClipping();
    33. effect.element.setStyle({width: '0px'});
    34. effect.element.show();
    35. },
    36. afterFinishInternal: function(effect) {
    37. effect.element.undoClipping();
    38. }
    39. }, arguments[1] || {})
    40. );
    41. };
    42. Effect.Jump = function(element) {
    43. element = $(element);
    44. var oldStyle = {
    45. top: element.getStyle('top'),
    46. left: element.getStyle('left') };
    47. return new Effect.Move(element,
    48. { y:  20, x: 0, duration: 0.05, afterFinishInternal: function(effect) {
    49. new Effect.Move(effect.element,
    50. { y: -40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    51. new Effect.Move(effect.element,
    52. { y:  40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    53. new Effect.Move(effect.element,
    54. { y: -40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    55. new Effect.Move(effect.element,
    56. { y:  40, x: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    57. new Effect.Move(effect.element,
    58. { y: -20, x: 0, duration: 0.05, afterFinishInternal: function(effect) {
    59. effect.element.undoPositioned();
    60. effect.element.setStyle(oldStyle);
    61. }}) }}) }}) }}) }}) }});
    62. };
    63. Object.extend(Element, {
    64. getWidth: function(element) {
    65. element = $(element);
    66. return element.offsetWidth;
    67. },
    68. setWidth: function(element,w) {
    69. element = $(element);
    70. element.style.width = w +"px";
    71. },
    72. setHeight: function(element,h) {
    73. element = $(element);
    74. element.style.height = h +"px";
    75. },
    76. setTop: function(element,t) {
    77. element = $(element);
    78. element.style.top = t +"px";
    79. },
    80. setSrc: function(element,src) {
    81. element = $(element);
    82. element.src = src;
    83. },
    84. setHref: function(element,href) {
    85. element = $(element);
    86. element.href = href;
    87. },
    88. setInnerHTML: function(element,content) {
    89. element = $(element);
    90. element.innerHTML = content;
    91. }
    92. });
    93.  
    94. var zetta = {
    95. identifier : {},
    96. type : {},
    97. inplaced : Array(),
    98. load : function(){
    99. imagenes = document.getElementsByTagName('img');
    100. for (var a = 0; (elemento = imagenes[a]); a++) {
    101. if (elemento.className.match("transition")){
    102. var settings = elemento.className;
    103. elemento.setAttribute("settings",settings);
    104. elemento.className = null;
    105. dupNode = elemento.cloneNode(true);
    106. padre = elemento.parentNode;
    107. var tDiv = document.createElement("div");
    108. tDiv.appendChild(dupNode);
    109. padre.replaceChild(tDiv, elemento);
    110. tDiv.setAttribute("width",dupNode.getAttribute("width"));
    111. tDiv.setAttribute("height",dupNode.getAttribute("height"));
    112. tDiv.style.display = "inline";
    113. //alert(settings);
    114. //var time = settings.split("_");
    115. //time = time[4];
    116. setTimeout("zetta.transition('"+dupNode.id+"');",(( time = settings.split("_")[4] )*1000)+(a*132));
    117. }
    118. }
    119. },
    120. transition : function(target){
    121. to = document.getElementById(target);
    122. if(to == null)
    123. return false;
    124. target = ($(target));
    125. var u = 'transition/transition.php?target=' + target.id + "&url=" + target.src.replace('http://','') + "&settings=" + target.getAttribute("settings");
    126. uno = new  Ajax.Request( u ,{ onComplete : function (){ eval(uno.transport.responseText); } })
    127. },
    128. _transition : function(element,img,effect,time){
    129. var daTime = time
    130. var daEffect = effect
    131. imgPreloader = new Image();
    132. imgPreloader.onload=function(){
    133. var ran =  Math.round(3*Math.random());
    134. i = (daEffect == "jump") ? 0 :( (daEffect == "shake") ? 1 :( (daEffect == "pulsate") ? 2 :( (daEffect == "fade") ? 3 :( ran ) ) ) );
    135. switch (i){
    136. case 0:
    137. Effect.Jump(element);
    138. setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",500);
    139. break;
    140. case 1:
    141. Effect.Shake(element);
    142. setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",500);
    143. break;
    144. case 2:
    145. Effect.Pulsate(element, {duration : 1.0});
    146. setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",1000);
    147. break;
    148. default:
    149. Effect.Fade(element);
    150. setTimeout("zetta._conditional('"+element+"',\"Element.setSrc('"+element+"', '"+img+"');\");",1200);
    151. setTimeout("zetta._conditional('"+element+"',\"Effect.Appear('"+element+"');\");",1215);
    152. }
    153. setTimeout("zetta._conditional('"+element+"',\"zetta.transition('"+element+"');\");",(time*1172));
    154. }
    155. imgPreloader.src = img;
    156. },
    157. _conditional : function(target,code){
    158. to = document.getElementById(target);
    159. if(to == null)
    160. return false;
    161. eval(code);
    162. }
    163. };
    164. window.onload = zetta.load;

    y un php:

    1. function ext($file_name){
    2. ereg("(.+)\.(.+)", basename($file_name), $regs);
    3. return strtolower($regs[2]);
    4. }
    5. if($_GET['target'] and $_GET['settings'] and $_GET['url']){
    6.  
    7. $var = explode("_", $_GET['settings']);
    8. $im = array();
    9. if ($gestor = opendir("{$var[1]}/")) {
    10. while (false !== ($archivo = readdir($gestor))) {
    11. if ($archivo != "." && $archivo != ".." and ( ext($archivo) == "png" or ext($archivo) == "jpg" or ext($archivo) == "gif")) {
    12. $im[] = rawurlencode($archivo);
    13. }
    14. }
    15. closedir($gestor);
    16. }
    17. $ims = array_merge($im,$im);
    18.  
    19. if($var[2] == "random"){
    20. shuffle($im);
    21. $d = current($im);
    22. }else{
    23. $oldFile = explode("/", $_GET['url']);
    24. $oldFile = $oldFile[count($oldFile)-1];
    25. for($i=0; $i
    26. if($ims[$i] == $oldFile){
    27. $d = $ims[$i+1];
    28. break;
    29. }
    30. }
    31.  
    32. }
    33.  
    34. $img = "transition/{$var[1]}/{$d}";
    35. echo  "zetta._transition('{$_GET['target']}','{$img}','{$var[3]}',{$var[4]})";
    36.  
    37. }
    38. ?>

    Para utilizar en tu header coloca esto

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

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

    1. <img id="h1D7ugF5RL" class="transition_stewie_linear_random_2" src="transition/stewie/st1.jpg" alt="Demo Imagen" width="150" height="170" />
    2.  
    3. class="transition_[folder]_[mode]_[effect]_[wait]"
    4.  
    5. folder:String    // folder donde estan las imagenes
    6.  
    7. mode:String      // modo de busqueda de las imagenes
    8. random
    9. linear
    10.  
    11. effect:String   // efecto al hacer la transicion
    12. jump
    13. shake
    14. pulsate
    15. fade
    16. random
    17.  
    18. 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


    Tags:
  2. sudo que insulta
    July 25th, 2007 by zetta | No Comments »

    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
    screenshot1.png

    Tags: , ,
  3. Juego con Prototype
    July 24th, 2007 by zetta | No Comments »

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

    brickslayer.png

    Tags: , , , , , ,
  4. Primer Meme
    July 23rd, 2007 by zetta | No Comments »

    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.
    • ¿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)

    Tags: , , , ,
  5. class flash.Window.as Beta
    July 20th, 2007 by zetta | 1 Comment »
    (Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

    Window v.alpha

    Clase Window.as

    1. import mx.utils.Delegate;
    2. import mx.transitions.Tween;
    3. import mx.transitions.easing.Regular;
    4. class Window {
    5. var width:Number;
    6. var height:Number;
    7. var home:MovieClip;
    8. var im:MovieClip;
    9. function Window(home:MovieClip,width:Number, height:Number) {
    10. this.width = width;
    11. this.height = height;
    12. this.home = home;
    13. }
    14. public function draw(x:Number,y:Number,params:Object):Void{
    15. var num:Number = home.getNextHighestDepth();
    16. this.im = this.home.attachMovie("window","customWindow"+num,num);
    17. this.im._y = y;
    18. this.im._x = x;
    19. this.im.bar._width = this.width;
    20. if(params.showbar == false) this.im.bar._visible = false;
    21. this.im.content._width = this.width;
    22. this.im.content._height = this.height;
    23. if(params.draggable != false){
    24. this.im.bar.onPress =  Delegate.create (this, startDrag);
    25. this.im.bar.onRelease = Delegate.create(this,stopDrag);
    26. this.im.bar.onReleaseOutside = Delegate.create(this,stopDrag);
    27. }
    28. this.im.content.onPress =  Delegate.create (this, top);
    29. if((params.forceDrag == true &amp;&amp; params.showbar == false) || (params.allDraggable == true)){
    30. this.im.content.onPress =  Delegate.create (this, startDrag);
    31. this.im.content.onRelease = Delegate.create(this,stopDrag);
    32. this.im.content.onReleaseOutside = Delegate.create(this,stopDrag);
    33. }
    34. }
    35. private function top():Void{
    36. this.im.swapDepths(this.home.getNextHighestDepth());
    37. }
    38. private function startDrag():Void{
    39. this.setProperty(this.im.content,"_alpha", 25, .5);
    40. this.top();
    41. this.im.startDrag(false);
    42. }
    43. private function stopDrag():Void{
    44. this.setProperty(this.im.content,"_alpha", 100, .5);
    45. this.im.stopDrag();
    46. }
    47. private function setProperty(target:MovieClip,property:String,value:Number,time:Number):Void{
    48. var set:Tween = new Tween(target, property, Regular.easeOut, target[property], value, time, true);
    49. }
    50. public function get xny():Object{
    51. return {x : this.im._x, y : this.im._y};
    52. }
    53. public function addContent(add:MovieClip):Void{
    54. //todo
    55. }
    56. }

    Uso

    1. var w1:Window = new Window(target:MovieClip,width:Number,height:Number);
    2. 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: , , , , , , , , ,
  6. class flash.scrollPane.as
    July 17th, 2007 by zetta | 7 Comments »
    (Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

    Pane v1.3

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

    Clase Pane.as

    1. import mx.utils.Delegate;
    2. class Pane {
    3.     var mask: MovieClip,
    4.         sc1: MovieClip,
    5.         sc2: MovieClip,
    6.         origin: MovieClip,
    7.         sBar: MovieClip,
    8.         Target: MovieClip;
    9.     var sTotal: Number,
    10.         top: Number,
    11.         h: Number,
    12.         w: Number;
    13.     var ml: Object;
    14.     var delayer: Number;
    15.     function Pane(clip, width, height, pos) {
    16.         delayer = 0;
    17.         ml = new Object();
    18.         Mouse.addListener(ml);
    19.         this.origin = clip;
    20.         this.w = width;
    21.         this.h = height;
    22.         mask = clip._parent.createEmptyMovieClip("masking_" + clip._name, clip._parent.getNextHighestDepth());
    23.         mask._x = clip._x;
    24.         mask._y = clip._y;
    25.         mask.lineStyle(1, 0x000000, 100, true, "none", "round", "miter", 1);
    26.         mask.beginFill(0x000000);
    27.         mask.moveTo(0, 0);
    28.         mask.lineTo(width, 0);
    29.         mask.lineTo(width, height);
    30.         mask.lineTo(0, height);
    31.         mask.moveTo(0, 0);
    32.         clip.setMask(mask);
    33.         sc1 = clip._parent.attachMovie("paneScrollButon", "sc1_" + clip._name, clip._parent.getNextHighestDepth());
    34.         sc1._x = (pos == "left") ? Math.ceil(clip._x - sc1._width) : Math.ceil(clip._x + width);
    35.         sc1._y = Math.ceil(clip._y);
    36.         sc1.onPress = function() {
    37.             var nombre: MovieClip = this._parent["sBar_" + this._name.substr(4, this._name.length)];
    38.             nombre.onEnterFrame = track;
    39.             this.onEnterFrame = function() {
    40.                 if (nombre._y > nombre._top) {
    41.                     nombre._y -= 10;
    42.                 } else {
    43.                     nombre._y = nombre._top;
    44.                 }
    45.             };
    46.         };
    47.         sc1.onRelease = sc1.onReleaseOutside = function() {
    48.             delete this.onEnterFrame;
    49.         };
    50.         sc2 = clip._parent.attachMovie("paneScrollButon2", "sc2_" + clip._name, clip._parent.getNextHighestDepth());
    51.         sc2._x = (pos == "left") ? Math.ceil(clip._x - sc1._width) : Math.ceil(clip._x + width);
    52.         sc2._y = Math.ceil((clip._y + height) - sc1._height);
    53.         sc2.onPress = function() {
    54.             var nombre: MovieClip = this._parent["sBar_" + this._name.substr(4, this._name.length)];
    55.             nombre.onEnterFrame = track;
    56.             this.onEnterFrame = function() {
    57.                 if (nombre._y < nombre._bottom) {
    58.                     nombre._y += 10;
    59.                 } else {
    60.                     nombre._y = nombre._bottom;
    61.                 }
    62.             };
    63.         };
    64.         sc2.onRelease = sc1.onReleaseOutside = function() {
    65.             delete this.onEnterFrame;
    66.         };
    67.         sTotal = clip.sTotal = Math.ceil(sc2._y - (sc1._y + sc1._height));
    68.         sBar = clip._parent.attachMovie("paneScrollBar", "sBar_" + clip._name, clip._parent.getNextHighestDepth());
    69.         sBar.Target = clip;
    70.         sBar._x = Math.ceil(sc1._x);
    71.         sBar._y = Math.ceil(sc1._y + sc1._height);
    72.         sBar._height = (((height * 100) / clip._height) / 100) * height;;
    73.         sBar.onRelease = sBar.onReleaseOutside = function() {
    74.             this.isPressed = false;
    75.             this.stopDrag();
    76.         };
    77.         var left: Number = Math.ceil(sc1._x);
    78.         var top: Number = Math.ceil(sc1._y + sc1._height + 1);
    79.         var bottom: Number = Math.ceil((sc1._y + sTotal + sc1._height) - (sBar._height) - 1);
    80.         sBar._top = top;
    81.         sBar._left = left;
    82.         sBar._bottom = bottom;
    83.         sBar.delayer = 0;
    84.         sBar.isPressed = false;
    85.         sBar.onPress = function() {
    86.             this.startDrag(false, this._left, this._top, this._left, this._bottom);
    87.             this.onEnterFrame = track;
    88.             this.delayer = 0;
    89.             this.isPressed = true;
    90.         };
    91.         function track() {
    92.             var percent: Number = Math.round((this._y - this._top) * 100) / (this._bottom - this._top);
    93.             var nombre: MovieClip = this._parent[this._name.substr(5, this._name.length)];
    94.             var mask: MovieClip = nombre._parent["masking_" + nombre._name];
    95.             var diff: Number = nombre._height - mask._height;
    96.             var newVal = ( - ((diff * percent) / 100)) + mask._y;
    97.             nombre._y += (newVal - nombre._y) * 0.4;
    98.             this.delayer = this.isPressed == false ? this.delayer + 1 : this.delayer;
    99.             if (this.delayer == 10) {
    100.                 delete this.onEnterFrame
    101.             }
    102.         }
    103.         ml.onMouseWheel = Delegate.create(this, wheel);
    104.     }
    105.     private function _track() {
    106.         var percent: Number = Math.round((sBar._y - sBar._top) * 100) / (sBar._bottom - sBar._top);
    107.         var diff: Number = origin._height - mask._height;
    108.         var newVal = ( - ((diff * percent) / 100)) + mask._y;
    109.         origin._y += (newVal - origin._y) * 0.4;
    110.         delayer++;
    111.         if (delayer == 10) {
    112.             delete sBar.onEnterFrame
    113.         }
    114.     }
    115.     private function wheel(delta) {
    116.         var ob: MovieClip = this.origin._parent;
    117.         var obj: MovieClip = this.mask;
    118.         if (ob._xmouse > = obj._x && ob._xmouse < = obj._x + this.w && ob._ymouse > = obj._y && ob._ymouse < = obj._y + this.h) {
    119.             delayer = 0;
    120.             if (delta < 0) {
    121.                 sBar.onEnterFrame = Delegate.create(this, _track);
    122.                 if (sBar._y + 25 < sBar._bottom) {
    123.                     sBar._y += 25;
    124.                 } else {
    125.                     sBar._y = sBar._bottom;
    126.                 }
    127.             } else {
    128.                 sBar.onEnterFrame = Delegate.create(this, _track);
    129.                 if (sBar._y - 25 > sBar._top) {
    130.                     sBar._y -= 25;
    131.                 } else {
    132.                     sBar._y = sBar._top;
    133.                 }
    134.             }
    135.         }
    136.     }
    137.     public function is() {
    138.         return true;
    139.     }
    140.     public function die() {
    141.         this.mask.removeMovieClip();
    142.         this.sBar.removeMovieClip();
    143.         this.sc1.removeMovieClip();
    144.         this.sc2.removeMovieClip();
    145.     }
    146.     public function hide() {
    147.         this.mask._visible = false;
    148.         this.sBar._visible = false;
    149.         this.sc1._visible = false;
    150.         this.sc2._visible = false;
    151.         this.origin._visible = false;
    152.     }
    153.     public function show() {
    154.         this.mask._visible = true;
    155.         this.sBar._visible = true;
    156.         this.sc1._visible = true;
    157.         this.sc2._visible = true;
    158.         this.origin._visible = true;
    159.     }
    160.     public function reset() {
    161.         sBar._x = Math.ceil(sc1._x);
    162.         sBar._y = Math.ceil(sc1._y + sc1._height);
    163.         origin._y = sc1._y;
    164.         show();
    165.     }
    166.     public function resize() {
    167.         sBar._height = (((h * 100) / origin._height) / 100) * h;
    168.         sBar._left = Math.ceil(sc1._x);
    169.         sBar._top = Math.ceil(sc1._y + sc1._height + 1);
    170.         sBar._bottom = Math.ceil((sc1._y + sTotal + sc1._height) - (sBar._height) - 1);
    171.     }
    172. }

    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: , , , , ,
   

Powered by ExtJS Theme flavored Wordpress.