Drag and drop in Edge Animate (was: drag and drop)

hello friends
I have a drag and drop on edge,
I need that when you release the ad in the wrong place, my return to the starting point

You can refer to Marie's article on the same - Drag and Drop in Edge Animate l EdgeHero.
-Dharmendra

Similar Messages

360 degree panorama spin in Edge Animate (was: 360 degree panorama )

I am trying to create 360 degree panorama. I've got an existing panoramic image made in photoshop which I imported into edge animate.
I need the image move continuously and start over at the beginning seamlessly when the animation gets to the end of the image.
I tried setting action and label to start playing the animation from the beginning but it just jumps back to the beginning and start playing. I need to make the transition between the end and the beginning of the image seamless. Hope you understand what I mean.
Please help.

You can use the following simple setup to generate a continuous rotating panorama
FYI: I have used your image for creating 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 tweens background position from 0- T secs
inst1 tweens 'X' value from T -> T+N secs ( Where N is the overlap time)
inst2 tweens 'X' value from T -> T+N secs
At T+N time, there is a tirgger which restarts the animation

Unable to see montion paths in Edge Animate (was: motion paths)

my motion path is not showing up! what am I doing wrong?? I am following every step in the Fundamentals of Edge Animate Video precisely... but the path does not show up... my object is selected, the toggle pin is moved, the "use motion paths" option is selected, I moved the object, but no path shows up! HELP!

Hi,
Please, look at the Edge lesson:
This is free and upgraded (Edge Animate CC 2014 1.1 or Edge 5.0.1).
If you don't succeed, you can post your file.

Edit HTML in Edge Animate (Was: Some help, please)

Hello I am a edge animate user and I am wondering if it's possible to make it possible just to edit the text and things on the html file it self so that its user friendly for people who don't have edge animate and things, please?

ow yea, you need to edit the js files that come with the project than, but its not easy for ppl to edit everything

Unable to download trial version of Edge Animate (was: trial version)

i cannot download the trial version of adobe edge. anyone else know why?

thanks devendra but i get a message that says:
We are currently experiencing some issues, please try again later. If the problem persists, contact customer support.

Fancybox iframe in Edge Animate - Not showing correct height and width

Hi All,
Can someone please provide advice or a solution to this issue.
I have been trying to use the Fancybox.js in Edge Animate to call an iframe (as a lightbox pop up).
However when I try this it doesn't show the correct height and width properties - even though I am setting them.
When I test this on my hard drive it works fine in Chrome and Firefox. However when tried online on a test server I get a slim pop up that hasn't set the height properly.
Could this be because the iframe is pre-loading the composition/html page first before setting the size??
Please help
CODE USED:
$.fancybox.open(
type: 'iframe',
autoScale : 'false',
height: '600',
widht: '600',
href : 'website composition link.html',
padding : 0
Other references: http://businessanywhere.biz/blog/2013/03/adding-a-lightbox-to-edge-animate/
Cheers,
Jason

HI Darmendra,
Thank you for your reply to this.
I worked out what the problem was - my external composition that was created Edge Animate was centred both horizontally and vertically.
This was created the problem. When I took this off the fancy box worked well.
Cheers,
Jason

EDGE ANIMATE CC (2014) : Missing Code Snippets sidebar - WHY!?!?!

I just updated today, and now a project I had been working on for weeks (my first real project) won't open in CC anymore. The only reason I wanted to open it back up in CC - NOT Adobe Edge Animate CC (2014), was because this updated Edge Animate IS MISSING THE CODE SNIPPET SIDEBAR!! WHY!! WHY!! WHY!! It's a little hard to follow along with tutorials you have been using when they insert snippets from the sidebar and suddenly you don't have one anymore!
I have rebuilt permissions and restarted hoping that would fix the issue but it has not. If I can't get this project to pen in CC, can someone tell me how to trick CC into opening it again? Byt he Way -- the old version of Edge Animate was AUTOMATICALLY UNINSTALLED with this update. Also very frustrating!! I had to go to my could menu and download CC (3.0) again.

OK - Possibly Good News... I talked to Adobe Tech Support. I am able to download a previous version of the Edge Animate CC by choosing PREVIOUS VERSION under the FIND NEW APPS section of the Creative Cloud Desktop app. This is a new feature of CC. Thankfully. I can install CC and then do as hemanth kumar r suggested and edit the _edge.js file to allow 3.0 to open the file.
Thanks for all of the help. Sorry for the frustration in MY TYPING . I'll reply if that all works.

Import Edge Animate compositions into In Design

Hi, how do I import Edge Animate compositions into In Design..? Cheers
p.s. perhaps i should have added: my main interest is to have the animate project imported to have it load in the adobe viewer for digital publishing. up until now I'd linked the html overlay from the standard Edge app. One of the things that caught my eye under the features for Edge animate was:
Digital Publishing support
Import Edge Animate compositions into the Adobe Digital Publishing Suite with Adobe InDesign CS6, or into Apple iBooks Author.
How I proceed: as per the help/resources:
Publish as Animate Deployment Package (.oam)
Select this export option to create a package file of your project for use in other Adobe tools. The following tools support Animate Deployment Packages: Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver CS6, and Muse.
Select File > Publish Settings.
In the Publish Settings dialog box, make sure Animate Deployment Package is selected as the publish target.
Note or change the target directory.
(Optional) Specify a poster image.
Click Save to save the publish settings, or click Publish.
but all i get is
Content generation error.
[Error: Invalid URL for Web Content Overlay]

Here is a walkthrough on Adobe Dev Connectings - http://www.adobemarketing.com/devnet/digitalpublishingsuite/articles/enhancing-your-dps-fo lios-with-edge-animations.html
The only difference in that walthrough is the reference to in the Publish Settings: in Adobe Edge Animate v1, its now called 'Animate Deployment Package' instead of 'Indesign/DPS'.
Darrell

Edge Animate is a bit fragile

I have been working on a project for quite some time involving a jpeg. A client wanted me to flip the picture so the font pops up better. Upon removing the picture from the An folder (where the links are) and then getting it back there, I can no longer open the project. Issue after issue has led me to report or post here. Every time there's something to edit, there's 80% chance of something going wrong. Any help on this would be much appreciated.

1) Yes I've had to swap the original image with the new one overwriting it.
2) Yes that would be the images folder inside the composition.
I'll try to setup the scenario so you can follow:
IMG1(original image), IMG2(new image)
- I swapped IMG1 with IMG2 while Edge Animate was open (IMG1 was overwritten by IMG2 because I used the same filename) . When that happens, usually Edge animate would update the image and prompt me that it was changed. It did prompt me but instead of updating the image showing inside the canvas, it said "Error loading image".
- So I then turned off Edge Animate and deleted IMG2.
- Brought back IMG2 in the same composition folder. This time, when I try opening my comp it would say "An error occured. Please save your work and restart Edge Animate".
- Even after deleting IMG2 and opening the composition it says the same thing. It would seem my file has been corrupted

I am not able to do drag and drop to edge animate?

Help please!
I've tried to make me based on some tutorials but it does not works.

I'm using Adobe Edge Animate CC 2014 *
I've tried the following:
1- I downloaded jquery-ui-1.11.4.custom the official site,
2 Adcionei the two mentioned files "jquery and jquery-ui" in my folder
project in EDGE ANIMATE,
3- Adcionei within the stage in "creationComplete" the following code:
yepnope ({name: ['jquery-ui-1.11.4.custom.min.js'], complete: init});
function init () {
sym $ ('object') draggable ()..;
4- I did it by following the step by step of a tutorial video on the internet, in video this procedure should be sufficient to make the "object" one draggable object.

Create an image scroller with swipe&drag in Edge Animate

Hi folks!
I'm trying to create a image scroller like this one http://www.awwwards.com/demo/touchSwipe-gallery-demo.html.
For the Swipe, I use the wonderful JQuery Plugin TouchSwipe http://labs.rampinteractive.co.uk/touchSwipe/demos/, but for the image sliding I would use the Adobe Edge Animate Timeline.
I know that I can use the Swipe events in Edge Animate to make start or reverse the timeline with pictures, but I would also make working an intermediate "dragging".
My problem, in fact, is: how can I make that - if I've only begun to swipe and I move the finger to left or right without releasing it - my timeline "drag" (or scrubs) frame by frame - like in the example above - until I release the finger?
Many thanks in advance!
Davide

Hi Elaine!
First, thanks for your prompt answer!
I read the link you gave me: in fact, I was aware - also thanks to Old Tim's posts - about how to create a "scrubber" in Edge Animate, starting from formulas like:
Translation = (positionOfScrubber/WidthOfScrubbing)*timeline;
My problem now is - I fear - more subtle: I can swipe left-right a set of pictures, I can "scrub" a timeline (using for example JqueryUI for the dragging), but I don't know how to put together the swiping and the dragging.
I would that - like in the example from my first post - if, e.g., I completed the swipe left, my timeline would play the animation that shows the pic moving to the left but, if I didn't complete the swiping and I begun dragging to the left, the animation would move with my dragging-finger (the "scrubbing")...
I know is very subtle, but it's how the gallery scrollers works on web and app in mobile devices...
Many thanks for your attention!
Davide

Edge animate - drag on touch devices

Hi there, I hope someone maybe able to help with some issues I have with my experiments with 'Drag and Drop' on touch devices.
I am using Edge Animate CC 2014.1 (Not sure if this is part of the problem)
Using 'Touch Punch' I am able to drag and drop objects on the stage (following the Paul Trani tutorial), but annoyingly you have to tap the item first on the touch screen device before you can drag it.
Can anyone tell me why and how I might be able to get it to drag straight away without having to do that initial touch? It works fine on desktop - the problem is just with touch screens.
Many thanks in advance

So I guess this must be a server issue since as you can see with the link I provided earlier that it works as expected. The file is also on edgeheroo.com and works there as well.So, I am not sure what the problem is, but you might want to ask your hosting provider what server setting should be changed in order for jQuerry-ui to work. Though frankly I am really mystified about it because I can't even imagine what server setting would prevent it to work unless it is a matter of not reading cdn files. I cannot remember how the scripts were loaded in this file. If they point to cdn then, try to include animate and the plugins locally instead of cdn and see if it makes a difference.
On Wed, Jan 21, 2015 at 5:00 AM, muddypub <[email protected]>

Help with jQuery and Edge Animate

Hello there. I am new to Adobe Edge Animate and have had a lot of trouble loading my jQuery into the project for drag and drop features. Do you have any recommendations, suggestions, tutoring? I am in Upstate New York.
Many thanks!

Thank you, thank you, thank you for all of your help so far. It took me a while to figure out what the error was that I was having. Unfortunately, I know the error but not the cause. The file you sent from the dropbox did not work, but I had a few other samples, one from your website, and one from Lynda.com. I assumed the jQuery library was not loading properly-
I went back and forth to the different Animate project folders, and by comparing those that worked with those that didn't, I was able to copy the jQuery libraries and place them in the correct location- until I got it right. So, I was able to continue with the Draggable feature, but I am not sure why the files were not adding to the right folders- I will have to continue to practice so I don't have to duplicate a folder and project to start out right.
The files I moved were:
In the JS folder:
and the Edge Includes folder:
For some reason, the jqueery-2.0.3.min.js needed to be there as well, and I think this might have been the error.
Anyway...
So I have the Draggable working, here is a sample:
http://mrteelin.com/Superhero2/Superhero2.html
Before I moved on to the drop feature, I wanted to see if the drag would work on an iPad. I am going to be creating personalized refrigerator magnets for students for the iPad, so just draggable to start will be helpful. I have added the touch-punch and then added the draggable code to the starttouch tab, but it isn't working.
Here is a .zip if anyone is brave enough to keep helping!
http://mrteelin.com/Superhero.zip
Thanks again!

Scrubbing a wheel and turning a pot with Edge Animate!

Hi all!
With the wonderful Edge Animate and the external JQuery Ui library (for the drag), I've made a wheel that you can move with a scrubber-bar.
The original, super-useful code from wich I started is made by JackPister in this thread: http://forums.adobe.com/message/4752554#4752554.
I've used Jquery Ui for dragging so I've simplified the code.
Here's a prototype: http://www.terredainventare.it/edge/wheel/Wheel.html.
Here are the Edge project files: http://www.terredainventare.it/edge/wheel/Wheel.zip
Now, (almost) all is working, but I have two question for the Forum readers and the Edge Animate experts and staff:
1) do you see that when I hover with the mouse on the scrubber, the wheel moves? Why this?
2) What if I would (and I want!) build a circular scrubber that moves together with the wheel? I'm more explicit with these picture. It would be like a pot that you move dragging the handle!!
Many thanks for your help!!!
Davide

Thanks for you quick feedback, Jack!
1) Yes, your/Darrel's solution it's sure more elegant but I need to use JQuery Ui library so I can use the handle-option to build the handle of the pot.... Any hint about the use of JQuery Ui for dragging without this tedious "over" effetct?
2) Here http://threedubmedia.com/code/event/drag I've found this code:
<script type="text/javascript">
jQuery(function($){
   $('.drag')
      .drag('start',function( ev, dd ){
         if ( !$.data( this, 'circle' ) )
            $.data( this, 'circle', {
               radius: 160,
               centerX: dd.originalX + 160 + 30,
               centerY: dd.originalY + 30
      .drag(function( ev, dd ){
         var data = $.data( this, 'circle' ),
         angle = Math.atan2( ev.pageX - data.centerX, ev.pageY - data.centerY );
         $( this ).css({
            top: data.centerY + Math.cos( angle ) * data.radius - 30,
            left: data.centerX + Math.sin( angle ) * data.radius - 30
</script>
<h1>Circular Drag Demo</h1>
<p>Drag the boxes around the page, they only move along a circular path.</p>
<div class="drag" style="left:60px;">•</div>
<div class="drag" style="left:170px;">•</div>
<div class="drag" style="left:280px;">•</div>
<style type="text/css">
body {
   background: #FFF url("http://threedubmedia.com/inc/img/circles.gif") no-repeat 0px 0px;
.drag {
   position: absolute;
   border: 1px solid #89B;
   background: #BCE;
   height: 58px;
   width: 58px;
   top: 180px;
   cursor: move;
   text-align: center;
   font: 24px/62px "Courier New", Courier, monospace;
   filter: alpha(opacity=75);
   -moz-opacity: 0.75;
   opacity: 0.75;
</style>
Do you think can be useful?
Many many thanks!!!
Davide

How do I include a drop shadow effect when I import an Illustrator vector into Edge Animate?

How do I include a drop shadow effect when I import an Illustrator vector into Edge Animate? It should be noted that I also have another effect (an extrude & bevel) applied which does copy over when I paste (or create an SVG and import) into Edge Animate. Any thoughts on why the drop shadow disappears but the extrude & bevel carries over?

Which version of Illustrator are you using?
In earlier versions of Illustrator it is not that easy to apply drop shadows with spot colours.
Another reason why it's always important to tell which version of AI … well …

Drag and drop in Edge Animate (was: drag and drop)

Similar Messages

Maybe you are looking for