Implement a 360 pano aboard animate

Hi people!

Colleagues made one a pano Pano2Vr 360 and I need to directly implement onboard animate.

The Html syntax to implement a Pano (via Krpano) is very simple:

http://krpano.com/docu/HTML/#embedpano

In my case:

< body >

< script src = "swfobject/swfkrpano.js" > < / script >

< div id = "Pano" style = "height: 100%;" >

< script >

embedpano ({target: 'Pano', xml: "index.xml""});

< /script >

Everything is ok!

But when I try to "translate" this edge code animate, I get this error (in console):

TypeError: 'null' is not an object (assessment 'n.innerHTML = this.getSWFHTML ()')

It's my EdgeCode (in CompositionReady):

$("<link_rel='stylesheet'_type='text/css'_href='style.css'>").appendTo ("#Stage");

() yepnope

{

Nope:]

'swfkrpano.js '.

],

full: init

}

);

function init () {}

embedpano ({target: "Pano", xml:"index.xml"});})

}

style code. CSS:

{#Stage_Pano}

Width: 100%;

height: 100%;

}

Obviously, on the stage, I created an element in the shape of rectangle, called "Pano" (such as a Div)


It seems to me that the parameter target: "Pano" in embedpano() function cannot recognize the Div "Pano" created in step edge? Maybe I have to translate the JQuery object in the Dom object? But how?

Can anyone help?

Here the complete project files:

http://www.terredainventare.it/PanoEdge.zip

Thank YOU in advance for your help!

Davide

Hey, Davide, try this:

Pano var = sym.$("Pano");

embedpano ({target: pano, xml:"index.xml"});})

When I try this with your file, the error disappeared, but I don't see anything happen. Not sure if you are missing the file swf, or something else.

Tags: Edge Animate

Similar Questions

  • spin panorama 360-degree edge animate (was: 360 degree panorama)

    I am trying to create the 360-degree panorama. I have an existing panoramic image done in photoshop that I imported into edge animate.

    I need the image move continuously and to start seamlessly when the animation becomes at the end of the image.

    I tried to set action and label to start playing the animation at the beginning, but he jumps right to the beginning and start playing. I need to make the transition between the end and the beginning of the image transparent. Hope you understand what I mean.

    Help, please.

    You can use the following simple configuration to generate a continuous rotation panorama

    FYI: I used your image for the creation of the demo

    Dropbox - Panorama.zip

    Basically,.

    There is a symbol with overflow set to hidden

    There are two instances of the same image with name inst1, inst2

    inst1 interpolations substantive position of 0 - T dry

    inst1 tweens 'X' value of T-> s T + N (where N is the time to overlap)

    Inst2 tweens 'X' value of T-> T + N dry

    At time T + N, there is a tirgger that restarts the animation

  • Easing in CC function animate like he was aboard animate

    Hi all!

    Onboard, animate, it was so easy to add ease in/out effects to any motion on the timeline. I just selected the desired movement and choose the easing function from the list. I don't find this function in the new version of CC to animate.

    I don't know GSAP, but I do not use it, because it's so tedious to manually add the easing function on each and every keyframe where I want to use a flexible movement.

    Is there a faster way to add easing in CC animate?

    Thank you in advance,

    George

    If you are a classic Tween you can vary the easing in the properties panel, or even go and make a custom acceleration graph. Those who could give him bad performance at the reading, because it is more difficult to convert a complex curve into a series of tweens of Javascript.

    If you do a motion tween, you can double-click the duration in the timeline panel, and you will see the query editor. One of the elements in the query editor is a drop-down list to mitigate. Certain types of fancy quite relaxed in there, and you can make your own. You can tween any independent attribute of other attributes.

  • Create animation online aboard animate (was: convince Linie)

    Hallo,

    ICH habe eine question wie kann ich in edge animate eine Linie/path convince?

    ICH will be mehret Punkte miteinander verbinden, um ein Netzwerk zu create.

    Freue mich über eure Hilfe! :-)

    Here is an example with the canvas. The code is in compositionReady.

    path with canvas.zip - Box

  • Property of greensock TweenMax aboard animate

    I'm trying to change the color of my symbol using TweeMax, but it does not work for me. All other properties work and are tweend correctly except the color. Any ideas? Here is my code:

    () yepnope

    {

    Nope:]

    "greensock/EaselPlugin.min.js,"

    "greensock/plugins/ColorPropsPlugin.min.js,"

    "greensock/plugins/CSSPlugin.min.js,"

    "greensock/easing/EasePack.min.js,"

    "greensock/TweenMax.min.js,"

    ],

    full: init

    }

    );

    function init () {}

    var Rectangle = sym.getSymbol("Rectangle").getSymbolElement ();

    {Rectangle.bind ("MouseOver", Function ()}

    TweenMax.to (Rectangle, 1, {left: "100px +=", color: '0 x 938461', opacity: 0.7, ease:Bounce.easeOut});})

    });

    }

    First of all, I must just say that Jack Doyle and GreenSock team are extreme superheroes. I use their library greensock for many years in Flash (I need to renew my membership Club GreenSock!) and it now used intensively to projects of html (with the standard html, Edge and html5 canvas via EaselJS). That's all just great.

    Peter-backgroundColor does not work on a side of edge, it must be applied to a shape brute div (I think this has something to do with treated Edge how the symbol divs, behind the scenes).

    Here is an example of work, where I separated the tweens, so that a Tween animates the symbol of the mother, and another interpolation anime the backgroundColor of the shape of the child prop. It is a workaround, but it works... and now that I think about it, at this point, you can also apply all your preteens to the purpose of "RectangleShape', rather than break them up in two separate tweens - but I assume that the bottom would still be relevant if you want to more directly control the positioning of the parent symbol.

    And to answer your other q: you cannot tween backgroundColor of a parent symbol that contains the nested children, you have to interpolate individually the backgroundColor of each nested child prop.

    Example:

    www.timjaramillo.com/code/Edge/gsap_color_symbol

    Source:

    www.timjaramillo.com/code/Edge/_source/gsap_color_symbol.zip

    Code Stage.compositionReady:

    () yepnope

    {

    Nope:]

    "greensock/TweenMax.min.js,"

    "greensock/easing/EasePack.min.js,"

    "greensock/plugins/CSSPlugin.min.js,"

    'greensock/plugins/ColorPropsPlugin.min.js '.

    ],

    full: init

    }

    );

    When yepnope has loaded everything run init();

    function init () {}

    var RectangleSymbol = sym.$("RectangleSymbol");

    var RectangleShape = sym.getSymbol("RectangleSymbol").$("RectangleShape");

    {RectangleSymbol.bind ("mouseover", function ()}

    TweenMax.to (RectangleSymbol, 1, {left: "100px +=", opacity: 0.7, ease:Bounce.easeOut});})

    TweenMax.to (RectangleShape, 1, {backgroundColor: "#938461", ease:Bounce.easeOut});})

    });

    }

  • using the event keydown aboard animate (was: keydown event)

    I want to use the keydown event and I used this syntax that works very well:

    $(document) .one ('keydown', {Function

    If (e.which == 32) {}

    Alert ("Something");

    }

    })

    But I wonder why this syntax does not work:

    $("#Stage").on ('keydown', {Function

    If (e.which == 32) {}

    Alert ("Something");

    }

    })

    Thank you.

    KeyDown events are sent only to elements that can receive focus. Default divs do not receive focus. Setting the tabindex on a div property can lead to receive the focus. If you set the same on stage, it should work once the stage has the focus.

    DIA-

  • Is there audio events aboard animate 3.0? -Need to know when an audio file stops

    I'm working on a project where there is an audio playback button.  When the user clicks and audio playback, I want to show a version the button highlighted, but when the audio is finished, I want to emphasize to hide again.

    I did successfully using the library of buzz.js, but I try to use anime new native audio support, and I hope I can do the same thing.  With buzz, I would like to do this...

    ARM.bind ("pause", Function {}

    SYM.$("play_arm").Attr("src","images/play_btn.png");

    });

    ARM.bind ("playing", Function {}

    SYM.$("play_arm").Attr("src","images/stop_btn.png");

    });

    In this case, 'arms' is a variable that contains the audio, and I'm in the binder to the 'pause' and 'pay' events thrown by buzz.

    This syntax does not work for the audio native, so I wonder if there is another way to do this, or if there is no usable event.

    Any suggestions will be greatly appreciated.  Thank you!

    Fred

    I have it.

    Instead of link the action to the event, you add an event listener. Then...

    ARM.bind ("pause", Function {}

    SYM.$("play_arm").Attr("src","images/play_btn.png");

    });

    becomes

    arm.addEventListener ('complete', function() {}

    ...

    });

    You will also notice that I used "completed" instead of "pause".  My audio files are playing throughout of my current project, so 'done' is the best event.  'Break' also triggered at the end, then, really, that you can use.

    Hope this helps someone who has the same problem.  Thank you!

    Fred

  • Spectrum x 360 13: spectrum is x 360 13 support with memory dual channel

    I want to buy the spectrum 360 13 x a few days later.

    I've read the previous post, any set of spectrum x 360 is installed with only 1 on board memory.

    My question is, the Board of Directors on performance memory taken supported dual channel?

    I'll use laptop to play games, even if it is difficult to perform as well as those of office. But it's still a lot of difference between single channel or dual channel.

    Also, I play DiableIII, path of exile or LoL etc...

    Spectrum of HP x 360 13A aboard the single memory slot, they cannot be upgraded.

  • How can I get video mp4 for playing the edge animate .oam on page Muse?

    Ok.  I'm pulling my hair out here...

    I am just placing a file of .oam edge animate with video on a page of Muse. The .oam contains a simple icon (that grows and shrinks slightly in a loop to draw attention) that, when clicked (event "on click") made a video .mp4 appear and start playing. Then the video disappears at the end, leaving the new icon (no controls - it just plays and goes when it's done).

    The animation/video playback works fine in edge animate and animate preview of edge browser but when I place the .oam file in my page of muse, the video does not play. I tried the same file without the event 'on click' where the video plays essentially on its own after a second aboard animate and edge Preview in the browser and even once, it does not read in Muse.

    It's embarrassing and I don't know how to solve the problem.

    Does anyone have any suggestions? My .oam file contains a .mp4 file a.webm file, although this will be part of a stand-alone Museum Kiosk and therefore does not need compatibility .webm.

    I'd appreciate any suggestions really.

    I thank very you much in advance!

    Mason

    HA!

    Doggone it! Somehow, I knew that it would work very well for someone else. This seems to be how these things go, isn't it? Exciting video, huh?

    In any case, I use Safari. I tried the image displayed in preview in the preview of the Muse and then tried in "Preview in browser" and it did not work for me. I just downloaded Chrome and will try to image previewed in there. Perhaps that will work.

    Holy crap!  I literally just released the entire HTML for the site of the Muse and opened it in Safari from there and it worked like a champ!  A problem with the perhaps "Preview in browser"?

    Well, color me happy! Perplexed but happy!

  • Slide show - How to complete the page

    Hi guys, please can someone explain to me how I filled a page and a browser with a slideshow? Can I change the pre-set ones already available Muse or should I create one aboard animate please?  I am eager to have a picture literally cover the totality of the screen no matter what system you are using to open the site.  I'm working on a 27 "Mac monitor, so it is difficult to judge thanks.

    Can you give me dimensions and how I can do this. Very grateful, as always!

    Kind regards

    Robyn

    We have a dedicated thread with an exchange of views on how to implement a slideshow full screen in Muse with living examples - http://forums.adobe.com/thread/1213057...

    Thank you

    Vinayak

  • setChildIndex is overridden by embedded SWF

    Hello all I am trying to embed a SWF file in my project and place buttons of navigation above the SWF file. The SWF file is a 360 panoramic photo and in the past, this has worked fine, but now it seems the SWF is the substitution of my action script and pushing each other to the top layer on my navigation buttons. Here's my action script. Any help would be appreciated.



    Sets the layer to display for the items below

    setChildIndex (cockpitInstructions_mc, numChildren-1);

    setChildIndex (cockpitVideo_mc, numChildren-2);

    setChildIndex (cockpitVideo2_mc, numChildren-3);

    setChildIndex (CockpitHeader_mc, numChildren-4);

    setChildIndex (homeButton1_mc, numChildren-5);

    setChildIndex (infoButton1_mc, numChildren-6);

    Sets below unseen video clips

    cockpitVideo_mc.visible = false;

    cockpitVideo_mc.stop ();

    cockpitVideo2_mc.visible = false;

    cockpitVideo2_mc.stop ();

    Incorporates the pano .swf file

    import flash.net.FileReference;

    var requestVariable = new URLRequest ("test - 01.swf");

    var loaderVariable:Loader = new Loader();

    var booleanVariable:Boolean = false;

    loaderVariable.load (requestVariable);

    addChild (loaderVariable);

    setChildIndex (loaderVariable, numChildren-7);

    Button to return to the movie House

    homeButton1_mc.addEventListener (MouseEvent.CLICK, onhomeButton1Click);

    function onhomeButton1Click(e:MouseEvent):void

    {

    removeChild (homeButton1_mc);

    removeChild (CockpitHeader_mc);

    loaderVariable.unloadAndStop ();

    gotoAndPlay (1);

    }

    Button to play the clip info

    infoButton1_mc.addEventListener (MouseEvent.CLICK, oninfoButton1Click);

    function oninfoButton1Click(e:MouseEvent):void

    {

    cockpitVideo_mc.visible = true;

    cockpitVideo_mc.play ();

    }

    Button to play the second half of the clip information

    cockpitVideo_mc.addEventListener (MouseEvent.CLICK, oncockpitVideoClick);

    function oncockpitVideoClick(e:MouseEvent):void

    {

    cockpitVideo_mc.visible = false;

    cockpitVideo_mc.stop ();

    cockpitVideo2_mc.visible = true;

    cockpitVideo2_mc.play ();

    }

    Deletes the video scene when the user clicks on

    cockpitVideo2_mc.addEventListener (MouseEvent.CLICK, oncockpitVideo2Click);

    function oncockpitVideo2Click(e:MouseEvent):void

    {

    cockpitVideo2_mc.visible = false;

    cockpitVideo2_mc.stop ();

    }

    Timer to delete the video clip instructions

    var minuteTimer:Timer = new Timer (1, 6500);

    minuteTimer.addEventListener (TimerEvent.TIMER_COMPLETE, onTimerComplete);

    minuteTimer.start ();

    function onTimerComplete(event:TimerEvent):void

    {

    removeChild (cockpitInstructions_mc);

    }

    It turns out that it was something in the external SWF files was the substitution of the numbering of the layer. Experimented with different 360 pano software and found this garden Gnome Pano is the only one that worked. Didn't change the setChildIndex lines.

  • Load external images in symbol or rectangle

    Hello

    Is a way to load external images into a symbol or a rectangle?

    Just google this topic and all the results I found looks like no work aboard animate 2014.1.1

    something like $(this.lookupSelector("target")).attr("src","folder/myimg.jpg");

    Loading jquery im - 2.1.1.min.js

    Thank you.

    Ok. If you have a container div, then it's easy. png or jpg or svg extension

    SYM. $('containerDivName') .css ({'background-image': 'url ("images/imageName.png")', 'background-repeat': 'no-repeat'});

  • Height reactivates the overlay in firefox

    I used the following code in my .css file,

    IMG, object, embed, {video

    Max-width: 100%;

    Max-height: 100%;

    }

    This makes the sensible scaling work in Safari, but not in Firefox, and I don't know why. If it helps, you can find my site to the amberdawngraphics.com. Thank you

    That is the problem.  Native dimensions of the object are this:

    width ='1220"height ="970"(pixels)


    A view of average office like mine is 1280 x 768 (enlarged).

    For your object to "mount" my width of the viewport, the object should resize proportionally to 1280 x 1018, who cannot possibly adapt at the height of my screen without using the vertical scroll bar of the browser.  Short of resizing the height of your step aboard animate, I think you have to live with that.

    Nancy O.

  • Detect the direction of the mouse

    Hello

    , I want to acknowledge the sense of the movement of the mouse. If the mouse move tpwards the left or the right of its position to perceive, I would like to detect it. Anyway is to identify these movements. In fact, I implement a 360-degree image rotation. This means that, if the mouse moves along the left side of its current position, then the image should move along its left side, otherwise it must move along the right side. For example, see this site: http://www.yofla.com/flash/3d-rotate/

    Best regards, Sreelash

    You must compare the mouse position previous to the current position every time the mouse moves.  The previous position would be the current position after each adjustment.  In the examples that you have pointed out, when you press down (onMouseDown) with the mouse you would set the previous position and the current position as a same value.  Then, when you move the mouse (onMouseMove), the less common of the previous difference will tell you the direction the MouseMove (positive is to the right, negative to the left).  After determining that you assign the previous value of the current value.

  • 360 ° rotating canvas... Adobe animate

    to see this feature announced for Adobe animate... early 2016, is it already to animate? or is there anywhere an example how this can be done?

    GRT gross mar5el

    Rotate 3D movieclips is another topic to 360 degrees of rotation of the scene. 3D rotations work only for documents of the ActionScript 3, if you use HTML5, you see these things grayed out.

Maybe you are looking for