Adobe Training

Flash and the iPhone: Confusion Still Reigns

2011-05-31T16:07:00.000-07:00

This just in: Apple has persisted in their ban of the Flash Player on the iPhone and iPad to the chagrin of many Flash developers and Adobe. For some, it's "ancient" history, for others, surprise: the Flash Player (the plug-in that allows playback of Flash (.swf) files within web pages) is not supported on the iPhone or iPad. And, yes I'm writing this in 2011, not 2009, but many people I speak to are still surprised.

A little history helps clarify:

Flash Professional is the authoring tool used to create .swf files, as is also Flash Catalyst and Flash Builder (also known in earlier incarnations as "Flex Builder.")

To this day, Flash files (.swf files) are still found on many websites and can be seen in all major browsers running on Windows, Macintosh and mobile operating systems such as Android... but not the iPhone/iPad.

Why? Apple claims various and sundry technical concerns but many speculate that it may have to do with the fact that Flash is the number one technology for creating games on the web, and that many apps sold for the iPhone are games. Why pay for an app when you can play a game on the web? Ban the Flash player and you don't have much choice.

What complies the confusion is that when Adobe released Flash CS5 they added a feature that allows you to author iphone/ipad and Android apps using Flash. Note the word "apps", not Flash files playing in a browser that would require the Flash Player, but the ubiquitous and profitable apps.

Adobe's idea was to allow developers to leverage their skills in Flash to create apps for the booming iphone (and Android) app marketplace. Once converted the Flash file would be a native iPhone application: created with Flash but converted to an iPhone app with nary a trace of its Flash lineage.

Shortly after Adobe's announcement, and for reasons open to conjecture, Apple announced that it would be illegal for app developers for the iPhone to use any third party technologies to produce apps. The result was a cacophony of disbelief among Flash developers over a decision that seemed capricious and almost vindictive. After all, once created the app was not dependent on, or in any way linked to its Flash heritage and could be accepted or denied admission to the App Store based on its merits.

The good news: Apple has rescinded that decision, it's now legal to use Flash Professional, Flash Builder, and other third party products, to create iPhone and iPad apps.

The bad news: Apple still persists in its ban of the Flash player on the iPhone and iPad. (Flash files playing within a web page being displayed with the Safari browser on an iPhone or iPad.)

Well-meaning articles with headlines like this "Apple relents on Flash-derived iPhone, iPad apps", still confuse people who are perhaps not so attuned to the nuances of the Flash-iPhone relationship.

To summarize, .swf files created in Flash Professional Flash Builder, Flash Catalyst, etc, play wonderfully in the browsers of desktop computers including the Macintosh, Windows and Linux.

Flash files (aka .swf files) can play in the browsers of smart phones and tablets running the Android operating system but not on the iPhone or iPad.

Flash and Flash Builder can be used to create apps for the iPhone/iPad and the Android operating systems.

Got it? Great, but unfortunately there's more: the latest version of the Adobe Reader (the player that allows you to view pdf files on the web) has a version of the Flash Player embedded inside.

More on the implications on that development for users and developers in an upcoming post.

In Context Editing in Dreamweaver CS4

2009-09-14T18:27:00.000-07:00

If you're like me you are a bit cynical regarding upgrades.
I need to see a feature that I need to really get jazzed by an upgrade.

In Context editing in Dreamweaver CS4 is that feature...but it's not for me.
I know Dreamweaver and have worked with it for years and use it to create, manage, edit and maintain web sites. I know HTML and CSS and how to ftp files to a server.

In Context editing is for my clients...who don't know Dreamweaver, don't know html, don't know how to edit a page in Dreamweaver and don't know, html, CSS or any other web technology.

What they need is a simple way to edit a web page on a regular basis without calling me to do it for them. What they need is InContext Editing which allows anyone to make simple edits to a web page in the browser.

For the time being I recommend you peruse this article for In Context editing on the Adobe Labs site InContext Editing on Adobe Labs

In a few weeks I'll report on my experience of implementing it on a site I'm working on.

Playing Sound in Flash Part 1

2009-08-05T10:49:00.001-07:00

You all know that you can play sound in Flash.
This post will explore the various ways you can play sound in Flash.
Basically, we can break it down to 3 different techniques:

A: Import the sound into Flash and associate that sound to a keyframe (by selecting a keyframe and then choosing the sound from the "sound" area of the Property panel) when the playhead in the timeline reaches that keyframe, the sound will play.

B: Import the sound into Flash and use Actionscript to play the sound. Note in this case the sound is never associated with a keyframe rather you can play the sound whenever you need to by writing some Actionscript, playing the sound is not dependant on the playhead reaching a particular frame.

C. Keep the sound external to Flash (and the swf file) and use Actionscript to load and play the file. (We will cover details of this technique in another upcoming post.)

The remainder of this post we'll cover details of technique "B" above, using Actionscript to play a sound that's been imported into the Library.

If you use this technique, there is one thing you need to do before writing the Actionscript and testing the movie. It involves the fact that if you have a resource (such as a sound file or graphic) in the library and you don't have a reference to that resource in the timeline, when you create an swf file, either when publishing or just testing the movie, Flash will assume that because there's no reference to that resource in the timeline that you don't actually need it, it assumes you're not actually using it and it throws away the data that represents that resource: why save data that's not being used, but of course you are using that resource, you're just using Actionscript to play it back and not the timeline. You need to tell Flash not to throw it away.

Here's what you do: in the Library panel, select the imported sound file and then right-mouse click on it. Choose "Linkage" and then when the dialogue box appears click on the check box that says "Export for Actionscript".

This is essentially telling Flash not to throw this resource away, you're going to be using it with Actionscript. Also I'd recommend, though technically it's not required, you can just use the name of the sound file without the extension, that you type in a new Class name, in the example above I typed in "mySound" (without the quotes). Note that his is an arbitrary word, you're making it up.

When you click Ok to close the dialogue box Flash will put up a message which says: "A definition for this class can not be found in the classpath, so one will be automatically generated..." Great, no problem. If you know what a class is fine, if not, don't worry about it. Though you will be referencing that class in the first line of code below. Flash is essentially creating a new sound class based on the particular sound name you entered.

After that you can start writing the Actionscript code that will play the sound.
To do so you will need to use the Sound class and create a new instance (object) from it.

To play the sound first use the class name you typed into the linkage dialogue box above and create a new instance of it using the first line of code below.

var myNewSound:Sound = new mySound();

Note, whatever name you used in the dialogue box for the class name is the word you need to use in the line above where I have "mySound". If you used pepperoniPizza as the class name in the dialogue box your code would look like this:

var myNewSound:Sound = new pepperoniPizza( );

The sound wont start playing till you referencre the instance of the sound object you created in the first line and execute the play method:

myNewSound.play();

To stop the sound from playing execute the stop method:

myNewSound.stop();

The completed code for playing the sound:

var myNewSound:Sound = new mySound();
myNewSound.play();

Your homework assignment is to take this code and modify it so that you play a sound when the user clicks on one button and stop the sound when the user clicks on another button.

Note: the screenshot above was taken from Flash CS3 but the technique is the same for Flash CS4 though the dialogue box there looks a bit different you still choose Linkage Export for Actionscript. Also, we're using Actionscript 3 code here which works in either Flash CS3 or Flash CS4.

Flash versus Flash Builder (aka "Flex) Simplified

2009-06-08T11:23:00.000-07:00

Adobe has made the beta release of Flex 4 available, but surprise, surprise...it's no longer named "Flex". "Flash Builder 4" is now the official name of the product. The name change will either clarify some people's confusion over what Flex actually did or it will create more confusion as people who have never used the product try to figure out the difference between Adobe Flash CS4 and Flash Builder (aka "Flex").

Here is our humble effort to clarify the issue:

Flash (the traditional version, known officially now as Adobe Flash CS4) started out as a drawing program, then animation was added to it, then interactivity with Actionscript was added to it. The method by which you construct a Flash production is with the "timeline" the interface element in Flash which allows you to construct your presentation over time using a frames-based interface. The timeline is good for producing animations over time...not as good for programmers striving to create interactive Flash productions and applications using Flash for the web. They (programmers) had no experience with using a timeline, it is a totally new and unusual interface element outside the realm of their programming experience.

The solution to the programmer's conundrum with Flash was Flex: a product designed largely for "developers" (aka programmers) using an interface they were already familiar with. Both Flash and Flex output .swf files, the Flash file format that is supported by the Flash Player (the plug-in that needs to be installed in your browser so it can play back a .swf file).

Flex (aka "Flash Builder") doesn't allow you to create animations as does Flash, though you can take an animation created in Flash and play it back in your Flex (Flash Builder) production. Flex (Flash Builder) is optimized for creating highly interactive applications for the web, much of the same functionality can be found in Flash but with Flash you have to deal with that darn timelime and you don't have as many built-in components to help you create an interface for your Flash/Flex-based web application.

Got it? If not, email me and I'll try to clarify further: kdurso@multigroup.com

Adobe Announces Flex Builder Free for Unemployed and Students/Faculty

2009-04-08T08:37:00.000-07:00

In a recent announcement, Adobe has made Flex Builder their application for creating Rich Internet Applications applications for the web, free to students and faculty as well as unemployed developers.

Information regarding both offers can be found at the url below:

Free Flex

Flex outputs Flash files (.swf) files and is typically used to create highly interactive files for the web or interactive applications that can connect to the web using Adobe Air. Unlike Flash, Flex has no animation capability but allows you the option to playback Flash files within a Flex application.

Flex uses Actionscript 3 (same as Flash) and mxml, a language based on xml.

Flex is being used on the web for everything from the Sherwin-Williams color picker,
http://www.sherwin.com/visualizer/

to Pikeo, online photo sharing
http://www.pikeo.com/

to Yahoo Maps, the UNO game on Facebook and more.

Adobe is also supporting another site which lists jobs for Flex developers:
Flex Jobs

For more information about Flex and discounted Flex classes at our facility in Silicon Valley please email me at kdurso@multigroup.com

Dreamweaver CS4 ACE Objectives

2009-03-13T06:37:00.000-07:00

Creating a web site today requires some expertise in a variety of different technologies: xhtml, Cascading Style Sheets (CSS), javascript, application servers, ajax...

Adobe Dreamweaver is the leading software product on the market which allows you to meld all or some of these technologies together to create a static or dyanmic web site. (See our blog post on "Dreamweaver Training Tips" to learn the difference between static and dynamic web sites.)

Becoming an Adobe Certified Expert in Dreamweaver is a powerful credential to have and a great way to synthesize and process the essential information you need to create web sites using an industry-leading product.

To the best of our knowledge, these are the ACE (Adobe Certified Expert) Objectives for Dreamweaver CS4. Use them as a guide to study for the test. Our Dreamweaver class ()http://www.multigroup.com) covers these objectives during the course of the class. Call us (408-315-8720) in regard to taking the class and receive a discount by telling us you read about it here.

1.0 Understanding Web technologies

1.1 List and describe the infrastructure required to implement and deploy Web sites.

1.2 Given a scenario, explain the requirements for supporting video, PDF documents,

and SWF.

1.3 Explain how to mitigate page weight.

1.4 Given a scenario, describe the infrastructure required to support application servers.

(Scenarios include: ColdFusion, ASP, JSP)

1.5 List and describe the difference between client-side and server-side scripting.

1.6 Describe techniques for making pages accessible.

2.0 Managing sites

2.1 Given a scenario, create a site. (Scenarios include: using the Site menu bar and Files

panel)

2.2 Locate files associated with a Dreamweaver site.

2.3 Manage files associated with a Dreamweaver site. (Including: moving, deleting,

renaming, copying, associating)

3.0 Remote connectivity

3.1 List and describe the methods available for connecting to a remote server. (Methods

include: ftp, sftp, WebDAV, and network file share)

3.2 Synchronize files. (Methods include: Using the Files panel, Site menu, cloaking)

3.3 Use get, put, check-in, and check-out to transfer files.

3.4 Configure local, testing, and remote servers.

4.0 Working in Design view

4.1 Describe options available for positioning objects. (Options include: AP DIV, CSS

and tables)

4.2 Design a page by using a tracing image.

4.3 Given a visual aid, explain the purpose of and/or when that visual aid. (Visual aids

include: Layers, tables, CSS, invisible elements)

4.4 Work with the Properties panel and Tag bar.

4.5 Explain the benefits of using Live View and Live Data.

5.0 Working in Code view

5.1 Configure preferences for Code view.

5.2 Manage code by using Code view. (Options include: Collapsing, word wrap, highlighting

invalid code, and formatting)

5.3 Explain how to get information about tags. (Options include: Properties Inspector

and Tag Editor)

5.4 Find and replace code in Code view. (Options include: entire site and current page)

5.5 Explain how to select blocks of code in Code view.

6.0 Working with templates

6.1 Create editable areas in templates.

6.2 Apply a template to a page.

6.3 Create and use template variables.

6.4 Create and use editable attributes.

6.5 Explain the process of and issues associated with distributing template changes to pages.

6.6 Create and use library items.

7.0 Working with assets

7.1 Manage assets by using the Assets panel.

7.2 Given a media type, insert and deploy that media type into a page. (Media types

include: SWF, FLV, Flash Paper, images)

8.0 Designing pages with CSS

8.1 Create and work with AP elements.

8.2 Create styles for typography and positioning by using the CSS and properties panels.

8.3 Describe the Box model.

8.4 Create and attach style sheets to pages.

8.5 Explain the behavior of inheritance with respect to styles and style sheets.

9.0 Testing Web pages and sites

9.1 Validate that pages and sites conform to accessibility standards.

9.2 Describe the HTML reports that are available for testing.

9.3 Identify and fix broken links.

10.0 Application development

10.1 Create forms and use data sets by using Spry.

10.2 Describe the functionality provided by the Behaviors panel and the Server Behaviors panel.

10.3 Describe the role of an application server.

2009-03-09T20:08:00.000-07:00

Adobe Product Glossary

As the principal of the Multimedia Resource Group (http://www.multigroup.com) an Adobe Authorized Training provider in Silicon consequently, we often get questions from people about which product they should buy and use.

We put together this Adobe Product Directory and Glossary together to give people
a simple overview of Adobe Products.

This list is still a work in progress. Note this glossary is not complete but it does list most major Adobe products; all definitions are our interpretation of the major features and purpose of each product.
Adob

Adobe Flash

Adobe Flash is a program for creating animations, presentations and interactive productions for the web.It can be used for everything from animated banners, to online training, to interactive games, to creating entire web sites and more. Flash files (.swf) can contain graphics, sounds, videos, interactivity (buttons that do something when clicked using Actionscript, the scripting language built in Flash.). A very popular technology on the web today. Flash files are played back though the "Flash Player" a browser plug in that most people already have.

Flash can also be used to encode and playback video files. All "YouTube" videos are encoded as Flash video files.

Adobe Flex

An application or framework that allows you to output swf files that are played back using the Flash Player. Flex is available as an application from Adobe: Flex Builder, or an open source application Flex 3 SDK. Much of the functionality of Flex is typically implemented using componenents (pre-build "widgets" that come with Flex). Actionscript 3.0 is also used in Flex as its scripting language (as it is in Flash). Flex also uses mxml, a custom mark-up language similiar to xml.

Flex files are used to create web applications that playback using the Flash Player, as does Flash. Flex has no animation capability but swf files created in Flash can be used in Flex. Typicallly, Flex files tend to be highly interactive web applications. Both Flash and Flex can be used to create web applications, though some applications may be more expediantly created in Flex.

Adobe AIR

Adobe Integrated Run time (AIR): desktop applications (doesn't play on the web) created in either Flex or Flash. Twitter Deck and Thwirl are AIR applications.

Adobe Dreamweaver

Adobe Dreamweaver is the industry-leading professional product for creating, maintaining and deploying web sites.

Adobe InDesign

InDesign is the industry leading product for producing page layouts for print: everything from a one page flyer, newsletter, magazine or book. InDesign files can be displayed on the web when output as .pdf files.

Adobe Photoshop

Photoshop is the industry leading product for creating and working with bitmap graphics for print or web.

Adobe Illustrator

Illustrator is the industry leading product for creating and editing graphics using vector shapes for output to print or web.

Adobe Fireworks

A product Adobe acquired from Macromedia created specifically to create graphics and related resources for the web.

Adobe Captivate

Captivate is an eLearning tool allowing you to create online present ions, as well as software demonstrations and simulations with or without interactivity.

Adobe Contribute

A product that allows people with no knowledge of the tools and techniques needed to create web pages to manage and update web sites.

Adobe Acrobat

An application that allows you to create pdf files from various sources for print or web. The resulting files may include forms, interactivivity and a variety of different media.

Adobe FrameMaker

An application typically used to create and mange long documents such as books.

Adobe Cold Fusion

A server technology and scripting language (Cold Fusion Markup Language; cfml) used for the creation and support of dynamic web sites.

Training, Consulting and Development

The Multimedia Resource Group offers training, consulting and development services using all of these products, call or email us for more information: training@multigroup.com; 408-315-8720.

If there is an Adobe product that you need more information about, whether it's on this list or not, feel free to email us with your question: training@multigroup.com

Flash CS4 Top New Features

2009-03-01T15:55:00.000-08:00

If you're still deciding whether to upgrade or not, or just perversely curious: A list of major new features in Flash CS4. Keep in mind the Flash CS4 is the first version of Flash to be retooled under the Adobe umbrealla. (Flash CS3 was released as an Adobe product but was designed at Macromedia.) In my opinion it represents the most significant change in Flash since it was released. For many people the first three features listed below will be reason enough to upgrade.

Inverse kinematics with the Bones tool
Perhaps the coolest new feature in Flash: Create chain-like animation effects with a series of linked objects, or quickly link a single vector shape into interconnected "bones" that swivel and move using the new Bones tool. This is a boon for creating all kinds of animations from "character" animations (think cartoons) to scientific simulations. Here's an example: http://www.onemotion.com/flash/spider/ Be sure to click on the spider and drag him around.

Motion editor
Allows you to precisely control numerous parameters of an animated object including rotation, size, scale, position, filters, and more. Refine easing control with graphical displays. Again another major improvement for designer and animators as Flash begins to add some sophisticated animated controls a la After Effects.

Motion presets
Allow you to jump-start tart your project with sophisticated prebuilt animations that can be applied to any object. Essentially Motion Presets are a a library of various animated effects you can apply to an object (symbol) to animate it. Even if you don't use it on a regular basis it can safely stimulate your own creative animation juices. Select from dozens of presets or create and save your own animated effects that you may have created or tweaked with the Motion Editor as presets. These are easy to use and you can also share presets with others.

Object-based animation
This is the new way to tween (animate various properties of an object): applies tweens directly to objects (symbols) instead of to keyframes. Automatically generates an animation path and allows you to modify the path. This is the new look of “tweening” in Flash, quicker then the previous version; automatically changes the object into a Movie Clip symbol and extends the timeline 24 frames; it also automatically produces the second keyframe for you. Cool new feature, and if you want to revert to the "classic style" of tweening, you can.

3D transformation
Animate 2D objects through 3D space with new 3D translation and rotation tools, which allow you to animate along the x, y, and z axes. Apply local or global transformation to any object.

Authoring for Adobe AIR (Adobe Integrated RunTime)
Deliver interactive experiences to the desktop with new integrated capability to publish to the Adobe® AIR™ runtime. http://www.adobe.com/products/air/
If you use Twitter, you probably know TweetDeck, and TweetDeck is an Adobe Air application. Flash CS4 allows you to create AIR applications as does Adobe Flex. More on Tweetdeck: http://www.tweetdeck.com/beta/

XFL support
No, Flash is not supporting some renegade offshoot of the National Football League. XFL support however is aiding and abetting incestuous relations among the Adobe clan (gasp!) allowing you to take content from Adobe InDesign, or After Effects, save it as an .xfl file and import it in Flash and retain "file integrity". Will try to come up with some examples of this and will post more info...later. In the meantime: http://help.adobe.com/en_US/InDesign/6.0/WS2DECDF40-B6DA-40b6-804F-2703D6C6A460.html

Procedural modeling with Deco and Spray Brush new
Turn symbols into instant design tools. Apply symbols in a variety of ways: Quickly create kaleidoscope-like effects and apply fills using the Deco tool, or randomly spray symbols across any defined area using the Spray Brush. This is beefs up the designer tool chest in Flash, similar in functionality to the symbol sprayer tool in Adobe Illustrator.

Metadata (XMP) support
Add metadata to SWF files using the new XMP panel. Quickly assign tags for enhanced collaboration and better mobile experiences. (XMP is an RDF-based framework of Adobe Systems Incorporated that supports the embedding of metadata in application files.
More information on XMP is available here: http://www.adobe.com/products/xmp/overview.html

H.264 support
Flash now allows you to create and playback High Definition video, in addition to the other video formats previously supported.This is a big deal if you're a video geek, and with the cost of HD camcorders dropping we'll all soon be video geeks.

Flash CS4 ACE Objectives

2009-01-18T18:05:00.000-08:00

These days, becoming an ACE (Adobe Certified Expert) can give you a leg up in landing a job, not to mention honing your skills to a finely burnished edge.

To become an ACE you need to pass a closed-book, multiple choice test: you sit in front of a computer screen and answer the questions. The test is administered by Pearson VUE or Thomson Prometric at their testing facilities world-wide.

Pearson VUE: check for locations online at www.pearsonvue.com

Thomson Prometric: check for locations online at www.2test.com

Below the Adobe Flash CS4 ACE Objectives, all the Flash topics that will come up on the ACE test.

To prepare for the test you may be interested in taking our Flash Level 1 class and our Flash Level 2 class (Actionscript). We make sure to go over the ACE Objectives in the class, and we provide resources and sample tests after the class. The classes are described on our web site Multimedia Resource Group http://www.multigroup.com

Self-employed and unemployed people may qualify for a discount for these classes.

Flash CS4ACE Exam Objectives

1.0 Planning and designing Flash applications
1.1 Given a scenario, choose the appropriate type of image asset and explain when and
why you would use that asset type. (Image asset types include: vector, bitmap, SVG)
1.2 Given a requirement based on your audience, determine the appropriate Flash features and options used to meet the needs of your audience. (Audience requirements
include: publishing to AIR, accessibility, player version)

2.0 Creating and managing assets
2.1 Given an option in the Library panel, explain the purpose of and how to use that
option.
2.2 Given a tool, create a shape by using that tool. (Tools include: Deco, Spray Brush, Rectangle Primitive)
2.3 Given a tool, work with an existing asset by using that tool. (Tools include: Transform, 3D Rotation, Bone)
2.4 Given an asset, modify individual properties to achieve specific design requirements. (Design requirements include: advanced text controls including anti-aliasing,stroke control and styling)
2.5 Import external assets into Flash. (External assets include: XFL from InDesign or
After Effects, Photoshop files, Illustrator files, and images)
2.6 Create and manage text fields by using the Text tool.
2.7 Given an asset, convert that asset to a symbol.
2.8 Given a component, explain the purpose of or how to use that component.
2.9 Edit the skin of a component.

3.0 Creating Flash movies
3.1 Create animations by using the Timeline.
3.2 Edit animations by using the Motion Editor.
3.3 Reuse animations by using Motion Presets.
3.4 Incorporate and manage audio and video in your movie.
3.5 Apply filters and effects to Movie Clips and text.
3.6 Manage performance by utilizing bitmap techniques.
3.7 Apply inverse kinematics to objectives by using the Bone tool.

4.0 Programming with ActionScript 3.0
4.1 Given an ActionScript class, create an instance from and work with the properties of that class.
4.2 Given an object-oriented concept, explain the definition of or purpose associated
with that concept. (Object-oriented concepts include: Classes, Interfaces, Inheritance, Polymorphism, and Packages)
4.3 Create custom classes. (Options include: Extending, Subclassing)
4.4 Explain how to use the Document class.
4.5 Load content and data from external sources. (Sources include: XML, SWF, and
remote objects)

5.0 Testing, publishing, and deploying Flash movies
5.1 Recognize effective optimization considerations when testing and debugging Flash
applications.
5.2 Test an application by using the Debugger.
5.3 Given a code snippet, find the error in that code snippet.
5.4 Given a scenario, select the appropriate Publish settings to deploy a Flash movie. (Scenarios include: Web delivery and AIR)

Overview of the Debugger in Flash CS4

2009-01-07T20:37:00.000-08:00

Using the Debugger Overview

Ok, this is not the sexiest Flash topic out there, but I've found very little on this topic when I did a search so I thought I'd make this contribution for the collective benefit of Flashinistas world-wide.

The Debugger in Flash CS4 is a window and set of related tools to help you “debug” or troubleshoot Actionscript code that is not executing properly. Typically to make full use of the Debugger you’ll need to set a breakpoint in your code that tells the Flash player to stop executing your Actionscript at the particular line in your code where the breakpoint is set. Think of it as a tool that allows you to freeze time, or at least the time during which your Actionscript code is executing.
Then using tools in the Debug Window you can very deliberately choose to execute the specific line of code in which the breakpoint is set and then observe what happens. This ability, to step through your code (among other related tools which will be described in greater detail below) line by line can be extremely useful when trying to find the fly in the ointment (or the bug in your code).

Try this simple example:

Create a new file.
Select the keyframe in frame one , open the Actions panel and add the three trace statements, one on each line:

trace(“first”);|
trace(“second ”);
trace(“third ”);

Add a breakpoint by only after before the first trace, clicking to the left of the number 1 (the line numbers that should automatically be generated as you write Actionscript code. A red circle indicating the break point should appear.

Select Debug Movie from the Debug menu to enter the debugging window.
You’ll notice a set of interrelated panels: in the upper left the Debug Console; lower left Variable Panel; The area at the top center display a line (or lines if more than one) where Actionscript was encountered in the file, below that the code for the currently selected frame or a selected external Actionscript file; and the Output panel at the bottom .
You will notice that the string “First” being evaluated from the first trace function has not yet appeared in the Output panel, the reason is the break point stopped the execution of the code just before that line was executed.

In the Debug Console panel in the upper left hand side click on the green “Continue” button which will execute all the code till another break point is encountered. . Note that the evaluation of the trace function now appears in the output panel and all three trace statements appear: “first”, “second”, “third”.

Close the Debug window by either clicking on the large red X in the Debug Console or clicking on the close button for the swf file that was generated when you first choose Debug movie.
Go back to the Flash file and execute Debug Movie again.
This time click on the Step Over button which will cause the debugger to jump to the next line of code and stop. Continue clicking on the Step Over button to step through your code line by line. If there were any variables and properties in your code you can seethem and check their values changing in the Variables panel in the lower left corner.

Note the other two buttons:
Step In will jump to any function or method reference on the current breakpoint line and then step through the code of that function or method a line at a time.
Step Out moves the debugger to the exit point of the current function or method, typically to where the function or method returns a value (if it returns a value.

Mastering the debugger just takes a little knowledge and a bit of practice, and it's on the ACE test!

Top 10 Adobe Creative Suite Keyboard Shortcuts

2008-08-30T16:21:00.000-07:00

By popular request, the top 10 Adobe Creative Suite Keyboard (and other) shortcuts allowing you to boost your productivity and impress your friends.

Note: these shortcuts are guaranteed to work with Photoshop, Illustrator and InDesign 24/7, 365 days a year, Christmas and holidays included, unless otherwise noted.

10: Copying a graphic or object: select the graphic/object, hold down the alt key (option key on a Mac) and drag;

9: Zooming Out with the Zoom Tool (Magnifiying Glass Tool): hold down the alt key (option key on Mac) and click with the Zoom Tool selected.

8: Displaying a page or document at 100%: A: Hold down the Control Key and the "1" key; or, my favorite, double click on the Zoom Tool (Magnifiying Glass) in the Tool box.

7: Displaying a document within the existing monitor screen (Fit in Window): Hold down the Control Key and the "0" (zero) key on the keyboard or double click on the Hand Tool in the Tool box.

6. Temporarily displaying the hand tool to scroll around the page: hold down the spacebar and click and drag the mouse; let go of the spacebar to return to the previous tool you were using.

5. Hide all panels and toolbars: hold down the Tab key.

4: Hide only the panels on the right hand side of the screen: hold down the Tab and Shift keys.

3: Cycle through the screen modes (Photoshop and Illustrator only) : hold down the F key on the keyboard. (Note: this single-key keyboard short cut is also a "gotcha" one that you can very easily accidentally implement in the normal course of working in Photoshop and Illustrator.) The various screen modes in Photoshop and Illustrator are also accessible by clicking and holding down the mouse on the icon at the bottom of Tool Box. (Gotcha Alert: all the tools in the Tool Box in both Photoshop and Illustrator have single-letter keyboard shortcuts, so if you're not careful you can easily and accidentally trigger one of these shortcuts.)

2: Draw a perfect circle or square (depending on what tool you use) hold down the Shift key and keep it held down while drawing.

And the number one Creative Suite Keyboard Shortcut:

1: To draw a shape or selection from the center out (instead of the default upper left corner): select the desired drawing tool (rectangle, ellipse, etc, or rectangular or elliptical selection tools) hold down the alt key and click and drag the mouse.

Bonus Keyboard Shortcut: Control - Z (Windows; Command -Z on the Macintosh) is Un-Do.
Photoshop has only one level of Un-Do, that is you hit Control Z you go back on step. Illustrator has multiple levels of Un-Do, every time you hit Control Z you go back another step, same with InDesign. However Photoshop has another feature: Step Backward, keyboard shortcut is Alt-Control-Z. Every time you use it you go back another step. This feature ties in with the History Panel in Photoshop (which is sort of a super Un-Do). More on the History Panel in Photoshop later.

Next month: silly (but interesting) Photoshop tricks.

Dreamweaver Training Tips

2008-07-17T15:50:00.001-07:00

Below we've listed some of the basic considerations you should be aware of when creating or managing a web site. Keep in mind that it's not absolutely necessary to use Dreamwever but the alternative is essentially hand coding...that is knowing all the technologies involved so well you can write the code yourself.

Static or Dynamic?

Web sites come in two basic "flavors": static or dynamic.

A static web site is one where the content you put on the pages: text, graphics, etc., doesn't change until you change it and update the web site.

A dynamic web site is one where the content changes "dynamically" typically based on user input. Think of Amazon.com, say you're interested in a book but you forgot the title but remember the author's name. You go to Amazon and you type in the author's name and hit "enter". After a second or two a list of all the books by that author appears on the page. That information is typically being pulled onto the page from a database or some other external data file, such as an XML file. (An upcoming post will have more information about how XML files may be used in web sites.)

Dynamic web sites are cool but the techniques and technologies used in them represent a leap above the technologies used in static web sites. If you're interested in dynamic websites you still need to master the techniques and technologies needed to create static web sites. (We hope to post an article soon here on dynamic web site technologies.)

When creating a Dynamic Website typically you also need to pick an application server and scripting language. The reason for this is that pages in dynamic web sites typically have code in it that executes on the server, unlike html pages on static websites. Because the pages are doing more on a dynamic website, you need an application server that knows how to interpret the code that's on the page.

Below a quick reference to other techniques and technologies you will use in creating any web site, whether static or dynamic but don't be intimidated by that, in almost every case Dreamweaver will create the code you need for you and please note that all of them (except creating graphics, which is a separate class) are covered in our Dreamweaver Web Design class: http://www.multigroup.com

Graphics

Dreamweaver (or any other product that allows you to create or manage web sites) does not create graphics. You'll need some other application to create graphics for the web. Again, we're some what biased but Adobe does produce the industry-leading products in this regard, too.
Photoshop, Illustrator and Fireworks can all be used to create graphics for the web. (See our post on Fireworks but keep in mind Photoshop and Illustrator are also great products for creating graphics for the web though if I had to pick one product it would be Fireworks, then Illustrator and then Photoshop.. in my opinion and given my proclivities. (We hope to devout an upcoming post on the differences between Photoshop and Illustrator.)

Both Photoshop and Illustrator have their strengths and weaknesses and in the best of all possible worlds if you're serious about designing for the web and print you would use both.

Graphics formats that are supported on the web are: gif files, jpeg files and png files.

All of the above listed products can output these files.

HTML and XHTML

Web pages are basically html files, each html file is another page. Dreamweaver writes the html for you, strictly speaking no knowledge of html requited but in practice a little knowledge of html helps. (We provide html basics in our Dreamweaver class.)

Keep in mind that html is not a programming language, it's a mark up language and relatively simple to understand and use. Years ago I worked in a publishing company and I would watch the typesetters sitting in front of dedicated computers used only to set type for a magazine.

If they wanted to indicate to the computer that a word should be bold they would put the word inside of a bold tag. When printed by the computer those words would appear bold. Well that's exactly how html works, except it's the browser that makes the words bold when it sees the appropriate html tags around the word.

Note that html was not what was used way back when I worked for the publishing company with the dedicated typesetting machine. However that language was one of the sister languages to html created from SGML (Standard Generalized Markup Language).

For More information SGML and how it relates to HTML see the Wikipedia article:

http://en.wikipedia.org/wiki/SGML#Original_uses

XHTML is html's younger brother. For all intents and purposes you can simply think of it as the latest version of html and it is recommended that you use it. (The latest version of Dreamweaver will write xhtml for you by default and there is no practical reason that I can think of why you shouldn't.

For more informaton on XHTML see the Wikipedia article:
http://en.wikipedia.org/wiki/XHTML

Cascading Style Sheets

Cascading Style Sheets (CSS) are a required supplemental technology in creating and maintaining web sites these days. (See our blog entry on using CSS to format text.)

We provide substantial information about using CSS both to format web pages and to create layouts with div tags, and you're in luck again because Dreamweaver will write the CSS code for you too, and CSS while not exactly a mark up language is also fairly simple. Here's a sample of CSS code designed to format paragraphs (note the reference to "p") with the Aral font, but keep in mind that Dreamweaver will write the CSS code for you.

p {
font-family: Arial, Helvetica, sans-serif;
}

Javascript

Javascript is another supplemental technology that may or may not be used on web sites today.
One common example of using Javascript on a web page would be to create a rollover effect: the user moves their cursor over a button and it changes (color, size or shape). That's typically done with Javascript. (Note Javascript is not the same as the programming language Java though it is a scripting/programming language... but have no fear-

Dreamweaver comes to the rescue again: it will write and create some of the more frequently used Javascripts for you without you having to write the code yourself, but keep in mind the Javascript that Dreamweaver writes for you is typically created by using the Behavior panel in Dreamweaver and it represents a subset of some of the more frequently used Javascript functions, not the entire universe of Javascript functions.

You can hand code it all if you're proficient with xhtml, CSS and Javascript, (for a static web site, dynamic web sites also require server-side scripting) or you can use Dreamweaver, the swiss army knife of web design.

Any questions about any of the issues raised here please email me at: kdurso@nmultigroup.com

Photoshop, Illustrator or...Fireworks

2008-01-18T11:34:00.000-08:00

We see a lot of people taking web design classes at our Adobe authorized training center the Multimedia Resource Group
that are confused. They want to use Dreamweaver to create their websites, a great product and the number one product on the market for creating and managing websites, but it doesn't create graphics. Their confusion: Photoshop or Illustrator...which one should they learn first if they are primarily interested in creating graphics for a web site?

I usually surprise them by saying if they don't yet know either of those two great products (both of which can be used to create graphics for the web) I'd recommend Fireworks... Adobe Fireworks.

Usually this evokes a quizzical expression on the person's face. Chances are they've never heard of Fireworks or perhaps heard of it but don't know much about it. I then go on and explain: Fireworks was a product that Macromedia developed to create graphics for the web. That's all, just graphics for the web. They had bundled it with Dreamweaver. It's a great product that combines aspects of both Photoshop (bitmap/rastor graphic editing) and Illustrator (vector graphic creation). It exports gif, jpeg and png files, all of which can be used on the web.

And, just like Photoshop and Illustrator, Fireworks allows you to "slice" a layout, in other words exporting the pieces of the layout as individual graphics like a jigsaw puzzle, and exporting out the html file, taking those "pieces" (the slices, the exported graphics) and putting them back together for you in a web page (an html file). Which you can then open up in Dreamweaver to continue working.

Photoshop and Illustrator are great products with lots of bells and whistles for creating graphics for print and the web. Fireworks was created specifically to allow you to create and optimize graphics just for the web.

If you just need to create graphics for a web site, and you don't already know Photoshop or Illustrator, you owe it to yourself to check out Macromedia, oops... I mean Adobe Fireworks.
A one-stop solution to your web graphic needs.

Why You Need to Use Cascading Style Sheets on Your Web Site, Part I

2007-12-28T13:36:00.000-08:00

Many people take our Dreamweaver class expecting to learn how to use Dreamweaver to create or edit a website. What they often don't realize is that they also need to learn Cascading Style Sheets (CSS) , too. Fortunately we provide significant information about CSS in our Dreamweaver class in addition to a new class just on CSS that we'll be offering in early 2008.

Why do you need to use CSS when creating a website? Well, one very basic reason, without CSS you would be using the html font tag to format text, what's wrong with that? The font tag is officially "deprecated" by the w3c, the World Wide Web consortium that controls and mandates standards for the web,. (http://www.w3.org/). "Deprecated" means it's on its way out, that some time in the future a browser is going to come out that does not support the font tag. In other words if you create a website today that uses the font tag to format text (choosing a typeface, a color, a size, etc.) it should be fine...for now, but what happens when a new browser appears that doesn't support it? All the text on your site will appear using default attributes not they way you intended it to look.

So using CSS now is recommended to avoid that problem, but that begs the question "Why is the font tag deprecated?" Or, put another way..."Why the big push to use CSS?"

In short, two reasons: one, CSS makes updating and maintaining your site a whole lot easier than using the font tag. Imagine if you need to change the color or typeface of the all the paragraphs in your site, using the font tag you'd have to go to every instance of it and change it, not just on one page but on every page of your site. On any medium to large site, this would be a long and tedious job.

With CSS, chances are that you'll make one quick change to change the color, typeface and size of all your paragraphs throughout your entire site.

The second reason to use CSS is that it there are loads of typographic controls that you have when using CSS that you just don't have when using html. For instance, line spacing (or "leading" as it's called by typographers), it's just not an option in html, but it is in CSS.

Also, CSS allows you to separate the content of your web site from the formatting/presentation of your site, which allows for the same content (the text, graphics,etc) to be layed out completely differently just be switching CSS files. This is a bit more advanced than just using CSS for formatting text, as we've mentioned previously, and I will discuss this issue further in an upcoming post.

For now, just remember using CSS for formatting text on your web site is THE way to go for ease of use, saving time and adding typographic control unavailable in html, but for those with a sentimental streak or html antiquarians remember there is still the forlorn, deprecated font tag still out there and still supported by all major browsers...for now.

SmartSketch Lives! (Inside of Flash)

2007-10-23T22:33:00.000-07:00

A long time ago (1993) , in a place far, far away (San Diego, California) there lived a small company called FutureWave Software. They produced a software program named SmartSketch a vector-based drawing program and at one time the number one drawing program on the Macintosh in Japan.

SmartSketch had all kinds of "friendly" features, very different from the dominant drawing program of the day, Adobe Illustrator.

In 1995 they decided to add animation to vector drawing and released FutureSplash Animator, a program for creating animations on the web. Soon after, Macromedia acquired FutureWave and in a victory for the Society of Short Syllabic Words changed the name to Flash.

Macromedia however didn't release SmartSketch under the Macromedia banner, they had already acquired Freehand, another vector-based drawing program which competed with Illustrator and saw no need to muddy the market further... but don't despair, SmartSketch still lives!

Even though Macromedia, and now Adobe, have tweaked it, the guts of the drawing program in Flash today is still essentially SmartSketch. If you've used the drawing program in Flash you know what I mean: the" intelligence" behind the pencil tool options: "straighten", "smooth" and "ink"; the "knocking out" and joining together of graphics, the "natural drawing" tools, that's all from SmartSketch now playing nicely and in the same family as the program it once tried to rebel against, Illustrator.

People coming to Flash with no Illustrator experience enjoy working with it once they get the hang of it; Illustrator users may complain a bit, but additions to the Flash drawing program, the Pen tool, for instance, make Illustrator user's feel a bit more at home, still it's different enough to be a bit of a pain for hard core Illustrator power users and certainly it's not as powerful.

Illustrator user may want to skip it: these days with better integration between Flash CS3 and Illustrator CS3, there's less need to use the drawing program in Flash, just create in Illustrator and import into Flash.

More on that some other time.

If you're not an Illustrator aficionado yet you may just want to stick with SmartSketch, otherwise known as the drawing program inside of Flash.

Adobe Max Conference in 2008 -- Max is Not an Acronym

2007-10-23T15:40:00.000-07:00

The next Adobe Max Conference in the United States, the annual user love-fest and technology sing-along returns to its roots in lovely San Francisco, November 16th - 19th 2008, just a short hop, skip and jump from our Silicon Valley location. We hope to see you there.

This conference was started by Macromedia and was adopted by Adobe after the acquisition. It had always been a way for Macromedia to connect with their users and had pretty much always been a money maker, so no big leap for Adobe to keep it going.

When it was under Macromedia's umbrella the conference was known at one time as the "developer's conference" now dubbed a "user conference" (six of one, half dozen of the other) and was often held in SF where Macromedia was located. In later years they started producing them all over the country and now they have international versions all over the world.

It's a great place to learn about new technologies, network and, of course, party.
Here's the link to MAX: http://max.adobe.com/

What does Max stand for? Well, it's not an acronym...just one of those names devised by marketers . It's got an "m" --as in Macromedia; it's got and "a" as in Adobe and it's got an "x" --as in sex; it's short and easy to remember, it's fuzzy and warm, and perhaps reminds you of your old uncle in Philadelphia.

Hey, it could be worse, it could be an acronym: "AUC" (Adobe User Conference) with an "auking" bird for a mascot.

Drive safely.