Adobe Edge Quickstart Guide - Joseph Labrecque - E-Book

Adobe Edge Quickstart Guide E-Book

Joseph Labrecque

0,0
23,99 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.
Mehr erfahren.
Beschreibung

With the advent of HTML5 and CSS3, web designers can now create sophisticated animations without the need of additional plugins such as Flash. However, there hasn't been an easy way for creating animations with web standards until now. This book enables even those with little knowledge of HTML or programming web content to freely create a variety of rich compositions involving motion and interactivity.Learning Adobe Edge will quickly get you up and running with this professional authoring software to create highly engaging content which targets HTML5, CSS, and JavaScript. Content created in Adobe Edge does not rely on a plugin ñ so it can be run within any standard browserñ even on mobile.Learning Adobe Edge begins with an overview of the shifting web landscape and the Edge application. We then move on through the variety of panels and toolsets available, and explore the many options we have when creating motion and interactivity using Edge.The book presents the reasoning behind engaging, standards-based web content and how Edge fills the need for professional tooling in this area. In the book we'll examine content creation and how to achieve fluid animation and advanced transitioning through the Edge timeline. Sprinkled throughout the book are tips and references for those coming to Edge from a background in Flash Professional. Whether you are coming to Edge from Flash Professional or are totally new to motion graphics on the web, Adobe Edge Quickstart Guide provides a solid foundation of motion and interactivity concepts and techniques along with a set of demo assets to build upon.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB
MOBI

Seitenzahl: 121

Veröffentlichungsjahr: 2012

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Adobe Edge Quickstart Guide
Credits
About the Author
About the Reviewer
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Introduction to Adobe Edge
Why we need Adobe Edge
Flash Player restrictions
The relationship between Adobe Edge and Adobe Flash Professional
Comparisons with Adobe Flash Professional
Stage
Timeline
Keyframes
Symbols
Library
Actions
HTML technology maturity
Mobile deployment
What Adobe Edge can be used for
Web animation
Interactive content
The history of Adobe Edge
The inner workings of Edge
HTML, CSS, and JavaScript
HTML
CSS
JavaScript
How jQuery is used in Edge
JSON
The Adobe Edge Runtime
Getting started
Installing Adobe Edge
The Adobe Edge welcome screen
Creating a new Edge Project
Save
Save As…
Edge project file structure
Summary
2. The Edge Application Interface
Application interface overview
The application window
Customizing the Edge panel layout
Managing workspaces
The Edge menu system
File
Edit
View
Modify
Timeline
Window
Help
The Edge Toolbar
Selection tool
Transform tool
Rectangle tool
Rounded Rectangle tool
Text tool
Background Color and Border Color
The Stage
The Edge Timeline
Panels in Edge
Elements panel
Library panel
Properties panel
Actions panel
Summary
3. Working with Edge Tools and Managing Assets
Using the drawing tools
The Rectangle tool
Using the Rectangle tool
The Rounded Rectangle tool
Using the Rounded Rectangle tool
The Text tool
Using the Text tool
Using web fonts
The Selection and Transform tools
Using the Selection tool
Properties shared by all element types
ID
Tag
Element Display
Location
Size
Opacity
Transform Origin
Rotate
Skew
Scale
Clip
Properties unique to rectangle elements
Overflow
Background Color
Border Color
Border Thickness
Border Style
Border Radius
Properties unique to text elements
Font Name
Font Size
Font Size Units
Text Color
Bold
Italic
Underline
Align Left
Align Center
Align Right
Properties unique to image elements
Source
Position
Properties unique to symbol elements
Playback Actions
Scrub
Properties available with the Stage
Composition ID
Document Title
Overflow
Autoplay
Background Color
Width
Height
Color tools
Importing external assets
What is SVG?
Importing SVG images
What is a bitmap?
Importing bitmap Images
Working with imported assets
Converting assets into symbols
Create a Symbol
Summary
4. Creating Motion with Edge
Animation within Edge
The Edge Timeline
Playback controls
Time
Search
Timeline options
Timeline controls
The Playhead
The Mark
Zoom controls
Keyframes
Creating motion
Animating with the Playhead
Animating with the Mark
Editing Transition
Duration
Delay
End
Easing
Example: Animating a website header
Project setup, asset import, and general layout
Animating elements
Animating the background
Animating the cover art (do this for each cover art image)
Animating the title text
Summary
5. Adding Interactivity to an Edge Composition
Working with Actions
The Timeline Actions layer
Working with Triggers
Working with Labels
Applying Actions to the Stage
Applying Actions to individual elements
Overview: The Adobe Edge Runtime APIs
Document Object Model events
Mouse events
Touch events
Virtual mouse events
Timeline events
Example: Adding interactivity to a website header
Creating the Text element
Adding interactivity to the Title
Adding interactivity to the album art
Completing the final website header composition
Summary
6. Additional Resources
Using an Edge composition within an existing website
Online resources
About the forthcoming book: Learning Adobe Edge
Learning Adobe Edge
Robust motion and interactivity through web standards
What you will learn
Index

Adobe Edge Quickstart Guide

Adobe Edge Quickstart Guide

Copyright © 2012 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: March 2012

Production Reference: 1010312

Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.

ISBN 978-1-84969-330-1

www.packtpub.com

Cover Image by Asher Wishkerman (<[email protected]> )

Credits

Author

Joseph Labrecque

Reviewer

Christer Kaitila

Acquisition Editor

Wilson D'souza

Technical Editor

Vishal D'souza

Project Coordinator

Joel Goveya

Proofreader

Martin Diver

Indexer

Rekha Nair

Production Coordinator

Alwin Roy

Cover Work

Alwin Roy

About the Author

Joseph Labrecque is primarily employed by the University of Denver as Senior Interactive Software Engineer specializing in the Adobe Flash Platform, where he produces innovative academic toolsets for both traditional desktop environments and emerging mobile spaces. Alongside this principal role, he often serves as adjunct faculty, communicating upon a variety of Flash Platform solutions and general web design and development subjects.

In addition to his accomplishments in higher education, Joseph is the Proprietor of Fractured Vision Media, LLC a digital media production company, technical consultancy, and distribution vehicle for his creative works. He is founder and sole abiding member of the dark ambient recording project "An Early Morning Letter, Displaced" whose releases have received international award nominations and underground acclaim.

Joseph has contributed to a number of respected community publications as an article writer and video tutorialist and is author of the Flash Development for Android Cookbook, Packt Publishing (2011), What's New in Adobe AIR 3, O'Reilly Media (2011), What's New in Flash Player 11, O'Reilly Media (2011), and co-author of Mobile Development with Flash Professional CS5.5 and Flash Builder 4.5: Learn by Video, Adobe Press (2011).

He regularly speaks at user-group meetings and industry conferences such as Adobe MAX, FITC, D2W, 360|Flex, and a variety of other educational and technical conferences. In 2010, he received an Adobe Impact award in recognition of his outstanding contribution to the education community. He has served as an Adobe Education Leader since 2008 and is also an Adobe Community Professional.

Visit him on the web at http://josephlabrecque.com.

Thanks to my family, friends, and benefactors for your continued support.

About the Reviewer

Christer Kaitila, B.Sc., is a veteran video game developer with 17 years of professional experience. A hardcore gamer, dad, dungeon master, artist, and musician, he never takes himself too seriously and loves what he does for a living: making games!

A child of the arcade scene, he programmed his first video game in the eighties, long before the Internet or hard drives existed. The first programming language he ever learned was 6809 assembly language, followed by BASIC, Turbo Pascal, VB, C++, Lingo, PHP, JavaScript, and finally ActionScript. He grew up as an elite BBS sysop in the MS-DOS era and was an active member of the demoscene in his teens. He put himself through university by providing freelance software programming services for clients. Since then, he has been an active member of the indie game development community and is known by his fellow indies as Breakdance McFunkypants.

Christer frequently joins game jams to keep his skills sharp. Over the years, he has programmed puzzle games, multiplayer RPGs, action titles, shooters, racing games, chat-rooms, persistent online worlds, browser games, and many business applications for clients ranging from 3D displays for industrial devices to simulations made for engineers.

He is the author of the book Adobe Flash 11 Stage3D, Molehill, Game Programming Beginner's Guide, and is about to publish Game Jam Survival Guide.

He runs a popular news website called www.videogamecoder.com, which boasts over 30,000 articles and zero ads. He is one of the Administrators of Ludum Dare. His client work portfolio is available at www.orangeview.net and his personal game development blog is www.mcfunkypants.com, where you can read more about the indie game community and his recent projects.

He lives in Victoria, Canada with his beloved wife and the cutest baby son you've ever seen.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at<[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read, and search across Packt's entire library of books.

Why Subscribe?

Fully searchable across every book published by PacktCopy and paste, print, and bookmark contentOn demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

Edge is an all-new tool from Adobe (currently in pre-release) that seeks to enable the authoring of motion and interactive experiences through HTML, CSS, and JavaScript in a manner consistent with other Creative Suite applications. The Edge application shares many features with other Adobe products, particularly Flash Professional, After Effects, and InDesign. This book will detail how to use this professional authoring software to create highly engaging content that targets Web standards. Content created in Adobe Edge does not rely on a plugin, so it can be run within any standard browser, even on mobile devices. The goal of this quickstart guide is to provide a direct overview of what it takes to create engaging content for the Web and provide a level of familiarity with Edge in order to actually get it done!

What this book covers

Chapter 1, Introduction to Adobe Edge, provides a look at the shifting Web landscape and how changes within devices and browser capabilities have made it possible for Adobe Edge to come about as a useful tool in the field of web design and development.

Chapter 2, The Edge Application Interface, provides a comprehensive overview of the entire Edge application interface. This overview includes a look at the panels, tools, menus, and other application elements that we will need to familiarize ourselves with when using Edge.

Chapter 3, Working with Edge Tools and Managing Assets, delves into many of the tools contained within the Edge application to allow the creation of rectangular elements, text, and assorted other objects.

Chapter 4, Creating Motion with Edge, demonstrates how simple it is to build a composition that involves a number of animated elements and presents a unique toolset for dealing with motion on the Web.

Chapter 5, Adding Interactivity to an Edge Composition, will expand upon the motion-based topics of Chapter 4 through the addition of interactive elements within an Edge project.

Chapter 6, Additional Resources, provides additional resources, which are available over the Internet and also seeks to add a few tips and tricks not covered in the preceding chapters. We close out with a preview of the forthcoming comprehensive book Learning Adobe Edge, Packt Publishing.

What you need for this book

To use this book effectively, the reader will need to download the Adobe Edge Preview from Adobe Labs. This is a free download and Adobe is releasing regular updates to the preview along the way to the release version of the application.

Adobe Edge Preview can be acquired from: http://labs.adobe.com/technologies/edge/

Who this book is for

This book is for anyone who wants to get started using Adobe Edge to create engaging and interactive content for the Web. It isn't necessary for the reader to have any prior knowledge of website or motion design.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "These elements will default to a<div> HTML element, but can be changed to employ the following HTML elements instead."

A block of code is set as follows:

(function(symbolName) { Symbol.bindElementAction(compId, symbolName, "${_fvm001}", "mouseover", function(sym, e) { // Change an Element's contents. // (sym.$("name") resolves an Edge element name to a DOM // element that can be used with jQuery) sym.$("Info").html("August (2000)"); });

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

Symbol.bindElementAction(compId, symbolName, "${_Rectangle}", "vmousedown", function(sym, e) { sym.playReverse(); // insert code for vmousedown here }); //Edge binding end

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Now we will perform the preceding exercise, but this time will employ the Mark to demonstrate an alternate way of creating motion in Edge".

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to<[email protected]>, and mention the book title through the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support