CORRECTION!! ggrrrr!! ... some JS/MooTools practice ...
On Feb 22, 10:05 am, ksq08 <[email protected]> wrote: > Thank you Nathan. For the clarity of your response and your quality > consideration of my questions. The client is me. And I will take your > advice and do it with Flash and some bespoke AS3 OOP. I intentionally > avoided Flash to get some AS/MooTools practice. But an experienced JS > developer like yourself suggesting Flash is good enough for me. Let's > face it, Flash was made for what I want. So I'll do it properly and > get some AS3 practice and not just be lazy with tweening on the Flash > timeline. Wouldn't it be nice if there was a JS/MooTools script to > keep you as fresh as your first coffee for 36 hours. We could get so > much more done! The coffee is kicking in. Time to crack on. Thanks > again, Nathan. Keith > > On Feb 22, 5:42 am, nwhite <[email protected]> wrote: > > > > "transitions" API: > > > Actually, the API was never documented. The whole project was more of a > > proof of concept and me just experimenting. > > > > 1. Can I remove the animation options and just keep one specific cross- > > > fade transition? [I assume by commenting out the superfluous code in > > > "transitions-site.js", and the other two .js files if required. Though > > > I realise one of the other two .js files being the MooTools library, I > > > that I don't touch that one.] > > > Absolutely. The code was never intended to be used in that manner. The > > "Animation Options" was used to show case all the configuration options. It > > also sets a cookie and reloads your previous settings if found. If you look > > at your code you will see that you create a new > > > new MatrixControlPanel('slideshow'); > > > Not what you want. MatrixControlPanel is a wrapper around MatrixTransitions. > > > What you need to know are the options and how they are used. > > > width: 20 // default in px > > height: 20 // default in px > > > These two options control the size of each square. The smaller the better > > the animation looks, but the more of a cpu hog the script becomes. > > > duration : 1000 // default in milliseconds > > > This controls how long it will take a transition to complete. > > > delay : 40 // default in milliseconds kinda like fps defaults = 25 fps. > > > images : [] // array of images you want to cycle through > > > wait : 3000 // time to wait on an image after transition completes before > > starting the next > > > fade : false // default if set to true puts an opacity fade animation in. > > Very high CPU usage, only good on fast modern computers and browsers. > > > effect : 'random' // default choices are ( 'sweep', 'blinds', > > 'disolve','gobble','random' ) > > > each effect has its own options. Yeah I know the interface is messy, and the > > code could be refined. > > > 'gobble' : 'random' // either random or a number. IF a number its the amount > > of blocks it gobbles at a time. Think in squares 1, 2, 4, 9 are ideal > > > 'blinds' : 'random' // other options are 'l','t','r','b' for left, top, > > right and bottom. > > > 'disolve' : 'random' // other options are a number. If a number that > > represents the number of blocks to dissolve at a time. > > > 'sweep' : 'random' // other option is an [x,y] array. This will we the > > starting point withing the grid (row,col) where the sweep starts from. > > > > 2. I want to get two, three, or four transition examples on a page set > > > up. Can I apply a "Before" and an "After" button bottom left of each > > > example so that users can apply the transition? This means I disable > > > its present time-based transition and replace with a JS "on-click" > > > function. But can it be applied to what Nathan has written? > > > While you can do this with the Transitions it would probably lead down the > > road to some hacking. I never got around to adding events. I would recommend > > that you check out Pat's Fx.Blocks <http://b22222.com/files/mooblock.html>. > > He did a way better job at abstracting the effects out. However, I don't > > believe Fx.Blocks has an option to turn off the 'fade'. This makes it very > > cpu intensive and not ideal in a general settings. He uses a different > > approach as well to accomplish the same thing. He uses css 'crop' to > > achieve his blocks I use background-position offsets. I am trying to > > determine with some tests which one is more efficient. I'll let you know my > > findings. > > > > 3. Can the "Before" and "After" states re-size? Or are you limited to > > > a static DIV and just applying "no-repeat" to prevent the background > > > image toggling? Nathan refers to implementing "add-ons". But, as > > > you've already guessed, my JS/MooTools is limited and I don't know if > > > this kind of manipulation of Nathan's very sexy work is possible. > > > Could you? yes. Is it worth it no. It is important when implementing > > javascript that you find the solution that works best for your design and > > audience. Restraint is a virtue in our field. > > > Other things worth mentioning. CSS can screw this thing up really fast if > > your not careful. If your implementing this for a client I would recommend > > going with a more conservative approach, there are a lot of really good > > mootools image slideshows out there that have better hooks. If your client > > cannot live without this effect then as much as I hate to say it, I would > > consider using a flash alternative.
