Just incase you may have missed it…

Adobe has announced that it will discontinue its one-time flagship website creation tool, Adobe GoLive. The rumor mill has long held that Dreamweaver, a web development tool that came into the Adobe fold following the 2005 acquisition of Macromedia, would one day replace GoLive and now it seems that the day has finally arrived.

Although GoLive is still for sale on the Adobe site, Devin Fernandez, GoLive’s product manager, tells Macworld that the company believes Dreamweaver is a better fit for today’s web developer.

Adobe has been touting Dreamweaver over GoLive for some time, complete with a “switcher” website dedicated to convincing GoLive users that Dreamweaver was better suited to their needs.

The demise of GoLive shouldn’t come as too great of a surprise considering that the switcher site itself reads: “before purchasing Adobe GoLive 9 software, consider Adobe Dreamweaver CS3, the market-leading tool to design, develop, and maintain websites and web applications.” That’s not exactly the kind of faith in GoLive that inspires purchasing confidence.

If you’ve got a brand new shiny copy of GoLive 9, fear not, Adobe plans to support GoLive users with online tutorials and help, as well as assistance for those that want to migrate to Dreamweaver. There will also be special $200 upgrade price for GoLive users who want to make the leap to Dreamweaver.

GoLive isn’t the first app to bite the dust as a result of the MAcromedia acquisition, previously Adobe retired Macromedia’s Freehand app in favor of Adobe’s homegrown Illustrator CS3.

For more information, go to…

• Adobe GoLive
  
• MacWorld: Article
• Switch from GoLive to Dreamweaver
• WashingtonPost.com: Article

Bookmark It:

The Open Screen Project is dedicated to driving consistent rich Internet experiences across televisions, personal computers, mobile devices, and consumer electronics. The Open Screen Project is supported by technology leaders, including Adobe, ARM, Chunghwa Telecom, Cisco, Intel, LG Electronics Inc., Marvell, Motorola, Nokia, NTT DoCoMo, Qualcomm, Samsung Electronics Co., Sony Ericsson, Toshiba and Verizon Wireless, and leading content providers, including BBC, MTV Networks, and NBC Universal, who want to deliver rich Web and video experiences, live and on-demand across a variety of devices.

The Open Screen Project is working to enable a consistent runtime environment – taking advantage of Adobe® Flash® Player and, in the future, Adobe AIR™ — that will remove barriers for developers and designers as they publish content and applications across desktops and consumer devices, including phones, mobile internet devices (MIDs), and set top boxes. The Open Screen Project will address potential technology fragmentation by allowing the runtime technology to be updated seamlessly over the air on mobile devices. The consistent runtime environment will provide optimal performance across a variety of operating systems and devices, and ultimately provide the best experience to consumers.

Specifically, this work will include:

• Removing restrictions on use of the SWF and FLV/F4V specifications
• Publishing the device porting layer APIs for Adobe Flash Player
• Publishing the Adobe Flash® Cast™ protocol and the AMF protocol for robust data services
• Removing licensing fees – making next major releases of Adobe Flash Player and Adobe AIR for devices free

For more information, go to…

• Open Screen Project
• Frequently Asked Questions (FAQ)
• Open Screen Project: For Business
• Open Screen Project: For Developers
• Press Release
• Open Screen Project: Supporters

Bookmark It:

With the release of many (if not all) of the Adobe CS3 Packages comes a nice new release of Adobe’s famous PDF creator, Acrobat. Throughout school I became familiar with Adobe Acrobat 7, using it to put together mockups of websites without needing to do any hard coding. Although it took a little while to get used to, once you know your whereabouts in the program it’s fairly easy to use. This is until the release of Acrobat 8.

My initial opinion: Acrobat 8 is a miracle worker. Pulling other files together to make one packaged pdf, it’s so simple and so easy to use; just follow the giant buttons they put in front of you. However, beyond the initial creation of the PDF, Acrobat 8’s features can be difficult to find. Things like bookmarking and paging are still very simple, but more complicated interactive features such as linking pages through buttons are far more difficult to locate. Is the easy initial set up worth the wall of confusion once the pdf is sewn? The difference between versions 7 and 8 are worlds apart. I suppose all of us with experience with prior versions will have to do something no one ever wants to do….read the manual.

Besides the bit of confusion, overall the facelift which Acrobat received was a fairly nice one. A user with little experience of sewing files into pdfs will find this program very friendly and easy to use.

Bookmark It:

On March 18, Adobe revealed its plans to begin development on an iPhone ready version of its proprietary media player, Flash. This came after Apple’s release of an iPhone software developer’s kit or SDK. There has been an ongoing controversy over how and when Flash, a now internet staple, would be supported by the popular handheld device.

Current Flash technology is said to be “too slow to be useful” by Steve Jobs, and no faster or lighter version exists which will provide much value to the Web experience on an iPhone. So the question arises, how will this middle man solution affect not only iPhones but the technology used on PC’s and Mac’s currently? If a faster, lighter version can be created for iPhones, why not create it for traditional Web browsing? Also, if Apple continues to demand only standalone applications in its guidelines, how will they handle the long agonized over Flash plug-in? There are many more questions to be answered before the iPhone can compare to traditional internet browsing in terms of interactivity and impact; all the things that Flash enables on the Web.

Bookmark It:

Including a flash movie in a basic HTML page.  Sounds easy enough, right?  How about including a flash movie in HTML that is standards compliant AND works with the major browsers used on the web?  If you’re like a lot of designers this probably yields frustration, as the markup for doing such can be a bit of a challenge. 

I came across an article a few months ago written by the author of Dreamweaver MX Web Development, as I struggled with creating my own website.  Drew McLellan provided much insight into the markup of Flash movies (or in my case, a navigation system I had developed) and led to what we’ll consider a coding theory: it works for me until I find a browser that disproves its functionality.

It should be noted that as I code, I test primarily (and most heavily) with IE, Mozilla, Opera, Safari, and Netscape.  I apologize if the explanation following alienates a favored alternative, and I welcome any amendments. 

Because Flash has come equipped with some kind of means of creating an HTML page to display the indigenous movies, the markup for the majority of Flash created HTML sites is very similar.  This hardly seems it should be a standard for embedding movies, as it proves to be quite a beast within the code.  Check this out:

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0” width=“400” height=”300” id=”movie.swf” align=””>
<embed src=”movie.swf” quality=”high” width=”400” height=”300” name=”movie” alignt=”” type=”application/x-shockwave-flash” plug inspage=http://www.macromedia.com/go/getflashplayer>
</object> 

Pretty intimidating, no?  In addition it requires that most of the values be declared twice.  Much like me, my coding does not enjoy feeling bloated.  Surely there is a better way.

I’m not sure where it came from, but somewhere in my repertoire there existed an <embed> tag that I assumed would be a good place to start.  From what I understand, this element was developed by Netscape as a way of embedding multiple plug ins and players within their pages.  As I experimented, I did find that it worked in Firefox, but was not supported with IE.  Because <embed> is not standards compliant, it will prevent the page from being validated.  Thus I had to say goodbye to my <embed> tag. 

Without that- we are left with the <object> tag, which conveniently allows for child elements within the tag, and it is supported by almost every browser in regular internet rotation.  While nothing is required as far as attributes, there are several relevant attributes that may be used to reference other elements.  Take your own commercial break now if you would like to research what those may be. 

The attributes are a little dicey to implement, however, as some will simply cause the browser to ignore the object entirely.  This can occur, for instance, with the ‘classid’ tag.  Obviously this defeats the purpose of the entire ordeal.  They can, however, suggest to the browser which player it should use for the object.  A simple swap of ‘classid’ with ‘type’ attribute can tell a browser where to search for a necessary plug in.  I will show this code further down the closer we get to the final theory.

Other attributes that should be stripped for increased functionality include ‘codebase.’  While it does prompt a user to update what they are currently using, it can also prevent the movie from playing.  Thus, another attribute must be leaned on to continue efficient functionality.  To work around this, just add a movie with no intended purpose to the front of the site.  Add the codebase attribute to it, so that it still allows the user to be prompted if their plug in is outdated.  It will only be a few kilobytes of nothingness, but will allow the user to optimize their viewing experience.  Perhaps not the most efficient of approaches, but it will certainly get the job done. 

Adding the data attribute will enable the movie to play, but again we find problems with the existing coding.  IE required that the entire movie loads before playing what is embedded in the page.  So, if your movie of the small variety, you may consider stopping now.  BUT, if you have anything requiring some time to load, you’re not done yet!  Frustrated yet?  Stay with me…

Here is where we stand: 

<object type=”application/x-shockwave-flash” data=”movie.swf” width=”400” height=”300”>
<param name=”movie” value=”movie.swf” />
</object>

This is where Drew adds his brilliant hack to the code. By creating a very small container movie which loads in the first frame of the actual movie, the Flash element should be loading at an acceptable rate.  This requires a bit of coding in Frame 1 of the Actionscript, and a way to call back the movie with: 

    c.swf?path-movie.swf

Regardless of the nature of the Flash element, this method should work.

At last we arrive. And obviously we have eliminated a lot of the bloating our poor coding had fallen victim to in the above coding.

<object type=”application/x-shockwave-flash” data=”c.swf?path=movie.swf” width=”400” height=”300”>
<param name=”movie” value=”c.swf?path=movie.swf” />
</object> 

If you recall the discussion of the child element above, feel free to play with that and add your own image, for instance, for users who do not have the Flash plug in for your page.  It can be amended to the above coding within the <object> tag.
 

Later days!

Bookmark It:

Greetings-

As a soon to be graduate from a college institution, I find myself reflecting upon a time when advanced web design and new software presented itself as a giant question mark.  What to do, how to learn, what to learn, and methods of implementation all begged for answers, and for anyone venturing out on their own- these questions can be a little intimidating.  And just as eager young minds strive to find new techniques and design tricks,  every good designer is constantly learning, exploring, and probing for ways to beef up their skills.

With that preamble, below I will share a few links I find useful in… well, just having some fun within some pretty amazing software.

For basic flash tutorials or forums used to work out frustrating problems or general  inquiries, check this site out:

http://www.kirupa.com/developer/flash/index.htm

For those looking to find special effects techniques in Photoshop, the link below should satisfy some of your curiosity.  There are also contests for those of you who already have your Photoshop muscles bulging like the Hulk.  But seriously, who doesn’t want to turn themselves into a marble statue or a celebrity photo into an alien life-form?

http://www.worth1000.com/tutorials.asp

And lastly for now, for those of us fascinated by the power of Adobe’s After Effects, a website that allows even us n00bs to create 3-d room tours and ink splatter intros!

http://library.creativecow.net/tutorials/adobeaftereffects 

That’s all for now, but hopefully that provides some entertainment for beginners through advanced designers poking around on the net.

Later days!

Bookmark It:

So you like the functionality of the Adobe Spry Tabbed Panels, but their drab appearance doesn’t go well with the overall design of your Web site. Meanwhile, you have been hoping that Adobe would eventually give you the ability to change their appearance with little or no CSS experience. Perhaps I have the solution you have been hoping to find and use on your Web site using the Sliding Door and CSS Sprites technique.

I would recommend using Macromedia Dreamweaver 8 or Adobe Dreamweaver CS3 (or better) with the Spry Framework widget already installed. If you don’t have Spry preinstalled in Dreamweaver, go to it’s homepage and download the extension…
http://labs.adobe.com/technologies/spry/home.html

After it is installed, try adding a Spry Tabbed Panels widget on one of your Web pages. The widget will automatically embed code into your HTML as well as create a javascript (SpryTabbedPanels.js) and CSS (SpryTabbedPanels.css) file. Besides the embedded HTML code, javascript and CSS file, you will need to create, or edit, a GIF (spryTabbedPanels.gif) file that would work well with the overall design of your Web site. Place this GIF file in the images folder on the root of your Web site (example: /images/spryTabbedPanels.gif).

You will need to add some additional HTML to your Spry Tabbed Panels unordered list.

Find the following HTML…
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″>Tab 1</li>
<li class=”TabbedPanelsTab” tabindex=”0″>Tab 2</li>
</ul>

Add a hyperlink around both Tab 1 and Tab 2. I would also recommend sequentially numbering the tabindex as illustrated below…
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″><a href=”#Tab1″>Tab 1</a></li>
<li class=”TabbedPanelsTab” tabindex=”1″><a href=”#Tab1″>Tab 2</a></li>
</ul>

Open the SpryTabbedPanels.css and go to the very bottom of the page in Dreamweaver’s code view. Copy and paste the following beneath all of the original CSS…

/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */
/* Revision by Craig Malcolm Petrou of cpetrou.com */
.TabbedPanels {
margin: 0 5px 20px 0;
width: 570px;
}
.TabbedPanelsContent {
background-position: bottom;
padding: 9px;
}
.TabbedPanelsContentGroup {
background-color: #FFF;
border: 1px solid #4E4087;
}
.TabbedPanelsTab {
background-color: #FFF;
border: solid 0 #FFF;
font: bold 90% “Trebuchet MS”, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
text-align: center;
height: 30px;
}
.TabbedPanelsTabHover {
background-color: #FFF;
}
.TabbedPanelsTabSelected {
background-color: #FFF;
}
ul.TabbedPanelsTabGroup a {
display: block;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/spryTabbedPanels.gif) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/spryTabbedPanels.gif) no-repeat 100% 0;
padding: 7px 10px 5px 0;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/spryTabbedPanels.gif) no-repeat 0 -31px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/spryTabbedPanels.gif) no-repeat 100% -31px;
}
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */

Examples of sites using this updated Adobe Spry Tabbed Panels code include…

• http://www.tapnarts.com/cost/
• http://www.allensmemorylane.com/services/

Craig Petrou is a Webmaster for Pennsylvania’s largest credit union, PSECU; owner of cpetrou a Harrisburg, Pennsylvania, based advertising and marketing agency focused on web, print and multimedia; and Marketing Director for Tap ‘n Arts Dance Studio.

Bookmark It:

When talking about the new features in Adobe’s newest release of its Creative Suite, no one can go without discussing the newly acquired “eraser” tool for Illustrator CS3. When working with vector graphics and images, nothing can be quite as frustrating as needing to trim up a layer/shape. Designers have been ever-longing for an easier route than make-shift divides and subtracts with the Pathfinder tool, or tedious adjustments of points and anchors with the pen tool. Now a user can very easily swipe pieces of vector shapes away, and are left with a just as beautiful vector in its place. Many speculate the slightly rough edge that it puts on, as almost no one can have that perfect curve when using a traditional mouse, but there are plenty of tools to help that, the easiest being the “Smoothing Tool” (looks like a pencil with lines all across it). To ensure a careful erase, make sure only the shapes in which you want to subtract from are selected. With the shapes selected just use the eraser tool similar to how you would in a photo editing program, such as Photoshop. This tool could quite possibly be the biggest advantage to the new release of Illustrator.

Bookmark It:

Encode Flash video and drop into Dreamweaver

by Craig Petrou and Jasmine Bucher

Just as The Buggles so famously said, “Video killed the radio star,” so too can it be said that web-based video has killed the static web page. Gone are the days of catching the attention of the overstimulated consumer with well-placed hypertext links, stimulating content, and cool graphics. From presidential candidates and college admission offices to Wall Street investors and the creators of the phenomenally popular YouTube, everyone is doing it. And if peer pressure works like it has since long before the short career of The Buggles (1977–1981), then web-based video is here to stay and will only continue to increase for entertainment, communication, and content delivery.

Web developers have struggled to find the best way to disseminate video on their sites. They’ve shared the same horrid experience of a client delivering a 45-minute, double-digit megabyte file with orders to just post it. What consumer has the patience to wait for such a large file to download? And what developer doesn’t find this a waste of time?

But the integration of web-based video has come a long way. And with the inclusion of the Flash® Video 8 Encoder and its seamless amalgamation with Dreamweaver®, even web developers with minimal video background can successfully include web-based video on their sites. Video file formats such as AVI, MOV, MP4, MPG, and WMV can all be converted to FLV files, which are viewable on most operating systems and web browsers via Flash Player 6 or later.

The following tutorial explains how to take a video file, convert it to FLV, and embed it in a web page using Dreamweaver 8.

Converting video files to FLV

Captivate demo: Convert video to FLV and embed within Dreamweaver

1. Launch Flash 8 Video Encoder, which came with Studio 8.
2. Click Add, navigate to the video file you want to convert, and click Open.
3. Select the video file, and click Settings.
4. Select one of the Flash Video encoding profiles from the pull-down menu. (For detailed information about FLV encoding profiles, visit the Flash Developer Center)
5. Enter an output filename.
6. Click Show Advanced Settings if you want to adjust the encoding profile you selected. You can adjust the video and audio encoding and cue points, and you can also crop and trim the video size. Finally, set the in and out points for encoding the video by dragging the scrubber sliders. After making adjustments to the encoding profile, click OK.
7. Click Start Queue to begin encoding the video. While the video is encoding, you can watch the progress of elapsed time and time left until completion. A green checkmark will appear to indicate the video encoding is complete.
8. Exit the encoder if you do not have any additional videos to convert.

Embedding FLV in Dreamweaver 8

1. Launch Dreamweaver 8.
2. Create a new HTML web page by choosing File > New.
3. Select Basic Page and then HTML, and click Create.
4. Click Design View in the toolbar.
5. Choose Insert > Media > Flash Video.
6. You will be prompted to save the FLV object before inserting it. Click OK.
7. Name and save the new HTML Web page within your website.
8. The Insert Flash Video dialog box will appear. Select one of the video types from the pull-down menu. (Progressive download should be used for web sites with low traffic. For sites with high traffic or those offering a high-end video experience, consider using streaming video.)
9. Click Browse to locate and select the new FLV file you just encoded, and click OK.
10. Click Detect Size to get the width and height of your encoded video. Use the width to help determine the prebuilt FLV player skin that works best from the pull-down menu.
11. Select Auto Play, located below the width and height settings, to have the video play as soon as it loads within your finished web page. Select Auto Rewind to make the video rewind as soon as it finishes playing.
12. Click OK to finish inserting the FLV file within your web page.
13. Choose File > Preview in Browser to view the new video-embedded web page. You will be prompted to save the file. Click Save. This will open your chosen web browser and show you a preview of the new web page with your FLV file.
14. From the local files window (Dreamweaver FTP panel), upload your new HTML file. Dreamweaver will prompt you to include dependent files (say yes). If Dreamweaver does not prompt you to include dependent files, make sure to upload the FLV file, the pre-built FLV player skin file (SWF), the FLV Player file (FLVPlayer_Progressive.swf), and the Active Content javascript file (AC_RunActiveContent.js).

So, is it really that easy to take a video file, convert it to FLV, and embed it in a web page using Dreamweaver 8? Yes and no. There is plenty of web-based video out there. Some is effective; some is not. Some is good quality; and some is not. Just as the laser printer made everyone a graphic designer, so too has the easy incorporation of web-based video made everyone a producer. But one thing is certain, web-based video is here to stay. And as The Buggles said, “We can’t rewind, we’ve come so far.” So, with this easy process, why not experiment?

Bookmark It: