|
JavaScript - How Can I Do With Adobe Edge??
I am a newbie in terms of website design and animation.
I want to do a animation that can random show my image when I click the mouse . And I use Adobe Edge to do my animation. I used the javascript of Math.random() but it doesn't work. I think this methods is wrong. Can anyone give me some help??? Thank you. Similar TutorialsOk... so I just downloaded the new Adobe Edge program for creating HTML5 websites. I was trying out a proof of concept for something I wanted to do on a site with a simple circle shape (will eventually be a soccer ball) rolling across the screen when clicked. The animation looks great, but it happens when the page loads, not when the image is clicked. Any suggestions?? Thanks! My HTML Code: <!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
<script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="ball_edge.js"></script>
<link rel="stylesheet" href="ball_edge.css"/>
<!--Adobe Edge Runtime End-->
</head><body>
<div id="stage" class="symbol_stage">
</div>
</body>
</html>
ball_edge.css Code: /**
* Adobe Edge(TM): Generated CSS
* Do not edit this file.
*/
#stage {
height: 560px;
background-color: rgba(255,255,255,1);
width: 931px;
}
#RoundRect1 {
background-color: rgba(0,0,0,1.00);
-webkit-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
-moz-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
-ms-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
-o-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
}
.default_end_Default_Timeline #RoundRect1 {
}
ball_edge.js Code: /**
* Adobe Helium: symbol definitions
*/
window.symbols = {
"stage": {
version: "0.1",
baseState: "Base State",
initialState: "Base State",
parameters: {
},
content: {
dom: [
{
id:'RoundRect1',
type:'rect',
rect:[234,175,81,82],
borderRadius:[10,10,10,10],
fill:['rgba(0,0,0,1.00)'],
stroke:[0,"rgba(0,0,0,1)","none"],
},
],
symbolInstances: [
],
},
states: {
"Base State": {
"#stage": [
["style", "height", '560px'],
["color", "background-color", 'rgba(255,255,255,1)'],
["style", "width", '931px']
],
"#RoundRect1": [
["color", "background-color", 'rgba(0,0,0,1.00)'],
["style", "border-bottom-left-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["transform", "translateX", '18.9112px'],
["style", "border-bottom-right-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["style", "border-top-left-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["style", "border-top-right-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["transform", "translateY", '69.673px'],
["transform", "rotateZ", '0deg']
]
}
},
actions: {
},
bindings: [
],
timelines: {
"Default Timeline": {
fromState: "Base State",
toState: "",
duration: 1000,
timeline: [
{ id: "eid32", tween: [ "style", "#RoundRect1", "border-bottom-right-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" },
{ id: "eid30", tween: [ "style", "#RoundRect1", "border-top-left-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" },
{ id: "eid18", tween: [ "transform", "#RoundRect1", "rotateZ", '360deg', { valueTemplate: undefined, fromValue: '0deg'}], position: 0, duration: 1000, easing: "linear" },
{ id: "eid31", tween: [ "style", "#RoundRect1", "border-top-right-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" },
{ id: "eid17", tween: [ "transform", "#RoundRect1", "translateX", '511.599px', { valueTemplate: undefined, fromValue: '18.9112px'}], position: 0, duration: 1000, easing: "easeInCirc" },
{ id: "eid29", tween: [ "style", "#RoundRect1", "border-bottom-left-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" }]
}
},
}};
/**
* Adobe Edge DOM Ready Event Handler
*/
$(window).ready(function() {
$.Edge.initialize(symbols);
});
/**
* Adobe Edge Timeline Launch
*/
$(window).load(function() {
$.Edge.play();
});
I found a tutorial to create the HTML5 flip book. I combined three Edge "projects" with the HTML5 flip book. http://www.schrene.web44.net/Easter-2012/Book-A.html I tried to adjust the z-index so that the butterfly would fly out of the book but nothing I tried worked.. Also I wanted the animations to start with each flip of the page... I tried but I don't know enough javaScript to figure it out.... So I created a "cheesy" work around... A very large div on the right side of the page that has the animations in a mouse out event. Here is the page flip js: Code:
(function() {
// Dimensions of the whole book
var BOOK_WIDTH = 880;
var BOOK_HEIGHT = 460;
// Dimensions of one page in the book
var PAGE_WIDTH = 428;
var PAGE_HEIGHT = 450;
// Vertical spacing between the top edge of the book and the papers
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
// The canvas size equals to the book dimensions + this padding
var CANVAS_PADDING = 30;
var page = 0;
var canvas = document.getElementById( "pageflip-canvas" );
var context = canvas.getContext( "2d" );
var mouse = { x: 0, y: 0 };
var flips = [];
var book = document.getElementById( "book" );
// List of all the page elements in the DOM
var pages = book.getElementsByTagName( "section" );
// Organize the depth of our pages and create the flip definitions
for( var i = 0, len = pages.length; i < len; i++ ) {
pages[i].style.zIndex = len - i;
flips.push( {
// Current progress of the flip (left -1 to right +1)
progress: 1,
// The target value towards which progress is always moving
target: 1,
// The page DOM element related to this flip
page: pages[i],
// True while the page is being dragged
dragging: false
} );
}
// Resize the canvas to match the book size
canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
// Offset the canvas so that it's padding is evenly spread around the book
canvas.style.top = -CANVAS_PADDING + "px";
canvas.style.left = -CANVAS_PADDING + "px";
// Render the page flip 60 times a second
setInterval( render, 1000 / 60 );
document.addEventListener( "mousemove", mouseMoveHandler, true );
document.addEventListener( "mousedown", mouseDownHandler, true );
document.addEventListener( "mouseup", mouseUpHandler, false );
function mouseMoveHandler( event ) {
// Offset mouse position so that the top of the spine is 0,0
mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
mouse.y = event.clientY - book.offsetTop;
}
function mouseDownHandler( event ) {
// Make sure the mouse pointer is inside of the book
if (Math.abs(mouse.x) < PAGE_WIDTH) {
if (mouse.x < 0 && (page - 1) >= 0) {
// We are on the left side, drag the previous page
flips[page - 1].dragging = true;
selPage=page-1;
}
else if (mouse.x > 0 && (page + 1) < flips.length) {
// We are on the right side, drag the current page
flips[page].dragging = true;
selPage=page;
}
}
// Prevents the text selection
event.preventDefault();
}
function mouseUpHandler( event ) {
for( var i = 0; i < flips.length; i++ ) {
// If this flip was being dragged, animate to its destination
if( flips[i].dragging ) {
// Figure out which page we should navigate to
if( mouse.x < 0 ) {
flips[i].target = -1;
if (selPage == page) page = Math.min( page + 1, flips.length );
}
else {
flips[i].target = 1;
if (selPage != page ) page = Math.max( page - 1, 0 );
}
}
flips[i].dragging = false;
}
}
function render() {
context.clearRect( 0, 0, canvas.width, canvas.height );
for (var i = 0; i < flips.length; i++) {
var flip = flips[i];
if( flip.dragging ) {
flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
}
flip.progress += ( flip.target - flip.progress ) * 0.2;
// If the flip is being dragged or is somewhere in the middle of the book, render it
if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
drawFlip( flip );
}
}
}
function drawFlip( flip ) {
// Strength of the fold is strongest in the middle of the book
var strength = 1 - Math.abs( flip.progress );
if (strength < 0.01) strength=0.01;
// Width of the folded paper
var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
// X position of the folded paper
var foldX = PAGE_WIDTH * flip.progress + foldWidth;
// How far the page should outdent vertically due to perspective
var verticalOutdent = 20 * strength;
// The maximum width of the left and right side shadows
var paperShadowWidth = ( PAGE_WIDTH ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
var rightShadowWidth = ( PAGE_WIDTH ) * Math.max( Math.min( strength, 0.5 ), 0 );
var leftShadowWidth = ( PAGE_WIDTH ) * Math.max( Math.min( strength, 0.5 ), 0 );
// Change page element width to match the x position of the fold
flip.page.style.width = Math.max(foldX, 0) + "px";
context.save();
context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
// Draw a sharp shadow on the left side of the page
context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
context.lineWidth = 30 * strength;
context.beginPath();
context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
context.stroke();
// Right side drop shadow
var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');
context.fillStyle = rightShadowGradient;
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX + rightShadowWidth, 0);
context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
context.lineTo(foldX, PAGE_HEIGHT);
context.fill();
// Left side drop shadow
var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');
context.fillStyle = leftShadowGradient;
context.beginPath();
context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
context.lineTo(foldX - foldWidth, 0);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
context.fill();
// Gradient applied to the folded paper (highlights & shadows)
var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
foldGradient.addColorStop(0.35, '#fafafa');
foldGradient.addColorStop(0.73, '#eeeeee');
foldGradient.addColorStop(0.9, '#fafafa');
foldGradient.addColorStop(1.0, '#e2e2e2');
context.fillStyle = foldGradient;
context.strokeStyle = 'rgba(0,0,0,0.06)';
context.lineWidth = 0.5;
// Draw the folded piece of paper
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX, PAGE_HEIGHT);
context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
context.lineTo(foldX - foldWidth, -verticalOutdent);
context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
context.fill();
context.stroke();
context.restore();
}
})();
Here is the js for activating the Edge animations: Code: <script>
function playAnim1(){
var comp = $.Edge.getComposition("page1");
var stage = comp.getStage();
stage.play("play1");
}
$(document).ready(function(){
setTimeout(playAnim1, 1000);
});
function playAnim2(){
var comp = $.Edge.getComposition("page2");
var stage = comp.getStage();
stage.play("play2");
}
$(document).ready(function(){
setTimeout(playAnim2, 1000);
});
function playAnim3(){
var comp = $.Edge.getComposition("page3");
var stage = comp.getStage();
stage.play("play3");
}
$(document).ready(function(){
setTimeout(playAnim3, 1000);
});
</script>
Not sure if the things I want to accomplish with this are even possible??? If anybody has any help or advice I would greatly appreciate it. Hiya, Ive been getting a form together that tallies billable parts for a service call. Each line has a quantity and a price and a subtotal. I have a grand total at the bottom that sums the subtotals. Everything is working fine, but I have a combo box that chooses whether the subtotal should zero out the field. So I would select Yes/No in the dropdown and it should change the subtotal to zero. That part is not working. Im using the following code which works without the Yes/No dropdown. Code: var L1 = "Cost.0"; var L2 = "Quantity.0";
var sum = 0;
sum = this.getField(L1).value * this.getField(L2).value;
f = this.getField("SubPrice0");
f.value = sum;
This is what I am trying and cant get to work Code: var L1 = "Cost.0"; var L2 = "Quantity.0";
var sum = 0;
sum = this.getField(L1).value * this.getField(L2).value;
if (this.getField("Bill0") = "Yes")
{
f = this.getField("SubPrice0");
f.value = sum;
}
else
{
f = this.getField("SubPrice0");
f.value = 0;
}
Output in the combo box is Yes/No respectively. Any help would be appreciated. Sorry, its probably an easy thing that Im missing. Hello, I'm writing a web app to generate labels using user submitted data with Adobe Illustrator. I am editing the contents on a text frame in Illustrator using a JavaScript file. My method is as follows: Code: changeLayer = doc.layers.getByName(textKeys[t]); changeLayer.textFrames.getByName(textKeys[t]).wrapInside=true; changeLayer.textFrames.getByName(textKeys[t]).contents = textArray[textKeys[t]]; Basically, I set wrapInside to true and then I replace the contents of the Text Frame with a String. However, rather than wrapping the text as desired, Illustrator prints it all on one line and expands the size of the Text Frame (and Layer) to fit the text on one line. Even when I explicitly set the width and height of the frame in the script, it just shrinks the text to fit on one line in the frame, rather than wrapping it. If I explicitly set the font size it then expands the frame again, but only on one line. Any ideas?? Thanks in advance. I'm receiving the following errors: line 6 Expected an element name[xml] line 17 the input ended before all started tags were ended. last tag started was 'script'[xml] Code:
<script type="text/javascript">
var camp = xfa.resolveNodes("camp[*]");
var total = 0;
for (var i=0; i <= camp.length-1; i++) {
if (camp.item(i).isNull) {
total = total;
}
else {
total = total + 30;
}
}
this.rawValue = total;
</script>
I've got next to zero experience with javascript so not even sure what I should be looking to fix...any help is appreciated, if I need to answer something I missed, just let me know. Hello everyone, I was wanting to know how you add links to Adobe Lightroom gallery photos? Here is the xml gallery code I am trying to add links to: <?xml version="1.0" encoding="UTF-8"?> <simpleviewerGallery maxImageWidth="1024" maxImageHeight="1024" textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="1" stagePadding="40" thumbnailColumns="2" thumbnailRows="3" navPosition="left" title="" enableRightClickOpen="true" backgroundImagePath="" imagePath="images/" thumbPath="thumb/"> <image> <filename>1.jpg</filename> <caption></caption> </image> <image> <filename>2.jpg</filename> <caption></caption> </image> <image> <filename>3.jpg</filename> <caption></caption> </image> <image> <filename>4.jpg</filename> <caption></caption> </image> <image> <filename>5.jpg</filename> <caption></caption> </image> <image> <filename>6.jpg</filename> <caption></caption> </image> <image> <filename>7.jpg</filename> <caption></caption> </image> <image> <filename>8.jpg</filename> <caption></caption> </image> <image> <filename>9.jpg</filename> <caption></caption> </image> </simpleviewerGallery> I have Adobe Lightroom 3. So far browsing through various tutorials and help notes I have not found a way to do this. However, I am hoping there is in fact a way to do this. Here is the actual flash simpleviewer gallery uploaded I have uploaded for a visual example. http://www.iandmyself.me I would simply like to add links to the photos once they are clicked. Hello - I am new to creating dynamic stamps in Adobe, but what I have at the moment is the following code pulling in the date automatcially for me: Code: event.value = (new Date()).toString();
AFDate_FormatEx("mm/dd/yy");
This is working great. Now what I need to do is put a set of initials in front of the date it is pulling in. And I have been successful with several sets of initials. Such as: Code: event.value = (new Date()).toString();
AFDate_FormatEx("BS mm/dd/yy");
But when I enter an "M" or "H", the dynamic stamp pulls in the current hour for H and the current minute for M. So I am wondering if there is another code I can implant within the dynamic stamp to put the initials right before the date?? Any help would be appreciated. Thanks, Brandy Hi guys how is everybody doing today? Let me get right to the point. I have a 28 page PDF document. It is the paperwork for an eviction in Orange County Fl. My goal is change it to a PDF file that will ask pertinent information and then use that info to fill out the forms and print required pages. An expert coder on the Adobe site said this is not as simple as it sounds the offered to do it for 50 bucks. I dont see why this would be so complicated. Code: I used to know a little bit about HTML and PHP. This process would seem very straightforward if it was one of those codes. This is not the correct code I know but it would go something like this: I would create the very first initiation page this page would ask all the pertinent questions to fill out all the variables in the entire document. Plantif First Name =* Pfirstname$ Plantif last name = Plastname$ Plantif Street =....... Ect This page would also have qualifying variables as in: Does the renter owe you rent? If yes are you concerned about receiving owed rent? does the rent or have children? Are they the type of renter that will fight this in court? Has the rental property been damaged? Ect.... these will have yes or no check mark boxes Then the script would do its work and insert the variables. Insert < Pfirstname$ > Insert < Plastname$ > Insert <*** ect....******** > Then according to the qualifying questions it would only print certain page numbers. So in a nutshell variables, insertions, qualifiers, print. This all seems very straightforward. With just a little bit of help I should be able to write it myself don't you think? His response was its not that simple I want to use variables, I know each variable has to have a unique name. Is there anything else more involved about variable script code. What I'm getting at is the code should be about the same for every variable just named differently, correct? I also understand certain structure must be established for this code to work correctly. Once these structures are in place. Isn't most most of remaining work copy, paste, rename and connect it to the existing code structure. The insertion of the variables should be about the same create structure, copy, paste, rename and connect it to the existing code structure. Can someone respond with the basic code structure, variable code, and insertion code for this. If it is not this easy please explain why? I've not done anything with JavaScript before, so I'm not sure what syntax error I'm committing. I have a form made in Acrobat 9 for the Mac, and on it there is a "submit via email" button. I want the resulting email, which will contain the filled out Acrobat form as an attachment, to use field from the form to populate the subject line and the CC address field. I've bodgered together some code from this Acrobat user's post, but in trying to customize it, my script has fallen apart. I think it should be a simple fix, but since I'm so new, I can't see it. My script so far is: Code: // This is the form return e-mail. Its hardcoded
// so that the form is always returned to the same address
// Change address on your form
var cToAddr = "fogharty@xxx.xxx";
// First, get the client CC e-mail address
var cCCAddr = this.getField("Teacheremail").value;
// Set the subject and body text for the e-mail message
var cSubLine = "this.getField("CourseNumber").value;
+ "corrections form submitted by " +
+ this.getField("TeacherName").value;
var cBody = "\n Thank you for submitting your form.\n" +
"Save the mail attachment for your own records";
// Send the form data as an PDF attachment on an e-mail
this.mailDoc({bUI: true, cTo: cToAddr, cCc: cCCAddr,
cSubject: cSubLine, cMsg: cBody});
So I would like the subject line to read (CourseNumber) corrections form submitted by (TeacherName) Acrobat tells me I have a "SyntaxError: missing ; before statement 11: at line 12" but no matter how I tweak it, I keep getting that message. I put the semi-colon in, I take the semi-colon out, I put the semi-colon back in and shake it all about.... nothing. Any help someone could give me will be greatly appreciated, thanks Oh, and would there be a way to have the sent pdf form have it's name from a couple of fields as well? So that the attached file will be called "(CourseNumber).pdf"? Hello Folks, I installed a template on the following site and did not actually write the javascript dropdown menu seen at the top of http://sthomaslc.com/ The problem is that if parent list items Ministries and Parish Leadership have enough children, they expand out right off of the screen of low resolution setups. I am totally new to javascipt programming so excuse my ignorance when I ask how to make the children items to expand out left instead of right if it's detected that the menu has hit the right side of the browser window. Best Regards David Hello guys, I've made a music playlist where you should be able to listen to music (of course). All works fine, i am capable too listen to all the music in my playlist. But, when i reload my website and click on a song, it send me an error message - "Adobe Flash Player has stopped a potentially unsafe operation. If you want the program to communicate with Internet, click on settings." When i click on settings, i get another message - "Sorry, this page is not available". I had also another Option instead of settings which where, "ok". When i click on OK it works fine and it's no problem to scroll through the musiclist and listen to all of the soft songs. But i don't even want the message to appear from the very first time. Do you know what i should do to get rid of the message? Here's my code: Code:
<!--
BEGIN JAVASCRIPT PLAYER EMBED CODE
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<div id="player-holder"></div>
<script type="text/javascript">
var options = {};
options.playlistXmlPath = "playlist.xml";
var params = {};
params.allowScriptAccess = "always";
swfobject.embedSWF("OriginalMusicPlayerPlaylist.swf", "player-holder", "250", "250", "9.0.0",false, options, params, {});
</script>
<!-- END PLAYER EMBED CODE -->
Regards Webjoker |
|||||||