Touch-Bedienung in Edge Animate auf Stage Bereich beschränken

Hallo :-)
Ich habe mit Edge Animate eine Animation erstellt, die auf Toucheingabe über die Funktionen touchstart und touchmove reagiert.
$(document).bind("touchmove", function(e) { ...
Danach habe ich sie in Dreamweaver in eine html Seite eingebaut.
(über "Publish: Web" aus Edge Animate exportiert)
Funktioniert auch alles, allerdings reagiert die Animation nun immer auf Touch Gesten, auch wenn sie im Bereich der html Seite außerhalb der eigentlichen Edge Animation stattfinden.
Wie kann ich das blockieren? Ich möchte also, dass die Animation nur reagiert, wenn ich den Bildschirm innerhalb der Stage der Edge Animation berühre, nicht außerhalb.
Ich hoffe, dass mir jemand dabei helfen kann...
Viele Grüße, Carsten.

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]>

Similar Messages

Brauche Hilfe bei Touch-Aktion in Edge Animate

Hallo,
ich bräuchte Hilfe beim Bau einer Aktion für eine App (DPS)
Hier kurz ein Beispiel:
Ich habe ein Edge Animate Dokument in das ich 4 Bilder importiert habe.
Später auf dem iPad soll, wenn ich z.B. auf Bild 1 tippe, das Bild abgedunkelt werden und Text erscheinen.
Das Ganze zu bauen ist kein Problem und es funktioniert auch. Doch wenn ich das für alle angelegt habe und beispielsweise auf Bild 1 Tippe
wird die Aktion auch bei den anderen 3 Bildern abgespielt, klar ist ja alles in einer Timeline.
Hat Jemand einen Tipp wie ich es hinbekommen könnte, dass das unabhänging von einander geschieht ohne das ich mehrere Dokumente anlege?
Vielen Dank und schöne Grüße!
Micha

Hast Du in Photoshop den Generator ausprobiert? Der macht auf Basis der Ebenennamen automatisch Exporte und aktualisiert bei allen Änderungen. Man muss nur in den Ebenenname einige Eigenschaften der zu exportierenden Daten integrieren. Dazu im Handbuch nachlesen.

The new Edge Animate 1.5 filters being only a month old (Blur,etc)

Does anyone know when these will work with Foxfire EI, etc.? Thanks so much!

I found the anwser here:
Has the output from Edge Animate been tested to perform well on devices and desktop browsers?
Yes, the animated content created with Edge Animate is designed and tested to work reliably on iOS (iPhone and iPad) and most Android devices. Edge Animate’s stage utilizes WebKit, which means animated content is created on a true browser surface for consistency on WebKit-enabled devices. Also, content produced with Edge Animate has been tested on popular desktop browsers like Firefox, Chrome, Safari and Internet Explorer 9. For older non-HTML5 browsers such as Internet Explorer 6, 7 or 8, Edge Animate has a down-level stage to create fallback versions of your projects.
Please note that performance of animations are based on a number of factors, so it is possible to create content with less than optimal performance.

Integrating WebGL and Edge Animate CC?

Has anyone managed to get a working example of a WebGL demo (like these http://threejs.org/examples/#webgl_particles_random) into an Edge Animate CC Stage?
I'd love to see one if someone has managed it... thanks!

Hi Marie,
I tested this code:
var myElement = sym.$("Rectangle")[0];
var mc = new Hammer(myElement);
mc.on("panleft panright tap press", function(ev) {
console.log("ev.type:", ev.type);
myElement.textContent = ev.type +" gesture detected.";
It returns this (MacBook: latest Mac OS and Safari):
An iPad returns: "panleft gesture detected", "panright gesture detected", "tap gesture detected" and "press gesture detected".
Files: HammerTests.zip - Box
I use this CDN library: hammerjs - cdnjs.com - the missing cdn for javascript and css

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]>

How do you remove a symbol from the stage in Edge animate?

Hello-
I'm wondering how to remove a symbol from the stage in Edge Animate so you can jump to another place in the timeline. In Flash, the symbol was only on the stage for the amount of frames you indicated. Not sure how it works here.
For example, I have 2 buttons on my first screen with some text that animates in. I want the button click to take the user to another section in the timeline or (basically another scene, like in Flash) that contains different content. If I change the visibility the buttons are still there and will ( I assume) create problems when other elements are placed on top.
Or is the only way with code. If that is the case what would that code be?
I would appreciate any help.
Thank you!

What I usually do, is, once you have everything set up in the scene you are done with. highlight it all
right click
group elements in DIV
Now all those items act as 1 group and then you give it a properties name, much like a symbol.
THEN you can refer to that scene name and move it anywhere or hide it and slide in another scene that has the content for that next scene.
basically you take all the elements that make up 1 scene, gruop it up, name it, and then in the code for the button say something like:
on click:
scenename.play(framenumber);
that will then animate that scene according to any animation you gave it, such as moving to the left, off stage. while moving scene 2 that you create into the stage.
or just have something like this hide it
sym.$("scenename").hide();
sym.$("scene2name").show();
but if you do that, make sure in your CompositionReady code you hide all scenes EXCEPT the 1st one, so the user doesnt see them all instanatly anyway.

How do you change the workspace panel color in Edge Animate CC (the stage is OK) to a lighter gray, I have the dark gray now. I have Win 7 Pro SP3?

How do you change the workspace panel color in Edge Animate CC (the stage is OK) to a lighter gray, I have the dark gray now. I have Win 7 Pro SP3?

This is a feature as far as I know.
On Sun, Dec 21, 2014 at 10:32 PM, Conquero <[email protected]>

Edge Animate Stage size in Dreamweaver fluid grid

I have developed an animation and have almost everything scaling and resizing acceptably in a Dreamwaevr template...except the stage.
In Edge animate I have a stage size that is 1212px x 400px. When the animation is viewed on a PC all the dimensions are fine, but when viewed in tablet or mobile phone, the vertical height remains at 400px... which leaves an enormous gap between the bottom of the animation and the next div.
I have set the stage dimensions to %, and have turned on the "link width & height" switch, and the stage still does not respond in vertical height.
How can I get the stage to respond vertically with a fluid grid layout in Dreamweaver?
I also note that every time I open up a previously saved Edge Animate file, the stage automatically opens the file at 550x400px, instead of the correct dimension for that animation, so that I have to then reset the stage size to what is correct for that animation... ..any reason this may be so?
Thanks,
Glen.

Thanks for your reply. You're right about most people not resizing their viewport during a session, but unfortunately the problem exists whether the screen is being resized or not. Refreshing the screen doesn't solve the problem.
The width of the div adjusts to the width of the screen as expected and the Edge Animate composition inside it does too, but the height of the div doesn't adjust. As the animation gets smaller to fit the width, the height of the div that contains it remains the same, leaving empty space at the bottom of the div. What is needed is for the div to scale to fit the page width proportionally. Instead, only the width is adjusting.
So I guess I need to know if there's either a way to force the div to scale proportionally or a way to tell it to adjust to the animation that it contains.

Creating a Down-Level Stage | Learn Edge Animate | Adobe TV

One of the nifty features of Edge Animate is that it recognizes that not all users have a modern browser. In this lesson you will how to accommodate users of older browsers by creating a screenshot of the page and then creating a down-level stage that will appear if, for example, an IE 7 user opens a page containing an Animate composition.
http://adobe.ly/SG429k

Thanks for that. Are you forced into using the PNG format, sometimes it's a larger file size as compared to a jpg.

Can I remove the Edge Animate stage from the body of my HTML but keep the .js file in the head?

Howdy,
I have designed a couple of Edge Animations for a client to insert on a single page of their website.
The client wants to package all .js files as one for the site to reduce the pageload - but if they do that and simply remove the stage elements from this page the animations take over the page where the stages are supposed to be.
I am hoping it is possible to add some logic to the .js file about "if these divs don't exist, do nothing" but I do not have enough coding skill to alter these Edge Animate .js files.
Does anyone have any suggestions?
Thanks!

Hi Sarah,
Thanks for the reply.
What my clients want to accomplish is is to package all the separate .js files for the website into one file, so all the pages load faster.
This includes the Animate.js files which are only to be used for the home page, so of course random animations appear on the rest of the pages which don't have the animate DIVs in them.
I have suggested they package all the .js files EXCEPT the animate.js ones and just load them separately on the page the animations are to appear on.
But they are still wanting to do them all in one package however (!!) so my question is:
Can some code be added to the animate.js files that says something like "if these DIVs are not found, make the animation do nothing"?
It is possible the relevant code cannot be added in which case they will have to do the animate.js files separately, but as they have asked me about it I thought I would ask people in the forum if they knew how to accomplish this.
Cheers,
Jim

Play MP4 with Edge Animate on iOS / iPhone - not working

I have placed an MP4 into my Edge Animate file. When I view the HTML file on the iPhone there is a black box where the video should be.
I have added the TouchStart function to my MP4 on the stage. "sym.$("Ambush_MotionPoster_Web")[0].play();"
I have touch/tapped like crazy. nothing happens.
I can navigate directly to the MP4 in the media folder and it plays fine on the iPhone so I know the iPhone will play the MP4.
I can view it in the Safari browser on the desktop. I have searched the web and forums but no luck.
The Adobe help makes it sound like a cake walk: Edge Animate Help | Add video to animations
Any input would be appreciated.
Thanks.

The patch (EA 2014.1.1) with the fix is live now.
Regards,
Vivekuma
Edge Animate Team

How do I scale an Edge Animate comp afterwards?

Is it possible to scale an Edge Animate composition after you made it?
I made a composition, but I want to rescale the whole thing. I can change the stage values, but still have to resize all the elements. First of all that's a lot of work when you have a lot of elements and second of all the elements don't always keep doing what they're supposed to do for some reason.

moved to the DPS forum....

How do I turn an entire Edge Animate project into a symbol

I have created an Edge Animate project that features a short animated tutorial for our website. Now I realize that I would like to incorporate that project inside a larger project. Is there any way to convert the entire tutorial into a symbol that can be added to the larger project?
Thanks
Paul

Hi, Paul-
You'll need to do a little bit of wrangling to make this happen, but the easiest thing to do is:
Select everything in your elements panel and convert to symbol
Transfer all of your triggers by highlighting them all in your main timeline and cutting (Ctrl/Cmd-X), then:
Open your symbol
Move the playhead to the time location of your first trigger
Paste (Ctrl/Cmd-V)
Transfer all of your timeline-based and stage-based code manually
Hopefully that helps - it's a little bit of a pain if you have a lot of code involved, but if you only have timeline-based things, most can be cut and pasted over.
-Elaine

How do you add Edge Animate to HTML Module using DotNetNuke (DNN)?

First off I'm new to the whole web design/coding/html/css/jquery/etc., and the program Edge Animate is amazing!
I have a site up using DNN and wanted to put what I created on Animate onto one of the pages. I added an HTML module and that's where I'm stuck.
I do not know where to get the complete code so it works, and I do not know where to upload the Animate files. When it comes to creating the thing, I can manage (by reading ALOT), but when it comes to implamenting I am just stumped.
Any idea?
If you need more specific info just give the word, and I'll try my best.
Thanks,
Moses G.

There are four basic steps needed to embed an Edge Animate composition into an existing page:
Publish from Edge Animate. (This creates the necessary files to run the animation. Also, the code referenced in Step 2 and 3 below will be included in the .html file that Animate creates inside the publish/web folder, which you can just copy/paste.)
Add a <div> to the page that has the ID of Stage and the correct class name for your stage (i.e. the "Composition ID" for your project in Animate).
For example:
<div id="Stage" class="EDGE-1655086"></div>
Include the Preload .js file and the default style in your page's header, within Edge Runtime HTML comments.
For example:

<script type="text/javascript" charset="utf-8" src="test-1655086_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-1655086 { display:none; }
</style>

Make sure to upload all of the include files to your server in the appropriate relative locations. This includes the _edge.js files, _edgeActions.js file, _edgePreload.js file, the edge_includes folder and its contents, any other files/folders created inside the "publish/web" folder when you publish from Edge Animate (e.g. "images" folder, etc.).
Here is a very simple example that will hopefully help to clarify:
http://thetraininggrounds.com/An-test/Insert-An-into-existing-page.html
As a reference, these are all of the files involved in the example:
An-test/Insert-An-into-existing-page.html (the existing HTML page)
An-test/ball-bouncing-banner_edge.js
An-test/ball-bouncing-banner_edgeActions.js
An-test/ball-bouncing-banner_edgePreload.js
An-test/edge_includes/edge.1.0.0.min.js
An-test/edge_includes/jquery.easing.1.3.js
An-test/edge_includes/jquery-1.7.1.min.js
An-test/edge_includes/json2_min.js
Thanks
Harshit yadav

How do you upload Edge Animate on Adobe CDN?

How do you upload Edge Animate on Adobe CDN?

Hi Darrell,
I'm using an exciting new software package called www.webflow.com and I asked the following question in a forum:
Hi,
How would you add this Edge Animate to Webflow? Is it possible?http://html.adobe.com/edge/animate/showcase/interactive-marquee/11
The files are available here: http://html.adobe.com/edge/animate/showcase.html6
Edge Animate gives you a few different option for publishing:
The drop down that you see in the image next to "Chrome Frame Installer" has three options:
Now Prompt
iFrame Prompt
Overlay Prompt
These are the files saved when only "Publish content as static HTML" is checked. See "Publish Settings" image:
Is it possible to add this animation to a Webflow site?
If yes, any suggestions on how would be greatly appreciated.
Thanks,
Todd
Here's Sergie's reply:
Hi @TStanwood, it's possible, but the only way to do it is if you host your files on Adobe CDN or if you host it on your own server and then display an iframe with the index file in Webflow.
That's the way to do it before we allow for hosting of non-image files on Webflow.
After you have them hosted on your own server you can follow these instructions found on the Adobe forums:http://forums.adobe.com/thread/1166851
You'll have to add this to your head code:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="Bannerad_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-160548878 { visibility:hidden; }
    </style>

Replace Bannerad_edgePreload.js with the link to your server and the edge js file.
And in the Webflow add a div block with the class EDGE-160548878 and id stage and the .js file should inject your html animation file into this div block.
<div id="Stage" class="EDGE-160548878">
</div>
I don't have a server to upload the files to. I really don't even know what any of this means.
I'm wondering how and where I can upload the Edge Animate files to and then link to it by following the instructions above.
Any help would be appreciated.
Thanks,
Todd

Touch-Bedienung in Edge Animate auf Stage Bereich beschränken

Similar Messages

Maybe you are looking for