Using transition effect instead of easing - slideshow

I am trying to have my slides in a specific transition. Right now, I have something called "easing" which is used within my slideshow. The problem is that I have no idea how to change that specific portion. I have modified the slideshow to a great extent to make it usable for the work project I am working on. I definitely wanna use that for work and for myself, because I find it to be such a good slideshow. But, I would love to have a simple transition like the Sudo Slider, as opposed to easing.
(once I have a basic transitition, I could change it to another sudo transitiion effect, so that will not be a problem)
Anyhow, the plugin I found - the Sudo Slider - is found on this website
http://webbies.dk/assets/files/SudoSlider/package/demos/continuous.html
<script type="text/javascript" >
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({
numeric: true
continuous:true
});
});
</script>
As for the slideshow (called MovingBoxes), this is one of things I have modified within the code. As for the speed, I have to put it at 1 to "remove" the effect of the easing. But I would really like to be capable of using the Sudo Slider transition effects instead (or any other non-easing transition effect). How could I achieve this?
$.movingBoxes.defaultOptions = {
// Appearance
startPanel : 1,
reducedSize : 1,
fixedHeight : false,
// Behaviour
initAnimation: false,
stopAnimation: false,
hashTags: true,
wrap: true,
buildNav: false,
navFormatter: null,
easing: 'easeInOutQuint',
// Times
speed: 1, // animation time in milliseconds - 500 is original
}

You seem to think that transition effects are just setting an option, it't not.
Each of the transition effects you see in e.g. SudoSlider are made of complex code.
You could take a look at the function "boxTemplate" in: http://webbies.dk/assets/files/SudoSlider/package/js/jquery.sudoSlider.js
The "boxTemplate" function defines the different effects involving boxes in SudoSlider.
If that could easily be moved to work with a script like MovingBoxes, I would happily do it.
But making it work with MovingBoxes would involve rewriting most of it, something that's not going to happen here on StackOverflow.

Related

vtkResliceCursorWidget rotate both axes

I am using a vtkResliceCursorWidget in a VTK app, and I want setup a useful behavior: when I move a side (axe), I want to being moved both axes.
See the images from below:
Actual behavior:
Desired behavior:
I have found inside of vtkResliceCursorWidget representation, a method that fit my needs:
SetManipulationMode(vtkResliceCursorRepresentation::RotateBothAxes)
but the issue is that though I have used, it simply do nothing:
vtkResliceCursorRepresentation* pRep = reinterpret_cast<vtkResliceCursorRepresentation*>(resliceCursorWidget[1]->GetRepresentation());
pRep->SetManipulationMode(vtkResliceCursorRepresentation::RotateBothAxes);
where resliceCursorWidget is a vtkResliceCursorWidget, taken from here:
Example
Somwhow I expect of this, because on SetManipulation method remark write quite clear: "INTERNAL - Do not use Set the manipulation mode. This is done by the widget", even this method is a "public" method.
Could you guide me in order to able to move both axes (of vtkResliceCursorWidget) on the same time ?
Thank you.
With the CTRL key as modifier, the behaviour will be as desired.

How to make scrollspy effect in foundation 4

I have been playing with Foundation 4 for a while. I have to say it is very simple to use, and lots of its markups are very readable. The documentation is brief, but we can work around. Then I hit this really big problem. In Bootstrap, you will have a functionality called scrollspy. You fix a sidebar on left, and when you scroll through page, it tells your where you are. http://getbootstrap.com/javascript/#scrollspy
I notice Foundation 4 also has a js component called Magellan. Unfortunately, the documentation has been extremely vague about what it does and how to adjust it. I played it for a while and realize that I might not be able to achieve the same effect as Bootstrap's scrollspy, where I can have a fixed leftside panel. Magellan always pushes my panel to the top of my screen.
Does anyone have the experience working with magellan?
Take a loot at the scrollspy for jQuery page on github, read the info, might be helpful to use it separately on any project:
https://github.com/sxalexander/jquery-scrollspy
esp take a loot at where it says:
$(document).ready(function() {
$('#sticky-navigation').scrollspy({
min: $('#nav').offset().top,
onEnter: function(element, position) {
$("#nav").addClass('fixed');
},
onLeave: function(element, position) {
$("#nav").removeClass('fixed');
}
});
});

Playing with Ember.Object.reopen(), why I have those results?

I was trying to answer this question: emberjs: add routes after app initialize()
I started to play with Ember.Object.reopen(), to understand how it works, and perhaps finding a way of answering the previous question.
I feel a bit puzzled, and don't understand the behavior of this code:
jsfiddle: http://jsfiddle.net/Sly7/FpJwT/
<script type="text/x-handlebars">
<div>{{App.myObj.value}}</div>
<div>{{App.myObj2.value}}</div>
<div>{{App.myObj3.value}}</div>
</script>
App = Em.Application.create({});
App.MyObject = Em.Object.extend({value: 'initial'});
App.set('myObj', App.MyObject.create());
Em.run.later(function(){
App.get('myObj').reopen({
value: "reopenOnInstance"
}); // the template is not updated, 'initial' is still diplayed, but
console.log(App.get('myObj').get('value')); // print 'reopenOnInstance'
App.MyObject.reopen({
value: "reopenOnClass"
});
App.set('myObj2',App.MyObject.create()); // the template is updated and
console.log(App.get('myObj2').get('value')); //print 'reopenOnClass'
App.myObj3 = App.MyObject.create(); // the template is not updated but
console.log(App.myObj3.get('value')); // print 'reopenOnClass'
Em.run.later(function(){
App.get('myObj').set('value', "setWithSetter"); // the template is updated and
console.log(App.get('myObj').get('value')); // print 'setWithSetter'
App.get('myObj2').set('value', "setWithSetter"); // the template is updated and
console.log(App.get('myObj2').get('value')); // print 'setWithSetter'
App.myObj3.set('value', "setWithSetter"); // the template is not updated but
console.log(App.myObj3.get('value')); // print 'setWithSetter'
}, 2000);
},2000);
If someone can explain what is going on, particularly why the templates are sometimes not updated, sometimes updated, and also what's the difference between calling reopen on a class, calling it and on a instance.
Not 100% sure, but I will try and answer you questions.
First lets look at "myObj3". The ember getter/setter methods trigger the updates in the templates (they fire internal events which cause every property/observer to know something happened). Just setting a value by hand does update the value but will not fire these events and hence nothing changes in the UI. Kind of like when you use a Mutable list you use pushObject to make sure the UI updates.
Now lets look at your "reopen". When you reopen on the class it works as you would expect and updates the base class. When you reopen an instance it is actually creating a mixin and shims it on top of the object. This means when you do a "get" ember iterates over the mixin & object for the value to return. It finds that mixin and gets the value before the object; you could actually replace the method with a "return 'foo '+this._super()" on the instance you will get 'foo initial' (think of your object has having layers like an onion). If you have a group of mixin on top of your object you will have a hard time finding the correct value if you set something directly (but "get" will work perfectly). This leads to the general rule that you should always use "set" instead of a direct reference.
Side note: You can call "getPath" instead of "get" and you can use the relative or absolute path. Such as App.getPath('myObj2.value') which will make the code a little easier to manage. Goes for "setPath" also.
Lastly: The last value prints because you did change the value (it is in there) but the trigger for ember to update the ui never fired because you never called set on "myObj3" object.
EDIT: In the lastest version of ember it looks like the reopen on an instance does do a merge-down on the object (if that key already exists). The mixin only will wrap if you are adding new content.

after effects looping for web

im making a video for a website in after effects
Its a simple under construction page. The video made in after effects effectively has two parts
transitions in the text,
some minor flicker animation.
I want to keep the flicker animation going for the rest of the time (infinite loop on my page), instead of looping the whole video. How do i Do that?
You can use a video api like this one:
http://videojs.com/docs/api/
A simple event would be the solution.
var myFunc = function(){
var myPlayer = this;
if(myPlayer.currentTime == x) {
myPlayer.currentTime(y);
};
myPlayer.addEvent("eventName", myFunc);
Your best bet is some kind of script (like the one posted by Gijoey above...) You can technically export videos to be "looping" but trusting that keyframing to translate across codecs/browsers is risky. I would convert the vid to something like an FLV / F4V as well. You could wrap it in a SWF if you want to deal with flash, but that's probably unnecessary for this purpose :P

Adobe Adam and Eve (C++ ASL): how to bind Eve variable so to get it updated inside C++ application?

So we know how to compile it, we have seen its demos and loved it. We have seen probably only one real life opensource project based on it. So I look at the samples and see only 3 quite long C++ applications that can be ofmy intrest ASL\test\adam_tutorial\, ASL\test\adam_smoke\, ASL\test\eve_smoke\. But I still do not get how htving simple Eve file with:
dialog(name: "Clipping Path")
{
column(child_horizontal: align_fill)
{
popup(name: "Path:", bind: #path, items:
[
{ name: "None", value: empty },
{ name: "Path 1", value: 1 },
{ name: "Path 2", value: 2 }
]);
edit_number(name: "Flatness:", digits: 9, bind: #flatness);
}
button(name: "OK", default: true, bind: #result);
}
in it, Adam file bound to it (theoretically, because I do not quite get how to bind Eve to adam and see no tutorialon how to do this), with
sheet clipping_path
{
output:
result <== { path: path, flatness: flatness };
interface:
unlink flatness : 0.0 <== (path == empty) ? 0.0 : flatness;
path : 1;
}
in it, make each time flatness variableis changed some C++ function of mine called (A simple one couting new flatness value for example)
So How to implement such thing with Adobe Adam and Eve and Boost ofcourse?
Update
We have tried to do it here and it worked but not in a live feedback way - only on dialog close action. And than here but due to our compile evrething on linux absession we have paused our development in ASL programming and started investing time into ASL compilation on Linux OS.
A good place to ask questions about ASL is on the ASL developer mailing list: http://sourceforge.net/mail/?group_id=132417.
You might want to look at the "Begin" test app . Although this only runs Mac and Win it does demonstrate how to wire things up.
The basic idea is that when a layout description (Eve) is parsed it will call your add_view_proc http://stlab.adobe.com/structadobe_1_1eve__callback__suite__t.html#a964b55af7417ae24aacbf552d1efbda4 with the arguments expression. Normally you use bind_layout_proc for the callback which will handle the argument evaluation for your and call a simplified callback that takes a dictionary with the arguments.
When your callback is invoked, you would typically create an appropriate widget and associate the dictionary to the widget or extract the arguments of interest from the dictionary and store them in a struct. Using the bind argument, you can setup callbacks with the associated sheet (Adam), using the monitor_xxxx functions on sheet_t. Usually you'll use monitor_value and monitor_enabled. When called, you set the value or enabled state on the widget. When the widgets value is changed by the user, and widget is invoked (it may be through an event handler, or a callback, or whatever mechanism your UI toolkit supports) you call sheet_t::set() to set the value of the cell and then sheet_t::update() to cause the sheet to recalculate.
That's about it - When trying to get Adam/Eve going with a new UI framework - start small. I usually start with just a window containing two checkboxs and wire up Eve first. Once that is going add Adam and a simple sheet connecting two boolean cells so you can see if things are happening correctly. Once you have that going you'll find it's pretty simple to get much more complex UIs wired up.