Swiff.remote woes

15 views
Skip to first unread message

t.patrick.welborn

unread,
Oct 11, 2011, 10:13:52 AM10/11/11
to MooTools Users
Hello! I am new to the Group and I need help.

I have no idea how to use Swiff.remote. The MooTools documentation is
limited on the subject, and the dozens of forum posts I have read
since 2008 never give a consistent explanation on how to work it. The
ExternalInterface setup in worked fine with my previous swfobject
solution, but it won't work with MooTools Swiff. Looking at this code,
can anyone offer up suggestions on how to write the Swiff.remote code
to call my SWF function? I have been banging my head against a wall
for 8 hours on this one.

This script loads a dynamic number of SWFs into the appropriate
container objects in the markup. It loads the SWFs fine, and the code
runs without generating errors. However, it will not call my functions
in the SWF.

----------------------------------------
----------------------------------------
JavaScript:

var Slider2D = new Class({
//_slideIndex declaration value must be -1
_slideIndex: -1,
//timer variable for automatically scrolling slideshow
slideTimer: 0,
initialize: function(options){
this.options = options;
var navigation = new Element('ul').inject('slideNavigation');

//declare slide container dimensions
$$('#carousel ul, #slideNavigation').setStyles({
'height': options.height,
'width': options.width
});

$$('#carousel ul li').each(function(slideItem, slideId,
slideContainer){
//declare slide dimensions and position
slideItem.setStyles({
'height': options.height,
'left': (options.width * (slideId + 1)),
'width': options.width
});

//create navigation button for each slide
var navigationButton = new Element('li')
.set('text', (slideId + 1))
.addEvents({
click: function(){
//change slide index when user clicks navigation button
this.slideIndex(slideId);
}.bind(this),
mouseover: function(){
this.addClass('over');
},
mouseout: function(){
this.removeClass('over');
}
})
.inject(navigation);
}.bind(this));

this.loadSwfs(options.swfs);
},
//automatically increment slide index when timer fires
incrementSlideIndex: function(){
this.slideIndex(this._slideIndex + 1);
},
slideIndex: function(value){
//only modify slide index if slider is not paused and current
selection is different than previous selection
if(this._slideIndex != value){
//try removing navigation button down state style and clearing the
slide timer interval each time slide index changes
try{
$$('#slideNavigation ul li')
[this._slideIndex].removeClass('down');
clearInterval(this.slideTimer);
}catch(error){
//
}
//if the slide index reaches the end, then reset to the first slide
if(this._slideIndex == ($$('#carousel ul li').length - 1)){
this._slideIndex = 0;

}else{
this._slideIndex = value;
}
if($$('#carousel ul li')[this._slideIndex].getProperty('class') ==
"swfSlide"){
}else{
this.slideTimer =
this.incrementSlideIndex.periodical(this.options.duration, this);
}
//animate the slides
$$('#carousel ul li').each(function(slideItem, slideId,
slideContainer){
slideItem.tween('left', (-1 * (this._slideIndex - (slideId)) *
slideItem.getStyle('width').replace('px', '')));

}.bind(this));

//display the down style for the navigation button
$$('#slideNavigation ul li')[this._slideIndex].addClass('down');

}
},
loadSwfs: function(swfs){
var i = 0;
Object.each(swfs, function(value, key){
var swfSlide = new Swiff(value, {
id: key,
width: 970,
height: 355,
params: {
name: key,
quality: 'high',
wMode: 'transparent',
allowScriptAccess: 'always'
},
container: $$('#carousel ul li.swfSlide')[i]
});
i++;
});
this.slideIndex(0);
}
});

function resumePlayback(){
slider2d.slideTimer =
slider2d.incrementSlideIndex.periodical(slider2d.options.duration,
slider2d);
}
----------------------------------------
----------------------------------------
ActionScript:

package com.lightpail.creativeSpark
{
import flash.display.MovieClip;
import flash.events.ErrorEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;
import flash.events.StatusEvent;
import flash.events.TimerEvent;
import flash.external.*;
import flash.system.Security;
import flash.ui.Mouse;
import flash.ui.MouseCursor;
import flash.utils.Timer;

public class SWFPlayerStage extends MovieClip
{
public var _isPlaying:Boolean = new Boolean();

public function SWFPlayerStage():void
{
ExternalInterface.addCallback("toggleSwfSlide", toggleSWFPlayer);
ExternalInterface.addCallback("resetSwfSlide", resetSWFPlayer);

this.addEventListener(Event.ENTER_FRAME,
function(event:Event):void{
if(event.currentTarget.currentFrame ==
event.currentTarget.totalFrames){
event.currentTarget.removeEventListener(Event.ENTER_FRAME,
arguments.callee);
event.currentTarget.stop();
ExternalInterface.call("resumePlayback");
}
});

}

public function toggleSWFPlayer():void
{
isPlaying = !isPlaying;
}

public function resetSWFPlayer():void
{
this.gotoAndStop(1);
}

public function get isPlaying():Boolean
{
return _isPlaying;
}
public function set isPlaying(value:Boolean):void
{
_isPlaying = value;
this.gotoAndPlay(1);

}

private function replayButtonRollOver(event:MouseEvent):void
{
Mouse.cursor = flash.ui.MouseCursor.BUTTON;
}
private function replayButtonRollOut(event:MouseEvent):void
{
Mouse.cursor = flash.ui.MouseCursor.ARROW;
}
}
}

Philip Thompson

unread,
Oct 11, 2011, 10:24:47 AM10/11/11
to mootool...@googlegroups.com
Welcome to the group! One of the first things you'll learn is to utilize JSFiddle (http://jsfiddle.net/). It's a lovely utility that will allow us to play along with your code to try and resolve the issue you're having. Create a fiddle of your code here and then post us the link.

Thanks,
~Philip

t.patrick.welborn

unread,
Oct 12, 2011, 9:56:28 AM10/12/11
to MooTools Users
For sake of timeliness I used an ExternalInterface communication
method that was JS native, not MooTools. I will have to spend some
more time with this to figure out how to use Swiff more accurately.
Definitely needs to be more documentation on how to use Swiff inside a
custom-defined Class. Thanks!
Reply all
Reply to author
Forward
0 new messages